/* ===== SERVICE DETAIL (common) ===== */

.serviceTop{
  padding: 32px 0 20px;
  text-align: center;
}

.serviceTop__label{
  margin: 0 0 14px;
  font-size: 32px;
  letter-spacing: .14em;
  color: var(--green);
  font-weight: 800;
}

.serviceTop__logo img{
  height: 200px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.serviceTop__desc{
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 2.0;
}

/* MOVIE */
.serviceMovie{
  position: relative;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.serviceMovie iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PRICE */
.servicePrice{
  max-width: 720px;
  margin: 0 auto;
  background: rgba(245,239,210,.7);
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
}

.servicePrice__label{
  display: inline-block;
  background: #ffef7a;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.servicePrice__text{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 2.0;
}

/* Responsive */
@media (max-width: 820px){
  .serviceTop__logo img{
    height: 140px;
  }
}

/* ===== SERVICE decorations layer ===== */
.svcDeco{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;     /* ← ここを 0 にする（背景） */
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}


/* コンテンツは装飾より前に */
.header, .main, .footer{ position: relative; z-index: 2; }

/* ブロブ */
.svcBlob{
  position: absolute;
  opacity: .22;
  will-change: transform;
  filter: saturate(.95);
}

.svcBlob--a{
  width: 520px;
  left: -240px;
  top: 120px;
  animation: svcFloatA 10s ease-in-out infinite;
}
.svcBlob--b{
  width: 420px;
  right: -220px;
  bottom: 60px;
  opacity: .18;
  animation: svcFloatB 8s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes svcFloatA{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(-8px, 18px, 0); }
}
@keyframes svcFloatB{
  0%,100%{ transform: translate3d(0,12px,0); }
  50%{ transform: translate3d(8px, 0, 0); }
}

/* 図形（四角・三角） */
.shape{
  position: absolute;
  display: block;
  opacity: .55;
  transform: rotate(0deg);
  will-change: transform;
}

/* 三角（CSSで作る） */
.shape--tri{
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 44px solid rgba(46,166,106,.55);

  right: 220px;
  top: 190px;
  transform: rotate(-18deg);
}

/* 四角1 */
.shape--sq{
  width: 18px;
  height: 18px;
  background: rgba(46,166,106,.55);
  border-radius: 4px;

  right: 170px;
  top: 220px;
  transform: rotate(14deg);
}

/* 四角2（少し小さめ） */
.shape--sq2{
  width: 12px;
  height: 12px;
  background: rgba(46,166,106,.45);
  border-radius: 3px;

  right: 140px;
  top: 200px;
  transform: rotate(-10deg);
}

@media (max-width: 520px){
  .svcBlob{
    opacity: .10;
  }

  .svcBlob--a{
    width: 360px;
    left: -240px;
    top: 220px;
  }

  .svcBlob--b{
    width: 300px;
    right: -220px;
    bottom: -40px;
  }

  .shape{ opacity: .25; transform: scale(.85); }
  .shape--tri{ right: 24px; top: 140px; }
  .shape--sq{  right: 16px; top: 170px; }
  .shape--sq2{ right: 40px; top: 160px; }
}