@charset "UTF-8";
/* CSS Document */
article ul.demo1 {
  margin-bottom: 10rem; }
  article ul.demo1 li {
    margin-bottom: 3rem; }
    article ul.demo1 li p {
      margin-top: 2rem; }

pre {
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 0 1em;
  border-radius: 5px;
  background: #25292f;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  height: 200px;
  overflow: scroll;
  margin: 2rem 0; }

section {
  padding-bottom: 0; }

.mask-demo1 {
  background-image: url("../../img/top-slide-img-1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  padding: 10rem 0 10rem;
  -webkit-clip-path: ellipse(90% 60% at right 50% bottom 60%);
  clip-path: ellipse(90% 60% at right 50% bottom 60%); }
  .mask-demo1 div.mx-auto {
    background-color: #fff;
    padding: 4rem; }
    .mask-demo1 div.mx-auto h3 {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 2px;
      margin-bottom: 10px;
      line-height: normal; }
      @media screen and (max-width: 767px) {
        .mask-demo1 div.mx-auto h3 {
          font-size: 50px;
          margin-bottom: 20px; } }
      .mask-demo1 div.mx-auto h3 + p {
        font-size: 14px;
        text-align: justify;
        padding: 0 20px;
        margin-bottom: 20px; }
        @media screen and (max-width: 767px) {
          .mask-demo1 div.mx-auto h3 + p {
            font-size: 18px; } }

.mask-demo2 {
  background-image: url("../../img/top-slide-img-2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -10rem;
  padding: 20rem 0 10rem;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
  .mask-demo2 div.mx-auto {
    background-color: #fff;
    padding: 4rem; }
    .mask-demo2 div.mx-auto h3 {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 2px;
      margin-bottom: 10px;
      line-height: normal; }
      @media screen and (max-width: 767px) {
        .mask-demo2 div.mx-auto h3 {
          font-size: 50px;
          margin-bottom: 20px; } }
      .mask-demo2 div.mx-auto h3 + p {
        font-size: 14px;
        text-align: justify;
        padding: 0 20px;
        margin-bottom: 20px; }
        @media screen and (max-width: 767px) {
          .mask-demo2 div.mx-auto h3 + p {
            font-size: 18px; } }

.mask-demo3 {
  background-image: url("../../img/top-slide-img-3.webp");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -11rem;
  padding: 21rem 0 20rem;
  z-index: -2;
  mask-image: url("../img/wave.svg"), url("../img/square.svg");
  mask-repeat: repeat-x, no-repeat;
  mask-position: center bottom -1px, center top;
  mask-size: 60%, cover;
  mask-composite: exclude;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../img/wave.svg"), url("../img/square.svg");
  -webkit-mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: center bottom -1px, center top;
  -webkit-mask-size: 60%, cover;
  -webkit-mask-composite: exclude; }
  .mask-demo3 div.mx-auto {
    background-color: #fff;
    padding: 4rem; }
    .mask-demo3 div.mx-auto h3 {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 2px;
      margin-bottom: 10px;
      line-height: normal; }
      @media screen and (max-width: 767px) {
        .mask-demo3 div.mx-auto h3 {
          font-size: 50px;
          margin-bottom: 20px; } }
      .mask-demo3 div.mx-auto h3 + p {
        font-size: 14px;
        text-align: justify;
        padding: 0 20px;
        margin-bottom: 20px; }
        @media screen and (max-width: 767px) {
          .mask-demo3 div.mx-auto h3 + p {
            font-size: 18px; } }

.mask-demo4 {
  background-image: url("../../img/top-slide-img-1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -11rem;
  padding: 21rem 0 20rem;
  z-index: -3; }