/*-------------------------------------紫宮るな*/
#shinomiya {
  background: url(../images/shinomiya/amai4.png) repeat-y top left / cover;
  overflow: hidden;
}

.shinomiya-top img {
  z-index: 1;
}

.shinomiya-top-text {
  background: transparent;
  border:35px solid transparent; 
  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewbox="0 0 120 120" stroke="%23888888" stroke-width="4" fill="%23ffffff"><path d="M 33 60 A 27 27 180 1 1 60 33 A 27 27 270 1 1 87 60 A 27 27 0 1 1 60 87 A 27 27 90 1 1 27 60"></path></svg>') 35 fill/40px round;
  width: 100%;
  position: relative;
}

.shinomiya-profile,
.shinomiya-tag,
.shinomiya-movie {
  background: transparent;
  border:35px solid transparent; 
  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewbox="0 0 120 120" stroke="%23888888" stroke-width="4" fill="%23ffffff"><path d="M 33 60 A 27 27 180 1 1 60 33 A 27 27 270 1 1 87 60 A 27 27 0 1 1 60 87 A 27 27 90 1 1 27 60"></path></svg>') 35 fill/40px round;
}

.shinomiya-top-text::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/shinomiya/band.png) no-repeat center center / contain;
  z-index: -1;
  opacity: 0.3;
}

.shinomiya-band {
  position: relative;
  width: 30vw;
}

.shinomiya-band::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(60deg);
  transform: translate(-50%, -50%) rotate(60deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 3rem;
  height: 2000rem;
  background: #fff;
  border: 5px solid #888888;
  animation: fadeIn 4s 1 forwards;
  will-change: transform;
}

@media screen and (max-width: 1025px) {
  .shinomiya-band {
    width: 40%;
  }
}

@media screen and (max-width: 769px) {
  .shinomiya-band {
    width: 50%;
  }
}

@media screen and (max-width: 426px) {
  .shinomiya-band {
    width: 100%;
  }
}