@charset "UTF-8";

.fs-character-heading{
  text-align: center;
}
.fs-character-heading span{
  display: inline-block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 767px){
  .fs-character-heading{
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .fs-character-heading span{
    background-image: url("../img/title-main-sp.png");
    width: 230px;
    height: 40px;
  }
  .fs-nav-local{
    margin-bottom: 40px;
  }
}
@media (min-width: 768px){
  .fs-character-heading{
    margin-top: 7.5vw;
    margin-bottom: 2.43vw;
  }
  .fs-character-heading span{
    background-image: url("../img/title-main.png");
    width: 615px;
    height: 99px;
  }
  .fs-nav-local{
    margin-bottom: 6.94vw;
  }
}
@media (min-width: 768px){
  .fs-character-heading span{
    width: 43vw;
    height: 7vw;
  }
}



/* BG image */
.fs-character-section{
  background-position: center top;
  background-repeat: no-repeat;
}
.fs-character-section-01{
  background-color: #e9edef;
}
.fs-character-section-02{
  background-color: #000;
}
.fs-character-section-03{
  background-color: #6c0000;
}
.fs-character-section-04{
  background-color: #000316;
}
.fs-character-section-05{
  background-color: #001810;
}
@media (max-width: 767px){
  .fs-character-section{
    background-size: 100% auto;
    padding-top: 542px;
    padding-bottom: 5.55vw;
  }
  .fs-character-section-01{
    background-image: url("../img/bg-01-sp.jpg");
  }
  .fs-character-section-02{
    background-image: url("../img/bg-02-sp.jpg");
  }
  .fs-character-section-03{
    background-image: url("../img/bg-03-sp.jpg");
  }
  .fs-character-section-04{
    background-image: url("../img/bg-04-sp.jpg");
  }
  .fs-character-section-05{
    background-image: url("../img/bg-05-sp.jpg");
  }
}
@media (min-width: 768px){
  .fs-character-section{
    background-size: 100% auto;
    padding-top: 18.88vw;
    padding-bottom: 5.55vw;
  }
  .fs-character-section-01{
    background-image: url("../img/bg-01.jpg");
  }
  .fs-character-section-02{
    background-image: url("../img/bg-02.jpg");
  }
  .fs-character-section-03{
    background-image: url("../img/bg-03.jpg");
  }
  .fs-character-section-04{
    background-image: url("../img/bg-04.jpg");
  }
  .fs-character-section-05{
    background-image: url("../img/bg-05.jpg");
  }
}



/* Text */
.fs-character-name{
  position: relative;
  font-weight: normal;
}
.fs-character-name::after{
  content: "";
  position: absolute;
  left: 0;
  display: block;
  background: url("../img/bg-name-border.png") 0 0 no-repeat;
  background-size: 100% 100%;
}
.fs-character-name span{
  display: block;
}
.fs-character-name span small{
  font-size: 75%;
}
@media (max-width: 767px){
  .fs-character-section-text{
    margin-bottom: 40px;
    font-size: 1.1rem;
  }
  .fs-character-name,
  .fs-character-desc{
    padding-left: 40px;
  }
  .fs-character-name{
    margin-bottom: 35px;
  }
  .fs-character-name::after{
    bottom: -22px;
    width: 300px;
    height: 7px;
  }
  .fs-character-name span{
    line-height: 1;
    font-size: 1.2rem;
  }
  .fs-character-name .fs-en{
    margin-bottom: 10px;
    font-size: 3.5rem;
    letter-spacing: .05em;
  }
}
@media (min-width: 768px){
  .fs-character-section .fs-container{
    display: flex;
  }
  .fs-character-section-02 .fs-container,
  .fs-character-section-04 .fs-container{
    justify-content: flex-end;
    padding-right: 40px;
  }
  .fs-character-section-text{
    height: 32.08vw;
    min-height: 400px;
    font-size: 1.6rem;
  }
  .fs-character-name,
  .fs-character-desc{
    padding-left: 80px;
  }
  .fs-character-name{
    margin-bottom: 65px;
    width: 413px;
  }
  .fs-character-name::after{
    bottom: -30px;
    width: 413px;
    height: 9px;
  }
  .fs-character-name span{
    line-height: 1;
    font-size: 1.6rem;
  }
  .fs-character-name .fs-en{
    margin-bottom: 10px;
    font-size: 6rem;
    letter-spacing: .05em;
  }
}
@media (min-width: 1200px){
  .fs-character-section-text{
    font-size: 1.18055556vw;
  }
  .fs-character-name,
  .fs-character-desc{
    padding-left: 6.5vw;
  }
  .fs-character-name{
    margin-bottom: 4.51388889vw;
    width: 40.97222222vw;
  }
  .fs-character-name::after{
    bottom: -2.8vw;
    width: 40vw;
    height: 1vw;
  }
  .fs-character-name span{
    font-size: 1.38888889vw;
  }
  .fs-character-name .fs-en{
    margin-bottom: 0.69444444vw;
    font-size: 4.16666667vw;
  }

  .fs-character-section-02 .fs-character-section-text,
  .fs-character-section-04 .fs-character-section-text{
    padding-left: 50%;
  }
}


/* Thumbnail List */
.fs-frame-thumbnail{
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
}
.fs-character-thumbnails{
  position: relative;
  z-index: 1;
}
.fs-character-thumbnails a{
  display: block;
}
.fs-character-thumbnails a img{
  transform-origin: center center;
  transition: transform .4s;
}
@media (max-width: 767px){
  .fs-character-thumbnails{
    padding-right: 15px;
    padding-left: 15px;
  }
  .fs-character-thumbnails a{
    margin-bottom: 20px;
  }
}
@media (min-width: 768px){
  .fs-character-thumbnails{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .fs-character-thumbnails .col-lg{
    margin-right: 1.5vw;
    flex-basis: 56.38vw;
    max-width: 56.38vw;
  }
  .fs-character-thumbnails .col-sm{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 26.32vw;
    max-width: 26.32vw;
  }
  .fs-character-thumbnails .col-lg a:hover img{
    transform: scale(1.02, 1.02);
  }
  .fs-character-thumbnails .col-sm a:hover img{
    transform: scale(1.04, 1.04);
  }
}