@charset "UTF-8";
.page_visual {
  background: url("../img/page_visual.webp") no-repeat top/cover;
}
.intro {
  margin: 50px 0 30px;
}
.intro p {
  font: bold 2.4rem/40px var(--font-family-jp);
  letter-spacing: 0px;
  color: var(--main-color);
}
.intro .upper , .intro .lower {
  text-align: center;
}
.intro_sen {
  max-width: 244px;
  margin: 25px auto;
  white-space: nowrap;
}
.intro_sen p {
  &:last-of-type {
    letter-spacing: 0.125em;
  }
}

/* main_contents */
.main_contents {
  height: 620px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.mc_02_outer .mc_inner {
  flex-direction: row-reverse;
}
.mc_01_outer {
  position: relative;
  &::after {
    content: "";
    background: #216FCC;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    clip-path: polygon(75% 45%, 100% 0%, 100% 100%);
    @media screen and (max-width: 1400px) {
      display: none;
    }
  }
}
.mc_01 {
  background: url(../img/bg_01.webp) no-repeat center/cover;
  clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 85%);
}
.mc_02_outer {
  position: relative;
  &::after {
    content: "";
    background:#36A296;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    clip-path: polygon(0% 0%, 25% 45%, 0% 100%);
    @media screen and (max-width: 1400px) {
      display: none;
    }
  }
}
.mc_02 {
  background: url(../img/bg_02.webp) no-repeat center/cover;
  clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%);
  margin-top: -50px;
}
.mc_03 {
  background: url(../img/bg_03.webp) no-repeat center/cover;
  clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 85%);
  margin-top: -50px;
}
.mc_inner {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  gap: 20px 76px;
}
.main_contents .title {
  font: bold 4rem/80px var(--font-family-jp);
  letter-spacing: 0px;
  color: #FFF;
  padding-top: 40px;
}
.main_contents .text {
  max-width: 548px;
  color: #FFF;
}

.yellow {
  color: #FFFF00;
}
@media screen and (max-width: 767px) {
  .intro {
    padding: 0 5%;
    margin: 60px 0 30px;
  }
  .intro_sen {
    margin: 25px auto;
  }

  .mc_inner{
    flex-direction: column;
    padding: 0 5%;
  }
  .mc_02_outer .mc_inner {
    flex-direction: column;
    .title {
      text-align: right;
    }
  }
  .mc_01 {
    clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 90%);
  }
  .mc_01_outer::after {
    display: none;
  }
  .mc_02 {
    clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%);
    margin-top: -150px;
  }
  .mc_02_outer::after {
    display: none;
  }
  .mc_03 {
    clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 90%);
    margin-top: -150px;
  }
  .main_contents {
    min-height: 800px;
    &:nth-child(2n) .title {
      text-align: right;
    }
  }
  .main_contents .title {
    font-size: 2.6rem;
    line-height: 1.5;
    padding-top: 0;
  }
  .main_contents .text {
    font-size: 1.4rem;
    line-height: 1.75;
  }
}