/* 既存のアイコン枠寸法を変えず、画像と文字フォールバックだけを切り替える。 */
.pkn-service-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pkn-service-icon__fallback {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: inherit;
  line-height: 1;
}

.pkn-service-icon__image {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
}

.pkn-service-icon.is-loaded .pkn-service-icon__image {
  opacity: 1;
}

/*
 * 画像読込後は、文字フォールバック用の色面・角丸マスクを無効化する。
 * 画面固有CSSの img 指定より確実に優先し、横長ロゴも枠全体の中央へ収める。
 */
.pkn-service-icon.is-loaded {
  overflow: visible !important;
  background: #fff !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.pkn-service-icon.is-loaded > .pkn-service-icon__image {
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.pkn-service-icon.is-loaded .pkn-service-icon__fallback {
  opacity: 0;
}

.pkn-service-icon.is-failed .pkn-service-icon__image {
  display: none;
}

.pkn-service-icon[data-service-icon-state="fallback"] .pkn-service-icon__fallback {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .pkn-service-icon__image {
    transition: opacity 80ms linear;
  }
}