/*====================================================
COMMON
====================================================*/
:root {
  --inner-max-width: 1080px;
}
.inner {
  max-width: var(--inner-max-width);
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .inner {
    width: 95%;
  }
}

/*====================================================
MV
====================================================*/
#mv {
  background-color: #f1fde8;
  text-align: center;
  padding: 6rem 0;
  flex-direction: column;
  align-items: center;
  background-image: url(../img/use/mv_bg.png);
  background-repeat: no-repeat;
  background-position: left calc(50% + 48.9rem) bottom;
  background-size: 50.5rem;
}
#mv .mv_logo {
  width: 26rem;
  margin-bottom: 3rem;
}
#mv .mv_ttl {
  padding: 2rem 6.5rem;
  background-color: #fff;
  border-radius: 9999px;
}
#mv .mv_ttl-img {
  width: 19.5rem;
}
@media screen and (max-width: 767px) {
  #mv {
    padding: 11vw 0 34vw;
    background-position: center bottom;
    background-size: 88vw;
  }
  #mv .mv_logo {
    width: 44vw;
    margin-bottom: 5vw;
  }
  #mv .mv_ttl {
    padding: 3.5vw 11vw;
  }
  #mv .mv_ttl-img {
    width: 34vw;
  }
}

/*====================================================
STEP
====================================================*/
/* common */
.step .step_ttl {
  justify-content: flex-start;
  gap: 7.4rem;
  align-items: center;
  padding-left: 4.5rem;
  margin-bottom: 5.5rem;
  flex-wrap: nowrap;
}
.step .step_ttl-num {
  max-height: 9.6rem;
}
.step .step_ttl-img {
  width: 66.1rem;
}

/* register-download */
.register-download {
  padding: 12rem 0 13rem;
}
.register-download_list {
  grid-template-columns: repeat(2, 47%);
  gap: 4.5rem 0;
}
.register-download-item {
  padding: 3rem 0 7rem;
  background-color: #fff;
  border-radius: 3rem;
  box-shadow: 1rem 1rem 0px 0px rgb(0 0 0 / 10%);
}
.register-download-item_ttl {
  margin-bottom: 4.5rem;
}
.register-download-item_content {
  padding: 0 3.4rem;
}
.register-download_catch-wrap {
  text-align: center;
  margin-bottom: 4rem;
}
.register-download_catch {
  width: 86.9rem;
  margin: 0 auto;
  display: block;
}
.register-download-item_txt {
  font-size: 2.4rem;
  line-height: 1.75;
  margin-bottom: 2.3em;
}
.register_download_img {
  margin-bottom: 3rem;
}
.register-download-item_url {
  font-size: 2.4rem;
  text-align: center;
  display: block;
  margin-bottom: 1.5em;
  word-break: break-all;
}

/* download area */
.download-area_ttl {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1.3em;
}
.download-area_item {
  text-align: center;
}
.download-area_btn {
  margin-bottom: 0.5rem;
  display: inline-block;
  margin-top: 5.5rem;
}
.download-area_item:nth-child(1) {
  width: 43.64%;
}
.download-area_item:nth-child(2) {
  width: 49.1%;
}
.qr-item_img {
  width: 13.7rem;
}

/* link-method */
.link-method_ttl {
  font-size: 2.4rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.link-method_list {
  gap: 1.2em 0;
}
.link-method_item {
  padding: 0 2.1em;
  font-size: 1.8rem;
}
.link-method_item:nth-child(odd) {
  width: 55.5%;
}
.link-method_item:nth-child(even) {
  width: 44.5%;
}
.link-method_item-link {
  line-height: 2.33;
  position: relative;
}
.link-method_item-link::before,
.link-method_item-link::after {
  content: '';
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
}
.link-method_item-link::before {
  background-image: url(../img/common/pdf.png);
  aspect-ratio: 1/1;
  width: 1.7em;
  right: calc(100% + 0.6em);
}
.link-method_item-link::after {
  background-image: url(../img/use/link_method_item_link_arrow.png);
  aspect-ratio: 2/3;
  width: 0.6em;
  left: calc(100% + 0.9em);
}

/* step1 */
#step1 {
  background-color: #f6f6f6;
}

