#main_area {
  font-size: 1vw;
}
#main_area h1 {
  font-family: kumlien-pro, serif;
  font-style: normal;
  font-weight: 100;
  font-size: 1.5vw;
  letter-spacing: 0.2em;
}
#main_area h1 img {
  width: 2vw;
  margin-right: 0.5em;
  display: inline-block;
}
.area01 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: inline-block;
}
/*



#key_visual_area



*/
#key_visual_area {
  display: block;
}
#key_visual_area img {
  width: 100%;
}
#key_visual_area {
  display: block;
}
/*end #key_visual_area*/
/*


#catchcopy_area 


*/
#catchcopy_contents {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 95%;
  padding: 3.5% 0;
  font-family: monopin-j, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.1vw;
}
#catchcopy_contents img {
  margin-left: 4%;
  width: 30%;
}
#catchcopy_contents02 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 95%;
  padding: 3.5% 0;
  font-family: monopin-j, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.1vw;
}
#catchcopy_contents02 img {
  width: 100%;
}
.catchcopy {
  width: 148%;
  text-align: end;
}
.line {
  width: 17%;
  padding: 0 3%;
}
.catchcopy_date {
  width: 40%;
}
/*end #catchcopy_area */
/*



maininfo_area



*/
#maininfo_area {
  display: flex;
  flex-direction: column;
  padding: 3% 0 2.0%;
  background: #fafcf7;
}
#maininfo_area01 {
  width: 94%;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  font-size: 1.4vw;
}
#maininfo_item01 {
  display: flex;
  width: 100%;
}
.maininfo_item01-item01 {
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.maininfo_item01-item01 img {
  width: 0.6vw;
  margin-right: 1vw;
}
.maininfo_item01-item02 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: hiragino-mincho-pron, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.maininfo_item01-item02 .note {
  font-size: 48%;
  font-family: monopin-j, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2em;
}
#maininfo_item03 {
  display: flex;
  width: 70%;
  justify-content: space-between;
  padding: 0 3% 0 5%;
}
#maininfo_item03 {
  /*justify-content: center;*/
}
.maininfo_item03-item {
  width: 28%;
  margin-right: 0%;
}
.maininfo_item03-item:last-child {
  margin-right: 0%;
}
#maininfo_item03 img {
  width: 100%;
}
.maininfo_item03-item a {
  width: 100%;
}
#maininfo_area02 {
  width: 94%;
  margin: 2% auto 0;
}
#maininfo_item05, #maininfo_item04 {
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.1em;
}
/*



news_area



*/
#news_area {
  width: 93%;
  margin: 0 auto;
  display: flex;
  padding: 3% 0;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1vw;
}
#news_area h1 {
  margin-left: -1%;
  margin-bottom: 1%;
}
#news_area a {
  color: #231815;
}
#news_area ul {
  font-size: 0.9vw;
  letter-spacing: 0.4em;
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  width: 100%;
}
#news_area ul li {
  margin-bottom: 0.7%;
}
#news_area .date {
  position: relative;
  display: inline-block;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  margin-right: 3%;
}
.news_title {
  letter-spacing: 0.1em;
}
.news_item {
  display: inline;
  padding-bottom: 4px;
  position: relative;
}
.news_item::after {
  background-color: #231815;
  bottom: 0;
  content: '';
  display: inline-block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}
