@charset "UTF-8";

#character {
   color: #001C68;
   font-weight: bold;
}
#character .description {
   border-bottom: 1px dashed #fff;
   color: #fff;
   text-align: center;
   margin-bottom: 2em;
   padding-bottom: 2em;
}
#character .chara_summary {
   margin: 0;
   padding: 1em;
   line-height: 1.75;
}
#character .chara_image {
   width: 48%;
   margin: 3em auto;
}
#character .name {
   width: 80%;
   margin: 0 auto 0.5em;
}
#character .cv {
   font-size: 1.4em;
   text-align: center;
   margin: 0 0 0.5em;
}


/* slider */
#character .slide {
   position: relative;
   margin: 0;
   padding: 0 0 1em 0;
   border-bottom: 1px dashed #fff;
}
#character .slide .item {
   position: relative;
   height: 100%;
}
#character .slide .item::before {
   display: block;
   /* padding-top: 100%; */
   content: "";
   position: relative;
   overflow: hidden;
   /* height: calc((100vw * 864) / 970); */
}
#character .slide .item img {
   /* position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0; */
   margin: auto;
   width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
   position: relative;
   margin: auto;
}

/* slide-navigation */
#character .slide-navigation {
   position: relative;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
#character .slide-navigation .item {
   position: relative;
   cursor: pointer;
   width: 14%;
   height: 100%;
   margin: 1%;
   padding: 0;
   list-style-type: none;
}
#character .slide-navigation .item::before {
   display: block;
   padding-top: 100%;
   content: "";
}
#character .slide-navigation .item img {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   width: 100%;
}
#character .slide-navigation .current::after {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   content: "";
   opacity: 0.5;
   background: #001C68;
   border-radius: 100%;
}


/* --------------------------------------
   　PC style	
-------------------------------------- */
@media screen and (min-width: 1200px) {
   #character .slide-navigation {
      width: 84%;
      margin: 0 auto 1em;
   }
   #character .slide-navigation .item {
      width: 100px;
      margin: 1%;
   }
   #character .description {
      font-size: 1.2em;
      margin-bottom: 3em;
      padding-bottom: 3em;
   }
   #character .profile {
      display: flex;
      justify-content: center;
   }
   #character .chara_image {
      width: 34%;
      margin: 3em 1em;
   }
   #character .info {
      width: 56%;
      margin: 5em 1em 0;
   }
   #character .chara_summary {
      text-align: center;
   }
   #character .name {
      width: 100%;
   }
   #character .slide {
      padding: 0;
   }
   
}