#stars_hp .page_service .fv {
  background: url(../img/service_fv.png) no-repeat center center;
  background-size: cover;
  height: 46vw;
}

#stars_hp .page_service .container {
  width: 1153px;
}

#stars_hp .page_service .service_main {
  background: url(../img/service_bg1.png) no-repeat center top;
  background-size: contain;
  padding: 115px 0 200px;
}

#stars_hp .page_service .service_main .service_main_title {
  text-align: center;
  padding: 60px 10px;
  border-radius: 70px;
  border: 1px solid #DFDFDF;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
  font-weight: bold;
  margin-bottom: 155px;
}


/* ガラスカード本体 */
#stars_hp .page_service .service_main .service_main_title {
  position: relative;
  overflow: hidden;
  /* 半透明の背景レイヤ（背景を薄く白で覆う） */
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); */
  /* フレーム（薄い白の線で縁取り） */
  /* border: 1px solid rgba(255,255,255,0.18); */
  /* 外側シャドウ（奥行き感） */
  /* box-shadow:
    0 calc(var(--glass-depth-y) / 2) calc(var(--glass-depth-y) * 1.6) rgba(2, 8, 23, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12); */
  /* 背景をぼかす（これが Frosted Glass の要） */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  /* フォールバック色（backdrop-filter 非対応時） */
  /* background-color: rgba(255, 255, 255, 0.03); */
}

/* 内側ハイライト（光源：light angle & intensity） */
#stars_hp .page_service .service_main .service_main_title::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--light-angle),
      rgba(255, 255, 255, calc(var(--light-intensity) * 0.12)),
      rgba(255, 255, 255, 0) 40%);
  transform: translateY(-8%) skewY(-3deg);
  filter: blur(18px);
  mix-blend-mode: screen;
}

/* もう一つの内側影で「屈曲／奥行き」感を補う */
#stars_hp .page_service .service_main .service_main_title::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 -18px 40px rgba(2, 8, 23, 0.1),
    inset 0 8px 18px rgba(255, 255, 255, 0.01);
  border-radius: inherit;
  opacity: 0.9;
}

/* カード内テキスト */
.glass__inner {
  position: relative;
  z-index: 1;
  /* 擬似要素より上 */
}

/* optional: ノイズを足したい場合（フロスト>0時） */
/* .glass .noise { background-image: url('noise.png'); opacity:0.03; mix-blend-mode: overlay; } */

@supports not (backdrop-filter: blur(1px)) {

  /* 古いブラウザのフォールバック */
  .glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
}


#stars_hp .page_service .service_main .service_main_title .p1 {
  font-size: 25px;
  line-height: 50px;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

#stars_hp .page_service .service_main .service_main_title .p2 {
  font-size: 25px;
  line-height: 50px;
  letter-spacing: 0.07em;
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
}

#stars_hp .page_service .service_main .service_main_title .p2 span {
  font-size: 27px;
  color: #fff;
  background: linear-gradient(to bottom, #0485EB 0%, #0E56D7 100%);
  border-radius: 10px;
  padding: 6px 25px;
}

#stars_hp .page_service .service_main .service_main_title .p3 {
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 0.07em;
  background: linear-gradient(to bottom, #00A0E6 0%, #008CDB 39%, #0063B6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;

}

#stars_hp .page_service .service_main .service_main_title .p4 {
  font-size: 22px;
  line-height: 50px;
  letter-spacing: 0.07em;
  font-weight: bold;
  border-bottom: 1px solid #070707;
  display: inline;
}

#stars_hp .page_service .service_main .service_list {
  display: flex;
  flex-direction: column;
  gap: 160px;
}

#stars_hp .page_service .service_main .service_list .service_item_box {
  border-radius: 80px;
  padding: 26.5px 0;
  position: relative;
}

#stars_hp .page_service .service_main .service_list .service_item_box::before {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 288px;
  height: 296px;
}

#stars_hp .page_service .service_main .service_list .service_item_box::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 320px;
  height: 320px;
  border-radius: 100%;
  opacity: 0.7;
  filter: blur(150px);
  z-index: 0;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1) {
  border: 4px solid #0E56D7;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2) {
  border: 4px solid #FF5002;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3) {
  border: 4px solid #00AF34;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4) {
  border: 4px solid #7532FF;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1)::before {
  right: -7px;
  border-bottom: 10px solid #0E56D7;
  border-right: 10px solid #0E56D7;
  border-radius: 0px 0px 80px 0px;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2)::before {
  left: -7px;
  border-bottom: 10px solid #FF5002;
  border-left: 10px solid #FF5002;
  border-radius: 0px 0px 0px 80px;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3)::before {
  right: -7px;
  border-bottom: 10px solid #00AF34;
  border-right: 10px solid #00AF34;
  border-radius: 0px 0px 80px 0px;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4)::before {
  left: -7px;
  border-bottom: 10px solid #7532FF;
  border-left: 10px solid #7532FF;
  border-radius: 0px 0px 0px 80px;
}


