@charset "UTF-8";

.character {
  position: relative;
}

.character::after {
  background-image: url(../img/character/bg_pc.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
}

.character-head {

}

.character-logo {
  display: block;
  position: absolute;
  top: 1.976vw;
  left: 1.683vw;
  width: 14.494%;
}

.character-head-wrapper {
  margin: 0 auto;
  padding: 109px 0 56px;
  width: 68.667%;
}

.character-head-ttl {
  margin: 0 auto 95px;
  width: 77.931%;
}

.character-head-nav-item {
  display: block;
  margin-bottom: 16px;
}

.character-body {
  padding-bottom: 104px;
}

.character-body-container {
  margin: 0 auto 46px;
  width: 87.262%;
}

.character-body-container:last-child {
  margin-bottom: 0;
}

.character-body-container-headline {
  margin: 0 auto 8px;
}

.character-body-container.-main .character-body-container-headline {
  width: 42.953%;
}

.character-body-container.-kaito .character-body-container-headline {
  width: 42.953%;
}

.character-body-container.-people .character-body-container-headline {
  width: 36.192%;
}

.character-body-container.-keisatsu .character-body-container-headline {
  width: 40.352%;
}

.character-body-container.-cafe .character-body-container-headline {
  width: 40.352%;
}

.character-body-container-list-item {
  margin-bottom: 24px;
}


@media (min-width: 769px) {
  
  .character-head-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.705%;
    justify-content: center;
  }
  
  .character-head-nav-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    width: 32.196%;
  }

  .character-head-nav-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  }

  .character-body-container.-keisatsu .character-body-container-list-item:first-child {
    margin: 0 38.003% 24px;
  }

  .character-body-container-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.342%;
    justify-content: center;
  }
  
  .character-body-container-list-item {
    width: calc(100% / 4 - 1.342%);
  }
}

@media screen and (max-width: 768px) {

  .character {
  }
  
  .character::after {
    background-image: url(../img/character/bg_sp.jpg);
  }
  
  .character-head {
  }
  
  .character-logo {
    top: 3.733vw;
    left: 2.133vw;
    width: 27.2%;
  }
  
  .character-head-wrapper {
    padding: 36.266vw 0 12.266vw;
    width: 100%;
  }
  
  .character-head-ttl {
    margin: 0 auto 15.466vw;
    width: 90.4%;
  }

  .character-head-nav {
    margin: 0 auto;
    width: 77.6%;
  }
  
  .character-head-nav-item {
    margin-bottom: 2.666vw;
  }
  
  .character-body {
    padding-bottom: 15.466vw;
  }
  
  .character-body-container {
    margin: 0 auto 12.8vw;
    width: 100%;
  }
  
  .character-body-container-headline {
    margin: 0 auto 1.0066vw;
  }
  
  .character-body-container.-main .character-body-container-headline {
    width: 97.866%;
  }
  
  .character-body-container.-kaito .character-body-container-headline {
    width: 98.4%;
  }
  
  .character-body-container.-people .character-body-container-headline {
    width: 83.466%;
  }
  
  .character-body-container.-keisatsu .character-body-container-headline {
    width: 92.266%;
  }
  
  .character-body-container.-cafe .character-body-container-headline {
    width: 88%;
  }

  .character-body-container-list {
    margin: 0 auto;
    width: 85.6%;
  }
  
  .character-body-container-list-item {
    margin-bottom: 3.2vw;
  }

  .character-body-container-list-item:last-child {
    margin-bottom: 0;
  }

}