/* クリエイティブ */

.creative {
  margin-top: 108px;
}

.creative__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.creative__sub-ttl-box {
  position: relative;
}

.creative__sub-ttl {
  font-size: 40px;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 78px;
  color: #666666;
  position: relative;
}

.creative__sub-ttl_color {
  color: #f0978a;
}

@keyframes slideUpVer2 {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes slideUpVer3 {
  0% {
    opacity: 0;
    transform: translate(-30%, -30%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}

.slideUpVer2 {
  animation-name: slideUpVer2;
  animation-fill-mode: forwards;
}

.slideUpVer3 {
  animation-name: slideUpVer3;
  animation-fill-mode: forwards;
}

.creative__sub-ttl-illust001 {
  width: 17.2%;
  height: auto;
  position: absolute;
  top: -11%;
  left: 7.4%;
  opacity: 0;
}

.creative__sub-ttl-illust002 {
  width: 13.5%;
  height: auto;
  position: absolute;
  top: -11%;
  right: 10.7%;
  opacity: 0;
}

.creative__block {
  height: 564px;
  position: relative;
  overflow: hidden;
}

.creative__block:nth-child(2) {
  margin-top: 66px;
}

.creative__block:nth-child(3) {
  margin-top: -130px;
}

.creative__block:nth-child(4) {
  margin-top: -132px;
}

.creative__block001-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  z-index: 1;
}

.creative__block002-back {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 1;
}

.creative__block-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.creative__block-inner_reverse {
  top: 57%;
}

.creative__cols {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creative__cols_reverse {
  align-items: flex-start;
}

/* テキストカラム */
.creative__col-text-box {
  width: 50%;
  flex: 1;
}

.creative__col-text-box_reverse {
  width: 49.4%;
  margin-left: 8%;
  order: 2;
}

.creative__col-text-box_position {
  margin-top: 10%;
}

.creative__col-icon {
  width: 14%;
  height: auto;
  position: relative;
  top: 9px;
  margin-right: 2%;
}

.creative__col-icon_layout-position {
  width: 14%;
  height: auto;
  position: relative;
  top: -37px;
  margin-right: 1%;
}

.creative__col-ttl-cover {
  display: inline-block;
}

.creative__col-sub-ttl {
  font-size: 20px;
  font-feature-settings: "palt";
  line-height: 2;
  font-weight: 700;
  color: #4d4d4d;
}

.creative__col-ttl {
  font-size: 40px;
  line-height: 1.25;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  color: #4d4d4d;
}

.creative__col-content {
  max-width: 450px;
  margin-top: 39px;
  font-size: 17px;
  font-weight: 500;
  font-feature-settings: "palt";
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #4d4d4d;
}

/* 画像カラム */
.creative__col-img-box {
  width: 50%;
  position: relative;
  right: -3%;
}

.creative__col-img-box_reverse {
  width: 50.6%;
  order: 1;
}

.creative__col-img-box_width {
  width: 53.4%;
}

.creative__col-img-box_position {
  right: -4%;
}

.creative__col-illust-left {
  width: 26.6%;
  height: 319px;
  position: absolute;
  bottom: -4%;
  left: -24%;
  z-index: 10;
}

.creative__col-illust-right {
  width: 26.6%;
  height: 319px;
  position: absolute;
  bottom: -4%;
  left: 2%;
  z-index: 10;
}

.creative__col-illust-reverse {
  width: 44.4%;
  height: auto;
  position: absolute;
  left: unset;
  bottom: -16%;
  right: -10%;
  z-index: 10;
}

.creative__col-last-illust-left {
  width: 22.2%;
  height: auto;
  position: absolute;
  left: unset;
  bottom: -6%;
  left: -11.7%;
  z-index: 10;
}

.creative__col-last-illust-right {
  width: 22.2%;
  height: auto;
  position: absolute;
  left: unset;
  bottom: -6%;
  left: 13.3%;
  z-index: 10;
}

.creative__col-img-mask001 {
  width: 100%;
  height: auto;
  -webkit-mask: url(../images/creative/creative-mask001.png);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask: url(../images/creative/creative-mask001.png);
  mask-size: contain;
  mask-repeat: no-repeat;
}

.creative__col-img-mask002 {
  width: 100%;
  height: auto;
  -webkit-mask: url(../images/creative/creative-mask002.png);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask: url(../images/creative/creative-mask002.png);
  mask-size: contain;
  mask-repeat: no-repeat;
}

.creative__col-img-mask003 {
  width: 100%;
  height: auto;
  -webkit-mask: url(../images/creative/creative-mask003.png);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask: url(../images/creative/creative-mask003.png);
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* ----------------------------------------------------- */

/* レスポンシブ */

/* ----------------------------------------------------- */

@media screen and (max-width: 1110px) {
  .creative__block {
    height: 870px;
  }

  .creative__cols {
    flex-direction: column;
  }

  .creative__block001-back {
    left: unset;
    right: 4%;
  }

  .creative__block002-back {
    right: unset;
    left: 4%;
  }

  .creative__block:nth-child(3) {
    margin-top: -130px;
  }

  .creative__block-inner_reverse {
    top: 53%;
  }

  .creative__cols_reverse {
    align-items: center;
  }

  .creative__col-text-box_reverse {
    order: 1;
  }

  .creative__col-img-box_reverse {
    order: 2;
  }

  .creative__col-text-box {
    max-width: 600px;
    width: 100%;
  }

  .creative__col-img-box {
    max-width: 600px;
    width: 100%;
    right: 0%;
    margin-top: 35px;
  }

  .creative__col-illust-left {
    height: auto;
    bottom: unset;
    top: 0;
    left: -7%;
  }

  .creative__col-illust-right {
    height: auto;
    bottom: unset;
    top: 0;
    left: 20%;
  }

  .creative__col-illust-reverse {
    height: auto;
    left: unset;
    bottom: 0;
  }

  .creative__col-last-illust-left {
    left: -5.7%;
  }

  .creative__col-last-illust-right {
    left: 18.3%;
  }
}

@media screen and (max-width: 768px) {
  .creative {
    margin-top: 75px;
  }

  .creative__block001-back {
    left: unset;
    right: 2%;
  }

  .creative__block-inner {
    top: 49%;
  }

  .creative__sub-ttl {
    font-size: 23px;
  }

  .creative__block:nth-child(2) {
    margin-top: 46px;
  }

  .creative__col-sub-ttl {
    font-size: 16px;
  }

  .creative__col-ttl {
    font-size: 32px;
  }

  .creative__col-content {
    font-size: 14px;
    line-height: 1.8;
  }
}

@media screen and (max-width: 650px) {
  .creative__sub-ttl-illust001 {
    width: 19.2%;
    top: -62%;
    left: 2.4%;
  }

  .creative__sub-ttl-illust002 {
    width: 16.5%;
    height: auto;
    top: 96%;
    right: 2.7%;
  }
}

@media screen and (max-width: 500px) {
  .creative__block:nth-child(3) {
    margin-top: -220px;
  }

  .creative__block:nth-child(4) {
    margin-top: -251px;
  }
}

@media screen and (max-width: 430px) {
  .creative__col-icon {
    width: 22%;
    height: auto;
    top: 3px;
  }
}