@charset "utf-8";
/*--------------------------------------------------------------------------------
  .lead
--------------------------------------------------------------------------------*/
.lead {
  font-weight: bold;
  font-size: var(--fs-l);
  text-align: center;
  padding-bottom: var(--space-l);
}

/*--------------------------------------------------------------------------------
  .scene
--------------------------------------------------------------------------------*/
@media (min-width: 961px) {
  :root { --scene-break-point: 1200; }
}
@media (max-width: 960px) {
  :root { --scene-break-point: 760; }
}
@media (max-width: 640px) {
  :root { --scene-break-point: 760; }
}
.scene {
  display: flex;
  column-gap: var(--space-m);
  row-gap: var(--space-m);
  padding-bottom: var(--space-l);
}
.scene_item {
  width: 100%;
  position: relative;
}
.scene_case {
  position: absolute;
  left: var(--space-3s);
  top: 0;
  width: clamp(80px, (160 / var(--scene-break-point) * 100vw), 160px);
  height: clamp(80px, (160 / var(--scene-break-point) * 100vw), 160px);
  display: flex;
  justify-content: center;
  align-items: center;
  mask-image: url("../../image/mask/hana.svg");
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: cover;
  background-color: var(--pink);
  color: #FFF;
  text-align: center;
  line-height: var(--lineh-2s);
  font-size: min(1.6vw, var(--fs-m));
  font-weight: bold;
}
.scene_img {
  padding-top: var(--space-m);
}
.scene_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  aspect-ratio: 4.5 / 3;
}
.scene_txt {
  padding-top: 1rem;
}
@media (max-width: 960px) {
  .scene {
    flex-direction: column;
    width: min(100%, 640px);
    margin-left: auto;
    margin-right: auto;
  }
  .scene_case {
    font-size: clamp(10px, 2.6vw, var(--fs-n));
  }
  .scene_img img {
    aspect-ratio: 7 / 4;
  }
}