@charset "UTF-8";
body {
  font-family: dnp-shuei-mincho-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  background: #fff;
  font-size: 16px; }

/*
html,body { margin:0; height:100%; overflow-y:auto; }
iframe { width:100%; height:100%;  }
*/
.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.clearfix:before {
  　　　　content: "";
  display: block;
  clear: both; }

.clearfix {
  display: block; }

.wrapper {
  width: 100%;
  background: url("../img/bg.png") repeat-y;
  background-size: 100%;
  position: relative; }

.container {
  width: 100%;
  overflow: hidden;
  background: url("../img/bg_us.png") repeat-y;
  background-size: 100%;
  position: relative; }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none; }

.canvas_mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 100vw;
  height: 100vh;
  background: #fff; }

.movie_mask {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1200;
  width: 100%; }
  .movie_mask img {
    display: block;
    margin-top: -1px; }
  .movie_mask div {
    width: 100%;
    background: #fff;
    height: 100vh; }
    .movie_mask div img {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 98px);
      width: 195px;
      height: 101px; }
      @media (max-width: 750px) {
        .movie_mask div img {
          top: calc(50% - 38px);
          left: calc(50% - 75px);
          width: 150px;
          height: 78px; } }

.canvas_back {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2; }

input, button {
  outline: none; }

.def_anime {
  opacity: 0;
  transition: 1s; }

.def_anime2 {
  display: none; }

.def_anime3 {
  display: none; }

@keyframes def_show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.def_show {
  animation: def_show 0.7s ease-in 1;
  animation-name: def_show;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards; }

.bk_txt {
  position: absolute;
  top: 50px;
  right: 5px;
  transition: 1s; }
  .bk_txt img {
    width: 53vw;
    height: auto; }
  @media (max-width: 750px) {
    .bk_txt {
      top: 0;
      left: 0; }
      .bk_txt img {
        width: 66vw; } }

.bk_txt2 {
  position: absolute;
  top: 50px;
  right: 0; }
  .bk_txt2 img {
    width: 78vw;
    height: auto; }
  @media (max-width: 750px) {
    .bk_txt2 {
      left: 0;
      top: -5vw; }
      .bk_txt2 img {
        width: 92vw; } }

.bk_txt3 {
  position: absolute;
  bottom: -14px;
  left: 5px; }
  .bk_txt3 img {
    width: 90vw;
    height: auto; }
  @media (max-width: 750px) {
    .bk_txt3 {
      left: 0;
      bottom: -10px; }
      .bk_txt3 img {
        width: 96vw; } }

/*トップページ*/
header, section {
  position: relative;
  z-index: 10; }

.main_header {
  background: url("../img/top/main.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 0;
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden; }
  .main_header h1 {
    padding-top: 10px;
    position: absolute;
    top: 0;
    left: 62px;
    z-index: 10; }
    @media (max-width: 1335px) {
      .main_header h1 {
        left: 10px; } }
    @media (max-width: 750px) {
      .main_header h1 {
        padding-top: 0;
        position: absolute;
        left: 0; }
        .main_header h1 img {
          width: 150px;
          height: auto; } }
    @media (max-width: 370px) {
      .main_header h1 img {
        width: 120px; } }
  .main_header video {
    width: 114%;
    position: absolute;
    top: -15%;
    left: -7%; }
    @media (max-width: 1641px) {
      .main_header video {
        top: 0%; } }
    @media (max-width: 1420px) {
      .main_header video {
        width: 121%;
        left: -10%;
        top: 0; } }
    @media (max-width: 1396px) {
      .main_header video {
        width: 115%;
        left: -7%;
        top: -15%; } }
    @media (max-width: 750px) {
      .main_header video {
        width: 100%;
        left: 0;
        top: -8%; } }
  @media (max-width: 1650px) {
    .main_header {
      background-position: 28% 0; } }
  @media (max-width: 1396px) {
    .main_header {
      background-size: 100%;
      height: 46.1vw; } }

.sp_btm {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3; }

.movie_mg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; }

@media (max-width: 750px) {
  .head_bg_1 {
    background: url("../img/top/main_sp.png") no-repeat;
    background-size: 100%;
    height: 163vw; } }

@media (max-width: 750px) {
  .head_bg_2 {
    background: url("../img/top/main_sp2.png") no-repeat;
    background-size: 100%;
    height: 163vw; } }

.header_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }

.catch_pc {
  position: absolute;
  bottom: 15px;
  left: calc(50% - 555px);
  z-index: 0; }
  @media (max-width: 1396px) {
    .catch_pc {
      width: 720px;
      left: calc(50% - 370px);
      bottom: 30px; }
      .catch_pc img {
        width: 100%;
        height: auto; } }
  @media (max-width: 1024px) {
    .catch_pc {
      width: 70%;
      left: 15%;
      bottom: 30px; } }
  @media (max-width: 750px) {
    .catch_pc {
      display: none !important; } }

.head_bg_1 .catch_sp {
  opacity: 0;
  background: url("../img/top/catch_sp1.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 750px) {
    .head_bg_1 .catch_sp {
      opacity: 1;
      width: calc(100vw - 120px);
      height: 28vw;
      position: absolute;
      bottom: 39vw;
      left: 0; } }

.head_bg_2 .catch_sp {
  opacity: 0;
  background: url("../img/top/catch_sp2.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 750px) {
    .head_bg_2 .catch_sp {
      opacity: 1;
      width: calc(100vw - 120px);
      height: 28vw;
      position: absolute;
      bottom: 39vw;
      left: 0; } }

.top_menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 973px;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 486px);
  z-index: 100; }
  .top_menu a {
    display: block;
    position: relative; }
    .top_menu a .menu_on {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: .5s; }
    .top_menu a .menu_off {
      transition: .5s; }
    .top_menu a:hover .menu_on {
      opacity: 1; }
    .top_menu a:hover .menu_off {
      opacity: 0; }
  .top_menu p {
    display: block;
    position: relative;
    cursor: pointer; }
    .top_menu p .menu_on {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: .5s; }
    .top_menu p .menu_off {
      transition: .5s; }
    .top_menu p:hover .menu_on {
      opacity: 1; }
    .top_menu p:hover .menu_off {
      opacity: 0; }
  @media (max-width: 1024px) {
    .top_menu {
      left: 0;
      justify-content: center; }
      .top_menu div {
        margin: 0 10px; }
      .top_menu img {
        height: 62px;
        width: auto; } }
  @media (max-width: 750px) {
    .top_menu {
      display: none; } }

.head_us {
  padding: 20px 0; }
  @media (max-width: 750px) {
    .head_us {
      padding: 10px 0; } }

.menu_us {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 810px; }
  .menu_us a {
    display: block;
    position: relative; }
    .menu_us a .menu_on {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: .5s; }
    .menu_us a .menu_off {
      transition: .5s; }
    .menu_us a:hover .menu_on {
      opacity: 1; }
    .menu_us a:hover .menu_off {
      opacity: 0; }
  .menu_us p {
    display: block;
    position: relative;
    cursor: pointer; }
    .menu_us p .menu_on {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: .5s; }
    .menu_us p .menu_off {
      transition: .5s; }
    .menu_us p:hover .menu_on {
      opacity: 1; }
    .menu_us p:hover .menu_off {
      opacity: 0; }
  @media (max-width: 1024px) {
    .menu_us {
      left: 0;
      justify-content: center;
      max-width: 658px; }
      .menu_us div {
        margin: 0 10px; }
      .menu_us img {
        height: 62px;
        width: auto; } }
  @media (max-width: 750px) {
    .menu_us {
      display: none; } }

.head_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .head_flex h1 {
    margin-right: 3vw;
    cursor: pointer; }
    .head_flex h1 img {
      width: 150px;
      height: auto; }
  @media (max-width: 750px) {
    .head_flex {
      justify-content: flex-start; }
      .head_flex h1 {
        margin-top: -10px; } }

/*
.tweet_sp{
	display: none;
	@media (max-width: 450px) {
		display: block;
	}
}
*/
/*
.tweet_pc{
	@media (max-width: 450px) {
		iframe{
			width: 400px;
		}
	}
}
*/
.chara_sp_wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center; }
  .chara_sp_wrap img {
    width: calc(50% - 1px) !important;
    height: auto !important; }

.chara_sp_wrap2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center; }
  .chara_sp_wrap2 img {
    width: calc(33% - 1px) !important;
    height: auto !important;
    margin: 0 1px; }

.chara_sp_wrap3 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center; }
  .chara_sp_wrap3 img {
    width: calc(50% - 2px) !important;
    height: auto !important;
    margin: 0 1px; }

.chara_sp_wrap4 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center; }
  .chara_sp_wrap4 img {
    width: 50% !important;
    height: auto !important;
    margin: 0 1px;
    margin-top: 30vw; }

.first_mask {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  display: none; }
  .first_mask img {
    display: block;
    margin-top: -1px; }
  .first_mask div {
    width: 100%;
    background: #fff;
    height: 100vh; }
    .first_mask div img {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 98px);
      width: 195px;
      height: 101px; }
      @media (max-width: 750px) {
        .first_mask div img {
          top: calc(50% - 38px);
          left: calc(50% - 75px);
          width: 150px;
          height: 78px; } }

.page_change {
  position: fixed;
  bottom: 0;
  left: -100vw;
  z-index: 1200;
  width: 100%;
  transition: .5s;
  visibility: hidden; }
  .page_change img {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 98px); }
  .page_change div {
    width: 100%;
    background: #606482;
    height: 100vh; }

.page_change2 {
  position: fixed;
  bottom: 0;
  left: -100vw;
  z-index: 1200;
  width: 100%;
  transition: .5s;
  visibility: hidden; }
  .page_change2 img {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 98px); }
  .page_change2 div {
    width: 100%;
    background: #fff;
    height: 100vh; }

.page_trans {
  left: 0;
  visibility: visible; }

.page_show {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  transition: .5s; }
  .page_show img {
    display: block;
    margin-top: -1px; }
  .page_show div {
    width: 100%;
    background: #606482;
    height: 100vh; }
    .page_show div img {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 98px);
      width: 195px;
      height: 101px; }
      @media (max-width: 750px) {
        .page_show div img {
          position: absolute;
          top: calc(50% - 38px);
          left: calc(50% - 75px);
          width: 150px;
          height: 78px; } }

.page_trans2 {
  left: 100vw; }

.page_rev {
  transform: scale(-1); }

.menu_trig {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  background: url("../img/top/menu.png") no-repeat;
  background-size: 100%;
  width: 50px;
  height: 50px;
  display: none; }
  .menu_trig span {
    display: block;
    width: 28px;
    height: 1px;
    transition: .3s; }
    .menu_trig span:nth-of-type(1) {
      background: #F80000;
      position: absolute;
      top: 15px;
      left: 12px; }
    .menu_trig span:nth-of-type(2) {
      background: #fff;
      position: absolute;
      top: 25px;
      left: 12px; }
    .menu_trig span:nth-of-type(3) {
      background: #fff;
      position: absolute;
      top: 35px;
      left: 12px; }
  @media (max-width: 750px) {
    .menu_trig {
      display: block; } }

.open span:nth-of-type(1) {
  display: none; }
.open span:nth-of-type(2) {
  transform: rotate(45deg); }
.open span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 25px; }

.sp_menu {
  background: rgba(96, 100, 130, 0.95);
  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  overflow: hidden;
  transition: .5s;
  overflow-y: scroll; }
  .sp_menu h2 {
    text-align: center;
    margin: 5vw 0; }
    .sp_menu h2 img {
      max-width: 372px;
      width: 50%;
      height: auto; }
  .sp_menu h4 {
    text-align: center;
    margin: 20px 0; }
    .sp_menu h4 img {
      width: 100px;
      height: auto; }

.open_menu {
  height: 100vh; }

.list_wrap {
  width: 481px;
  margin: 0 auto; }
  @media (max-width: 610px) {
    .list_wrap {
      width: 81vw; } }
  .list_wrap a {
    display: inline-block;
    margin-bottom: 30px; }
    .list_wrap a img {
      width: 100%;
      height: auto; }
  .list_wrap p {
    display: inline-block;
    margin-bottom: 35px;
    position: relative; }
    .list_wrap p img {
      width: 100%;
      height: auto; }

.sp_menu_btm {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px; }
  .sp_menu_btm img {
    height: 30px;
    width: auto; }
  .sp_menu_btm a {
    margin: 0 20px; }

.pre_regist {
  display: block;
  position: absolute;
  top: 10px;
  right: 62px;
  cursor: pointer;
  width: 150px;
  height: 150px;
  z-index: 15; }
  .pre_regist img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    display: block; }
  @media (max-width: 1024px) {
    .pre_regist {
      right: 10px;
      width: 100px;
      height: 100px; }
      .pre_regist img {
        width: 100px;
        height: 100px; } }
  @media (max-width: 750px) {
    .pre_regist {
      top: inherit;
      bottom: 35vw;
      right: 10px; } }

.banner_regist {
  z-index: 10; }

.side_frame1 {
  background: url("../img/top/side_frame1.svg") no-repeat;
  background-size: 100%;
  width: 50px;
  height: 111px;
  position: fixed;
  top: 142px;
  right: 0;
  z-index: 100;
  text-align: center; }
  @media (max-width: 750px) {
    .side_frame1 {
      display: none !important; } }

