@charset "utf-8";


  /* ==============================
section servicce
============================== */

.sub-service-wrapper {
 /* padding: 0 5.3% 0;  */
}

.sub-service-photo {
  max-width: 70%;
  margin: 86px auto 0;
  display: block
}

.sub-service-title {
  margin-top: 72px;
}

.sub-service-teian {
  margin-top: 40px;
}

.sub-txt-bold {
  padding-top: 33px;
  font-weight: 900;
  line-height: 23px; /* 143.75% */
} 

.sub-txt {
  padding-top: 20px;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid var(--primary-pink);
  padding-bottom: 0;
}

.sub-service-title {
  position: relative;
  margin-top: 72px;
}

.sub-service-title::before {
  content: "Display";
  font-family: "Dancing script";
  font-size: 10rem;
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0;
  bottom: 0;
  filter: opacity(0.03);
  z-index: 1;
}

.sub-service-title::after {
  content: "";
  position: absolute;
  left: 69%;
  top: 50%;
  width: 80px;  
  height: 1px; 
  background-color: var(--primary-pink);
}

.sub-service-teian {
  position: relative;
  margin-top: 40px;
  font-size: 1.8rem;
}

/* .sub-service-teian::after {
  content: "";
  position: absolute;
  left: 39%;
  top: 106%;
  width: 80px; 
  height: 1px; 
  background-color: var(--primary-pink);
} */

/* ぼかし */
.display-wrapper {
  position: relative; /* 疑似要素を配置するため */
  background: rgba(221, 222, 215, 0.50);
  padding: 10px 5.3% 110px;
}

.display-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 166px; /* ぼかしの高さを調整 */
}
.display-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 43px; /* ぼかしの高さを調整 */
}

.display-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.display-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
/* ぼかし　おわり */

/* sns */

.sns-wrapper {
  padding: 10px 5.3% 110px;
  position: relative;
  margin-top: 72px;
}

.sns-wrapper::before {
  content: "Shooting";
  font-family: "Dancing script";
  font-size: 10rem;
  position: absolute;
  top: -15%;
  left: 16%;
  right: 0;
  bottom: 0;
  filter: opacity(0.03);
  z-index: 1;
}

.sns-wrapper::after {
  content: "Lesson";
  font-family: "Dancing script";
  font-size: 10rem;
  position: absolute;
  top: 91%;
  left: 3%;
  right: 0;
  bottom: 0;
  filter: opacity(0.03);
  z-index: 1;
}

.sub-service-photo-sns {
  max-width: 70%;
  margin: 11px auto 0;
  display: block
}
/* sns おわり */

/* lesson */
.sub-service-photo-lesson {
  position: relative;
  z-index: 1;
  margin: 42px auto 0;
  max-width: 70%;
  display: block
}

.lesson-wrapper {
  padding: 10px 5.3% 110px;
  position: relative;
  background: rgba(221, 222, 215, 0.50);
}

.sub-txt-lesson {
  display: inline-block;
  margin-top: 31px;
}

/* ぼかし */
.lesson-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 166px; /* ぼかしの高さを調整 */
}
.lesson-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 43px; /* ぼかしの高さを調整 */
}

.lesson-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.lesson-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
/* ぼかし　おわり */

/* pc service　レスポンシブ */
@media screen and (min-width: 769px) {
  .display-wrapper,
  .sns-wrapper,
  .lesson-wrapper
   {
    padding: 90px 21% 238px;
  }

  .sub-service-title{
    color: #2B2B2B;
    font-size: 4.2rem;
    margin-top: 133px;
  }

  .sub-service-teian {
    font-size: 3.8rem;
    margin-top: 104px;
  }

  .sub-service-photo,
  .sub-service-photo-sns,
  .sub-service-photo-lesson
   {
    max-width: 50%;
  }

  .sub-service-title::before {
    color: #F4F4F4;
    font-size: 26rem;
    top: -175%;
    filter: opacity(4);
  }

  .sub-service-title::after {
    left: 58%;
    width: 100px;
  }

  .sub-txt-bold {
    padding-top: 71px;
  }

  .sns-wrapper::before {
    font-size: 26rem;
    top: -23%;
    left: 43%;
  }

  .sns-wrapper::after {
    font-size: 26rem;
    top: 84%;

  }

  .sub-service-teian::after {
    width: 150px;
    left: 43%;
  }

}

/* pc service　レスポンシブ おわり*/