#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1)::after {
  right: -7px;
  background: #0E56D7;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2)::after {
  left: -7px;
  background: #FF5002;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3)::after {
  right: -7px;
  background: #00AF34;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4)::after {
  left: -7px;
  background: #7532FF;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item {
  border-radius: 70px;
  border: 1px solid #DFDFDF;
  width: 1100px;
  margin: 0 auto;
  padding: 70px 45px;
  display: flex;
  justify-content: center;
  gap: 45px;
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 4px 4px 12px 0 rgba(14, 86, 215, 0.20);
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(even) .service_item {
  flex-direction: row-reverse;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_img {
  width: 450px;
  height: 100%;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_icon {
  font-size: 22px;
  letter-spacing: 0.07em;
  line-height: 50px;
  font-weight: bold;
  color: #fff;
  border-radius: 10px;
  padding: 4px 20px;
  margin-bottom: 25px;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.17);
  display: inline-block;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1) .service_item .service_item_content .service_item_icon {
  background: linear-gradient(to bottom, #0485EB 0%, #0E56D7 100%);
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2) .service_item .service_item_content .service_item_icon {
  background: linear-gradient(to bottom, #FE7702 0%, #FF5002 100%);
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3) .service_item .service_item_content .service_item_icon {
  background: linear-gradient(to bottom, #00D640 0%, #00AF34 100%);
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4) .service_item .service_item_content .service_item_icon {
  background: linear-gradient(to bottom, #A87CFF 0%, #7532FF 100%);
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_title {
  font-size: 30px;
  letter-spacing: 0.1em;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 25px;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1) .service_item .service_item_content .service_item_title span {
  color: #0E56D7;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2) .service_item .service_item_content .service_item_title span {
  color: #FF5002;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3) .service_item .service_item_content .service_item_title span {
  color: #00AF34;
}

#stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4) .service_item .service_item_content .service_item_title span {
  color: #7532FF;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_text {
  font-size: 16px;
  letter-spacing: 0.07em;
  line-height: 35px;
  margin-bottom: 20px;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_button_box {
  display: flex;
  justify-content: center;
  align-self: start;
  gap: 20px;
}

#stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_button_box .service_item_button {
  width: 240px;
  height: 50px;
}

@media (max-width: 1280px) {
  #stars_hp .page_service .container {
    width: 95%;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item {
    width: 95%;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_img {
    width: 40%;
  }

  #stars_hp .page_service .service_main .service_main_title .p2 {
    flex-wrap: wrap;
  }
}


@media (max-width: 768px) {
  #stars_hp .page_service .fv {
    background: url(../img/service_fv_sp.png) no-repeat center center;
    background-size: cover;
    height: 94vw;
  }

  #stars_hp .page_service .container {
    width: calc(100% - 32px);
  }

  #stars_hp .page_service .service_main .service_main_title .p1 {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
  }

  #stars_hp .page_service .service_main .service_main_title .p2 {
    flex-wrap: wrap;
    font-size: 16px;
    line-height: 35px;
    letter-spacing: 0em;
    gap: 10px 8px;
    width: 300px;
    margin: 0px auto 10px;
  }

  #stars_hp .page_service .service_main .service_main_title .p2 span {
    font-size: 14px;
    padding: 0px 15px;
  }

  #stars_hp .page_service .service_main .service_main_title .p3 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 15px;
  }

  #stars_hp .page_service .service_main .service_main_title .p4 {
    font-size: 14px;
    line-height: 25px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item {
    flex-direction: column;
    width: 100%;
    border-radius: 35px;
    padding: 13px 11px 16px;
    gap: 20px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(even) .service_item {
    flex-direction: column;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_img {
    width: 100%;
    height: 179px;
    object-fit: cover;
    border-radius: 20px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1) .service_item .service_item_img {
    box-shadow: 2px 4px 7px rgba(14, 86, 215, 0.20);
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2) .service_item .service_item_img {
    box-shadow: 2px 4px 7px rgba(255, 80, 2, 0.20);
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3) .service_item .service_item_img {
    box-shadow: 2px 4px 7px rgba(0, 175, 52, 0.20);
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4) .service_item .service_item_img {
    box-shadow: 2px 4px 7px rgba(117, 50, 255, 0.20);
  }

  #stars_hp .page_service .service_main {
    padding: 77px 0 100px;
    background-size: 150%;
  }

  #stars_hp .page_service .service_main .service_main_title {
    padding: 29px 10px;
    margin-bottom: 87px;
    border-radius: 50px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box {
    border-radius: 35px;
    padding: 9px 9px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1) {
    border: 2px solid #0E56D7;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2) {
    border: 2px solid #FF5002;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3) {
    border: 2px solid #00AF34;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4) {
    border: 2px solid #7532FF;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_icon {
    font-size: 14px;
    line-height: 30px;
    padding: 4px 15px;
    margin-bottom: 19px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_title {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.07em;
    margin-bottom: 15px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_text {
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0em;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_button_box .service_item_button {
    width: 145px;
    height: 40px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box::before {
    width: 200px;
    height: 200px;
    bottom: -4px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(1)::before {
    right: -4px;
    border-bottom: 5px solid #0E56D7;
    border-right: 5px solid #0E56D7;
    border-radius: 0px 0px 40px 0px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(2)::before {
    left: -4px;
    border-bottom: 5px solid #FF5002;
    border-left: 5px solid #FF5002;
    border-radius: 0px 0px 0px 40px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(3)::before {
    right: -4px;
    border-bottom: 5px solid #00AF34;
    border-right: 5px solid #00AF34;
    border-radius: 0px 0px 40px 0px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box:nth-child(4)::before {
    left: -4px;
    border-bottom: 5px solid #7532FF;
    border-left: 5px solid #7532FF;
    border-radius: 0px 0px 0px 40px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box .service_item .service_item_content .service_item_button_box {
    gap: 10px;
  }

  #stars_hp .page_service .service_main .service_list {
    gap: 80px;
  }

  #stars_hp .page_service .service_main .service_list .service_item_box::after {
    width: 200px;
    height: 200px;
  }
}