@charset "utf-8";

.p-top__howto {
  --pt: 150;
  --pb: 0;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  overflow: hidden;
  @media screen and (max-width: 1024px) {
    --pt: 100;
    --pb: 100;
  }
  @media screen and (max-width: 880px) {
    --pt: 75;
    --pb: 75;
  }
}
.p-top__howto-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template:
  "title img" auto
  "body img" auto
  "link img" 1fr/
  calc(460/var(--section-width)*100%) 1fr
  ;
  column-gap: calc(99/var(--section-width)*100%);
  @media screen and (max-width: 1024px) {
    grid-template:
    "title" auto
    "body" auto
    "img" auto
    "link" 1fr/1fr;
  }
}
.p-top__howtoTitle {
  grid-area: title;
  padding-left: calc(20/460*100%);
  width: min(calc(414em/16), 100%);
  @media screen and (max-width: 1024px) {
    justify-self: center;
    padding-left: 0;
  }
  @media screen and (max-width: 880px) {
    width: calc(289em/16);
  }
}
.p-top__howtoBody {
  grid-area: body;
  justify-self: center;
  margin: calc(34em/16) 0 calc(40em/16);
  padding-left: calc(20/460*100%);
  @media screen and (max-width: 1024px) {
    margin: calc(22em/16*1.5) 0 calc(40em/16*1.5);
    padding-left: 0;
    width: min(calc(728em/16*.75), calc(320/360*100%));
  }
  @media screen and (max-width: 880px) {
    margin: calc(22em/16) 0 calc(40em/16);
    & .c-sentence {
      --sentence-letter-spacing: -.06;
    }
  }
}
.p-top__howtoLink {
  grid-area: link;
  margin-bottom: calc(144em/16);
  @media screen and (max-width: 1024px) {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }
}
.p-top__howtoLinkBtn {
  --btn-w: 374;
  --btn-h: 74;
  --btn-gap: 25;
  --btn-outer-border-w: 2;
  --btn-fs-max: 24;
  --btn-ls: .1;
  @media screen and (max-width: 1024px) {
    margin-inline: auto;
  }
  @media screen and (max-width: 880px) {
    --btn-w: 330;
    --btn-h: 70;
    --btn-ls: .05;
  }
}
.p-top__howtoImg {
  grid-area: img;
  align-self: end;
  position: relative;
  @media screen and (max-width: 1024px) {
    margin: 0 auto calc(-68em/16);
    width: min(calc(728em/16*.75), 100%);
  }
}
.p-top__howtoImgMonitor {
  position: relative;
  z-index: 1;
}
.p-top__howtoImgHajime {
  position: relative;
  z-index: 1;
  margin: calc(-200/641*100%) calc(198/641*100%) calc(-70/641*100%) auto;
  width: calc(305/641*100%);
  @media screen and (max-width: 1024px) {
    margin: calc(-54/360*100%) auto 0;
    padding-left: calc(21/360*100%);
    width: calc(203/360*100%);
  }
}
.p-top__howtoImgFun {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0 calc(-34/641*100%) calc(-12/641*100%) auto;
  width: calc(215/641*100%);
  @media screen and (max-width: 1024px) {
    margin: 0 calc(-66/360*100%) calc(37/360*100%) 0;
    width: calc(135/360*100%);
  }
}