.news_item:hover::after {
  width: 98%;
}
.news_item:hover {
  opacity: 0.3;
}
.star {
  width: 1em;
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: -24%;
  margin-bottom: 3%;
  transition: .3s all;
  opacity: 0;
}
.star img {
  width: 100%;
}
.news_item:hover .star {
  display: inline-block;
  opacity: 1;
}
.news_more_area {
  margin-top: 3%;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.3em;
}
.black_belt {
  padding-left: 2%;
  padding-right: 40%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: inline-block;
}
.black_belt::after {
  background: #231815;
  position: absolute;
  margin-top: 4%;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 80%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.black_belt:hover {
  cursor: pointer;
  transition: 0.5s;
  color: #fff;
}
.black_belt:hover::after {
  transform: scale(1, 1);
}
/*end news_area*/
/*





*/
.bg_slide01 {
  width: 100%;
  padding-top: 24%;
  background-image: url("../../img/bg_anime01.jpg");
  background-size: cover;
  background-position: top center;
}
.fade-in .bg_slide01 {
  animation: bg_slide 40s linear;
  animation-fill-mode: forwards;
}
.fade-in .bg_slide02 {
  width: 100%;
  padding-top: 24%;
  background-image: url("../../img/bg_anime02.jpg");
  background-size: cover;
  background-position: top center;
}
.fade-in .bg_slide02 {
  animation: bg_slide 40s linear;
  animation-fill-mode: forwards;
}
@keyframes bg_slide {
  0% {
    background-position: left center;
  }
  50% {
    /* background-position: right center;*/
  }
  100% {
    /* background-position: left center;*/
    background-position: right center;
  }
}
/*



story_area



*/
#story_area {
  padding: 4% 0 5%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#story_area h1 {
  margin-bottom: 2%;
}
#story_contents {
  font-size: 0.7vw;
  width: 50%;
  margin: 0 auto;
}
#story_contents div {
  padding: 0.8% 0;
  text-align: center;
  border-bottom: 0.1em dotted #CCCCCC;
}
/*end story_area*/
/*



#gallery_area



*/
#gallery_area {
  background: #f5fbfc;
  padding: 2% 0;
}
#gallery_area .loop div {}
#gallery_area img {
  cursor: pointer;
  width: 100%;
}
#gallery_area img:hover {
  opacity: 0.5;
}
.slide01 {
  /*width: calc(100% / 2);*/
  min-width: 120%;
  display: flex;
}
.gallery-item01 {
  display: flex;
  width: 63%;
}
.gallery-item02 {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gallery-item03 {
  width: 32%;
}
.gallery-item04 {
  width: 21%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dammy_box01 {
  width: 2.5%;
  height: 100%;
}
.dammy_box02 {
  width: 2%;
  height: 100%;
}
.loop-slide {
  overflow: hidden;
}
.loop-slide > .loop {
  display: flex;
  animation: slide-to-left 40s linear infinite;
}
.loop-slide > .loop > * {
  /* min-width: calc(100% / 3);*/
}
@keyframes slide-to-left {
  100% {
    transform: translateX(-120%)
  }
}
/*end gllery_area*/
/*


chara_area



*/
#chara_area {
  padding: 5% 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
#chara_contents {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#chara_info_area {
  width: 94%;
  display: flex;
}
.chara_info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 3%;
  font-size: 0.8vw;
}
.chara_img_area {
  width: 100%;
}
.chara_img_area img {
  width: 100%;
}
.chara_text_area {
  width: 70%;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.chara_intro_area {
  font-size: 77%;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05em;
}
.chara_intro_area div {
  padding: 2.5% 0 1.5%;
  text-align: right;
  border-bottom: 0.1em dotted #CCCCCC;
}
.chara_name_area {
  font-weight: bold;
  font-size: 240%;
  margin-top: 19%;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.chara_cv_area {
  font-family: dnp-shuei-mincho-pr6, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: -5%;
  /* margin-right: 0.5em;*/
  font-size: 120%
}
.chara_cv_area span {
  display: inline;
  color: rgba(255, 255, 255, 1.00);
  background: #004c22;
  padding-left: 6%;
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: flex-start;
  height: 1.5rem;
  line-height: 1.18rem;
  height: 1.5em;
  line-height: 1.17em
}
#chara_select_area {
  width: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#chara_select_icon_area {
  width: 100%;
}
#chara_select_icon_area li {
  margin-bottom: 10%;
}
#chara_select_icon_area img {
  width: 100%;
}
#chara_select_text_area {
  font-weight: bold;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: yu-mincho-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 80%;
  padding-right: 2%;
}
.chara_select_text {
  line-height: 1.4em;
  width: 2.5em;
  display: flex;
  align-items: center;
}
.chara_select_text span {
  letter-spacing: -3px;
}
.chara_name_voice_area {
  display: flex;
  flex-direction: column;
}
.chara_ruby_area {
  font-family: dnp-shuei-mincho-pr6, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2em;
  margin-top: -2%;
}
.chara_ruby_area.no_cv {
  margin-top: -6%;
}
.sample_voice_btn_area {
  display: flex;
  justify-content: flex-end;
  font-size: 90%;
}
.chara_voice_area {
  display: flex;
  flex-direction: column;
  font-family: "m-plus-1c", sans-serif;
  font-weight: 100;
  font-style: normal;
  align-items: flex-end;
  margin-top: 4%;
  width: 100%;
}
.voice_btn {
  border: 1px solid #231815;
  margin-right: 16%;
  padding: 3% 32%;
}
.voice_btn:last-child {
  margin-right: 0%;
}
.sample_voice_deco01_area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  letter-spacing: 0.1em;
}
.sample_voice_deco01_img {
  width: 10%;
  margin-right: 4%;
}
.sample_voice_deco01_img img {
  width: 100%
}
.voice_black_belt {
  position: relative;
  z-index: 1;
}
.voice_black_belt::after {
  background: #231815;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.voice_black_belt:hover {
  cursor: pointer;
  transition: 0.5s;
  color: #fff;
}
.voice_black_belt:hover::after {
  transform: scale(1, 1);
}
/*2024-0424*/
#chara_contents {
  width: 60%;
}
#chara_select_area {
  width: 12%;
  flex-direction: row-reverse;
  align-items: flex-start;
  width: 12%;
}
#chara_select_text_area {
  width: 35%;
  margin-right: 26%;
  display: flex;
  align-items: center;
}
.chara08 .chara_name_area {
  letter-spacing: -0.2em;
}
/*end 2024-0424*/
/*end chara_area*/
/*



#movie_area



*/
#movie_area {
  position: relative;
  padding: 2% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
