@charset "utf-8";

/*****************************************
*
* 買う
*
******************************************/

/*------------------------------------------*/
/* floor
/*------------------------------------------*/

.shopping-floor {
  position: relative;
}

.shopping-floor-grid,
.shopping-floor-flex {
  margin-top: 60px;
}

@media screen and (min-width: 834px), print {

  .shopping-floor-grid,
  .shopping-floor-flex {
    margin-top: 100px;
  }
}

/* 画像 --------------------------------*/
.shopping-floor figure img {
  width: 100%;
}

.shopping-floor figure {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
}

@media screen and (min-width: 834px), print {
  .shopping-floor figure {
    border-radius: 40px;
  }
}


/* 吹き出し --------------------------------*/
.shopping-floor .balloon-type-cloud {
  width: 300px;
  font-size: 0.9rem;
}

@media screen and (max-width: 767px) {
  .shopping-floor .balloon-type-cloud {
    margin-top: -20px;
  }
}

@media screen and (min-width: 768px), print {
  .shopping-floor .balloon-type-cloud {
    width: calc(calc(500 / 1400) * 100vw);
    font-size: calc(calc(22 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .shopping-floor .balloon-type-cloud {
    font-size: 1.4rem;
    width: 500px;
  }
}


/* shopping-floor-main --------------------------------*/

@media screen and (min-width: 768px), print {
  .shopping-floor-main .balloon-type-cloud {
    position: absolute;
    bottom: calc(calc(300 / 1400) * -100vw);
    right: 0;
  }
}

@media screen and (min-width: 1400px), print {
  .shopping-floor-main .balloon-type-cloud {
    bottom: -300px;
  }
}


/* shopping-floor-grid --------------------------------*/

@media screen and (max-width: 767px) {
  .shopping-floor-grid figure+figure {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px), print {
  .shopping-floor-grid figure {
    width: calc(calc(100% - 40px) / 2);
  }

  .shopping-floor-grid figure:nth-of-type(2) {
    position: absolute;
    top: calc(calc(220 / 1400) * 100vw);
    right: 0;
  }

  .shopping-floor-grid figure:nth-of-type(3) {
    margin-top: calc(calc(40 / 1400) * 100vw);
  }

  .shopping-floor-grid .balloon-type-cloud {
    position: absolute;
    bottom: calc(calc(40 / 1400) * -100vw);
    right: calc(calc(180 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .shopping-floor-grid figure {
    width: 620px;
  }

  .shopping-floor-grid figure:nth-of-type(2) {
    top: 220px;
  }

  .shopping-floor-grid figure:nth-of-type(3) {
    margin-top: 40px;
  }

  .shopping-floor-grid .balloon-type-cloud {
    bottom: -40px;
    right: 180px;
  }
}

/* shopping-floor-flex --------------------------------*/

@media screen and (min-width: 768px), print {

  .shopping-floor-flex-1 figure,
  .shopping-floor-flex-2 figure {
    width: calc(calc(620 / 1400) * 100vw);
  }

  .shopping-floor-flex-1 {
    padding-left: calc(calc(660 / 1400) * 100vw);
  }

  .shopping-floor-flex-1 .balloon-type-cloud,
  .shopping-floor-flex-2 .balloon-type-cloud {
    position: absolute;
    bottom: 0;
  }

  .shopping-floor-flex-1 .balloon-type-cloud {
    left: calc(calc(100 / 1400) * 100vw);
  }

  .shopping-floor-flex-2 .balloon-type-cloud {
    right: calc(calc(100 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {

  .shopping-floor-flex-1 figure,
  .shopping-floor-flex-2 figure {
    width: 620px;
  }

  .shopping-floor-flex-1 {
    padding-left: 660px;
  }

  .shopping-floor-flex-1 .balloon-type-cloud {
    left: 100px;
  }

  .shopping-floor-flex-2 .balloon-type-cloud {
    right: 100px;
  }
}