@charset "UTF-8";
:root {
  /*  */
  --container-howtouse:100%;
  --mb-howtouse-main:calc(74 * (100vw / 375));
  --mt-howtouse-hand:calc(157 * (100vw / 375));
  --mt-howtouse-foot:calc(177 * (100vw / 375));
  --mt-negative-howtouse:calc(-117 * (100vw / 375));
  --mt--howtouse-list: calc(36 * (100vw / 375));
  --pb-howtouse: calc(44 * (100vw / 375));
  /* How to use サブタイトル */
  --fs-howtouse-list-heading: calc(24 * (100vw / 375));
  --gap-howtouse-list-heading: calc(9 * (100vw / 375));
  --b-width-howtouse-list-heading: calc(7 * (100vw / 375));
  --b-height-howtouse-list-heading: calc(1 * (100vw / 375));
  --mb-howtouse-list-heading: calc(30 * (100vw / 375));
  /* How to use グリッド */
  --flex-direction-howtouse-itemlist:column;
  --width-howtouse-itemlist-item:100%;
  --gap-howtouse-itemlist: calc(30 * (100vw / 375)) 0;
  /* How to use アイテム */
  --mt-howtouse-text: calc(15 * (100vw / 375));
  --color-bg-howtouse-text-icon:#FF9081;
  --fs-howtouse-text-icon: calc(13 * (100vw / 375));
  --pd-howtouse-text-icon: calc(5 * (100vw / 375)) calc(20 * (100vw / 375)) calc(5 * (100vw / 375)) calc(12 * (100vw / 375));
  --pd-howtouse-text-icon-last: calc(5 * (100vw / 375)) calc(16 * (100vw / 375)) ;
  --fs-howtouse-text-title: calc(20 * (100vw / 375));
  --mt-howtouse-text-title: calc(7 * (100vw / 375));
  --fs-howtouse-text-explanation: calc(13 * (100vw / 375));
  --mt-howtouse-text-explanation: calc(11 * (100vw / 375));
}
@media screen and (min-width: 768px) {
  :root {
    /*  */
    --container-howtouse:100rem;
    --mb-howtouse-main:12.6rem;
    --mt-howtouse-hand:39rem;
    --mt-howtouse-foot:43rem;
    --mt-negative-howtouse:-33.5rem;
    --mt--howtouse-list:5.8rem;
    --pb-howtouse:7.8rem;
    /* How to use サブタイトル */
    --fs-howtouse-list-heading:2.8rem;
    --gap-howtouse-list-heading:1.5rem;
    --b-width-howtouse-list-heading:1rem;
    --b-height-howtouse-list-heading:1px;
    --mb-howtouse-list-heading:3.2rem;
    /* How to use グリッド */
    --flex-direction-howtouse-itemlist:row;
    --width-howtouse-itemlist-item:48%;
    --gap-howtouse-itemlist:2.6rem 4%;
    /* How to use アイテム */
    --mt-howtouse-text:2rem;
    --fs-howtouse-text-icon:1.6rem;
    --pd-howtouse-text-icon:0.5rem 2rem 0.5rem 1.2rem;
    --pd-howtouse-text-icon-last:0.5rem 2.2rem;
    --fs-howtouse-text-title:2.7rem;
    --mt-howtouse-text-title: 0.4rem;
    --fs-howtouse-text-explanation:1.4rem;
    --mt-howtouse-text-explanation:1.4rem;
  }
}
.howToUse__main {
  margin-bottom: var(--mb-howtouse-main);
}
.howToUse-item {
  width: var(--width-howtouse-itemlist-item);
}
.howToUse-item figure {
  display: block;
  padding: 0;
  margin: 0;
}
.howToUse-item__text {
  margin-top: var(--mt-howtouse-text);
}
.howToUse-item__text--icon {
  display: inline-block;
  color: #fff;
  font-size: var(--fs-howtouse-text-icon);
  font-family: var(--ff-montserrat);
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: var(--fw-medium);
  background: var(--color-bg-howtouse-text-icon);
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  padding: var(--pd-howtouse-text-icon);
}
.howToUse-item__text--icon[data-step=last] {
  --color-bg-howtouse-text-icon:#7FC7CA;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
  padding: var(--pd-howtouse-text-icon-last);
}
.howToUse-item__text--title {
  font-size: var(--fs-howtouse-text-title);
  font-family: var(--ff-zen-old-min);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: 0.06em;
  margin-top: var(--mt-howtouse-text-title);
}
.howToUse-item__text--explanation {
  font-size: var(--fs-howtouse-text-explanation);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  letter-spacing: 0.1em;
  margin-top: var(--mt-howtouse-text-explanation);
}

.l-howToUse {
  background: var(--color-primary);
  padding-bottom: var(--pb-howtouse);
  margin: 0 auto;
}
.l-howToUse[data-layout=hand] {
  margin-top: var(--mt-howtouse-hand);
}
.l-howToUse[data-layout=foot] {
  margin-top: var(--mt-howtouse-foot);
}
.l-howToUse__inner {
  width: min(100%, var(--container-howtouse) + var(--container-padding));
  padding: 0 calc(var(--container-padding) / 2);
  margin: 0 auto;
}
.l-howToUse-list {
  margin-top: var(--mt--howtouse-list);
}
.l-howToUse-list--heading {
  font-size: var(--fs-howtouse-list-heading);
  font-family: var(--ff-montserrat);
  color: var(--color-title-font);
  letter-spacing: 0.2em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0 var(--gap-howtouse-list-heading);
  margin-bottom: var(--mb-howtouse-list-heading);
}
.l-howToUse-list--heading::before {
  content: "";
  width: var(--b-width-howtouse-list-heading);
  height: var(--b-height-howtouse-list-heading);
  background: var(--color-title-font);
}

.p-howToUse-itemlist {
  display: flex;
  flex-direction: var(--flex-direction-howtouse-itemlist);
  gap: var(--gap-howtouse-itemlist);
  flex-wrap: wrap;
}

.video-howToUse {
  width: 100%;
  height: auto;
  aspect-ratio: 1920/1080;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  margin: var(--mt-negative-howtouse) auto 0;
}
/*# sourceMappingURL=style_howtouse.css.map */