.side_frame2 {
  background: url("../img/top/side_frame2.svg") no-repeat;
  background-size: 100%;
  width: 50px;
  height: 47px;
  position: fixed;
  top: 287px;
  z-index: 100;
  right: 0;
  text-align: center; }
  @media (max-width: 750px) {
    .side_frame2 {
      background: url("../img/top/side_frame2_sp.svg") no-repeat;
      background-size: 100%;
      top: 0;
      right: 55px;
      width: 50px;
      height: 50px; } }

.side_line1 {
  position: absolute;
  top: 10px;
  right: 0; }

.side_line2 {
  position: absolute;
  bottom: 10px;
  right: 0; }

.tit_bgm {
  position: absolute;
  top: 7px;
  right: 10px;
  width: 30px;
  height: auto; }

.btn_bgm, .btn_bgm_off {
  position: absolute;
  top: 22px;
  right: 8px; }

.btn_bgm_off {
  display: none; }

.tit_official {
  margin-top: 20px; }

.img_pc {
  display: block !important; }
  @media (max-width: 750px) {
    .img_pc {
      display: none !important; } }

.img_sp {
  display: none !important; }
  @media (max-width: 750px) {
    .img_sp {
      display: block !important; } }

.img_pc2 {
  display: block; }
  @media (max-width: 750px) {
    .img_pc2 {
      display: none; } }

.img_sp2 {
  display: none; }
  @media (max-width: 750px) {
    .img_sp2 {
      display: block; } }

.img_pc3 {
  display: block; }
  @media (max-width: 1024px) {
    .img_pc3 {
      display: none !important; } }

.img_sp3 {
  display: none !important; }
  @media (max-width: 1024px) {
    .img_sp3 {
      display: block !important; } }
  @media (max-width: 750px) {
    .img_sp3 {
      display: none !important; } }

.img_pc4 {
  display: block; }
  @media (max-width: 1024px) {
    .img_pc4 {
      display: none !important; } }

.img_sp4 {
  display: none; }
  @media (max-width: 1024px) {
    .img_sp4 {
      display: block !important; } }

.icon_youtube {
  margin-top: 5px;
  display: inline-block;
  transition: .3s; }
  @media (min-width: 750px) {
    .icon_youtube:hover {
      opacity: 0.7; } }

.icon_twitter {
  margin-top: 8px;
  display: inline-block;
  transition: .3s; }
  @media (min-width: 750px) {
    .icon_twitter:hover {
      opacity: 0.7; } }

.icon_off {
  margin-top: 21px;
  display: inline-block;
  transition: .3s; }
  @media (min-width: 750px) {
    .icon_off:hover {
      opacity: 0.7; } }

.audio_button {
  cursor: pointer; }

.banner_movie_on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s; }

.banner_slide {
  width: 17vw !important;
  height: 8vw !important;
  position: absolute !important;
  bottom: 153px;
  right: 5px;
  z-index: 15; }
  .banner_slide img {
    width: 100% !important;
    height: auto !important; }
  .banner_slide li {
    cursor: pointer; }
  .banner_slide .slick-slide {
    padding: 0; }

.banner_slide .slick-dots {
  margin-top: 0; }

.banner_slide .slick-dots li {
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  width: 10px !important;
  height: 10px !important;
  background: #191B2A;
  transform: rotate(45deg);
  margin: 0 6px; }

.banner_slide .slick-dots .slick-active {
  border: none !important;
  background: #C29C32; }

.banner_slide .slick-prev:before {
  content: url("../img/character/left.png"); }

.banner_slide .slick-next:before {
  content: url("../img/character/right.png"); }

.banner_slide .slick-prev {
  left: 0;
  z-index: 100; }

.banner_slide .slick-next {
  right: 0;
  z-index: 100; }

.banner_slide .slick-prev, .slick-next {
  top: 36%;
  width: 44px;
  height: 62px; }

.banner_slide .slider_team_name .slick-slide {
  padding: 10px 0 10px 10px; }

.banner_slide .slick-prev:before, .slick-next:before {
  opacity: 1; }

.banner_slide .slick-prev:hover {
  opacity: 1; }

.banner_slide .slick-next:hover {
  opacity: 1; }

@media (max-width: 1396px) {
  .banner_slide {
    bottom: 95px; } }
@media (max-width: 1130px) {
  .banner_slide {
    width: 15vw !important; } }
@media (max-width: 750px) {
  .banner_slide {
    display: none !important; } }
/*
.banner_movie{
	display: block;
	position: absolute;
	bottom: 156px;
	right: 5px;
	cursor: pointer;
	transition: .5s;
	z-index: 3;
	img{
		width: 17vw;
		height: auto;
		@media (max-width: 1130px) {
			width: 15vw;
		}
	}
	&:hover .banner_movie_on{
		@media (min-width: 750px) {
			opacity: 0.3;
		}
	}
	@media (max-width: 1335px) {
		bottom: 95px;
	}
	@media (max-width: 750px) {
		display: none;
	}
}
.banner_movie2{
	display: block;
	position: absolute;
	bottom: 156px;
	right: 5px;
	cursor: pointer;
	transition: .5s;
	z-index: 3;
	img{
		width: 17vw;
		height: auto;
		@media (max-width: 1130px) {
			width: 15vw;
		}
	}
	&:hover .banner_movie_on{
		@media (min-width: 750px) {
			opacity: 0.3;
		}
	}
	@media (max-width: 1335px) {
		bottom: 95px;
	}
	@media (max-width: 750px) {
		display: none;
	}
}
.banner_movie3{
	display: block;
	position: absolute;
	bottom: 156px;
	right: 5px;
	cursor: pointer;
	transition: .5s;
	z-index: 3;
	img{
		width: 17vw;
		height: auto;
		@media (max-width: 1130px) {
			width: 15vw;
		}
	}
	&:hover .banner_movie_on{
		@media (min-width: 750px) {
			opacity: 0.3;
		}
	}
	@media (max-width: 1335px) {
		bottom: 95px;
	}
	@media (max-width: 750px) {
		display: none;
	}
}
*/
.banner_movie_sp_wrap {
  width: 100%;
  position: relative;
  z-index: 20;
  min-height: 31vw;
  text-align: center; }
  .banner_movie_sp_wrap img {
    width: 100%;
    max-width: 500px;
    height: auto; }

.banner_slide2 {
  margin: 0 auto; }

.banner_slide2 .slick-dots {
  margin-top: -10px;
  padding: 5px 0 10px 0;
  background: white;
  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, white 100%);
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, white 100%); }

.banner_slide2 .slick-slide img {
  margin: 0 auto; }

.banner_slide2 .slick-dots li {
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  width: 15px !important;
  height: 15px !important;
  background: #191B2A;
  transform: rotate(45deg);
  margin: 0 8px; }

.banner_slide2 .slick-dots .slick-active {
  border: none !important;
  background: #C29C32; }

.banner_slide2 .slick-prev:before {
  content: url("../img/character/left.png"); }

.banner_slide2 .slick-next:before {
  content: url("../img/character/right.png"); }

.banner_slide2 .slick-prev {
  left: 0;
  z-index: 100; }

.banner_slide2 .slick-next {
  right: 0;
  z-index: 100; }

.banner_slide2 .slick-prev, .slick-next {
  top: 36%;
  width: 44px;
  height: 62px; }

.banner_slide2 .slider_team_name .slick-slide {
  padding: 10px 0 10px 10px; }

.banner_slide2 .slick-prev:before, .slick-next:before {
  opacity: 1; }

.banner_slide2 .slick-prev:hover {
  opacity: 1; }

.banner_slide2 .slick-next:hover {
  opacity: 1; }

/*
.banner_movie_sp{
	width: calc(100% - 20px);
	margin: -30vw auto 0 auto;
	position: relative;
	z-index: 20;
	min-height: 31vw;
	text-align: center;
	img{
		width: 100%;
		max-width: 500px;
		height: auto;
	}
}
.banner_movie_sp2{
	width: calc(100% - 20px);
	margin: -30vw auto 0 auto;
	position: relative;
	z-index: 20;
	min-height: 31vw;
	text-align: center;
	img{
		width: 100%;
		max-width: 500px;
		height: auto;
	}
}
.banner_movie_sp3{
	width: calc(100% - 20px);
	margin: -30vw auto 0 auto;
	position: relative;
	z-index: 20;
	min-height: 31vw;
	text-align: center;
	img{
		width: 100%;
		max-width: 500px;
		height: auto;
	}
}
*/
/*コンテンツ*/
.line_wrap {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 7s; }
  @media (max-width: 750px) {
    .line_wrap {
      transition: 5s;
      top: -15vw; } }

.sla {
  height: auto; }
  @media (max-width: 750px) {
    .sla {
      transform: scale(1.65);
      transform-origin: 50% 0; } }

.tit_off img {
  width: 7vw;
  max-width: 124px;
  height: auto; }
  @media (max-width: 750px) {
    .tit_off img {
      width: auto;
      height: 15vw;
      max-width: none;
      margin-bottom: 10px; } }

.campaign_area {
  padding: 150px 0;
  position: relative; }
  @media (max-width: 750px) {
    .campaign_area {
      padding: 15vw 0 10vw 0; } }

.campaign_in {
  width: calc(100% - 20px);
  max-width: 1448px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  z-index: 10; }

.content_flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 20px; }
  @media (max-width: 750px) {
    .content_flex {
      display: block; } }

.content_flex2 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 20px;
  align-items: flex-start; }
  @media (max-width: 1024px) {
    .content_flex2 {
      padding: 50px 0; } }
  @media (max-width: 750px) {
    .content_flex2 {
      display: block;
      padding: 5vw 0 0 0; } }

.campaign_tit {
  width: 80%;
  height: auto; }

.campaign_frame {
  display: inline-block;
  text-align: center;
  background: url("../img/top/campaign_frame.png") no-repeat;
  background-size: 100%;
  width: 53%;
  padding: 1.5vw 0;
  font-size: 25px;
  margin-top: 30px; }
  .campaign_frame p {
    margin-top: -21px; }
    @media (max-width: 750px) {
      .campaign_frame p {
        margin-top: -7px; } }
  .campaign_frame span {
    font-size: 40px; }
    @media (max-width: 1448px) {
      .campaign_frame span {
        font-size: 3vw; } }
  @media (max-width: 1448px) {
    .campaign_frame {
      font-size: 1.7vw; }
      .campaign_frame p {
        margin-top: -15px; } }
  @media (max-width: 1024px) {
    .campaign_frame p {
      margin-top: -11px; } }
  @media (max-width: 750px) {
    .campaign_frame {
      width: 100%;
      padding: 2.5vw 0;
      font-size: 4vw; }
      .campaign_frame span {
        font-size: 7vw; } }

.icon_clear {
  position: absolute;
  bottom: 5px;
  left: 58%;
  z-index: 10; }
  @media (max-width: 1335px) {
    .icon_clear {
      width: 28%;
      height: auto; } }

.icon_clear2 {
  position: absolute;
  bottom: 5px;
  left: 58%;
  z-index: 10; }
  @media (max-width: 1335px) {
    .icon_clear2 {
      width: 28%;
      height: auto; } }

.icon_clear3 {
  position: absolute;
  bottom: 5px;
  left: 58%;
  z-index: 10; }
  @media (max-width: 1335px) {
    .icon_clear3 {
      width: 28%;
      height: auto; } }

.icon_clear_sp1 {
  position: absolute;
  bottom: 1vw;
  left: 59%;
  width: 29%;
  height: auto;
  z-index: 10; }

.icon_clear_sp2 {
  position: absolute;
  bottom: 1vw;
  left: 59%;
  width: 29%;
  height: auto;
  z-index: 10; }

.icon_clear_sp3 {
  position: absolute;
  bottom: 1vw;
  left: 59%;
  width: 29%;
  height: auto;
  z-index: 10; }

.icon_clear_sp4 {
  position: absolute;
  bottom: 1vw;
  left: 59%;
  width: 29%;
  height: auto;
  z-index: 10; }

.icon_clear_sp5 {
  position: absolute;
  bottom: 1vw;
  left: 59%;
  width: 29%;
  height: auto;
  z-index: 10; }

.regist_area {
  width: calc(100% - 140px);
  max-width: 1180px;
  margin-left: 20px; }
  @media (max-width: 750px) {
    .regist_area {
      width: 100%;
      margin-left: 0; } }
  .regist_area h3 {
    margin-bottom: 20px;
    padding: 2vw 0;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    text-align: center; }
    .regist_area h3 img {
      margin: 0 auto; }
      @media (max-width: 750px) {
        .regist_area h3 img {
          width: 90%;
          height: auto; } }
  .regist_area h4 {
    text-align: center;
    padding: 2vw 0 1.5vw 0; }
    .regist_area h4 img {
      max-height: 31px;
      width: auto;
      height: 2.5vw; }
      @media (max-width: 750px) {
        .regist_area h4 img {
          height: 4.5vw;
          margin-bottom: 20px; } }
  .regist_area ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .regist_area ul li {
      list-style: none;
      margin: 0 10px;
      max-width: 272px;
      width: calc(25% - 20px); }
      .regist_area ul li img {
        width: 100%;
        max-width: 272px;
        height: auto; }
      .regist_area ul li a {
        position: relative;
        display: block; }
        @media (min-width: 750px) {
          .regist_area ul li a:hover .regist_on {
            opacity: 1; } }
      .regist_area ul li div {
        position: relative;
        display: block; }
        @media (min-width: 750px) {
          .regist_area ul li div:hover .regist_on {
            opacity: 1; } }

