@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;600&display=swap');

/*==================================

 is2nd

==================================*/

/* ---------------------------------
 登場人物
--------------------------------- */
#character{
  margin-top: 16%;
  position: relative;
  z-index: 0;
}
#character::before{
  content: '';
  background-image: url(../images/common/bg_item_07.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 44.53%;
  position: absolute;
  top: -0.65%;
  left: 0;
  z-index: -1;
  /* transform: scale(-1, 1); */
}
#character .teaser-block-title{
  background-image: url(../images/character/tit_character.png);
  width: 100%;
  padding-top: 13.4666%;
}
#character .teaser-block-title p{
  position: relative;
  display: inline-block;
}
#character .teaser-block-inner{
  padding-top: 0;
}

/* キャラクター 共通 */
#character .teaser-block-inner ul li{
  display: flex;
  margin-top: 80px;
}
#character .teaser-block-inner ul li:first-child{
  margin-top: 60px;
}
#character .teaser-block-inner ul li .character_photo{
  width: 50%;
  padding-right: 40px;
  box-sizing: border-box;
}
#character .teaser-block-inner ul li .character_photo img{
  width: 100%;
}
#character .teaser-block-inner ul li .character_textarea{
  width: 50%;
}
#character .teaser-block-inner ul li .character_textarea .character_name{
  width: 100%;
  margin: 0 auto;
  padding-top: 19.4642%;
  position: relative;
  text-align: left;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
#character .teaser-block-inner ul li .character_textarea .character_text{
  margin: 30px 0;
  text-align: justify;
}
#character .teaser-block-inner ul li .character_textarea .character_btn{
  width: 96%;
}
#character .teaser-block-inner ul li .character_textarea .character_btn a:hover{
  transition: .2s;
}

/* キャラクター 個別設定 */
#character .teaser-block-inner ul li .character_textarea .character_name.chara01{
  background-image: url(../images/character/name_chara01_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara02{
  background-image: url(../images/character/name_chara02_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara03{
  background-image: url(../images/character/name_chara03_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara04{
  background-image: url(../images/character/name_chara04_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara05{
  background-image: url(../images/character/name_chara05_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara06{
  background-image: url(../images/character/name_chara06_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara07{
  background-image: url(../images/character/name_chara07_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara08{
  background-image: url(../images/character/name_chara08_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara09{
  background-image: url(../images/character/name_chara09_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara10{
  background-image: url(../images/character/name_chara10_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara11{
  background-image: url(../images/character/name_chara11_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara12{
  background-image: url(../images/character/name_chara12_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara13{
  background-image: url(../images/character/name_chara13_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara14{
  background-image: url(../images/character/name_chara14_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara15{
  background-image: url(../images/character/name_chara15_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara16{
  background-image: url(../images/character/name_chara16_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara17{
  background-image: url(../images/character/name_chara17_pc.png);
}
#character .teaser-block-inner ul li .character_textarea .character_name.chara18{
  background-image: url(../images/character/name_chara18_pc.png);
}

/* ---------------------------------
 PC
--------------------------------- */
@media screen and (min-width: 993px){
  #character{
    margin-top: 100px;
  }
  #character::before{
    top: -1.3%;
  }
  #character .teaser-block-title{
    padding-top: 82px;
  }
  #character .teaser-block-inner ul li{
    margin-top: 80px;
  }
  #character .teaser-block-inner ul li:first-child{
    margin-top: 60px;
  }
}

/* ---------------------------------
 SP
--------------------------------- */
@media screen and (max-width: 600px){
  
  /* キャラクター 共通 */
  #character .teaser-block-inner ul li{
    display: block;
    margin-top: 16%;
  }
  #character .teaser-block-inner ul li:first-child{
    margin-top: 16%;
  }
  #character .teaser-block-inner ul li .character_photo{
    width: 100%;
    padding: 0;
  }
  #character .teaser-block-inner ul li .character_textarea{
    width: 100%;
    margin-top: -26%;
  }
  #character .teaser-block-inner ul li .character_textarea .character_name{
    margin-left: -5.5%;
    background-size: 84%;
  }
  #character .teaser-block-inner ul li .character_textarea .character_text{
    margin: 12% 0 8%;
  }
  #character .teaser-block-inner ul li .character_textarea .character_btn{
    width: 80%;
    margin: 0 auto;
  }

  /* キャラクター 個別設定 */
  #character .teaser-block-inner ul li .character_textarea .character_name.chara01{
    background-image: url(../images/character/name_chara01.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara02{
    background-image: url(../images/character/name_chara02.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara03{
    background-image: url(../images/character/name_chara03.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara04{
    background-image: url(../images/character/name_chara04.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara05{
    background-image: url(../images/character/name_chara05.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara06{
    background-image: url(../images/character/name_chara06.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara07{
    background-image: url(../images/character/name_chara07.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara08{
    background-image: url(../images/character/name_chara08.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara09{
    background-image: url(../images/character/name_chara09.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara10{
    background-image: url(../images/character/name_chara10.png);
    background-size: 98%;
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara11{
    background-image: url(../images/character/name_chara11.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara12{
    background-image: url(../images/character/name_chara12.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara13{
    background-image: url(../images/character/name_chara13.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara14{
    background-image: url(../images/character/name_chara14.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara15{
    background-image: url(../images/character/name_chara15.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara16{
    background-image: url(../images/character/name_chara16.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara17{
    background-image: url(../images/character/name_chara17.png);
  }
  #character .teaser-block-inner ul li .character_textarea .character_name.chara18{
    background-image: url(../images/character/name_chara18.png);
  }

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