@charset "utf-8";

.aspect-683-239{ aspect-ratio: 683 / 239;}
.aspect-12-5{ aspect-ratio: 12 / 5;}
.aspect-200-133{ aspect-ratio: 200 / 133;}
.aspect-75-107{ aspect-ratio: 75 / 107;}
.aspect-600-1191{ aspect-ratio: 600 / 1191;}
.aspect-24-29{ aspect-ratio: 24 / 29;}
.aspect-900-207{ aspect-ratio: 900 / 207;}

.bg-yellow { background-color: #fffbd2;}
.border-pink{border: 1px solid #f00090;}
.border-deepblue{border: 1px solid #001ad9;}

.image-box.next-arrow-bottom {
  width: 5rem;
  transform: rotate(90deg);
}

.section-sub-title-01.howto-sp,
.section-sub-title-01.howto-pc{
  position: relative;
  padding: 0.4em 0 0.4em 6rem;
}
.section-sub-title-01.howto-sp::before{
  position: absolute;
  top: 2rem;
  left: 0.5rem;
  bottom: 2.5rem;
  margin: auto;
  padding: 0;
  width: 4rem;
  height: 4rem;
  display: block;
  background-image: url(/img/how-to/sp.webp);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}
.section-sub-title-01.howto-pc::before{
  position: absolute;
  top: 2rem;
  left: 0.5rem;
  bottom: 2.5rem;
  margin: auto;
  padding: 0;
  width: 4rem;
  height: 4rem;
  display: block;
  background-image: url(/img/how-to/pc.webp);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.smile-point,
.list-ok,
.list-ng{ display: flex;}
.smile-point .image-box{
  width: 3rem;
  min-width: 3rem;
  margin: 0 1rem 0 0;
}
.list-ok .image-box,
.list-ng .image-box{
  width: 2rem;
  min-width: 2rem;
  margin: 0 1rem 0 0;
}

.smile-point em,
.list-ok em,
.list-ng em{
  width: calc(100% - 4rem);
}

.icon-img{
  max-width: 70rem;
  margin: 3rem auto 2rem;
  flex-wrap: wrap;
  justify-content: space-around;
}
.icon-img .icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-img .icon-item span{ max-width: 5rem;}
.icon-txt{ height: 2em;}