.mail_pop {
  cursor: pointer; }

.regist_btn_wrap {
  background: url("../img/top/campaign_linl_back.png") no-repeat;
  background-size: 100%;
  position: relative;
  height: 15vw;
  max-height: 208px; }

.regist_on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s; }

.campaign_notice {
  position: absolute;
  top: 2.3vw;
  right: 20px;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif; }
  .campaign_notice:hover {
    text-decoration: underline; }
  .campaign_notice img {
    height: 1.7vw;
    max-height: 17px;
    width: auto;
    margin-left: 5px; }
  @media (max-width: 1024px) {
    .campaign_notice {
      font-size: 13px; } }
  @media (max-width: 750px) {
    .campaign_notice {
      font-size: 14px; } }

.campaign_notice2 {
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; }
  .campaign_notice2 img {
    margin-left: 5px; }

.campaign_list {
  margin: 20px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center; }
  .campaign_list div {
    width: calc(50% - 20px);
    margin-bottom: 20px; }
    @media (max-width: 750px) {
      .campaign_list div {
        width: 100%;
        margin-bottom: 0; } }
    .campaign_list div:nth-of-type(9) {
      width: 100%; }
      .campaign_list div:nth-of-type(9) .last_img {
        max-width: 946px;
        height: auto;
        width: 100%;
        display: block;
        margin: 0 auto; }
      .campaign_list div:nth-of-type(9) .icon_clear3 {
        bottom: 30px;
        left: 72%; }
        @media (max-width: 1335px) {
          .campaign_list div:nth-of-type(9) .icon_clear3 {
            width: 15%; } }
  @media (max-width: 750px) {
    .campaign_list {
      margin: 20px auto; } }

.frame_on {
  display: block; }

.campaign_link_mid {
  background: url("../img/top/campaign_link_mid.png") repeat-y;
  background-size: 100%;
  width: calc(100% - 12vw);
  padding: 0 6vw; }

.social_regist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px; }
  .social_regist a:first-child {
    width: calc(55.16605166% - 2px); }
    .social_regist a:first-child img {
      height: auto;
      max-height: 89px;
      width: 100%;
      max-width: 299px; }
  .social_regist a:last-child {
    width: calc(44.833948339% - 2px);
    text-align: right; }
    .social_regist a:last-child img {
      height: auto;
      max-height: 89px;
      width: 100%;
      max-width: 243px; }

.regist_btn {
  margin-bottom: 10px;
  display: block; }

.news_area {
  padding: 0 0 100px 0;
  background: rgba(96, 100, 130, 0.78);
  position: relative; }
  @media (max-width: 750px) {
    .news_area {
      padding: 0 0 10vw 0;
      margin-top: 10vw; } }

.news_in {
  width: calc(100% - 20px);
  max-width: 1448px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  z-index: 10; }
  @media (max-width: 750px) {
    .news_in {
      padding: 0; } }

.news_content {
  width: calc(100% - 180px);
  max-width: 1180px;
  margin: 50px 0 80px 0;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  @media (max-width: 1024px) {
    .news_content {
      width: calc(100% - 120px); } }
  @media (max-width: 750px) {
    .news_content {
      width: 100%;
      margin: 5vw auto 10vw auto;
      padding: 0; } }

.news_bg1 {
  position: absolute;
  top: -50px;
  left: 0; }
  @media (max-width: 1024px) {
    .news_bg1 {
      width: 100%; } }
  @media (max-width: 750px) {
    .news_bg1 {
      top: -25px;
      width: 75%; } }

.news_sect {
  width: calc(25% - 5px);
  margin: 0 2px;
  font-family: 'Noto Sans JP', serif;
  font-weight: 400;
  background: #fff; }
  .news_sect img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0; }
  .news_sect a {
    display: block;
    text-decoration: none; }
    @media (min-width: 750px) {
      .news_sect a:hover img {
        transform: scale(1.1); } }
  @media (max-width: 750px) {
    .news_sect {
      width: calc(50% - 4px);
      margin-bottom: 4px; } }

.news_tit {
  background: #fff;
  padding: 10px 20px;
  line-height: 1.3em; }
  @media (max-width: 750px) {
    .news_tit {
      padding: 5px;
      font-size: 14px; } }

.news_img {
  position: relative;
  height: 0;
  padding-top: 56%;
  overflow: hidden;
  background: #000; }
  .news_img img {
    transition: .5s; }

.day {
  color: #F80000;
  position: relative;
  display: inline-block;
  margin-bottom: 10px; }
  .day:before {
    content: url("../img/top/day_before.png");
    position: absolute;
    top: -4px;
    left: -14px; }
  .day:after {
    content: url("../img/top/day_after.png");
    position: absolute;
    top: -4px;
    right: -14px; }
  @media (max-width: 750px) {
    .day {
      margin-left: 10px; } }

.tit {
  color: #000;
  font-size: 14px; }

.video_area {
  width: 100%;
  height: 32.96875vw;
  overflow: hidden;
  position: relative; }
  .video_area video {
    width: 100%;
    position: absolute;
    top: -9vw;
    left: 0; }

.movie_area {
  position: relative;
  margin: 100px 0;
  background: url("../img/top/movie_slide_back.png") no-repeat;
  background-size: cover;
  padding: 5vw 0 0 0;
  overflow: hidden; }
  @media (max-width: 750px) {
    .movie_area {
      padding: 30px 0 0 0; } }

.movie_back_on {
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100%; }

/*
.movie_trig1{
	display: block;
	position: absolute;
	top: calc(50% - 3.5vw);
	left: calc(50% - 3.5vw);
	z-index: 10;
	transition: .5s;
	max-width: 128px;
	width: 7vw;
	height: 7vw;
	cursor: pointer;
	img{
		width: 100%;
		height: auto;
	}
	@media (min-width: 750px) {
		&:hover{
			opacity: 0.8;
		}
		&:hover ~ .movie_back_on{
			opacity: 0;
		}

	}
	@media (max-width: 750px) {
		width: 20vw;
		height: 20vw;
		top: calc(50% - 10vw);
		left: calc(50% - 10vw);
	}
}
*/
.chara_area {
  background: url("../img/top/chara_bg.svg") no-repeat;
  background-size: cover;
  background-position: 0 0;
  margin-bottom: 100px;
  padding-bottom: 40px;
  overflow: hidden; }
  .chara_area h3 {
    padding-top: 20px; }
  @media (max-width: 750px) {
    .chara_area {
      background: url("../img/top/chara_bg_sp.svg") no-repeat;
      background-size: 100%;
      background-position: 0 0; } }

.chara_in {
  width: calc(100% - 20px);
  max-width: 1448px;
  margin: 0 auto;
  padding: 20px 10px 0 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }

.slider {
  width: calc(100% - 40px);
  margin: 0 auto; }
  .slider li {
    list-style: none; }
  @media (max-width: 750px) {
    .slider {
      display: none !important; } }

.slider2 {
  display: none !important; }
  .slider2 li {
    list-style: none; }
  @media (max-width: 750px) {
    .slider2 {
      display: block !important;
      position: relative; } }

.slider3 {
  width: calc(100% - 50px) !important;
  max-width: 450px;
  margin: 10px auto 0 auto;
  position: relative; }
  .slider3 li {
    padding-top: calc(6% - 25px) !important;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 5px; }
  .slider3 img {
    position: absolute;
    top: 0;
    left: 0; }

.current_off .slide_icon_on {
  display: none; }

.current_on .slide_icon_off {
  display: none; }

.slider_wrap {
  width: calc(100% - 140px);
  max-width: 1200px;
  margin-bottom: 50px;
  position: relative; }
  @media (max-width: 1024px) {
    .slider_wrap {
      width: calc(100% - 100px); } }
  @media (max-width: 750px) {
    .slider_wrap {
      width: 100%;
      margin-bottom: 0; } }

.team_name {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 10px 20px 20px 0; }
  .team_name img {
    width: auto !important;
    height: 7vw !important;
    max-height: 97px; }

.team_name_sp {
  width: 58vw;
  margin-bottom: 20px; }
  .team_name_sp img {
    width: 100%;
    height: auto; }

.chara_1 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start; }
  .chara_1 div {
    width: calc(25% - 5px) !important;
    position: relative; }
  .chara_1 img {
    width: 100%;
    height: auto; }

.chara_3 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start; }
  .chara_3 div {
    width: calc(25% - 5px) !important;
    position: relative;
    margin: 0 2px; }
  .chara_3 img {
    width: 100%;
    height: auto; }

.chara_4 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start; }
  .chara_4 div {
    width: calc(25% - 5px) !important;
    position: relative; }
  .chara_4 img {
    width: 100%;
    height: auto; }

.chara_5 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start; }
  .chara_5 div {
    width: calc(20% - 5px) !important;
    position: relative; }
  .chara_5 img {
    width: 100%;
    height: auto; }

.thum {
  position: absolute;
  top: 0;
  left: 0;
  transition: .6s;
  cursor: pointer; }
  @media (min-width: 750px) {
    .thum:hover {
      opacity: 0.7; } }

.thum_off {
  position: absolute;
  top: 0;
  left: 0;
  transition: .6s; }

.s_1, .s_2, .s_3, .s_4, .s_5, .s_6, .s_7, .s_8 {
  transition: 1s;
  padding: 0 30px; }
  @media (max-width: 750px) {
    .s_1, .s_2, .s_3, .s_4, .s_5, .s_6, .s_7, .s_8 {
      display: none; } }

.s_7 {
  width: calc(100% - 60px); }

.s_8 {
  width: calc(100% - 60px); }

.s_2, .s_3, .s_4, .s_5, .s_6, .s_7, .s_8 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  opacity: 0; }

.s1_sp, .s2_sp, .s3_sp, .s4_sp, .s5_sp, .s6_sp, .s7_sp, .s8_sp {
  transition: 1s; }

.s8_sp {
  width: 100%; }

.existence1, .existence2, .existence3, .existence4, .existence5, .existence6, .existence7, .existence8 {
  cursor: pointer; }

.disable:hover {
  transition: .5s;
  opacity: 0.6; }

.link7.disable:hover {
  opacity: 1 !important; }

.link8.disable:hover {
  opacity: 1 !important; }

.s2_sp, .s3_sp, .s4_sp, .s5_sp, .s6_sp, .s7_sp, .s8_sp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  opacity: 0; }

