/* SERVICE詳細ページ共通部品（PC版） */
:root {
  --svc-space-1: 12px;
  --svc-space-2: 24px;
  --svc-space-3: 36px;
  --svc-space-4: 48px;
  --svc-space-5: 60px;
}

.svc-inner {
  width: var(--site-width);
  margin-inline: auto;
}

.svc-card {
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 15px;
  padding: 32px 45px;
  max-width: 980px;
  margin: 44px auto 0;
}
.svc-card > h2:first-child { margin-top: 0; }
.svc-card-white {
  border-color: #FFFFFF;
  color: white;
  background: transparent;
}
.svc-card-black {
  border-color: #000000;
  background: transparent;
  padding: 32px 40px;
  flex: 0 0 40%;
}
.svc-card-black-fill { border-color: #000000; background: #FFFFFF; }

.svc-card-green-fill { border-color: #FFFFFF; background: var(--color-green); color: #FFFFFF; }

.svc-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border-radius: 7px;
  padding: 10px 16px;
  font-weight: 700;
  font-family: var(--font-heading);
}
.svc-pill p, .svc-pill h2 { margin: 0; font-size: 22px; line-height: 1.6em; }
.svc-pill-white { background: #FFFFFF; }
.svc-pill-green { background: var(--color-green); }
.svc-pill-red { background: var(--color-dark-red); }
.svc-pill-black { background: #000000; }
.svc-pill-navy { background: #0C2FA2; }

.svc-pill-row { display: flex; gap: 12px; margin: 12px 0 17px; flex-wrap: wrap; }
.svc-pill-row .svc-pill { flex: 1 1 260px; padding: 10px 6px; }

.svc-list {list-style: disc;padding-left: 1.5em;margin: 17px 0;font-size: 18px;line-height: 1.6em;display: inline-block;}
.svc-list li { margin-bottom: 0.15em; }

.svc-highlight { color: var(--color-dark-red); font-weight: 400; }

.svc-highlight-yellow { color: var(--color-bright-yellow); font-weight: 400; }
.svc-highlight-box-red { background-color: var(--color-dark-red); color: #FFFFFF; font-weight: 400; }
.svc-highlight-box-green { background-color: var(--color-green); color: #FFFFFF; font-weight: 400; }
.svc-highlight-box-black { background-color: #000000; color: #FFFFFF; font-weight: 400; }

.svc-bold { font-weight: 700; }

/* 街並み+スーパーマンのフライバイ（SERVICE詳細7ページ共通部品、PC版） */
.svc-town {
  position: relative;
  margin-top: 108px;
  height: 558px;
  overflow: hidden;
}
.svc-town__bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-town__divider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-image: var(--svg-diorama-green);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.svc-town__superman { position: absolute; }

.svc-town__frame {
  position: absolute;
  inset: 0;
  width: 1440px;
  margin-inline: auto;
}
.svc-town__superman-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 201px;
  height: auto;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}
.svc-town__superman-img--hover { opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; }
.svc-town__superman:hover .svc-town__superman-img--base { opacity: 0; visibility: hidden; }
.svc-town__superman:hover .svc-town__superman-img--hover { opacity: 1; visibility: visible; }

.svc-town__superman-img--framed { height: 125px; }

#hikari-superman-flyby, #itinfra-superman-flyby, #securitycamera-superman-flyby {
  top: 8px;
  width: 201px;
  height: 140px;
}

/* 旗見出し（.XXX-flag、SERVICE詳細7ページ共通、PC版） */
.hikari-flag, .bizphone-flag, .fkki-flag, .itinfra-flag, .netsec-flag, .svcam-flag, .server-flag {
  position: relative;
  width: 522px;
  height: 223px;
  margin: -100px 0 -50px;
  --motion-origin: -50%, 50%;
  --motion-origin-invert: 50%, -50%;
  --motion-rotate-z: -50deg;
  animation: motion-fadeIn 600ms 1ms cubic-bezier(0.47, 0, 0.745, 0.715) backwards 1 paused,
    motion-turnIn-precise 1000ms 1ms cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards 1 paused;
}
.hikari-flag__bg, .bizphone-flag__bg, .fkki-flag__bg, .itinfra-flag__bg, .netsec-flag__bg, .svcam-flag__bg, .server-flag__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 吹き出し（.XXX-bubble、SERVICE詳細7ページ共通、PC版） */
.hikari-bubble, .bizphone-bubble, .fkki-bubble, .itinfra-bubble, .netsec-bubble, .svcam-bubble, .server-bubble {
  position: absolute;
  box-sizing: border-box;
}
.hikari-bubble, .bizphone-bubble, .fkki-bubble, .netsec-bubble, .svcam-bubble, .server-bubble {
  --motion-scale: 0.8;
  animation: motion-fadeIn 1200ms 1ms linear backwards 1 paused,
    motion-expandIn 1200ms 1ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards 1 paused;
}
.hikari-bubble__bg, .bizphone-bubble__bg, .fkki-bubble__bg, .itinfra-bubble__bg, .netsec-bubble__bg, .svcam-bubble__bg, .server-bubble__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hikari-bubble__text, .bizphone-bubble__text, .fkki-bubble__text, .itinfra-bubble__text, .netsec-bubble__text, .svcam-bubble__text, .server-bubble__text {
  position: absolute;
  color: #0B176B;
  font-size: 19px;
  letter-spacing: -0.95px;
  line-height: 1.6em;
  text-align: center;
  margin: 0;
}