/* step2 */
#step2 {
  background-color: #f1fde8;
}
/* step3 */
#step3 {
  background-color: #f6f6f6;
  padding: 11rem 0 11.5rem;
}
#step3 .step3_list {
  flex-direction: column;
  gap: 12rem 0;
}
#step3 .step3-content {
  background-color: #fff;
  border: 4px solid #7bbd41;
  border-radius: 3rem;
  padding: 10rem 5% 6.5rem;
  position: relative;
  margin-top: 4.4rem;
}
#step3 .step3-content_items--1 {
  max-width: 69rem;
  margin: 0 auto;
  align-items: flex-start;
}
#step3 .step-three-grid {
  max-width: 95.2rem;
  margin: 0 auto 0;
  grid-template-columns: repeat(2, 47%);
  padding-top: 15.5rem;
  background-image: url(../img/use/step3_triangle.png);
  background-repeat: no-repeat;
  background-position: center top 5rem;
  background-size: 31rem;
}
#step3 .step-three-grid_img-wrap {
  grid-row: 1/3;
}
#step3 .step3-content_items--2 {
  align-items: center;
}
#step3 .step-three-grid_ttl {
  margin-bottom: 3rem;
  align-self: end;
}
#step3 .step3-content_item--1 {
  width: 45.5%;
}
#step3 .step3-content_item--2 {
  width: 46.5%;
}
#step3 .step3-content_item--left.step3-content_item--2 {
  grid-row: 1/3;
}
#step3 .step-three-grid_txt {
  background-image: url(../img/use/step3_content_bg01.png);
  background-size: 37%;
  background-position: right bottom;
  padding: 1rem 0;
  padding-right: 39%;
  margin-top: 0;
  background-repeat: no-repeat;
  font-size: 2.4rem;
}
#step3 .step3-item_ttl {
  font-size: 3.8rem;
  position: absolute;
  background-color: #64bf1f;
  color: #fff;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  border-radius: 1.8rem;
  padding: 0.4em 1.4em;
  transform: translateY(-50%);
  top: 0;
  width: fit-content;
}
#step3 .step3-content_txt {
  font-size: 2.2rem;
  line-height: 1.63636364;
  margin-top: 2rem;
}
#step3 .step3-content_txt--2 {
  margin-top: 0;
  line-height: 1.75;
  font-size: 2.4rem;
}
#step3 .step3-content_txt-note {
  font-size: 1.6rem;
  display: block;
  margin-top: 0.7em;
  text-decoration: underline;
}
#step3 .step3-content_txt-em {
  color: #f02688;
}
#step3 .step-three-grid_txt-em {
  color: #f02688;
}

/* step4 */
#step4 {
  background-color: #f1fde8;
  padding: 12.5rem 0 15rem;
}
#step4 .step4_list {
  gap: 6rem 0;
  margin-bottom: 13rem;
}
#step4 .step4-item {
  padding: 6rem 5%;
  background-color: #fff;
  border: 4px solid #7bbd41;
  border-radius: 3rem;
  width: 100%;
}
#step4 .step-three-grid {
  max-width: 95.2rem;
  margin: 0 auto;
  grid-template-columns: repeat(2, 47%);
  grid-template-rows: auto auto 1fr auto;
  align-content: center;
}
#step4 .step-three-grid_img-wrap {
  grid-row: 1/4;
  align-self: center;
  display: grid;
}
#step4 .step-three-grid_txt {
  font-size: 2.4rem;
  line-height: 1.75;
  align-self: start;
  background-repeat: no-repeat;
}
#step4 .step-three-grid_txt {
  padding-right: 46%;
  background-image: url(../img/use/step4_content_bg02.png);
  background-size: 41%;
  background-position: right bottom 2.2rem;
  margin-bottom: 5rem;
}
#step4 .step-three-grid_ttl {
  margin-bottom: 4.5rem;
}
#step4 .step4-content_txt-em {
  color: #f02688;
}
#step4 .manual-btn-wrap {
  text-align: center;
}
#step4 .manual-btn_img {
  width: 65rem;
}
#step4 .step4-content_btn {
  margin-top: 0;
  align-self: start;
  justify-self: start;
}
#step4 .step4-content_btn-img {
  width: 36rem;
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  /* common */
  .step .step_ttl {
    padding-left: 3%;
    gap: 6.79227053%;
  }
  .step .step_ttl-num {
    max-height: 8.44vw;
  }
  .step .step_ttl-img {
    width: 60.67vw;
  }

  /* link-method */
  .link-method_item {
    font-size: 1.58vw;
  }

  .download-area_item:nth-child(1),
  .download-area_item:nth-child(2) {
    width: 47%;
  }

  /* step3 */
  #step3 .step3-item_ttl {
    font-size: 3.34vw;
  }
  #step3 .step-three-grid_txt {
    font-size: 2.11vw;
  }

  /* step4 */
  #step4 .step4-content_txt {
    font-size: 2.11vw;
  }
}

