@charset "UTF-8";
/* CSS INFORMATION -====================================
File name : introduction.css
Description : イントロページ
===================================================== */
.sec-ttl.lower-ttl.lower-intro-ttl {
  letter-spacing: 0.05em;
}

#intro {
  position: relative;
}
#intro .bg-cloud {
  position: absolute;
  content: "";
  top: 15rem;
  left: 63%;
  transform: translateX(-63%);
  width: 132rem;
  height: 110rem;
  z-index: 0;
}
#intro .content p {
  position: relative;
  z-index: 30;
  text-align: center;
}
#intro .content p .orange {
  color: #f74d1f;
}
#intro .content p .yellow {
  color: #f8cf0e;
}
#intro .content p .yellowGreen {
  color: #cde66b;
}
#intro .content p .yellowGreen1 {
  color: #cde66b;
}
#intro .content p .yellowGreen2 {
  color: #cde66b;
}
#intro .content p .blue {
  color: #486ec3;
}
#intro .content p .red {
  color: #f74d1f;
}
#intro .content p .pink {
  color: #f8b1ba;
}
#intro .content p span {
  font-size: 3.8rem;
  font-weight: 800;
  padding-right: 0.3rem;
}
#intro #intro-sec1 {
  position: relative;
  z-index: 7;
  margin-top: 20rem;
}
#intro #intro-sec1 .sec1-inner {
  width: 100%;
  margin-right: calc(50% - 50vw);
  padding-left: 5rem;
}
#intro #intro-sec1 .sec1-wrap {
  position: relative;
  background: #3dcb94;
  text-align: center;
  padding: 10rem 0 11rem 0;
}
#intro #intro-sec1 .sec1-wrap .sec1-bg {
  position: absolute;
  content: "";
  top: -6rem;
  right: -10rem;
  width: 52rem;
  height: 58rem;
  z-index: 20;
}
#intro #intro-sec1 .sec1-wrap .sec1-img1 {
  position: absolute;
  content: "";
  top: -19rem;
  right: -3rem;
  width: 24rem;
  height: 60rem;
  z-index: 25;
}
#intro #intro-sec1 .sec1-wrap .sec1-img2 {
  display: none;
}
#intro #intro-sec1 .sec1-wrap p {
  max-width: 67rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2;
}
#intro #intro-sec1 .sec1-wrap p .orange {
  font-size: 4.2rem;
}
#intro #intro-sec1 .sec1-wrap p .yellowGreen {
  font-size: 4.2rem;
}
#intro #intro-sec2 {
  position: relative;
  z-index: 8;
  margin-top: 22rem;
}
#intro #intro-sec2 .sec2-inner {
  width: 100%;
  margin: 0 calc(50% - 50vw);
  padding: 0;
}
#intro #intro-sec2 .sec2-wrap {
  position: relative;
  background: #6cc9f4;
  padding: 8rem 0 10rem 0;
}
#intro #intro-sec2 .sec2-wrap .sec2-bg {
  position: absolute;
  content: "";
  z-index: 20;
}
#intro #intro-sec2 .sec2-wrap .sec2-bg.bg1 {
  top: -16rem;
  left: 2rem;
  width: 50rem;
  height: 38rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-bg.bg2 {
  bottom: -6rem;
  right: -10rem;
  width: 50rem;
  height: 38rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-cloud {
  position: absolute;
  content: "";
  z-index: 20;
}
#intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud1 {
  top: -3rem;
  right: 6rem;
  width: 19rem;
  height: 9rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud2 {
  display: none;
}
#intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud3 {
  bottom: -10rem;
  left: 17rem;
  width: 20rem;
  height: 14rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud4 {
  display: none;
}
#intro #intro-sec2 .sec2-wrap .sec2-img1 {
  display: block;
  position: absolute;
  content: "";
  z-index: 20;
  top: -35rem;
  left: 0;
  width: 16.5rem;
  height: 58rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-img2 {
  display: block;
  position: absolute;
  content: "";
  z-index: 20;
  bottom: -30rem;
  left: -2rem;
  width: 18.5rem;
  height: 58rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-content p {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.9;
}
#intro #intro-sec2 .sec2-wrap .sec2-content p .yellowGreen1 {
  font-size: 2.8rem;
}
#intro #intro-sec2 .sec2-wrap .sec2-content p.last {
  font-size: 3.8rem;
  margin-top: 5rem;
}
#intro #intro-sec3 {
  position: relative;
  z-index: 8;
  margin-top: 29rem;
  padding-bottom: 30rem;
}
#intro #intro-sec3 .sec3-inner {
  width: 100%;
  margin-left: calc(50% - 50vw);
  padding-right: 5rem;
}
#intro #intro-sec3 h3 {
  text-align: left;
  color: #ff833f;
  font-size: 9rem;
  font-weight: 900;
  line-height: 0.82;
  padding-left: 5rem;
}
#intro #intro-sec3 h3 span {
  font-size: 5.1rem;
  margin-left: 0.4rem;
}
#intro #intro-sec3 .sec3-wrap {
  position: relative;
  background: #ff833f;
  padding: 7rem 4rem;
}
#intro #intro-sec3 .sec3-wrap .sec3-bg {
  position: absolute;
  content: "";
  top: -10rem;
  left: -17rem;
  width: 50rem;
  height: 68rem;
  z-index: 20;
}
#intro #intro-sec3 .sec3-wrap .sec3-cloud {
  position: absolute;
  content: "";
  z-index: 20;
}
#intro #intro-sec3 .sec3-wrap .sec3-cloud.cloud1 {
  bottom: -15rem;
  right: -8rem;
  width: 38rem;
  height: 15rem;
}
#intro #intro-sec3 .sec3-wrap .sec3-cloud.cloud2 {
  display: block;
  bottom: -20rem;
  left: -6rem;
  width: 30rem;
  height: 15rem;
}
#intro #intro-sec3 .sec3-wrap .sec3-img1 {
  position: absolute;
  content: "";
  top: -46rem;
  right: -8rem;
  width: 21rem;
  height: 58rem;
  z-index: 25;
}
#intro #intro-sec3 .sec3-wrap .sec3-img2 {
  display: none;
}
#intro #intro-sec3 .sec3-wrap .sec3-content p {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.9;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  #intro .bg-cloud {
    position: absolute;
    content: "";
    top: 0;
    left: 44%;
    transform: translateX(-44%);
    width: 107rem;
    height: 85rem;
    z-index: 0;
  }
  #intro #intro-sec1 {
    z-index: 11;
    margin-top: 21rem;
  }
  #intro #intro-sec1 .sec1-inner {
    margin-right: auto;
    padding-right: 2rem;
    padding-left: 26rem;
  }
  #intro #intro-sec1 .sec1-wrap {
    padding: 5rem 0 8rem 6rem;
  }
  #intro #intro-sec1 .sec1-wrap .sec1-bg {
    top: -16rem;
    right: -10rem;
    width: 50rem;
    height: 38rem;
  }
  #intro #intro-sec1 .sec1-wrap .sec1-img1 {
    top: -16rem;
  }
  #intro #intro-sec1 .sec1-wrap .sec1-img2 {
    display: block;
    position: absolute;
    content: "";
    top: 1rem;
    left: -15rem;
    width: 16.5rem;
    height: 58rem;
    z-index: 25;
  }
  #intro #intro-sec1 .sec1-wrap p {
    max-width: 62rem;
    font-size: 2.2rem;
    line-height: 1.8;
  }
  #intro #intro-sec1 .sec1-wrap p .orange {
    font-size: 3.4rem;
  }
  #intro #intro-sec1 .sec1-wrap p .yellowGreen {
    font-size: 3.8rem;
  }
  #intro #intro-sec2 {
    margin-top: 10rem;
  }
  #intro #intro-sec2 .sec2-inner {
    margin: 0 auto;
    padding: 0 2rem;
  }
  #intro #intro-sec2 .sec2-wrap {
    margin-left: calc(50% - 50vw);
    padding-left: 28rem;
    padding-right: 7rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-bg.bg1 {
    top: -16rem;
    left: 2rem;
    width: 50rem;
    height: 38rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-bg.bg2 {
    bottom: -6rem;
    right: -10rem;
    width: 50rem;
    height: 38rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud1 {
    top: -6rem;
    right: 21rem;
    width: 29rem;
    height: 14rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud2 {
    display: block;
    bottom: -15rem;
    left: 18rem;
    width: 26rem;
    height: 20rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud3 {
    bottom: -6rem;
    left: 43rem;
    width: 20rem;
    height: 14rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-cloud.cloud4 {
    display: block;
    bottom: -8rem;
    right: 5rem;
    width: 28rem;
    height: 14rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-img1 {
    display: none;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-img2 {
    display: none;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-content p {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.8;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-content p span {
    font-size: 2.6rem;
    font-weight: 800;
    padding-right: 0.3rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-content p .yellowGreen1 {
    font-size: 1.6rem;
  }
  #intro #intro-sec2 .sec2-wrap .sec2-content p.last {
    font-size: 2.6rem;
    margin-top: 4.5rem;
  }
  #intro #intro-sec3 {
    margin-top: 13.5rem;
    padding-bottom: 2rem;
  }
  #intro #intro-sec3 .sec3-inner {
    margin: 0 auto;
    padding-right: 2rem;
    padding-left: 6rem;
  }
  #intro #intro-sec3 h3 {
    text-align: center;
    font-size: 8rem;
  }
  #intro #intro-sec3 h3 span {
    font-size: 4.2rem;
    margin-left: 0.6rem;
  }
  #intro #intro-sec3 .sec3-wrap {
    padding: 8rem 21rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-bg {
    top: -10rem;
    left: -17rem;
    width: 50rem;
    height: 68rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-cloud.cloud1 {
    bottom: -14rem;
    right: -8rem;
    width: 42rem;
    height: 20rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-cloud.cloud2 {
    display: none;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-img1 {
    top: -49rem;
    right: -6rem;
    width: 21rem;
    height: 58rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-img2 {
    display: block;
    position: absolute;
    content: "";
    top: -23rem;
    left: -7rem;
    width: 18.5rem;
    height: 57rem;
    z-index: 25;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-content p {
    max-width: 96rem;
    font-size: 1.8rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-content p span {
    font-size: 2.6rem;
    font-weight: 800;
    padding-right: 0.3rem;
  }
}
@media screen and (min-width: 1400px) {
  #intro #intro-sec2 .sec2-wrap {
    padding-left: 50rem;
  }
  #intro #intro-sec3 .sec3-wrap .sec3-img1 {
    right: -12rem;
  }
}
/* =====================================================
    スクロール縦線
======================================================*/
.scroll_barH {
  width: 0.4rem;
}
.scroll_barH.intro1_bar {
  height: 42rem;
  top: -7.5rem;
  left: -1.5rem;
}
.scroll_barH.intro2_bar {
  display: none;
}
.scroll_barH.intro3_bar {
  height: 63rem;
  top: -8.5rem;
  right: -1.5rem;
}
.scroll_barH span.intro1-line {
  background: linear-gradient(180deg, #f8643c 0%, #f8643c 50%, #f8cf0e 50%, #f8cf0e 100%);
}
.scroll_barH span.intro2-line {
  background: linear-gradient(180deg, #fb924e 0%, #fb924e 50%, #5777c6 50%, #5777c6 100%);
}
.scroll_barH span.intro3-line {
  background: linear-gradient(180deg, #607bc5 0%, #607bc5 50%, #f9d738 50%, #f9d738 100%);
}

@media screen and (min-width: 768px) {
  .scroll_barH.intro1_bar {
    top: -8rem;
    left: auto;
    right: -1rem;
  }
  .scroll_barH.intro2_bar {
    display: block;
    height: 47rem;
    top: -4rem;
    right: 115.5rem;
  }
  .scroll_barH.intro3_bar {
    height: 60rem;
    top: -6rem;
    right: -1rem;
  }
}/*# sourceMappingURL=introduction.css.map */