@charset "UTF-8";

.single .dp-page-head--deco {
  padding-bottom: var(--dp-s6);
}

.single .dp-page-head--deco {
  --dp-deco-size:  28rem;
  --dp-deco-top:   -8rem;
  --dp-deco-right: -10rem;
  --dp-deco2-x:     95%;
  --dp-deco2-y:     84%;
}

.dp-single__title { line-height: 1.4; }

.dp-single__meta {
  display: flex;
  gap: var(--dp-s4);
  margin-top: var(--dp-s5);
  color: var(--dp-mute);
  font-family: var(--dp-font-num);
  font-size: var(--wp--preset--font-size--sm);
}

.dp-single .dp-single__eyecatch {
  margin: 0 0 var(--dp-s7);
}

.dp-single__eyecatch .dp-single__eyecatch-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--dp-r-md);
}

.dp-related { margin-top: var(--dp-section); }

.dp-report {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  margin-bottom: var(--dp-s7);
  padding: var(--dp-s6);
  padding-left: 258px;
  border-radius: var(--dp-r-md);
  background: linear-gradient(115deg, var(--dp-accent-d) 0%, #0B2540 62%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dp-report--browser { padding-left: 330px; }

.dp-report--phone .dp-report__device {
  position: absolute;
  top: 26px;
  left: 40px;
  width: 186px;
  padding: 7px;
  border-radius: 28px;
  background: #1B1B1F;
  box-shadow: 0 14px 34px rgb(0 0 0 / .42), inset 0 0 0 1.5px #4A4A50;
}

.dp-report--browser .dp-report__device {
  position: absolute;
  top: 34px;
  left: 34px;
  width: 262px;
  padding: 22px 5px 5px;
  border-radius: 9px;
  background: #1B1B1F;
  box-shadow: 0 14px 34px rgb(0 0 0 / .42), inset 0 0 0 1.5px #4A4A50;
}

.dp-report .dp-report__bar {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  gap: 5px;
}

.dp-report .dp-report__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4A4A50;
}

.dp-report--phone .dp-report__island {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 2;
  width: 56px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 9px;
  background: #000;
}

.dp-report .dp-report__shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.dp-report--phone .dp-report__shot { border-radius: 22px; }
.dp-report--browser .dp-report__shot { border-radius: 4px; }

.dp-report .dp-report__label {
  margin: 0 0 var(--dp-s3);
  color: #7FD3E3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.dp-report .dp-report__name {
  margin: 0 0 .15em;
  color: #fff;
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  line-height: 1.2;
}

.dp-report .dp-report__domain {
  margin: 0 0 var(--dp-s4);
  color: #94ACBE;
  font-family: var(--dp-font-num);
  font-size: var(--wp--preset--font-size--sm);
}

.dp-report .dp-report__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-report .dp-report__tag {
  margin: 0;
  padding: 5px 11px;
  border-radius: var(--dp-r-sm);
  background: rgb(255 255 255 / .13);
  color: #DCE8EF;
  font-size: 12.5px;
  line-height: 1.5;
}

.dp-report .dp-report__tag::marker { content: ""; }

.dp-report .dp-report__tag--alert {
  background: var(--dp-alert);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 767px) {
  .dp-report {
    min-height: 210px;
    padding: var(--dp-s5);
    padding-left: 148px;
  }

  .dp-report--browser {
    display: block;
    min-height: 0;
    padding: var(--dp-s5);
  }

  .dp-report--browser .dp-report__device {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    margin: 0 auto var(--dp-s5);
  }

  .dp-report--phone .dp-report__device {
    top: 20px;
    left: 18px;
    width: 114px;
    padding: 5px;
    border-radius: 20px;
  }

  .dp-report--phone .dp-report__shot { border-radius: 16px; }
  .dp-report--browser .dp-report__shot { border-radius: 3px; }

  .dp-report--phone .dp-report__island {
    top: 11px;
    width: 36px;
    height: 11px;
    border-radius: 6px;
  }

  .dp-report .dp-report__bar {
    top: 6px;
    left: 7px;
    gap: 4px;
  }

  .dp-report .dp-report__dot {
    width: 5px;
    height: 5px;
  }

  .dp-report .dp-report__name {
    font-size: var(--wp--preset--font-size--xl);
  }
}