#movie_area h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 5%;
  text-align: center;
}
#movie_contents {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: 30vh;
}
#main_movie_area {
  width: 70%;
  /*margin-right: 5%;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
}
#main_movie_area img {
  width: 100%;
  margin-bottom: 3%;
}
ul#main_movie {
  width: 95%;
}
#main_movie li {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  letter-spacing: 0.2em;
}
#movie_slider_area li {
  background: #002106;
  margin-bottom: 10%;
}
#movie_slider_area li.slick-current {
  background: #fff;
}
#movie_slider_area {
  width: 30%;
}
#movie_slider_area img {
  width: 100%;
  opacity: 0.5;
  transition-duration: 1s;
}
#movie_slider_area li.slick-current img {
  opacity: 0.7;
  transition-duration: 1s;
}
.moive_item {
  position: relative;
}
.play_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#main_movie_area .play_btn img {
  width: 15%;
  transition: all 0.5s;
}
#main_movie_area .play_btn:hover img {
  transform: scale(1.1, 1.1);
}
#youtubewrap_area {
  display: none;
}
#youtube_area {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 50000;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
#youtube_close {
  line-height: 0.3em;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10vw;
  padding: 4%;
  color: rgba(255, 255, 255, 1.00);
  cursor: pointer;
  user-select: none;
}
#youtube {
  width: 60%;
  aspect-ratio: 16 / 9;
}
#youtube iframe {
  width: 100%;
  height: 100%;
}
/*



#spec_area



*/
#spec_area {
  background: #fafcf7;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 0.7vw;
  letter-spacing: 0.1em;
  padding: 4% 0;
}
#spec_contents {
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-top: 1.5%;
}
#spec_contents ul {
  width: 100%;
}
#spec_contents ul li {
  display: flex;
  border-bottom: 1px dotted #CCCCCC;
  padding: 1.5% 0;
}
#spec_contents ul li span {
  font-size: 90%;
}
.spec_head {
  width: 30%;
  text-align: left;
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.spec_head.ajast {}
.spec_head.ajast img {
  width: 80%;
}
.spec_contents {
  width: 70%;
  text-align: left;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
.spec_contents.ajast01 {
  padding-left: 2em;
}
.ajast .spec_head {
  width: 40%;
}
.ajast .spec_contents {
  width: 60%;
}
@media screen and (max-width: 800px) {
  #main_area h1 {
    font-size: 4vw;
  }
  #main_area h1 img {
    width: 4vw;
  }
  /*


【SP】#catchcopy_area 


*/
  #catchcopy_contents02 {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding-top: 5%;
    padding-bottom: 5%;
  }
  #catchcopy_contents02 img {
    width: 100%;
  }
  .catchcopy {
    width: 100%;
    text-align: center;
    font-size: 2.5vw;
    font-size: 3vw;
    margin-bottom: 3%;
  }
  .line {
    width: 17%;
    padding: 0 3%;
    margin-bottom: 3%
  }
  .catchcopy_date {
    width: 35%;
  }
  /*end #catchcopy_area */
  /*



【SP】#maininfo_area



*/
  #maininfo_area {
    padding: 6% 0;
  }
  #maininfo_area01 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #maininfo_item01 {
    display: flex;
    width: 83%;
    justify-content: space-between;
    margin-bottom: 4%;
    font-size: 4vw;
  }
  .maininfo_item01-item01 {
    width: 100%;
  }
  .maininfo_item01-item01 img {
    width: 1.3vw;
    width: 2.0vw;
  }
  #maininfo_item05 {
    text-align: center;
    width: 100%;
    margin-bottom: 5%;
    font-size: 2.5vw;
  }
  #maininfo_item03 {
    padding: 0 0 0 0;
    width: 80%;
  }
  .maininfo_item03-item {
    width: 30%;
    margin-right: 4%;
  }
  .maininfo_item01-item02 .note {
    font-size: 2vw;
  }
  .maininfo_item01-item02 b {
    line-height: 1.1em;
    margin-top: 5%;
  }
  /*



【SP】#news_area



*/
  #news_area {
    width: 80%;
    font-size: 2.5vw;
    padding: 7% 0;
  }
  #news_area a {
    display: flex;
  }
  #news_area ul {
    font-size: 2.5vw;
    margin-top: 2%;
  }
  #news_area ul li {
    margin-bottom: 1%;
  }
  .news_title {
    display: block;
    width: 100%;
  }
  .news_more_area {
    margin-top: -1%;
    font-size: 3.5vw;
    margin-top: 4%;
  }
  .news_item:hover .star {
    display: none;
  }
  /*



【SP】#story_area



*/
  #story_area {
    padding: 6% 0 8%;
  }
  #story_contents {
    font-size: max(2vw, 12px);
    width: 84%;
  }
  #story_contents .sp {
    display: block;
  }
  /*



【SP】#chara_content



*/
  ul#sp_chara_select_icon_area {
    padding: 4% 6% 4%;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
  }
  ul#sp_chara_select_icon_area li {
    width: 13%;
    margin-right: 3%;
    margin-bottom: 1.5%;
  }
  ul#sp_chara_select_icon_area li img {
    width: 100%;
  }
  #chara_contents {
    width: 80%;
    position: relative;
  }
  chara_img_area {
    width: 80%;
  }
  #chara_select_area {
    width: 10%;
    position: absolute;
    top: 0;
    right: 0;
  }
  #chara_select_text_area {
    line-height: 1.4em;
  }
  .chara_info {
    flex-direction: column;
    margin-right: 0%;
  }
  #chara_info_area {
    width: 100%;
  }
  .chara_text_area {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap-reverse;
  }
  .chara_intro_area {
    width: 100%;
    font-size: max(2vw, 12px);
  }
  .chara_intro_area .sp {
    display: block;
  }
  .chara_cv_area {
    font-size: max(3vw, 12px);
    margin-top: 0%;
    margin-right: 0.5em;
  }
  .chara_cv_area span {
    height: 1.8rem;
    line-height: 1.5rem;
    height: 1em;
    line-height: 0.7em;
    display: inline;
  }
  .chara_name_info_area {
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    /*margin-right: -5%;*/
  }
  .chara_intro_area div {
    text-align: center;
  }
  .chara_name_area {
    font-size: 639%;
    margin-bottom: -8%;
    font-size: 5.5vw;
  }
  .chara_name_area {
    margin-top: 0;
  }
  .chara_ruby_area {
    margin-top: -4%;
  }
  .chara_ruby_area.no_cv {
    margin-top: 0%;
  }
  #chara_select_text_area {
    font-size: max(2.5vw, 14px);
    padding-right: 4%;
  }
  .chara_name_voice_area {
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: 5%;
    width: 100%;
    font-size: max(3vw, 12px);
    align-items: flex-end;
  }
  .chara03 .chara_name_voice_area {
    /*	margin-top: 50%;*/
  }
  .chara_voice_area {
    width: 50%;
    justify-content: space-between;
    /* margin-top: 4.8%;*/
    margin-top: 0;
    margin-bottom: 0.6%;
  }
  .voice_btn {
    width: auto;
    margin-right: 3%;
    padding: 1% 8.5%;
  }
  .sample_voice_deco01_area {
    margin-right: 18%;
  }
  .voice_black_belt {
    /*overflow: hidden;*/
  }
  .sample_voice_btn_area {
    width: 100%;
  }
  /*2024-0424*/
  #chara_select_text_area {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -902%;
    height: 1000px;
  }
  /*end 2024-0424*/
  /*【SP】movie_area */
  #main_movie_area {
    font-size: 250%;
  }
  #youtube {
    width: 90%;
  }
  /*【SP】spec_area */
  #spec_area {
    font-size: max(0.7vw, 12px);
    padding: 6% 0 8%;
  }
  #spec_contents {
    display: flex;
    flex-direction: column;
  }
  .ajast {
    margin-bottom: 5%;
  }
  .spec_head {
    width: 36%;
    font-size: 85%;
  }
  .ajast .spec_head {
    width: 36%;
    font-size: 85%;
  }
  .spec_contents {
    width: 60%;
  }
  /*	
	
	
【SP】	#copyright_area



*/
  #copyright_area {
    font-size: 1.5vw;
  }
}