@charset 'utf-8';

.note {
  margin-top: -13vw;
  padding-block: 0 20.769vw;
  background: linear-gradient(to bottom, #CBD4D8, #fff 370px);
}
.note__articleWrap {
  position: relative;
  padding: 23.051vw 5.128vw 0;
}
.note__articleWrap::before,
.note__articleWrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.note__articleWrap::before {
  height: 100%;
  background: url(../img/pattern_bg_sp.svg) no-repeat;
}
.note__articleWrap::after {
  height: 100vw;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.7) 75%, #fff 100%);
}
.note__article {
  position: relative;
  z-index: 1;
}
.note__articleHead {
  margin-bottom: 28.205vw;
}
.note__headImg {
  width: 63.846vw;
}
.note__headTitle {
  font-size: var(--fs-18);
  font-weight: bold;
  line-height: 1.6;
}
.note__headTitle span {
  display: block;
  margin-bottom: 5.897vw;
  color: var(--color-purple);
  font-size: var(--fs-32);
  line-height: 1;
  text-align: center;
}
.note__articleContent a {
  text-decoration: underline;
}
.note__articleContent a:hover {
  text-decoration: none;
}
.note__articleTitle {
  margin-bottom: 5.897vw;
  padding-bottom: 4vw;
  border-bottom: solid 2px var(--color-purple);
  font-size: var(--fs-20);
  font-weight: bold;
}
.note__articleText {
  margin-bottom: 25.641vw;
  font-size: var(--fs-14);
  line-height: 2;
}
.note__articleImg {
  max-width: 84.615vw;
  margin: 25.641vw auto;
}
.note__articleTitle + .note__articleImg {
  margin-top: 7.692vw;
}
.note__articleImg figcaption {
  margin-top: 1em;
  font-size: var(--fs-12);
  line-height: 2;
}
.note__aside {
  margin-top: 38.462vw;
}
.note__asideListTitle {
  margin-bottom: 11.282vw;
  font-size: var(--fs-42);
  text-align: center;
}

@media screen and (max-width: 767px) {

  .note__headImg {
    margin-inline: auto;
  }
  .note__headTitle {
    margin-top: 10.513vw;
  }

}

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

  .note {
    margin-top: -5vw;
    padding-block: 0 112px;
    background: linear-gradient(to bottom, #CBD4D8, #fff 500px);
  }
  .note__articleWrap {
    padding: 141px 0 0;
  }
  .note__articleWrap::before {
    background: url(../img/pattern_bg_pc.svg) no-repeat;
    background-size: 100%;
  }
  .note__articleWrap::after {
    height: 53vw;
  }
  .note__articleHead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 91px;
    max-width: 1155px;
    margin: 0 auto 100px;
  }
  .note__headImg,
  .note__headTitle {
    flex: 1;
  }
  .note__headImg {
    max-width: 493px;
  }
  .note__headTitle {
    font-size: var(--fs-32);
  }
  .note__headTitle span {
    margin-bottom: 27px;
  }
  .note__articleContent {
    max-width: 900px;
    margin-inline: auto;
  }
  .note__articleTitle {
    margin-bottom: 34px;
    padding-bottom: 14px;
    font-size: var(--fs-22);
  }
  .note__articleText {
    margin-bottom: 100px;
    font-size: var(--fs-16);
  }
  .note__articleImg {
    max-width: 800px;
    margin: 100px auto;
  }
  .note__articleTitle + .note__articleImg {
    margin-top: 40px;
  }
  .note__articleImg figcaption {
    font-size: var(--fs-16);
  }
  .note__aside {
    margin-top: 156px;
  }
  .note__asideListTitle {
    margin-bottom: 54px;
    font-size: var(--fs-64);
  }

}