.link1 {
  background: url("../img/slider/team1.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link2 {
  background: url("../img/slider/team2.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link3 {
  background: url("../img/slider/team3.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link4 {
  background: url("../img/slider/team4.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link5 {
  background: url("../img/slider/team5.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link6 {
  background: url("../img/slider/team6.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link7 {
  background: url("../img/slider/team7.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link8 {
  background: url("../img/slider/team8.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link9 {
  background: url("../img/slider/team1.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link10 {
  background: url("../img/slider/team2.png") no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  overflow: hidden; }

.link11 {
  background: url("../img/slider/team3.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link12 {
  background: url("../img/slider/team4.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link13 {
  background: url("../img/slider/team5.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link14 {
  background: url("../img/slider/team6.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link15 {
  background: url("../img/slider/team7.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.link16 {
  background: url("../img/slider/team8.png") no-repeat;
  background-position: 100% 0;
  overflow: hidden; }

.active.link1 {
  border-top: 4px solid #606482; }

.active.link2 {
  border-top: 4px solid #F14B47; }

.active.link3 {
  border-top: 4px solid #FFF884; }

.active.link4 {
  border-top: 4px solid #2A51FA; }

.active.link5 {
  border-top: 4px solid #1E7990; }

.active.link6 {
  border-top: 4px solid #FFCBCD; }

.active.link7 {
  border-top: 4px solid #EF944B; }

.active.link8 {
  border-top: 4px solid #C1B6CD; }

.slick-dots li {
  border-top: 4px solid #929292;
  padding-top: 10px;
  width: calc(12% - 10px) !important;
  padding-top: calc(12% - 14px) !important; }
  @media (max-width: 1380px) {
    .slick-dots li {
      background-size: 200% calc(100% - 14px); } }
  @media (max-width: 750px) {
    .slick-dots li {
      width: calc(25% - 10px) !important;
      padding-top: calc(25% - 14px) !important; } }

.slick-dots .active {
  background-position: 0 0; }

.crt {
  border-top: 4px solid #F80000 !important;
  background-position: 0 0; }

.s_size {
  width: 20vw !important;
  height: 20vw !important;
  overflow: hidden;
  background-size: 200% 100%; }

.sys_area {
  background: url("../img/top/news_bg1.svg") no-repeat, url("../img/top/bg_sub.png");
  background-size: 42% auto, 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0 5vw 0; }
  .sys_area h3 {
    margin-top: 20px; }
  @media (max-width: 1024px) {
    .sys_area {
      height: auto;
      padding: 0 0 30px 0; } }
  @media (max-width: 750px) {
    .sys_area {
      background: url("../img/system/tri.png") no-repeat, url("../img/top/bg_sub_sp.png") no-repeat;
      background-size: 100% auto, 100%;
      background-position: 0 0, 0 10vw;
      padding: 0 0 10vw 0; } }

.mzero {
  margin-top: 0 !important; }

.soon {
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 240px); }
  @media (max-width: 750px) {
    .soon {
      width: 50vw;
      height: auto;
      top: calc(50% - 3vw);
      left: calc(50% - 25vw); } }

.tweet_area {
  padding: 7vw 0 0 0;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .tweet_area {
      margin-bottom: 10vw; } }

.tweet_wrap {
  width: 750px;
  margin: 5vw auto; }
  @media (max-width: 1024px) {
    .tweet_wrap {
      width: 640px; } }
  @media (max-width: 750px) {
    .tweet_wrap {
      width: calc(100% - 20px);
      margin: 10vw auto 5vw auto; } }

.tweet_frame_mid {
  width: 750px;
  background: url("../img/top/tweet_frame_mid.png") repeat-y;
  background-size: 100%; }
  @media (max-width: 1024px) {
    .tweet_frame_mid {
      width: 640px; } }
  @media (max-width: 750px) {
    .tweet_frame_mid {
      width: 100%;
      background: url("../img/top/tweet_frame_mid_sp.png") repeat-y;
      background-size: 100%; } }

@media (max-width: 1024px) {
  .tweet_frame_top.img_pc {
    width: 640px; } }

@media (max-width: 1024px) {
  .tweet_frame_btm.img_pc {
    width: 640px; } }

.w100 {
  width: 100%;
  height: auto; }

.tweet_frame_top .img_pc, .tweet_frame_btm .img_pc {
  display: block; }

.tweet_content {
  width: calc(100% - 30px);
  margin: 0 auto;
  height: 361px;
  overflow-y: scroll;
  border: 1px solid #191b2a; }
  @media (max-width: 750px) {
    .tweet_content {
      width: calc(100% - 4vw); } }

.campaign_in h3 {
  margin-top: 20px; }

.usual_area {
  width: calc(100% - 140px);
  max-width: 1200px; }
  @media (max-width: 750px) {
    .usual_area {
      width: 100%; } }

#modal1-error {
  margin: 20px 0;
  color: #f80807; }

.modal1 {
  background: url("../img/top/modal_bk.png") no-repeat;
  background-size: 100%;
  width: 976px;
  height: 485px;
  padding-top: 100px;
  position: fixed;
  top: calc(50% - 292px);
  left: calc(50% - 488px);
  z-index: 1000;
  text-align: center;
  display: none; }
  .modal1 p {
    line-height: 1.5em; }
  .modal1 h3 {
    text-align: center;
    margin-bottom: 30px; }
  .modal1 div {
    text-align: center; }
  .modal1 button {
    border: none;
    background: none;
    margin: 50px auto 30px auto;
    display: block; }
    @media (max-width: 750px) {
      .modal1 button {
        margin: 5vw auto; }
        .modal1 button img {
          max-width: 274px;
          height: auto; } }
  .modal1 .taC {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; }
    .modal1 .taC a {
      color: #f80807;
      text-decoration: none; }
      .modal1 .taC a:hover {
        text-decoration: underline; }
  @media (max-width: 1024px) {
    .modal1 {
      width: calc(100% - 60px);
      padding: 30px 20px;
      left: 10px; } }
  @media (max-width: 750px) {
    .modal1 {
      background: url("../img/top/modal_bk_sp.png") no-repeat;
      background-size: 100%;
      height: 104vw;
      top: 1vw;
      padding-top: 20vw;
      font-size: 14px; }
      .modal1 h3 {
        margin-bottom: 20px; }
      .modal1 h3 img {
        width: 80%;
        max-width: 370px;
        height: auto; }
      .modal1 p {
        margin-bottom: 0;
        line-height: 1.5em;
        text-align: left; } }

.modal2 {
  background: url("../img/top/modal_bk.png") no-repeat;
  background-size: 100%;
  width: 976px;
  height: 485px;
  padding-top: 100px;
  position: fixed;
  top: calc(50% - 292px);
  left: calc(50% - 488px);
  z-index: 1000;
  text-align: center;
  display: none; }
  .modal2 h3 {
    text-align: center;
    margin-bottom: 30px; }
  .modal2 p {
    margin-bottom: 30px;
    line-height: 1.8em; }
  @media (max-width: 1024px) {
    .modal2 {
      width: calc(100% - 60px);
      padding: 0 20px;
      left: 10px; } }
  @media (max-width: 750px) {
    .modal2 {
      background: url("../img/top/modal_bk_sp.png") no-repeat;
      background-size: 100%;
      height: calc(100vh - 23vw);
      top: 1vw;
      padding-top: 21vw;
      font-size: 14px; }
      .modal2 h3 {
        margin-bottom: 20px; }
      .modal2 h3 img {
        width: 80%;
        max-width: 370px;
        height: auto; }
      .modal2 p {
        margin-bottom: 20px;
        text-align: left; } }

.modal3 {
  background: url("../img/top/modal_bk.png") no-repeat;
  background-size: 100%;
  width: 976px;
  height: 485px;
  padding-top: 100px;
  position: fixed;
  top: calc(50% - 292px);
  left: calc(50% - 488px);
  z-index: 1000;
  text-align: center;
  display: none; }
  .modal3 h3 {
    text-align: center;
    margin-bottom: 30px; }
  .modal3 p {
    margin-bottom: 30px;
    line-height: 1.8em; }
  @media (max-width: 1024px) {
    .modal3 {
      width: calc(100% - 60px);
      padding: 0 20px;
      left: 10px; } }
  @media (max-width: 750px) {
    .modal3 {
      background: url("../img/top/modal_bk_sp.png") no-repeat;
      background-size: 100%;
      height: 104vw;
      top: 1vw;
      padding-top: 30vw;
      font-size: 14px; }
      .modal3 h3 {
        margin-bottom: 20px; }
      .modal3 h3 img {
        width: 80%;
        max-width: 370px;
        height: auto; }
      .modal3 p {
        margin-bottom: 20px;
        text-align: left; } }

.line_pop {
  cursor: pointer; }

.pop_movie {
  width: 1358px;
  height: 764px;
  position: fixed;
  top: calc(50% - 382px);
  left: calc(50% - 679px);
  z-index: 1100;
  display: none; }
  .pop_movie iframe {
    width: 1358px;
    height: 764px; }
  @media (max-width: 1376px) {
    .pop_movie {
      width: 900px;
      height: 422px;
      top: calc(50% - 211px);
      left: calc(50% - 450px); }
      .pop_movie iframe {
        width: 900px;
        height: 422px; } }
  @media (max-width: 1024px) {
    .pop_movie {
      width: calc(100% - 20px);
      height: auto;
      top: calc(50% - 27vw);
      left: 10px; }
      .pop_movie iframe {
        width: 100%;
        height: 54vw; } }

.cross {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -30px;
  right: 0;
  cursor: pointer; }
  .cross span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 13px;
    left: 0; }

.cross span:first-child {
  transform: rotate(45deg); }

.cross span:last-child {
  transform: rotate(-45deg); }

.br_hid {
  display: none; }
  @media (max-width: 750px) {
    .br_hid {
      display: inline; } }

.br_hid2 {
  display: inline; }
  @media (max-width: 750px) {
    .br_hid2 {
      display: none; } }

.checkbox01-parts {
  display: inline-block; }

.modal_flex {
  display: flex;
  justify-content: center;
  align-items: center; }
  .modal_flex div {
    margin: 0 30px;
    width: 361px; }
    .modal_flex div a {
      display: block;
      margin-top: 20px;
      transition: .3s; }
      .modal_flex div a:hover {
        opacity: 0.8; }
    @media (max-width: 750px) {
      .modal_flex div {
        width: 60%;
        margin: 0 10px; }
        .modal_flex div img {
          width: 100%;
          height: auto; }
        .modal_flex div a {
          margin-top: 10px; } }

.plush {
  margin-top: 30px; }
  @media (max-width: 1024px) {
    .plush {
      width: 100px;
      height: auto; } }
  @media (max-width: 750px) {
    .plush {
      width: 20%; } }

.modal_sp_flex {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.mail {
  width: 769px;
  padding: 10px;
  background: #fff;
  outline: none;
  border: 1px solid #929292;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px; }
  @media (max-width: 1024px) {
    .mail {
      width: 90%; } }

a {
  outline: none; }

.close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer; }
  @media (max-width: 1024px) {
    .close img {
      width: 65px;
      height: 65px; } }
  @media (max-width: 750px) {
    .close img {
      width: 50px;
      height: 50px; } }

input[type=checkbox] {
  width: 20px;
  height: 20px; }
  @media (max-width: 750px) {
    input[type=checkbox] {
      margin: 10px 0 0 0 !important; } }

/* IE */
input:-ms-input-placeholder {
  color: #929292; }

/* Edge */
input::-ms-input-placeholder {
  color: #929292; }

.staff_wrap {
  width: 100%;
  max-width: 1040px;
  margin: 100px auto; }
  @media (max-width: 750px) {
    .staff_wrap {
      font-size: 14px;
      margin: 5vw auto 10vw auto; } }

.staff_frame_top, .staff_frame_btm {
  display: block;
  width: 100%;
  height: auto; }

.staff_frame_mid {
  background: url("../img/top/staff_frame_mid.png") repeat-y;
  background-size: 100%;
  color: #fff;
  line-height: 1.8em;
  padding: 0 60px;
  letter-spacing: 1px; }
  @media (max-width: 1024px) {
    .staff_frame_mid {
      padding: 20px;
      letter-spacing: 1px; } }

.staff_tit {
  font-weight: normal;
  position: relative;
  display: inline-block;
  margin-bottom: 10px; }
  .staff_tit:before {
    content: url(../img/top/day_before.png);
    position: absolute;
    top: -4px;
    left: -14px; }
    @media (max-width: 750px) {
      .staff_tit:before {
        top: -2px; } }
  .staff_tit:after {
    content: url(../img/top/day_after.png);
    position: absolute;
    top: -4px;
    right: -14px; }
    @media (max-width: 750px) {
      .staff_tit:after {
        top: -2px; } }

.name_flex {
  word-break: break-word; }
  .name_flex span {
    font-size: 0.750em; }
    @media (max-width: 750px) {
      .name_flex span {
        font-size: 0.625em; } }

.staff_flex1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding-bottom: 50px; }
  .staff_flex1 div {
    margin: 0 50px; }
    @media (max-width: 750px) {
      .staff_flex1 div {
        margin: 0 5vw 5vw 5vw; } }
  @media (max-width: 750px) {
    .staff_flex1 {
      padding-bottom: 0; } }

.staff_flex2 {
  text-align: center;
  padding-bottom: 30px; }
  @media (max-width: 750px) {
    .staff_flex2 {
      padding-bottom: 5vw; } }

.share_wrap {
  text-align: center;
  margin-bottom: 50px; }
  .share_wrap h5 {
    margin-bottom: 20px; }

.share_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 10; }
  .share_flex a {
    display: block;
    margin: 0 10px;
    cursor: pointer; }
  @media (max-width: 750px) {
    .share_flex img {
      width: 40px;
      height: 40px; } }

.game_area {
  position: relative;
  padding: 70px 0 50px 0;
  background: url("../img/foot_stone.jpg") no-repeat; }
  .game_area h3 {
    margin: 0 auto 30px auto;
    text-align: center; }
    @media (max-width: 750px) {
      .game_area h3 {
        width: 70%;
        max-width: 150px;
        height: auto; }
        .game_area h3 img {
          max-width: 150px;
          height: auto; } }
  .game_area .game_dest {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto; }
    .game_area .game_dest p {
      margin-bottom: 20px;
      width: 223px; }
      .game_area .game_dest p:first-child {
        width: 100px; }
    .game_area .game_dest:nth-of-type(5) p {
      margin-bottom: 0; }
  @media (max-width: 750px) {
    .game_area {
      font-size: 4vw;
      padding: 50px 0 70px 0; }
      .game_area .game_dest {
        margin-left: 5vw; }
        .game_area .game_dest p {
          width: 65vw; }
          .game_area .game_dest p:first-child {
            width: 20vw; } }

.intro {
  text-align: center; }
  .intro img {
    margin: 0 auto; }
    @media (max-width: 750px) {
      .intro img {
        width: 75%;
        max-width: 575px;
        height: auto; } }

@media (max-width: 750px) {
  .f_pc {
    display: none; } }
.f_sp {
  display: none; }
  @media (max-width: 750px) {
    .f_sp {
      display: flex; } }

footer {
  position: relative;
  background: #191B2A;
  padding: 50px 0 0 0;
  color: #fff;
  text-align: center;
  z-index: 30; }
  footer div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px; }
    footer div a {
      margin: 0 10px; }
    footer div:last-child {
      margin-bottom: 0; }
  footer ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px; }
    footer ul li {
      margin: 0 20px;
      list-style: none;
      cursor: pointer; }
      @media (max-width: 1024px) {
        footer ul li {
          margin: 0 10px 20px 10px; } }
  footer a {
    color: #fff;
    text-decoration: none;
    transition: .5s; }
    @media (min-width: 750px) {
      footer a:hover {
        color: #9e9e9e; } }
  footer p {
    color: #fff;
    text-decoration: none;
    transition: .5s; }
    @media (min-width: 750px) {
      footer p:hover {
        color: #9e9e9e; } }

.none_link {
  color: #929292;
  cursor: default; }
  .none_link span {
    font-size: 10px; }

.link_top {
  position: fixed;
  right: 5px;
  z-index: 10;
  display: none;
  transition: 0s; }

.note {
  margin: 30px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; }

.logo_note {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.3em;
  font-size: 12px;
  color: #929292; }

.official {
  position: relative;
  display: inline-block;
  margin: 0 auto 20px auto;
  font-size: 13px; }
  .official:before {
    content: url(../img/top/day_before.png);
    position: absolute;
    top: -5px;
    left: -14px; }
  .official:after {
    content: url(../img/top/day_after.png);
    position: absolute;
    top: -5px;
    right: -14px; }

.copy_area {
  background: #fff;
  text-align: center;
  padding: 15px 0;
  color: #191b2a;
  margin-top: 30px; }

.story_wrap {
  background: url("../img/story/bg.png") no-repeat;
  background-size: cover;
  min-height: 57vw; }
  @media (max-width: 750px) {
    .story_wrap {
      background: url("../img/story/bg_sp.png") no-repeat;
      background-size: cover;
      min-height: 250vw;
      padding: 0 10px; } }

.page_tit_pc {
  text-align: center;
  margin: 0 auto 50px auto;
  padding-top: 50px; }
  @media (max-width: 1400px) {
    .page_tit_pc {
      margin: 0 auto 30px auto; }
      .page_tit_pc img {
        height: auto; } }
  @media (max-width: 750px) {
    .page_tit_pc {
      display: none; } }

.page_tit_pc_val {
  text-align: center;
  margin: 0 auto 50px auto;
  padding-top: 5vw; }
  @media (max-width: 1400px) {
    .page_tit_pc_val {
      margin: 0 auto 3vw auto; }
      .page_tit_pc_val img {
        width: 30vw;
        height: auto; } }
  @media (max-width: 750px) {
    .page_tit_pc_val {
      display: none; } }

.page_tit_sp {
  display: none; }
  @media (max-width: 750px) {
    .page_tit_sp {
      display: block;
      text-align: center;
      width: calc(100% - 60px);
      margin: 5vw auto; }
      .page_tit_sp img {
        width: 100%;
        height: auto;
        max-width: 463px; } }

.text_wrap {
  padding: 0; }
  .text_wrap img {
    margin: 0 auto 1vw auto;
    width: 48vw;
    height: auto;
    max-width: 878px; }
    @media (max-width: 750px) {
      .text_wrap img {
        width: 90%;
        max-width: 627px;
        height: auto;
        margin: 0 auto;
        padding-bottom: 5vw; } }
  @media (max-width: 750px) {
    .text_wrap {
      padding-top: 10vw; } }

.text1, .text2, .text3 {
  display: none; }

.team_wrap {
  max-width: 1400px;
  width: calc(100% - 100px);
  padding: 0 50px;
  margin: 115px auto 150px auto;
  position: relative; }
  @media (max-width: 750px) {
    .team_wrap {
      width: 100%;
      padding: 0;
      margin: 10vw auto 15vw auto; } }

.slider_name_wrap {
  width: 1510px;
  max-width: 100%;
  position: absolute;
  top: -35px;
  right: 0;
  z-index: -1; }
  @media (max-width: 750px) {
    .slider_name_wrap {
      display: none; } }

.group_wrap_kathariste {
  background: url("../img/character/kathariste/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_kathariste {
      background: url("../img/character/kathariste/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_uk {
  background: url("../img/character/uk/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_uk {
      background: url("../img/character/uk/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_america {
  background: url("../img/character/america/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_america {
      background: url("../img/character/america/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_france {
  background: url("../img/character/france/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_france {
      background: url("../img/character/france/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_german {
  background: url("../img/character/german/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_german {
      background: url("../img/character/german/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_japan {
  background: url("../img/character/japan/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_japan {
      background: url("../img/character/japan/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_austria {
  background: url("../img/character/austria/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_austria {
      background: url("../img/character/austria/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_wrap_belgium {
  background: url("../img/character/belgium/back.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 100px; }
  @media (max-width: 750px) {
    .group_wrap_belgium {
      background: url("../img/character/belgium/back_sp.png") no-repeat;
      background-size: cover;
      padding-bottom: 15vw;
      margin-bottom: 0; } }

.group_inner {
  max-width: 1127px;
  width: calc(100% - 40px);
  padding: 0 20px;
  margin: 0 auto; }
  .group_inner h4 {
    margin: 0 0 20px 0;
    padding-top: 30px; }
  .group_inner h4 img {
    width: 765px;
    height: auto; }
    @media (max-width: 750px) {
      .group_inner h4 img {
        width: 100%;
        height: auto; } }

.chara_sect {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px; }
  .chara_sect a {
    width: calc(25% - 2px);
    display: block; }
    @media (max-width: 750px) {
      .chara_sect a {
        width: calc(50% - 2px);
        display: block; } }
  .chara_sect p {
    width: calc(25% - 2px);
    display: block; }
    @media (max-width: 750px) {
      .chara_sect p {
        width: calc(50% - 2px);
        display: block; } }
  .chara_sect img {
    width: 100%;
    height: auto; }

.chara_sect3 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px; }
  .chara_sect3 a {
    width: calc(25% - 1px);
    display: block; }
    @media (max-width: 750px) {
      .chara_sect3 a {
        width: calc(50% - 2px);
        display: block; } }
  .chara_sect3 p {
    width: calc(25% - 1px);
    display: block;
    margin: 0 1px; }
    @media (max-width: 750px) {
      .chara_sect3 p {
        width: calc(50% - 2px);
        display: block; } }
    @media (max-width: 750px) {
      .chara_sect3 p:nth-of-type(1) {
        margin: 0 20px; } }
  .chara_sect3 img {
    width: 100%;
    height: auto; }

.chara_sect5 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px; }
  .chara_sect5 a {
    width: calc(20% - 2px);
    display: block; }
    @media (max-width: 750px) {
      .chara_sect5 a {
        width: calc(50% - 2px);
        display: block; } }
  .chara_sect5 p {
    width: calc(20% - 2px);
    display: block; }
    @media (max-width: 750px) {
      .chara_sect5 p {
        width: calc(33% - 2px);
        display: block;
        margin: 0 1px; } }
  .chara_sect5 img {
    width: 100%;
    height: auto; }
  @media (max-width: 750px) {
    .chara_sect5 {
      justify-content: center; } }

.btn_opc {
  transition: .5s;
  cursor: pointer;
  display: block; }
  @media (min-width: 750px) {
    .btn_opc:hover {
      opacity: 0.5; } }

.chara_btn_wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start; }
  @media (max-width: 750px) {
    .chara_btn_wrap {
      justify-content: center; } }

.point {
  cursor: pointer; }

@media (max-width: 750px) {
  .btn_opc {
    display: none; } }

.btn_opc_sp {
  display: none; }
  @media (max-width: 750px) {
    .btn_opc_sp {
      display: inline-block;
      padding: 20px 0; }
      .btn_opc_sp img {
        width: 80px;
        height: auto; } }

.diagram_pop {
  max-width: 1100px;
  width: 1056px;
  position: fixed;
  top: calc(50% - 430px);
  left: calc(50% - 528px);
  z-index: 1200;
  text-align: center;
  display: none; }
  .diagram_pop h4 {
    margin-bottom: 30px; }
  @media (max-height: 860px) {
    .diagram_pop {
      width: 800px;
      left: calc(50% - 400px);
      top: calc(50% - 326px); }
      .diagram_pop .diagram {
        width: 800px;
        height: auto; } }
  @media (max-width: 1250px) {
    .diagram_pop {
      width: 960px;
      top: 0;
      left: calc(50% - 480px); }
      .diagram_pop .diagram {
        width: 960px;
        height: auto; } }
  @media (max-width: 1024px) {
    .diagram_pop {
      width: calc(100% - 40px);
      left: 20px;
      top: 50px; }
      .diagram_pop .diagram {
        width: 100%; } }
  @media (max-width: 750px) {
    .diagram_pop {
      width: calc(100% - 20px);
      left: 10px; } }

.chara_detail {
  width: 100%;
  overflow: hidden; }

.bg_team1 {
  background: url("../img/character/kathariste/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team1 {
      background: url("../img/character/kathariste/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team1 {
      margin-top: -10px; } }

.bg_team2 {
  background: url("../img/character/uk/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team2 {
      background: url("../img/character/uk/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team2 {
      margin-top: -10px; } }

.bg_team3 {
  background: url("../img/character/america/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team3 {
      background: url("../img/character/america/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team3 {
      margin-top: -10px; } }

.bg_team4 {
  background: url("../img/character/france/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team4 {
      background: url("../img/character/france/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team4 {
      margin-top: -10px; } }

.bg_team5 {
  background: url("../img/character/german/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team5 {
      background: url("../img/character/german/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team5 {
      margin-top: -10px; } }

.bg_team6 {
  background: url("../img/character/japan/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team6 {
      background: url("../img/character/japan/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team6 {
      margin-top: -10px; } }

.bg_team7 {
  background: url("../img/character/austria/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team7 {
      background: url("../img/character/austria/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team7 {
      margin-top: -10px; } }

.bg_team8 {
  background: url("../img/character/belgium/chara_bg.png") no-repeat;
  background-size: cover; }
  @media (max-width: 1024px) {
    .bg_team8 {
      background: url("../img/character/belgium/chara_bg_sp.png") no-repeat;
      background-size: 100%; } }
  @media (max-width: 750px) {
    .bg_team8 {
      margin-top: -10px; } }

.chara_slide1 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 0 auto; }

.chara_slide_team1 {
  background: url("../img/character/kathariste/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team1 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team1 {
      background: none; } }

.chara_slide_team2 {
  background: url("../img/character/uk/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team2 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team2 {
      background: none; } }

.chara_slide_team3 {
  background: url("../img/character/america/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team3 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team3 {
      background: none; } }

.chara_slide_team4 {
  background: url("../img/character/france/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team4 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team4 {
      background: none; } }

.chara_slide_team4_sub {
  background: url("../img/character/france/chara_back_sub.png") no-repeat;
  background-size: 100%;
  height: 678px; }
  @media (max-width: 1250px) {
    .chara_slide_team4_sub {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team4_sub {
      background: none;
      height: auto; } }

.chara_slide_team5 {
  background: url("../img/character/german/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team5 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team5 {
      background: none; } }

.chara_slide_team5_sub {
  background: url("../img/character/german/chara_back_sub.png") no-repeat;
  background-size: 100%;
  height: 678px; }
  @media (max-width: 1250px) {
    .chara_slide_team5_sub {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team5_sub {
      background: none;
      height: auto; } }

.chara_slide_team6 {
  background: url("../img/character/japan/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team6 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team6 {
      background: none; } }

.chara_slide_team6_sub {
  background: url("../img/character/japan/chara_back_sub.png") no-repeat;
  background-size: 100%;
  height: 678px; }
  @media (max-width: 1250px) {
    .chara_slide_team6_sub {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team6_sub {
      background: none;
      height: auto; } }

.chara_slide_team7 {
  background: url("../img/character/austria/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team7 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team7 {
      background: none; } }

.chara_slide_team8 {
  background: url("../img/character/belgium/chara_back.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 1250px) {
    .chara_slide_team8 {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team8 {
      background: none; } }

.chara_slide_team8_sub {
  background: url("../img/character/belgium/chara_back_sub.png") no-repeat;
  background-size: 100%;
  height: 678px; }
  @media (max-width: 1250px) {
    .chara_slide_team8_sub {
      background-size: cover; } }
  @media (max-width: 1024px) {
    .chara_slide_team8_sub {
      background: none;
      height: auto; } }

.chara_whole {
  position: relative;
  width: 53%; }
  @media (max-width: 1024px) {
    .chara_whole {
      width: 100%; } }

.chara_img {
  position: absolute;
  top: -302px;
  left: -220px; }
  @media (max-width: 1024px) {
    .chara_img {
      display: none !important; } }

.chara_anime {
  position: absolute;
  top: -254px;
  left: -137px;
  display: none;
  transform: scale(1.19); }
  .chara_anime img {
    width: 100% !important;
    max-width: 900px !important;
    height: auto; }
  @media (max-width: 1024px) {
    .chara_anime {
      position: static;
      height: 165vw;
      width: 120% !important;
      margin-left: -2%;
      transform: scale(1.13); }
      .chara_anime img {
        max-width: 700px !important; } }
  @media (max-width: 650px) {
    .chara_anime {
      margin-left: -7%; } }
  .chara_anime div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
    height: 100%; }

.chara_img_sp {
  display: none; }
  @media (max-width: 1024px) {
    .chara_img_sp {
      display: flex;
      max-width: 800px;
      height: 112vw;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: flex-end; }
      .chara_img_sp img {
        width: 100% !important;
        max-width: 700px !important;
        justify-content: center;
        height: auto; } }
  @media (max-width: 750px) {
    .chara_img_sp {
      width: 120% !important;
      margin-left: -7%;
      height: 165vw; } }

.chara_dest_txt {
  height: 245px;
  overflow: hidden; }
  .chara_dest_txt h4 img {
    width: 100% !important; }
  .chara_dest_txt img {
    height: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  @media (max-width: 1024px) {
    .chara_dest_txt {
      display: none; } }

.chara_dest_txt_sp {
  display: none; }
  @media (max-width: 1024px) {
    .chara_dest_txt_sp {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% - 40px);
      background: rgba(255, 255, 255, 0.8);
      padding: 10px 20px; } }
  .chara_dest_txt_sp h4 {
    margin-bottom: 20px; }
  .chara_dest_txt_sp h4 img {
    margin: 0 auto;
    width: 100%;
    max-width: 492px; }

.chara_spec {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 30px; }
  @media (max-width: 1024px) {
    .chara_spec {
      display: block;
      padding: 0 10px; } }

.chara_right {
  width: 486px;
  position: relative;
  z-index: 10; }
  .chara_right h4 {
    margin-bottom: 10px; }
    @media (max-width: 1150px) {
      .chara_right h4 img {
        width: 100% !important;
        height: auto; } }
  @media (max-width: 1150px) {
    .chara_right {
      width: calc(47% - 15px); } }
  @media (max-width: 1024px) {
    .chara_right {
      width: 100%;
      margin-bottom: 20px; } }

.cv_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 10px;
  min-height: 66px; }
  .cv_flex div img {
    margin-bottom: 10px; }
  @media (max-width: 1024px) {
    .cv_flex {
      margin: 0 auto;
      width: 100%;
      max-width: 492px; }
      .cv_flex img {
        width: 100% !important;
        height: auto !important; } }
  @media (max-width: 750px) {
    .cv_flex {
      min-height: inherit; } }

.slick-slide .point {
  transition: .5s; }

.slick-slide .point:hover {
  opacity: 0.7; }

.team_dis {
  margin: 0 0 10px auto !important; }

.chara_serif {
  display: block;
  margin-bottom: 20px; }
  .chara_serif img {
    margin: 0 auto;
    width: 100% !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-width: 486px; }

.chara_serif_sp {
  display: none !important; }
  @media (max-width: 1024px) {
    .chara_serif_sp {
      display: block !important;
      position: absolute;
      top: 38vw;
      left: 12vw;
      width: 19vw !important;
      height: auto !important;
      max-width: 140px; } }

.spec_tab {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-end; }
  @media (max-width: 520px) {
    .spec_tab {
      justify-content: center;
      margin-left: 0; } }
  .spec_tab li {
    list-style: none;
    cursor: pointer; }
    @media (max-width: 520px) {
      .spec_tab li {
        margin-left: inherit;
        width: calc(50% - 2px) !important; } }
  .spec_tab li:nth-of-type(2) {
    margin-left: 5px; }
  @media (max-width: 520px) {
    .spec_tab img {
      width: 100% !important;
      max-width: 195px;
      height: auto !important; } }

.spec_tab2 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-left: 10px; }
  @media (max-width: 520px) {
    .spec_tab2 {
      justify-content: center;
      margin-left: 0; } }
  .spec_tab2 li {
    list-style: none;
    cursor: pointer;
    margin-left: 5px; }
    @media (max-width: 520px) {
      .spec_tab2 li {
        margin-left: inherit;
        width: calc(50% - 2px) !important; } }
  @media (max-width: 520px) {
    .spec_tab2 img {
      width: 100% !important;
      max-width: 195px;
      height: auto !important; } }

@media (max-width: 520px) {
  .tab2 {
    margin-left: 4px !important; } }

.spec_frame {
  border: 1px solid #000;
  padding: 15px 15px;
  font-weight: 700;
  line-height: 1.4em;
  position: relative;
  height: 290px;
  background: #fff; }
  @media (max-width: 1150px) {
    .spec_frame {
      font-size: 14px; } }
  @media (max-width: 750px) {
    .spec_frame {
      height: auto;
      min-height: 0;
      padding: 10px; } }

.gun_frame {
  display: none;
  border: 1px solid #000;
  padding: 10px 15px;
  font-weight: 700;
  line-height: 1.4em;
  position: relative;
  height: 300px;
  background: #fff; }
  @media (max-width: 1150px) {
    .gun_frame {
      font-size: 14px; } }
  .gun_frame p {
    position: relative; }

.intro_txt {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5em; }
  @media (max-width: 480px) {
    .intro_txt {
      font-size: 3.5vw; } }

.gun_txt {
  opacity: 0;
  position: absolute;
  padding: 20px 15px;
  top: 0;
  left: 0;
  transition: .1s;
  font-size: 15px;
  line-height: 1.5em; }
  .gun_txt img {
    width: 70% !important;
    height: auto !important;
    margin: 0 auto 20px auto;
    max-width: 512px; }
    @media (max-width: 1024px) {
      .gun_txt img {
        width: 100% !important;
        margin: 0 auto 10px auto; } }
  @media (max-width: 480px) {
    .gun_txt {
      font-size: 3.5vw; } }

@media (max-width: 488px) {
  .add_h .gun_txt {
    font-size: 3vw !important; } }
@media (max-width: 450px) {
  .add_h .gun_txt {
    font-size: 3.1vw !important; } }

.spec_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: calc(100% - 25px); }
  @media (max-width: 750px) {
    .spec_flex {
      position: static;
      width: 100%; } }
  @media (max-width: 480px) {
    .spec_flex {
      font-size: 3.3vw; } }

.tall {
  width: calc(49% - 10px);
  padding-left: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .tall span {
    position: absolute;
    top: 0;
    left: 10px; }

.hobby {
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .hobby span {
    position: absolute;
    top: 0;
    left: 10px; }

.tall2 {
  width: calc(30% - 2px);
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .tall2 span {
    position: absolute;
    top: 0;
    left: 10px; }
  @media (max-width: 500px) {
    .tall2 {
      width: 100%; } }

.hobby2 {
  width: calc(70% - 5px);
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .hobby2 span {
    position: absolute;
    top: 0;
    left: 10px; }
  @media (max-width: 500px) {
    .hobby2 {
      width: 100%; } }

.tall3 {
  width: calc(40% - 2px);
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .tall3 span {
    position: absolute;
    top: 0;
    left: 10px; }
  @media (max-width: 500px) {
    .tall3 {
      width: 100%; } }

.hobby3 {
  width: calc(60% - 5px);
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 6px;
  position: relative;
  transition: .1s; }
  .hobby3 span {
    position: absolute;
    top: 0;
    left: 10px; }
  @media (max-width: 500px) {
    .hobby3 {
      width: 100%; } }

.like {
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid #707070;
  text-align: center;
  line-height: 1.2em;
  position: relative; }
  .like span {
    position: absolute;
    top: 0;
    left: 10px; }
  @media (max-width: 420px) {
    .like {
      padding-left: 10px; } }

.voice_wrap {
  position: absolute;
  bottom: -10px;
  right: 10px;
  text-align: center; }
  .voice_wrap .audio {
    margin-bottom: 10px;
    transition: .5s;
    cursor: pointer;
    position: relative; }
    .voice_wrap .audio img {
      margin: 0 auto; }
      @media (max-width: 1024px) {
        .voice_wrap .audio img {
          width: 50px;
          height: 50px; } }
    .voice_wrap .audio:nth-of-type(1) {
      margin-top: 10px; }
  @media (max-width: 1024px) {
    .voice_wrap {
      bottom: 0; } }
  @media (max-width: 750px) {
    .voice_wrap {
      right: 0; } }

@media (max-width: 750px) {
  .icon_voice {
    width: 60px !important;
    height: auto !important; } }

.audio_btn2 {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto; }
  @media (max-width: 1024px) {
    .audio_btn2 {
      width: 50px;
      height: 50px; } }
  @media (min-width: 750px) {
    .audio_btn2:hover .voice_on {
      opacity: 1; } }

.voice_on {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  opacity: 0;
  transition: .5s; }

.pause_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  display: none; }

.icon_live2d {
  position: absolute;
  bottom: 10px;
  left: -30px;
  transition: .5s;
  cursor: pointer; }
  @media (min-width: 750px) {
    .icon_live2d:hover {
      opacity: 0.7; } }
  @media (max-width: 1024px) {
    .icon_live2d {
      bottom: 43px;
      left: 0; } }
  @media (max-width: 750px) {
    .icon_live2d {
      width: 70px !important;
      height: 70px !important;
      left: 0; }
      .icon_live2d img {
        width: 70px !important;
        height: 70px !important; } }

.icon_illust {
  position: absolute;
  top: 0;
  left: 0;
  display: none; }

.back_chara {
  display: none; }
  @media (max-width: 1024px) {
    .back_chara {
      display: block;
      position: absolute;
      bottom: 16px;
      left: 0; }
      .back_chara img {
        width: 70px !important; } }

.c_on {
  cursor: pointer;
  transition: .5s; }
  @media (min-width: 750px) {
    .c_on:hover {
      opacity: 0.7; } }

.slicks-prev {
  left: -57px;
  z-index: 100; }
  @media (max-width: 1350px) {
    .slicks-prev {
      left: 10px; } }

.slicks-next {
  right: -57px;
  z-index: 100; }
  @media (max-width: 1350px) {
    .slicks-next {
      right: 10px; } }

.slicks-prev, .slicks-next {
  top: 50%;
  position: absolute;
  transition: .5s;
  cursor: pointer; }
  @media (min-width: 750px) {
    .slicks-prev:hover, .slicks-next:hover {
      opacity: 0.7; } }

@media (max-width: 750px) {
  .slicks-prev {
    z-index: 100;
    transform: scale(0.6); }

  .slicks-next {
    z-index: 100;
    transform: scale(0.6); }

  .slicks-prev, .slicks-next {
    top: calc(160vw - 300px); } }
.slide_btm {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative; }
  @media (max-width: 1024px) {
    .slide_btm {
      display: none; } }

.slide_btm_pos {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 24px;
  left: 0;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start; }
  .slide_btm_pos ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap; }
    .slide_btm_pos ul li {
      list-style: none;
      margin-left: 10px; }
      .slide_btm_pos ul li p {
        position: relative; }
  @media (max-width: 1024px) {
    .slide_btm_pos {
      position: static; } }

.slide_logo_on:hover .team_on {
  opacity: 1; }

.team_on {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slider_foot {
  width: 100%;
  max-width: 485px;
  margin-right: -38px; }

.slider_foot img {
  width: 100% !important;
  max-width: 76px; }

.foot_slide_flex {
  display: none; }
  @media (max-width: 1024px) {
    .foot_slide_flex {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 30px; }
      .foot_slide_flex li {
        padding: 0 2px !important; } }

.sound {
  display: none; }

.special_area {
  max-width: 1200px;
  width: calc(100% - 100px);
  padding: 0 50px;
  margin: 100px auto 150px auto;
  position: relative; }

.cat_flex {
  border-bottom: 1px solid #000; }

.cat_on {
  background: #191B2A;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 184px;
  width: 15%;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px; }

.cat_off {
  background: #E1E1E3;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 184px;
  width: 15%;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px; }

.btn_wrap {
  margin: 0 auto; }
  .btn_wrap:after {
    border: 6px solid #656565;
    width: 200px;
    height: 50px; }

.btn01 {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 266px;
  height: 70px;
  cursor: pointer; }
  .btn01 .btn_regist_txt {
    position: absolute;
    top: 23px;
    left: calc(50% - 50px);
    z-index: 20; }
  .btn01 .btn_more {
    position: absolute;
    top: 26px;
    left: calc(50% - 38px);
    z-index: 20; }
  .btn01 .btn_arrow {
    position: absolute;
    top: 31px;
    right: 10px;
    z-index: 20; }
  .btn01 .btn_main {
    width: 266px;
    height: 70px;
    background: #000;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .btn01 .btn_frame {
    width: 252px;
    height: 56px;
    border: 4px solid #c29c32;
    position: absolute;
    bottom: -10px;
    right: -10px; }
  .btn01:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #c29c32;
    content: '';
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: 15; }
  @media (min-width: 750px) {
    .btn01:hover:before {
      right: inherit;
      left: 0;
      width: 100%; } }
  @media (max-width: 750px) {
    .btn01 {
      max-width: 274px;
      width: 38.5vw;
      height: auto; }
      .btn01 img {
        max-width: 274px;
        width: 100%;
        height: auto; } }

.check_no {
  display: block !important; }

.check_no:before {
  background-color: rgba(0, 0, 0, 0); }

.check_no .btn_main {
  background: #888 !important; }

.check_no .btn_frame {
  border: 4px solid #888 !important; }

.btn_regist_pop {
  display: none; }

.btn02 {
  display: block;
  position: relative;
  margin: 0 auto 50px auto;
  width: 512px;
  height: 78px;
  z-index: 10;
  cursor: pointer; }
  .btn02 .btn_youtube {
    position: absolute;
    top: 32px;
    left: calc(50% - 127px);
    z-index: 20; }
  .btn02 .btn_page {
    position: absolute;
    top: 29px;
    right: 10px;
    z-index: 20; }
  .btn02 .btn_main {
    width: 512px;
    height: 78px;
    background: #E1E1E3;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .btn02 .btn_frame {
    width: 498px;
    height: 64px;
    border: 4px solid #c29c32;
    position: absolute;
    bottom: -10px;
    right: -10px; }
  .btn02:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #c29c32;
    content: '';
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: 15; }
  @media (min-width: 750px) {
    .btn02:hover:before {
      right: inherit;
      left: 0;
      width: 100%; } }

.btn03 {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 512px;
  height: 78px;
  z-index: 10;
  cursor: pointer; }
  .btn03 .btn_twitter {
    position: absolute;
    top: 32px;
    left: calc(50% - 124px);
    z-index: 20; }
  .btn03 .btn_page {
    position: absolute;
    top: 29px;
    right: 10px;
    z-index: 20; }
  .btn03 .btn_main {
    width: 512px;
    height: 78px;
    background: #000000;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .btn03 .btn_frame {
    width: 498px;
    height: 64px;
    border: 4px solid #c29c32;
    position: absolute;
    bottom: -10px;
    right: -10px; }
  .btn03:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #c29c32;
    content: '';
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: 15; }
  @media (min-width: 750px) {
    .btn03:hover:before {
      right: inherit;
      left: 0;
      width: 100%; } }

.btn04 {
  display: block;
  position: relative;
  width: 266px;
  height: 70px;
  cursor: pointer; }
  .btn04 .btn_regist_txt {
    position: absolute;
    top: 23px;
    left: calc(50% - 50px);
    z-index: 20; }
  .btn04 .btn_more {
    position: absolute;
    top: 26px;
    left: calc(50% - 38px);
    z-index: 20; }
  .btn04 .btn_arrow {
    position: absolute;
    top: 31px;
    right: 10px;
    z-index: 20; }
  .btn04 .btn_main {
    width: 266px;
    height: 70px;
    background: #000;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .btn04 .btn_frame {
    width: 252px;
    height: 56px;
    border: 4px solid #c29c32;
    position: absolute;
    bottom: -10px;
    right: -10px; }
  .btn04:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #c29c32;
    content: '';
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: 15; }
  @media (min-width: 750px) {
    .btn04:hover:before {
      right: inherit;
      left: 0;
      width: 100%; } }
  @media (max-width: 750px) {
    .btn04 {
      max-width: 274px;
      width: 38.5vw;
      height: auto; }
      .btn04 img {
        max-width: 274px;
        width: 100%;
        height: auto; } }

.btn_txt {
  position: absolute;
  top: 24px;
  left: calc(50% - 38px);
  z-index: 20; }

.btn_icon {
  position: absolute;
  top: 26px;
  left: 20px;
  z-index: 20; }

.btn04_off {
  display: block;
  position: relative;
  width: 266px;
  height: 70px; }
  .btn04_off .btn_regist_txt {
    position: absolute;
    top: 23px;
    left: calc(50% - 50px);
    z-index: 20; }
  .btn04_off .btn_more {
    position: absolute;
    top: 26px;
    left: calc(50% - 38px);
    z-index: 20; }
  .btn04_off .btn_arrow {
    position: absolute;
    top: 31px;
    right: 10px;
    z-index: 20; }
  .btn04_off .btn_main {
    width: 266px;
    height: 70px;
    background: #E1E1E3;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .btn04_off .btn_frame {
    width: 252px;
    height: 56px;
    border: 4px solid #E1E1E3;
    position: absolute;
    bottom: -10px;
    right: -10px; }
  .btn04_off:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #E1E1E3;
    content: '';
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    width: 0;
    z-index: 15; }
  @media (max-width: 750px) {
    .btn04_off {
      max-width: 274px;
      width: 38.5vw;
      height: auto; }
      .btn04_off img {
        max-width: 274px;
        width: 100%;
        height: auto; } }

.btn_txt {
  position: absolute;
  top: 24px;
  left: calc(50% - 38px);
  z-index: 20; }

.btn_icon {
  position: absolute;
  top: 26px;
  left: 20px;
  z-index: 20; }

.btn_tweet {
  margin: 0 auto 100px auto;
  transition: .5s;
  width: 512px;
  display: block; }
  @media (min-width: 750px) {
    .btn_tweet:hover {
      opacity: 0.8; } }
  @media (max-width: 750px) {
    .btn_tweet {
      max-width: 512px;
      width: 72vw;
      margin: 0 auto 10vw auto; }
      .btn_tweet img {
        width: 100%;
        height: auto; } }

.op_hid {
  display: none; }

.op_hid2 {
  display: none; }

.op_hid3 {
  display: none; }

.sys_left {
  margin-left: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% - 175px); }
  .sys_left h4 {
    margin-bottom: 30px;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.4em; }
  .sys_left p {
    margin-bottom: 50px;
    color: #fff;
    line-height: 1.5em;
    font-weight: 500; }
  .sys_left .slider_sys {
    transform: translateX(30px); }
  @media (max-width: 1350px) {
    .sys_left {
      justify-content: center;
      margin-left: 25px;
      width: calc(100% - 143px); }
      .sys_left h4 {
        font-size: 22px; }
      .sys_left p {
        font-size: 14px; } }
  @media (max-width: 1024px) {
    .sys_left {
      width: auto;
      display: block;
      margin: 0 auto; }
      .sys_left p {
        font-size: 16px; }
      .sys_left .slider_sys {
        margin: 0 auto;
        width: 600px;
        transform: translateX(0); } }
  @media (max-width: 750px) {
    .sys_left .slider_sys {
      width: 100%;
      max-width: 580px; }
    .sys_left h4 {
      font-size: 4.5vw;
      margin-bottom: 20px; }
    .sys_left p {
      margin-bottom: 30px;
      font-size: 14px; } }

.r1 {
  font-size: 40px;
  color: #f80000; }
  @media (max-width: 1350px) {
    .r1 {
      font-size: 32px; } }
  @media (max-width: 750px) {
    .r1 {
      font-size: 6vw; } }

.r2 {
  color: #f80000; }

.slider_sys {
  width: 580px;
  margin-bottom: 0 !important; }
  @media (max-width: 1350px) {
    .slider_sys {
      width: 395px; } }
  @media (max-width: 1024px) {
    .slider_sys {
      margin-bottom: 50px !important;
      margin-left: 0; } }
  @media (max-width: 750px) {
    .slider_sys {
      margin: 0 auto 20px auto !important;
      width: calc(100% - 20px); } }

.sys_flex .slider_sys {
  margin-left: 20px; }
  @media (max-width: 1024px) {
    .sys_flex .slider_sys {
      margin-left: 0;
      width: 600px; } }
  @media (max-width: 750px) {
    .sys_flex .slider_sys {
      width: 100%; } }

@media (max-width: 1024px) {
  .sys_flex2 .slider_sys {
    margin-left: 0;
    width: 600px; } }

.slider_sys .slick-dots {
  margin-top: 15px; }
  @media (max-width: 1350px) {
    .slider_sys .slick-dots {
      margin-top: 10px; } }
  @media (max-width: 1024px) {
    .slider_sys .slick-dots {
      margin-top: 20px; } }
  @media (max-width: 500px) {
    .slider_sys .slick-dots {
      margin-top: 10px; } }

.sys_left .slider_sys .slick-dots {
  margin-top: 15px; }
  @media (max-width: 1350px) {
    .sys_left .slider_sys .slick-dots {
      margin-top: 10px; } }
  @media (max-width: 1024px) {
    .sys_left .slider_sys .slick-dots {
      margin-top: 20px; } }
  @media (max-width: 500px) {
    .sys_left .slider_sys .slick-dots {
      margin-top: 10px; } }

.slider_sys .slick-dots li {
  border: none;
  padding: 0 !important;
  background: url("../img/sya_page_off.png") no-repeat;
  background-size: 21px 21px;
  width: 21px !important;
  height: 21px;
  margin: 0 5px; }

.slider_sys .slick-dots li.slick-active {
  background: url("../img/sys_page_on.png") no-repeat !important;
  background-size: 21px 21px; }

.slider_sys .slick-next:before {
  content: url("../img/sys_right.png"); }

.slider_sys .slick-prev:before {
  content: url("../img/sys_left.png"); }

.slider_sys .slick-prev, .slider_sys .slick-next {
  top: calc(50% - 35px); }

.slider_sys .slick-slide {
  padding: 0 10px; }
  @media (max-width: 750px) {
    .slider_sys .slick-slide {
      padding: 0; } }

.slider_sys .slick-list {
  margin-bottom: 15px; }

.slider_tit {
  width: 565px; }
  @media (max-width: 1350px) {
    .slider_tit {
      width: 470px; } }
  @media (max-width: 1024px) {
    .slider_tit {
      width: 100%;
      max-width: 660px; } }

.sys_sect1 {
  background: url("../img/system/txt_top.png") no-repeat;
  background-size: 60%;
  background-position: 10px 170px;
  margin: 50px 0; }
  .sys_sect1 h2 {
    text-align: center;
    margin-bottom: 100px; }
  @media (max-width: 1024px) {
    .sys_sect1 {
      background: url("../img/system/txt_top_sp.png") no-repeat;
      background-size: 60%;
      background-position: 0 73%; } }
  @media (max-width: 750px) {
    .sys_sect1 {
      width: calc(100% - 40px);
      padding: 0 20px;
      margin: 0 0 5vw 0; }
      .sys_sect1 h2 {
        margin-bottom: 10vw; }
        .sys_sect1 h2 img {
          width: 100%;
          max-width: 463px;
          height: auto; } }

.tv_flex {
  width: 1221px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto 30px auto; }
  @media (max-width: 1350px) {
    .tv_flex {
      width: 990px; } }
  @media (max-width: 1024px) {
    .tv_flex {
      width: 100%; }
      .tv_flex img {
        width: calc(100% - 40px);
        max-width: 616px;
        height: auto;
        display: block;
        margin: 0 auto; } }
    @media (max-width: 1024px) and (max-width: 750px) {
      .tv_flex img {
        width: 100%; } }
  @media (max-width: 1024px) {
      .tv_flex div {
        margin-bottom: 20px; } }
  @media (max-width: 750px) {
    .tv_flex {
      margin: 0; } }

@media (max-width: 1221px) {
  .systemline {
    width: 100%;
    height: auto; } }

.sect_story {
  background: url("../img/system/odd_back.png") no-repeat;
  background-size: 100%;
  margin: 0 0 50px 0;
  padding-bottom: 50px;
  z-index: 12; }
  @media (max-width: 1024px) {
    .sect_story {
      padding-bottom: 0; } }
  @media (max-width: 750px) {
    .sect_story {
      background: url("../img/system/odd_back_sp.png") no-repeat;
      background-size: 100%;
      background-position: 0 100%; } }

.sect_story_in {
  width: 1221px;
  margin: 0 auto; }
  @media (max-width: 1350px) {
    .sect_story_in {
      width: 933px; } }
  @media (max-width: 1024px) {
    .sect_story_in {
      width: 100%; }
      .sect_story_in h3 {
        margin-left: 30px; } }
  @media (max-width: 750px) {
    .sect_story_in h3 {
      margin-left: 20px; }
      .sect_story_in h3 img {
        width: 44%;
        height: auto; } }

.sys_flex {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 auto; }
  .sys_flex h4 {
    margin: 50px 0 30px 0; }
    @media (max-width: 750px) {
      .sys_flex h4 {
        margin: 5vw 0; }
        .sys_flex h4 img {
          width: 100%;
          height: auto; } }
  .sys_flex p {
    margin: 0 0 30px 0;
    line-height: 1.5em;
    font-weight: 500; }
    @media (max-width: 1350px) {
      .sys_flex p {
        font-size: 13px; } }
    @media (max-width: 1024px) {
      .sys_flex p {
        font-size: 16px; } }
    @media (max-width: 750px) {
      .sys_flex p {
        font-size: 14px; } }
  .sys_flex .img_pc3 {
    display: block;
    text-align: right;
    margin-right: 70px; }
  @media (max-width: 1350px) {
    .sys_flex {
      justify-content: flex-start; } }
  @media (max-width: 1024px) {
    .sys_flex {
      justify-content: center;
      width: 100%; } }
  @media (max-width: 750px) {
    .sys_flex {
      padding: 0 20px;
      width: calc(100% - 40px); } }

.sect_story2 {
  background: url("../img/system/even_back.png") no-repeat;
  background-size: 100%;
  margin: 0 0 50px 0;
  padding: 30px 0; }
  @media (max-width: 1024px) {
    .sect_story2 {
      margin: 0 0 30px 0; } }
  @media (max-width: 750px) {
    .sect_story2 {
      background: none; } }

.sect_story2_in {
  width: 1221px;
  margin: 0 auto;
  position: relative; }
  @media (max-width: 1350px) {
    .sect_story2_in {
      width: 993px; } }
  @media (max-width: 1024px) {
    .sect_story2_in {
      width: 100%; } }
  @media (max-width: 750px) {
    .sect_story2_in h3 img {
      width: 44%;
      height: auto; }
    .sect_story2_in .slider_sys {
      width: 100%;
      position: relative;
      z-index: 10; } }

.sys_flex2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  z-index: 10; }
  .sys_flex2 h4 {
    margin: 50px 0 30px 0; }
  .sys_flex2 p {
    margin: 0 0 30px 0; }
  .sys_flex2 .img_pc3 {
    display: block;
    text-align: right;
    margin-right: 70px; }
  @media (max-width: 1024px) {
    .sys_flex2 {
      justify-content: center;
      width: 100%;
      flex-direction: column-reverse; }
      .sys_flex2 .rel {
        margin: 0 auto; } }
  @media (max-width: 750px) {
    .sys_flex2 {
      width: calc(100% - 40px);
      padding: 0 20px; }
      .sys_flex2 h4 {
        margin: 5vw 0; }
      .sys_flex2 .rel {
        width: 100%;
        margin-left: -20px !important;
        padding: 20px !important;
        background: #BABFE2; } }

.txt_mid {
  position: absolute;
  top: -50px;
  left: 100px;
  width: 78vw;
  height: auto; }

.sys_left2 {
  width: 560px; }
  @media (max-width: 1350px) {
    .sys_left2 {
      width: auto; } }
  .sys_left2 h4 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.4em; }
    @media (max-width: 1350px) {
      .sys_left2 h4 {
        font-size: 22px; } }
    @media (max-width: 750px) {
      .sys_left2 h4 {
        font-size: 4.5vw; } }
  @media (max-width: 1024px) {
    .sys_left2 {
      width: 100%;
      margin-left: 30px; } }
  @media (max-width: 750px) {
    .sys_left2 {
      margin-left: 0; } }

.sys_right {
  margin-left: 30px; }
  .sys_right h4 {
    margin-left: 30px;
    font-size: 30px;
    font-weight: 500; }
    @media (max-width: 1350px) {
      .sys_right h4 {
        font-size: 22px; } }
    @media (max-width: 750px) {
      .sys_right h4 {
        font-size: 4.5vw; } }
  .sys_right p {
    margin-left: 30px;
    line-height: 1.5em;
    font-weight: 500; }
  @media (max-width: 1350px) {
    .sys_right p {
      font-size: 13px; } }
  @media (max-width: 1024px) {
    .sys_right {
      width: 100%; }
      .sys_right h4 {
        margin-left: 0; }
      .sys_right p {
        margin-left: 0;
        font-size: 16px; } }
  @media (max-width: 750px) {
    .sys_right {
      margin-left: 0;
      width: 100%; }
      .sys_right h4 img {
        width: 100%;
        height: auto; }
      .sys_right p {
        font-size: 14px; } }

.txt_btm {
  width: 90%;
  height: auto;
  margin-top: -70px;
  margin-bottom: -25px;
  position: relative;
  z-index: 11; }
  @media (max-width: 750px) {
    .txt_btm {
      width: 102%;
      margin-bottom: -4vw; } }

@media (max-width: 1024px) {
  .top_chara1 {
    margin-top: 40px; } }
@media (max-width: 750px) {
  .top_chara1 {
    width: 160px;
    height: auto;
    margin-top: 20px; } }

@media (max-width: 750px) {
  .top_chara2 {
    width: 160px;
    height: auto; } }

.tv_flex_sp {
  display: none; }
  @media (max-width: 1024px) {
    .tv_flex_sp {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      margin-bottom: 5vw; } }

@media (max-width: 1024px) {
  .slider_sys.slide2 {
    margin: 0 auto; } }

.sect1_chara {
  position: absolute;
  bottom: -32px;
  left: 28px; }
  @media (max-width: 750px) {
    .sect1_chara {
      bottom: -50px; }
      .sect1_chara img {
        width: 120px;
        height: auto; } }

.sect2_chara {
  position: absolute;
  bottom: -20px;
  right: 20px;
  display: none;
  z-index: 10; }
  @media (max-width: 1024px) {
    .sect2_chara {
      display: block; } }
  @media (max-width: 750px) {
    .sect2_chara {
      bottom: -45px; }
      .sect2_chara img {
        width: 115px;
        height: auto; } }

.sect3_chara {
  position: absolute;
  bottom: -43px;
  left: 28px; }
  @media (max-width: 750px) {
    .sect3_chara {
      bottom: -76px; }
      .sect3_chara img {
        width: 100px;
        height: auto; } }

.slider_sys .slide2 {
  z-index: 10; }

.txt_mid_sp {
  width: 92%;
  height: auto;
  display: none;
  position: absolute;
  bottom: -5px;
  left: 0; }
  @media (max-width: 750px) {
    .txt_mid_sp {
      display: block; } }

.icon_new {
  position: absolute;
  top: -3px;
  left: calc(50% - 35px);
  width: auto !important;
  height: auto !important; }
  @media (max-width: 750px) {
    .icon_new {
      top: -25px;
      left: 3vw;
      width: 17vw !important;
      max-width: 98px; } }
  @media (max-width: 450px) {
    .icon_new {
      top: -5vw; } }

.sys_txt {
  position: absolute;
  top: 293px;
  left: 0; }
  @media (max-width: 1350px) {
    .sys_txt {
      width: 375px;
      height: auto;
      top: 197px; } }
  @media (max-width: 1024px) {
    .sys_txt {
      width: 100%;
      top: 303px; } }
  @media (max-width: 750px) {
    .sys_txt {
      top: calc(50vw - 13px); } }

.sys_txt2 {
  position: absolute;
  top: 293px;
  left: 0; }
  @media (max-width: 1350px) {
    .sys_txt2 {
      width: 375px;
      height: auto;
      top: 197px; } }
  @media (max-width: 1024px) {
    .sys_txt2 {
      width: 100%;
      top: 303px; } }
  @media (max-width: 750px) {
    .sys_txt2 {
      top: calc(53vw - 15px);
      width: calc(100% - 40px);
      left: 20px; } }
  @media (max-width: 650px) {
    .sys_txt2 {
      top: calc(54vw - 10px); } }
  @media (max-width: 400px) {
    .sys_txt2 {
      top: calc(54vw - 8px); } }

.tv_in {
  position: absolute;
  top: 16px;
  left: 17px;
  transition: .5s; }
  @media (max-width: 1024px) {
    .tv_in {
      top: 15px;
      left: 36px;
      width: 544px !important;
      height: 308px; } }
  @media (max-width: 750px) {
    .tv_in {
      top: 4%;
      left: 2.5%;
      width: 94.5% !important;
      height: 83% !important; } }

@media (min-width: 750px) {
  .tv_hover:hover .tv_in {
    opacity: 0.8; } }

.side_frame {
  background: url("../img/side_frame.png") no-repeat;
  background-size: 100%;
  width: 252px;
  height: 484px;
  position: absolute;
  top: 0;
  left: 20px;
  text-align: center;
  padding-top: 35px; }
  .side_frame img {
    display: block; }
  .side_frame a {
    margin: 0 auto 10px auto;
    display: inline-block;
    transition: .3s; }
    @media (min-width: 750px) {
      .side_frame a:hover {
        opacity: 0.8; } }
  @media (max-width: 1396px) {
    .side_frame {
      transform-origin: 0 0;
      transform: scale(0.8); } }
  @media (max-width: 1060px) {
    .side_frame {
      transform: scale(0.5); } }
  @media (max-width: 750px) {
    .side_frame {
      display: none; } }

.side_logo {
  margin: 0 auto 15px auto;
  display: inline-block; }

.side_txt {
  margin: 0 auto 15px auto; }

.side_frame_sp {
  background: url("../img/side_frame_sp.png") no-repeat;
  background-size: 100%;
  width: 100%;
  margin: -30vw auto 0 auto;
  position: relative;
  z-index: 10;
  padding: 2.5vw 0; }
  .side_frame_sp img {
    display: block; }
  .side_frame_sp div {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center; }
    .side_frame_sp div a:nth-of-type(1) {
      margin-right: 5px;
      width: 38%; }
    .side_frame_sp div a:nth-of-type(2) {
      margin-right: 5px;
      width: 47%; }

.side_txt_sp {
  width: 85%;
  margin: 0 auto 2vw auto; }

.app_sec_wrap {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20; }

.app_sec {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 7vw;
  background: rgba(193, 156, 50, 0.7);
  transition: .3s; }
  .app_sec a:nth-of-type(1) {
    margin-right: 5px;
    width: 38%; }
  .app_sec a:nth-of-type(2) {
    margin-right: 5px;
    width: 47%; }

.btm_flex {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center; }
  @media (max-width: 750px) {
    .btm_flex {
      display: block; } }

.top_icon {
  margin-right: 30px; }
  @media (max-width: 750px) {
    .top_icon {
      width: 140px;
      height: auto;
      margin: 0 auto 20px auto;
      display: block; } }

.b_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin: 50px auto 0 auto; }
  .b_flex a {
    transition: .3s; }
  @media (max-width: 750px) {
    .b_flex {
      display: none; } }
  @media (min-width: 750px) {
    .b_flex a:hover {
      opacity: 0.8; } }

.swiper-container {
  width: 112%;
  margin-left: -6%;
  margin-bottom: 132px;
  position: relative; }
  @media (max-width: 1280px) {
    .swiper-container {
      width: 100%;
      margin-left: 0; } }
  @media (max-width: 750px) {
    .swiper-container {
      width: calc(100% - 80px);
      margin: 0 auto 40px auto;
      height: 47vw; } }

.swiper-slide {
  opacity: 1;
  overflow: hidden;
  transition: .7s; }

.swiper-slide img {
  width: 100%;
  height: auto;
  box-shadow: 1px 1px 40px rgba(25, 27, 42, 0.7); }

.swiper-slide-active {
  opacity: 1;
  z-index: 1;
  transform: scale(1.3); }
  @media (max-width: 750px) {
    .swiper-slide-active {
      transform: scale(1); } }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  opacity: 0; }

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  opacity: 0; }

.swiper-button-prev {
  position: absolute;
  top: calc(50% - 15px) !important;
  left: 32.5vw !important;
  width: 30px !important;
  height: 41px !important;
  margin: 0 !important;
  display: block !important; }
  .swiper-button-prev img {
    width: 30px;
    height: auto; }
  @media (max-width: 1280px) {
    .swiper-button-prev {
      left: 23.5vw !important; } }
  @media (max-width: 750px) {
    .swiper-button-prev {
      top: calc(50% - 20px) !important;
      left: -30px !important;
      width: 22px !important;
      height: 30px !important; }
      .swiper-button-prev img {
        width: 22px;
        height: 30px; } }

.swiper-button-next {
  position: absolute;
  top: calc(50% - 15px) !important;
  right: 32.5vw !important;
  width: 30px !important;
  height: 41px !important;
  margin: 0 !important;
  display: block !important; }
  .swiper-button-next img {
    width: 30px;
    height: auto; }
  @media (max-width: 1280px) {
    .swiper-button-next {
      right: 23.5vw !important; } }
  @media (max-width: 750px) {
    .swiper-button-next {
      top: calc(50% - 20px) !important;
      right: -30px !important;
      width: 22px !important;
      height: 30px !important; }
      .swiper-button-next img {
        width: 22px;
        height: 30px; } }

.movie_trig2 {
  display: block;
  position: absolute;
  bottom: 30px;
  left: calc(50% - 256px);
  transition: .5s;
  z-index: 10; }
  @media (max-width: 1024px) {
    .movie_trig2 {
      max-width: 512px;
      width: 50vw;
      left: calc(50% - 25vw);
      height: auto; }
      .movie_trig2 img {
        width: 100%;
        height: auto; } }
  @media (min-width: 750px) {
    .movie_trig2:hover {
      opacity: 0.8; }
    .movie_trig2:hover ~ .movie_back_on {
      opacity: 0; } }
  @media (max-width: 750px) {
    .movie_trig2 {
      left: calc(50% - 36vw);
      max-width: 512px;
      width: 72vw;
      height: auto;
      bottom: 5px;
      position: static;
      margin: 0 auto 30px auto; } }

.movie_trig1 {
  width: 100%;
  padding-top: 57%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: -1; }

.movie_trig22 {
  width: 100%;
  padding-top: 57%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: -1; }

.movie_trig3 {
  width: 100%;
  padding-top: 57%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: -1; }

.swiper-slide-active div {
  z-index: 10; }

.swiper-pagination-bullet {
  background: #fff !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  transform: rotate(45deg);
  width: 15px !important;
  height: 15px !important;
  margin: 0 10px !important; }
  @media (max-width: 750px) {
    .swiper-pagination-bullet {
      width: 12px !important;
      height: 12px !important;
      margin: 0 8px !important; } }

.swiper-pagination-bullet-active {
  background: #C29C32 !important; }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: -92px !important; }
  @media (max-width: 1380px) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: -82px !important; } }
  @media (max-width: 750px) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: -15px !important; } }

.c-video {
  margin-top: -7px;
  position: relative;
  z-index: -1; }

.video_move {
  width: 100vw;
  height: 57vw; }
  @media (max-width: 1610px) {
    .video_move {
      transform: scale(1.35); } }
  @media (max-width: 1380px) {
    .video_move {
      transform: scale(1); } }
  @media (max-width: 750px) {
    .video_move {
      height: 179vw;
      transform: scale(1);
      margin-top: -27vw; } }

.video_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0);
  z-index: 10;
  transition: 1s; }