@charset "UTF-8";
/*
Sass変数

_variables.scss

各パーツの色やサイズを変数として定義しています。
*/
/*
デバイス別設定
*/
/*
メディア

_media.scss
*/
/*
メディアクエリ

※デバイスごとのブレイクポイントは_variables.scssにて変数で設定。
*/
/*
コンテナ

コンテナブロックのmax-width、左右余白などブロックスタイルの共通定義。
各セクションの左右余白の統一感はコンテナによってもたらされます。

* @mixin container
*/
/*

_projects.scss

*/
.postRole {
  width: 100%;
}
@media only screen and (min-width: 1101px) {
  .postRole {
    max-width: 54rem;
    width: 50%;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .postRole {
    max-width: 54rem;
    width: 50%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .postRole {
    padding: 0 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .postRole {
    max-width: initial;
    padding: 0 4.2666666667vw;
  }
}
.postRole .ttl-news {
  width: 28.171rem;
  height: auto;
  position: relative;
  z-index: 10;
  margin: 0 0 3.7rem 0;
}
@media only screen and (max-width: 767px) {
  .postRole .ttl-news {
    width: 75.1226666667vw;
    height: auto;
    margin: 6.4vw 0 4.2666666667vw 0;
  }
}

.tp__sec01 {
  padding-top: 16.8rem;
  padding-bottom: 36rem;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec01 {
    padding-top: 8rem;
    padding-bottom: 28rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec01 {
    padding-top: 0;
    padding-bottom: 45.0666666667vw;
  }
}
.tp__sec01 .sec__wrp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec01 .sec__wrp {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec01 .sec__wrp {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 8.5333333333vw;
  }
}
.tp__sec01 .schdlRole {
  width: 100%;
  margin-top: 3.7rem;
}
@media only screen and (min-width: 1101px) {
  .tp__sec01 .schdlRole {
    width: 48.3333333%;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec01 .schdlRole {
    width: 48.3333333%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec01 .schdlRole {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec01 .schdlRole {
    margin-top: 0;
  }
}
.tp__sec01 .schdlRole .schdl {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 767px) {
  .tp__sec01 .schdlRole .schdl {
    margin-bottom: 6.4vw;
  }
}
.tp__sec01 .schdlRole .add__wrp {
  margin-bottom: 6.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec01 .schdlRole .add__wrp {
    margin-bottom: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec01 .schdlRole .add__wrp {
    padding: 0 4.2666666667vw;
    margin-bottom: 6.4vw;
  }
}
.tp__sec01::before {
  content: "";
  position: absolute;
  background: url(../assets/img/top/ill1.svg) no-repeat center center/cover;
  width: 30.5rem;
  height: 23.732rem;
  bottom: -3rem;
  right: 9rem;
  z-index: 10;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec01::before {
    right: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec01::before {
    width: 53.3333333333vw;
    height: 41.4986666667vw;
    bottom: -3.8986666667vw;
    right: 4.2666666667vw;
  }
}

.tp__sec02 {
  position: relative;
  margin-bottom: 23.9rem;
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec02 {
    margin-bottom: 40vw;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 {
    margin-bottom: 62.4vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 {
    margin-bottom: 62.4vw;
  }
}
.tp__sec02.rainbow1::before {
  top: -19.8rem;
}
@media only screen and (max-width: 767px) {
  .tp__sec02.rainbow1::before {
    top: -44.2vw;
  }
}
.tp__sec02 .sec__hd__wrp {
  color: #604747;
  margin-top: -8.4rem;
  margin-bottom: 17.8rem;
  position: relative;
  z-index: 100;
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec02 .sec__hd__wrp {
    margin-top: 10rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .sec__hd__wrp {
    margin-top: 12rem;
    margin-bottom: 8rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .sec__hd__wrp {
    margin-top: 25.0666666667vw;
    margin-bottom: 8.5333333333vw;
  }
}
.tp__sec02 .sec__hd__wrp .sec__catch {
  margin-top: 0.8rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .sec__hd__wrp .sec__catch {
    text-align: center;
    margin: 0 auto 6.4vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .sec__hd__wrp .sec__catch {
    margin-bottom: 6.4vw;
  }
}
.tp__sec02 .sec__hd__wrp .sec__text {
  text-align: center;
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
  .tp__sec02 .sec__hd__wrp .sec__text {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec02 .sec__hd__wrp .sec__text {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .sec__hd__wrp .sec__text {
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .sec__hd__wrp .sec__text {
    text-align: justify;
  }
}
.tp__sec02 .yoboRole__list .item {
  position: relative;
  margin-bottom: 2.56rem;
}
@media only screen and (min-width: 1101px) and (max-width: 1280px) {
  .tp__sec02 .yoboRole__list .item {
    margin-bottom: 11rem;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec02 .yoboRole__list .item {
    margin-bottom: 20rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .yoboRole__list .item {
    margin-bottom: 26rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .yoboRole__list .item {
    margin-bottom: 26.6666666667vw;
  }
}
.tp__sec02 .pic {
  display: block;
  width: 64.7rem;
  height: auto;
}
@media only screen and (min-width: 1101px) and (max-width: 1280px) {
  .tp__sec02 .pic {
    width: 50%;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec02 .pic {
    width: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .pic {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .pic {
    width: 100%;
  }
}
.tp__sec02 .inner {
  width: 55.555555%;
  padding: 5.6rem 5.6rem 14.6rem;
  position: absolute;
  top: -6.6rem;
  left: 520px;
  gap: 0px;
  border-radius: 20px 100px 20px 20px;
  z-index: 100;
  -webkit-box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);
          box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);
}
@media only screen and (min-width: 1101px) and (max-width: 1280px) {
  .tp__sec02 .inner {
    right: 40px;
    left: auto;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec02 .inner {
    width: 60%;
    left: auto;
    right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .inner {
    width: 91%;
    height: 60vh;
    position: relative;
    top: auto;
    left: auto;
    margin: -16vw auto 26.6666666667vw;
    padding: 10.6666666667vw 4.2666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner {
    width: 91.4666666667vw;
    height: 66vh;
    position: relative;
    top: auto;
    left: auto;
    margin: -16vw auto 26.6666666667vw;
    padding: 10.6666666667vw 4.2666666667vw;
  }
}
.tp__sec02 .inner::before {
  content: "";
  position: absolute;
  top: -4.2rem;
  right: 9.8rem;
  width: 14.528rem;
  height: 10.542rem;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec02 .inner::before {
    top: -6.2rem;
    right: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner::before {
    width: 22.1386666667vw;
    height: 16.064vw;
    top: -6.4vw;
    right: 6.4vw;
  }
}
.tp__sec02 .inner.yobo1 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #fffcb7), color-stop(94.63%, #f4ffdd));
  background: -webkit-linear-gradient(left, #fffcb7 8.88%, #f4ffdd 94.63%);
  background: linear-gradient(90deg, #fffcb7 8.88%, #f4ffdd 94.63%);
}
.tp__sec02 .inner.yobo1::before {
  background: url(../assets/img/top/num1.svg) no-repeat center center/cover;
}
.tp__sec02 .inner.yobo1 .catch {
  color: #959247;
}
.tp__sec02 .inner.yobo1 .catch::before {
  background: url(../assets/img/top/yobo1-obj.svg) no-repeat center center/cover;
}
.tp__sec02 .inner.yobo2 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #f2dece), color-stop(94.63%, #fffedd));
  background: -webkit-linear-gradient(left, #f2dece 8.88%, #fffedd 94.63%);
  background: linear-gradient(90deg, #f2dece 8.88%, #fffedd 94.63%);
}
.tp__sec02 .inner.yobo2::before {
  width: 15.284rem;
  height: 10.542rem;
  background: url(../assets/img/top/num2.svg) no-repeat center center/cover;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner.yobo2::before {
    width: 23.184vw;
    height: 16.064vw;
  }
}
.tp__sec02 .inner.yobo2 .catch {
  color: #7e5e45;
}
.tp__sec02 .inner.yobo2 .catch::before {
  background: url(../assets/img/top/yobo2-obj.svg) no-repeat center center/cover;
}
.tp__sec02 .inner.yobo3 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #dfe7f6), color-stop(94.63%, #def9ff));
  background: -webkit-linear-gradient(left, #dfe7f6 8.88%, #def9ff 94.63%);
  background: linear-gradient(90deg, #dfe7f6 8.88%, #def9ff 94.63%);
}
.tp__sec02 .inner.yobo3::before {
  width: 15.214rem;
  height: 10.542rem;
  background: url(../assets/img/top/num3.svg) no-repeat center center/cover;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner.yobo3::before {
    width: 23.2906666667vw;
    height: 16.064vw;
  }
}
.tp__sec02 .inner.yobo3 .catch {
  color: #354a71;
}
.tp__sec02 .inner.yobo3 .catch::before {
  background: url(../assets/img/top/yobo3-obj.svg) no-repeat center center/cover;
}
.tp__sec02 .inner.yobo4 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #e8d3e1), color-stop(94.63%, #deddff));
  background: -webkit-linear-gradient(left, #e8d3e1 8.88%, #deddff 94.63%);
  background: linear-gradient(90deg, #e8d3e1 8.88%, #deddff 94.63%);
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner.yobo4 {
    margin-bottom: 0;
  }
}
.tp__sec02 .inner.yobo4::before {
  width: 15.508rem;
  height: 10.542rem;
  background: url(../assets/img/top/num4.svg) no-repeat center center/cover;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner.yobo4::before {
    width: 23.632vw;
    height: 16.064vw;
  }
}
.tp__sec02 .inner.yobo4 .catch {
  color: #7c2b61;
}
.tp__sec02 .inner.yobo4 .catch::before {
  background: url(../assets/img/top/yobo4-obj.svg) no-repeat center center/cover;
}
.tp__sec02 .inner .catch {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-left: 2.8rem;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner .catch {
    font-size: 3.7333333333vw;
    margin-bottom: 2.1333333333vw;
    padding-left: 5.3333333333vw;
  }
}
.tp__sec02 .inner .catch::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner .catch::before {
    width: 3.2vw;
    height: 3.2vw;
  }
}
.tp__sec02 .inner .ttl {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
  line-height: 1.6em;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner .ttl {
    font-size: 6.4vw;
    margin-bottom: 2.1333333333vw;
  }
}
.tp__sec02 .inner .ttl .large {
  font-size: 4rem;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .inner .ttl .large {
    font-size: 8vw;
    margin-bottom: 0;
  }
}
.tp__sec02 .flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 86%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2.4rem;
  position: absolute;
  top: 75.833333%;
  left: 5.6rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .flex-box {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: static;
    top: auto;
    left: auto;
    margin: 6.4vw auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .flex-box {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: static;
    top: auto;
    left: auto;
    margin: 6.4vw auto 0;
  }
}
.tp__sec02 .obj__wrp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 34.4rem;
  height: 16rem;
}
@media only screen and (min-width: 981px) and (max-width: 1360px) {
  .tp__sec02 .obj__wrp {
    width: 34.4rem;
    height: auto;
    gap: 1.6rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec02 .obj__wrp {
    gap: 2.4rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .obj__wrp {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4.2666666667vw;
  }
}
.tp__sec02 .obj__wrp .obj {
  width: 16rem;
  height: auto;
}
@media only screen and (min-width: 981px) and (max-width: 1360px) {
  .tp__sec02 .obj__wrp .obj {
    width: 14rem;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec02 .obj__wrp .obj {
    width: 33.0666666667vw;
    height: 33.0666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec02 .obj__wrp .obj {
    width: 33.0666666667vw;
    height: 33.0666666667vw;
  }
}

.tp__sec03 {
  width: 100%;
  height: 988px;
  border-radius: 200px 0px 0px 0px;
  background: -webkit-linear-gradient(328.75deg, #d2dce4 6.97%, #dfe9f3 88.39%);
  background: linear-gradient(121.25deg, #d2dce4 6.97%, #dfe9f3 88.39%);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec03 {
    height: auto;
    padding-bottom: 70vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 {
    border-radius: 21.3333333333vw 0px 0px 0px;
    height: auto;
    padding-bottom: 54.4vw;
  }
}
.tp__sec03 .obj {
  position: absolute;
  z-index: 10;
}
.tp__sec03 .obj2 {
  bottom: 0;
  left: 6.4rem;
  width: 98.4rem;
  height: auto;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec03 .obj2 {
    left: auto;
    right: 0;
    width: 95.7333333333vw;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .obj2 {
    width: 95.7333333333vw;
    height: auto;
    left: auto;
    right: 0;
    bottom: -1.3333333333vw;
  }
}
.tp__sec03 .obj3 {
  bottom: -3.3rem;
  right: 8rem;
  width: 30.5rem;
  height: auto;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec03 .obj3 {
    right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .obj3 {
    width: 44.3066666667vw;
    height: auto;
    right: 0;
    bottom: -12vw;
  }
}
.tp__sec03 .sec__hd__wrp {
  position: absolute;
  top: -8.7rem;
  left: 11.3194444%;
  z-index: 100;
}
@media only screen and (min-width: 980px) and (max-width: 1300px) {
  .tp__sec03 .sec__hd__wrp {
    left: 8%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec03 .sec__hd__wrp {
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .sec__hd__wrp {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    top: -13vw;
  }
}
@media only screen and (min-width: 980px) {
  .tp__sec03 .sec__hd__wrp .sec__hd {
    margin: 0;
  }
}
.tp__sec03 .wrp {
  padding-left: 25.694444%;
  padding-top: 8rem;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec03 .wrp {
    padding-top: 70.1333333333vw;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .wrp {
    padding-left: 0;
    padding-top: 70.1333333333vw;
  }
}
.tp__sec03 .wrp.rainbow2::before {
  top: -19.8rem;
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .wrp.rainbow2::before {
    top: -35.7333333333vw;
  }
}
@media only screen and (min-width: 981px) {
  .tp__sec03 .sec__catch__wrp {
    text-align: left;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .tp__sec03 .sec__catch {
    text-align: left;
  }
}
.tp__sec03 .sec__text {
  margin-bottom: 5.6rem;
  position: relative;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .sec__text {
    margin-bottom: 6.4vw;
  }
}
.tp__sec03 .nav__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 4rem;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width: 680px;
  width: 100%;
  position: relative;
  z-index: 100;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec03 .nav__list {
    gap: 2rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec03 .nav__list {
    max-width: initial;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .nav__list {
    gap: 4.2666666667vw;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.tp__sec03 .nav__list .nav {
  width: 20rem;
  height: 20rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec03 .nav__list .nav {
    width: 16rem;
    height: 16rem;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec03 .nav__list .nav {
    width: 38.9333333333vw;
    height: 38.9333333333vw;
  }
}

.tp__sec04 {
  padding-top: 16rem;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec04 {
    padding-top: 10.6666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec04 {
    padding-top: 10.6666666667vw;
  }
}
.tp__sec04::before {
  top: 62.7rem;
}
@media only screen and (max-width: 767px) {
  .tp__sec04::before {
    top: 111.7333333333vw;
  }
}
.tp__sec04 .obj {
  position: absolute;
  top: 30.8rem;
  left: 52.916666%;
  width: 46rem;
  height: auto;
  z-index: 100;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec04 .obj {
    left: auto;
    right: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec04 .obj {
    top: 55.4666666667vw;
    left: 4.2666666667vw;
    width: 83.4666666667vw;
    height: auto;
  }
}
.tp__sec04 .sec__wrp {
  margin: 4rem auto 0;
  position: relative;
  z-index: 1000;
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
  .tp__sec04 .sec__wrp {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .tp__sec04 .sec__wrp {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec04 .sec__wrp {
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec04 .sec__wrp {
    margin: 86.1333333333vw auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec04 .sec__wrp {
    margin: 86.1333333333vw auto 0;
  }
}
.tp__sec04 .sec__wrp .catch {
  font-size: 5.2rem;
  font-weight: 500;
  line-height: 75.3px;
  letter-spacing: 0.08em;
  margin-bottom: 4rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .tp__sec04 .sec__wrp .catch {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .tp__sec04 .sec__wrp .catch {
    font-size: 10.6666666667vw;
    line-height: 15.4453333333vw;
    margin-bottom: 3.7333333333vw;
    text-align: center;
  }
}
.tp__sec04 .sec__wrp .catch span {
  color: #df3189;
}
.tp__sec04 .sec__wrp .flex-box {
  gap: 3.2rem;
  margin-top: 6.2rem;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .tp__sec04 .sec__wrp .flex-box {
    margin-top: 6.4vw;
    gap: 4.2666666667vw;
  }
}/*# sourceMappingURL=top.css.map */