@media screen and (max-width: 767px) {
  /* common */
  .step .step_ttl {
    flex-direction: column;
    padding: 0;
    gap: 7vw;
    margin-bottom: 7vw;
  }
  .step .step_ttl-num {
    width: auto;
    height: 15.5vw;
  }
  .step .step_ttl-img {
    max-width: 87vw;
  }

  /* register-download */
  .register-download {
    padding: 12vw 0;
  }
  .register-download_catch-wrap {
    width: 72.5vw;
    margin: 0 auto 5vw;
  }
  .register-download_list {
    grid-template-columns: 100%;
    gap: 8.5vw 0;
  }
  .register-download-item_content {
    padding: 0 6%;
  }
  .register-download-item_txt {
    font-size: 4.8vw;
    margin-bottom: 1em;
  }
  .register-download-item_url {
    font-size: 4.16vw;
    white-space: nowrap;
  }
  .register-download-item_ttl {
    margin-bottom: 7vw;
  }
  .qr-item_img {
    width: 25vw;
  }
  .download-area_ttl {
    font-size: 4.8vw;
    margin-bottom: 0.7em;
  }
  .download-area_btn {
    margin-top: 8vw;
  }
  .register-download-item {
    padding: 7vw 0 16vw;
    border-radius: 4vw;
    box-shadow: 0.933vw 0.933vw 0 0 rgb(0 0 0 / 10%);
  }

  /* link-method */
  .link-method_item {
    font-size: 4vw;
    padding: 0 0 0 23vw;
    display: inline-block;
    text-align: left;
  }
  .link-method_item:nth-child(odd),
  .link-method_item:nth-child(even) {
    width: 100%;
  }
  .link-method_ttl {
    font-size: 4.8vw;
    margin-bottom: 1em;
  }

  /* step3 */
  #step3 {
    padding: 23vw 0;
    overflow: hidden;
  }
  #step3 .step_inner {
    width: 93%;
  }
  #step3 .step3_list {
    gap: 26vw 0;
    margin-top: 24.5vw;
  }
  #step3 .step3-item_ttl {
    font-size: 6.13vw;
    border-radius: 2.4vw;
    padding: 0.5em 0;
    line-height: 1.43478261;
    width: 91%;
  }
  #step3 .step3-content_item-ttl {
    order: 1;
    margin-bottom: 5vw;
  }
  #step3 .step3-content {
    margin-top: 0;
    padding: 18vw 9.92831541% 11vw;
    border-width: 0.53333333vw;
    border-radius: 4vw;
  }
  #step3 .step3-content_items {
    flex-direction: column;
  }
  #step3 .step-three-grid {
    background-size: 62vw;
    padding-top: 23vw;
    background-position: center top 5vw;
    grid-template-columns: 100%;
    gap: 0;
  }
  #step3 .step-three-grid_txt {
    padding-bottom: 54vw;
    background-size: 35vw;
    background-position: left 45% bottom;
    order: 3;
    margin-top: 3vw;
    padding-right: 0;
    padding-top: 0;
    font-size: 4.8vw;
    line-height: 1.67;
  }
  #step3 .step3-content_item {
    width: 100% !important;
    padding: 0;
  }
  #step3 .step-three-grid_img-wrap {
    grid-row: inherit;
    order: 2;
  }
  #step3 .step3-content_txt {
    font-size: 4.267vw;
    margin-top: 3.5vw;
  }
  #step3 .step3-content_items--1 {
    gap: 19vw;
  }
  #step3 .step3-item--1 .step3-content_item--left {
    margin-top: 0;
  }
  #step3 .step3-item--2 .step3-content_item--left {
    margin-top: 0;
  }
  #step3 .step3-content_items--2 {
    gap: 6vw;
  }
  #step3 .step3-content_txt--2 {
    font-size: 4.8vw;
    line-height: 1.67;
    margin-top: 0;
  }
  #step3 .step3-content_txt-note {
    font-size: 3.7vw;
    /* white-space: nowrap; */
    /* position: relative; */
    /* left: -4vw; */
    margin-top: 7vw;
  }

  /* step4 */
  #step4 {
    padding: 24vw 0 32vw;
  }
  #step4 .step4_inner {
    width: 93%;
  }
  #step4 .step4-content {
    grid-template-columns: 100%;
  }
  #step4 .step4-item {
    padding: 10vw 9.92831541% 11vw;
    border-width: 0.53333333vw;
    border-radius: 4vw;
  }
  #step4 .step4-content_item {
    width: 100%;
  }
  #step4 .step4-content_img-wrap {
    order: 2;
    grid-row: inherit;
  }
  #step4 .step-three-grid {
    grid-template-columns: 100%;
    gap: 0;
  }
  #step4 .step-three-grid_img-wrap {
    order: 2;
    grid-row: inherit;
  }
  #step4 .step-three-grid_ttl {
    order: 1;
    margin-bottom: 5vw;
  }
  #step4 .step-three-grid_ttl {
    margin-bottom: 8vw;
  }
  #step4 .step4_list {
    gap: 8vw 0;
    margin-bottom: 16vw;
  }
  #step4 .step-three-grid_txt {
    padding-bottom: 66vw;
    background-size: 41.5vw;
    background-position: center bottom;
    margin-top: 5vw;
    order: 2;
    padding-right: 0;
    padding-top: 0;
    font-size: 4.8vw;
    line-height: 1.67;
  }
  #step4 .manual-btn_img {
    width: 86vw;
    margin: 0 auto;
  }
  #step4 .step4-content_btn {
    order: 4;
  }
}