body {
  font-family: serif;
  color: #FFF;
  background: #000;
  height: 100vh;
  margin: 0;
  padding: 0;
   -webkit-text-size-adjust: 100%;
}
@media screen and (max-width:767px) {
  html{
    font-size: 3vw;
  }
}

* {
    margin: 0;
    padding: 0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	line-height: 1.4;
  position: relative;
  z-index: 2;
}
h3,h4, h5{
  font-size: 1.5rem;
}
a {
	text-decoration:none;
	color: inherit;
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  cursor: pointer;
}
a:hover {
  text-decoration: none;
	color: inherit;
}
img {
  max-width: 100%;
}
.mb-10{
  margin-bottom: 10em !important;
}
.mb-5r{
  margin-bottom: 5rem !important;
}
ul,ol{
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
p{
  text-align: left;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
.body-en p{
  text-align: justify;
  word-wrap: break-word;
}
.body-en .ul-topics-item p{
  text-align: left;
}
p:last-of-type{
  margin-bottom: 0px;
}
.hover-l:hover{
  color: #FFF;
  text-shadow: 0 0 3px #eae4d1, 0 0 6px #eae4d1;
}
th,td{
  word-break: break-word;
}
button:focus {
    outline: none;
}
@media screen and (min-width:769px) {
  .a-link{
      padding-top: 70px;
      margin-top: -70px;
  }
}
/* main{
  overflow-x: hidden;
} */
hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.4);
    width: 90%;
    margin: 5em auto;
}
.fc-orng{
  color: #ffc56b;
}
#header{
	z-index: 99;
	height: 38px;
	background:#fff; 
	padding:0px 0em; 
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width: 100%;
}
.underline{
  text-decoration: underline!important;
}

.body-en #header .cc2header-copy img{
	margin-top: 4px;
}
@media (max-width:879px){
	#header .cc2header-copy{
		display: none;
	}
}

.img-wide{
  width: 800px;
}
.gnavi {
  display: -webkit-box;
  display: flex;
  /* margin-top: 38px; */
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  position: absolute;
  top: 38px;
  z-index: 99;
  width: 100%;
  /* display: flex; */
  	/* background-image: url(../img/menu_bg_lb.png), url(../img/menu_bg_rb.png), url(../img/menu_bg_l.png), url(../img/menu_bg_r.png);
	background-position: left bottom,right bottom,  left top, right top;
	/* background-size: 20% auto, 20% auto, 100% auto; */
	/* background-repeat: no-repeat, no-repeat, repeat-y, repeat-y; */
  /* position: fixed; */
  /* height: 64px; */
}
.gnavi::before{
  content: "";
  width: 34px;
  display: block;
  background: url(../img/menu_bg_l.png) no-repeat;
  background-position: center bottom;
  height: 64px;
}
.gnavi::after{
  content: "";
  width: 34px;
  display: block;
  background: url(../img/menu_bg_r.png) no-repeat;
  background-position: center bottom;
  height: 64px;
}
.gnavi a{
  text-decoration: none;
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.gnavi ul{
  display: -webkit-box;
  display: flex;
  height: 64px;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  background: url(../img/menu_bg_b.png) repeat-x;
  background-position: center bottom;
}
.gnavi ul:first-of-type img{
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.gnavi ul:first-of-type a:hover img{
  -webkit-transform: scale(1.0);
          transform: scale(1.0);
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.gnavi ul:first-of-type::before{
  /* content: "";
  width: 34px;
  display: block;
  background: url(../img/menu_bg_l.png) no-repeat;
  background-position: center bottom;
  height: 64px; */
}
.gnavi ul:first-of-type a:hover{
  /* transform: translateY(-3px); */
  opacity: 1;
  color: #FFF;
  text-shadow: 0 0 6px #eae4d1, 0 0 6px #eae4d1, 0 0 6px #eae4d1;
}
.gnavi ul:last-of-type::after{
  /* content: "";
  width: 34px;
  display: block;
  background: url(../img/menu_bg_r.png) no-repeat;
  background-position: center bottom;
  height: 64px; */
}
.gnavi li{
  display: -webkit-box;
  display: flex;
	-webkit-box-align: center;
	        align-items: center;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1);
  height: 64px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 7px;
  font-size: 1.2em;
  font-weight: bold;
  white-space: nowrap;
}
@media screen and (max-width: 999px) {
  .gnavi li{
    font-size: 1.7vw;
    padding-left: 5px;
    padding-right: 5px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
}
@media screen and (max-width: 767px) {
  .gnavi{
    display: none;
  }
  .gnavi li{
    font-size: 3.4vw;
}
}
.navbar{
	display: none;
	/* background-color: #FFF; */
	padding: 2px 2px 2px 5px;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
    left: auto;
    padding: 0;
}
.navbar-light .navbar-toggler{
    background-color: transparent;
    border: none;
    padding: 0;
}
.navbar-light .navbar-toggler-icon {
    background: url(../img/btn_menu.png) no-repeat;
    display: block;
    background-color: transparent;
    background-size: contain;
    border: none;
    width: 14vw;
    height: 14vw;
}


.navbar button{
	float: right;
  background-color: #FFF; 
}
.guideline{
    position: fixed;
    bottom: 0.5rem;
    left: 0.5rem;
    /* right: 0.5rem; */
    z-index: 9;
}
.guideline img{
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.guideline a:hover img{
  -webkit-transform: scale(1.0);
          transform: scale(1.0);
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
@media screen and (max-width:767px){


  /* for mobile */


  .cc2header .row > div:last-of-type{
    display: none;
  }
	.gnavi{
    display: none;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		        flex-flow: column;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
		top: 0;
		height: 100vh;
    background-image: none;
    background-color: rgba(0,0,0,0.7);
	}
  .gnavi::before{
  content: "";
  width: 100%;
  max-width: 396px;
  display: block;
  background: url(../img/gnavi_mb_top.png) no-repeat;
  background-position: center bottom;
  background-size: 100%;
  /* height: 63px; */
  /* transform: rotate(180deg); */
}
.gnavi::after{
  content: "";
  width: 100%;
  max-width: 396px;
  display: block;
  background: url(../img/gnavi_mb_btm.png) no-repeat;
  background-position: center top;
  background-size: 100%;
  height: 64px;
}
	.gnavi ul{
  width: 100%;
  max-width: 396px;
		margin: 0px auto;
    /* background: none; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background: url(../img/gnavi_mb_bg.png) center top repeat-y;
  background-size: 100%;
	}
	.gnavi ul:first-of-type{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
	.gnavi ul:last-of-type{
    flex-flow: nowrap;
    padding-bottom: 1.5rem;
	}
	.gnavi ul:first-of-type li{
    width: 100%;
    text-align: center;
	}
	.gnavi ul li a{
    line-height: 1.6;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: 1.2rem;
	}
	.gnavi ul:first-of-type li a{
    width: 100%;
    padding: 0.4em;
  }
	.gnavi-logo{
		display: none;
	}
	.gnavi .d-flex{
		display: block!important;
		text-align: center;
	}
/* .page .gnavi{
	visibility: hidden;
} */

	.navbar{
		display: block;
	}
  .guideline{
    display: flex;
    position: relative;
    background: url(../img/gnavi_mb_bg.png) center top repeat-y;
    background-position: top left;
    background-size: 100%;
    width: 100%;
    max-width: 396px;
    margin: 0px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    left: 0;
    bottom: 0;
  }
  .container .guideline{
  background: none;
  margin-bottom: 2rem;}
}


/* --- for mobile end --- */

.ul-lang{
  position: relative;
}
.ul-lang a{
    border-radius: 1em;
    background-color: #000;
    width: 5em;
    padding-top: 1px;
    padding-left: 2em;
    margin-left: 0em;
    text-align: center;
    color: #FFF;
    text-shadow: none; 
}
.ul-lang a:hover{
  text-shadow: 0 0 6px #eae4d1, 0 0 6px #eae4d1, 0 0 6px #eae4d1;
}
.ul-lang a.active{
    border-radius: 1em;
    background-color: #FFF;
    width: 3em;
    padding-left: 0;
    margin-right: -3em;
    z-index: 1;
    text-align: center;
    color: #000;
    text-shadow: none;
    cursor: default;
    /* pointer-events: none; */
}
.ul-lang a.active:hover{
  text-shadow: none
}
.body-en .ul-lang a{
    padding-left: inherit;
    padding-right: 2em;
}
.body-en .ul-lang a.active{
  margin-left: -3em;
  padding-left: 14px;
}

.bgWrap{
  position: fixed;
	z-index: -2;
	left: 0;
	top: 0;
  width: 100%;
  min-height: 100vh;
	/* overflow: hidden; */
}
.bg{
  position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
  width: 100%;
  min-height: 100vh;
  background: url("../img/bg.jpg") ;
  background-size: cover;
	/* overflow: hidden; */
}
@media screen and (max-width: 1072px){
  .bg{
    /* background-size: contain; */
    background-size: 190vw;
    background-position: right top;
  }

}
.wrap{
  width: 100% ;
  /* background: url(../img/bg_grad.png) bottom center no-repeat;
  background-size: contain; */
}
.visual{
  position: relative;
  margin-top: 38px;
  width: 100%;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  height: 60vw;
  background: -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.85)),color-stop(4%, rgba(0,0,0,0.85)),color-stop(13%, rgba(0,0,0,0)));
  background: linear-gradient(to top,rgba(0,0,0,0.85),rgba(0,0,0,0.85) 4%,rgba(0,0,0,0) 13%)
}
@media screen and (max-width:767px) {
.visual{
  margin-top: 0;
}
}

.chara{
  /* display: none; */
  /* position: absolute; */
  /* right: 0; */
  /* top: 10px; */
  display: block;
  width: 50%;
  /* height: 100vh; */
    /* position: relative; */
    z-index: -1;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100vh;
    }
.chara div{
  /* width: 100%; */
}
.chara img{
  display: block;
  /* width: 100%; */
}
.chara-1,
.chara-2,
.chara-3{
position: absolute;
bottom: 10px;
width: 100%;
}
.chara-1{
  z-index: 3;
  
}
.chara-2{
  z-index: 2;

}
.chara-3{
  z-index: 1;

}
.main-pa{
  position: absolute;
  margin-left: auto;
  display: block;
  right: 25px;
  bottom: 55px;
}
.main-pa img{
  max-width: 40vw;
}
@media screen and (max-width: 767px) {
  .main-pa{
    left: 5px;
    top: 38px  ;
  }
  .main-pa img{
  max-width: 30vw;
  }
}
.info{
  /* display: none; */
  /* position: absolute; */
  /* left: 0; */
  text-align: center;
    /* width: 60vw; */
    left: 0px;
    padding-left: 2em;
    /* height: 100vh; */
    position: absolute;
    max-width: 50%;
    /* left: 6%; */
    /* bottom: 5em; */
    max-width: 39vw;
    right: calc(100vw / 2);
    left: auto;
    top: 14vh;
}
@media screen and (min-width: 1440px) {
  .visual{
    height: 100vh;
  }
  .info {
     width: 60%;
      /* width: 30vw; */
  }
  .chara {
      position: absolute;
      bottom: 0;
      width: 76vw;
      width: 50%;
      /* width: 50vw; */
  }
  .chara img{
width: 100%;
  }
}
@media screen and (max-width:1069px) {
.visual{
  height: 69vw;
}
.info{
  max-width: 40%;
  left: 0px;
}
.chara{
  width: 60%;
}
}
@media screen and (max-width: 767px) {
  .visual{
    height: 90vw;
  }
  .info {
    left: auto;
    right: auto;  
    position: absolute;
    left: auto;
    max-width: 60%;
    top: 74vw;
    padding-left: 0;
  }
  .chara {
    position: absolute;
    bottom: 0;
    width: 76vw;
    max-width: 100vw;
    left: auto;
    right: auto;
  }
  .wrap{
    padding-top: 60vw;
    position: static;
  }
  .body-pg .wrap{
    padding-top: 0px;
  }
}

.logo{
}
@media screen and (max-width:767px) {
  .logo{
    padding-top: 4rem;
  }
  
}
.date{
}
.platform{
      background-color: rgba(0,0,0,0.8);
    border-radius: 5px;
    padding: 1em;
    display: inline-block;
}
.contents{
  background-color: rgba(0, 0,0, 0.85);
}
.contents-sys,
.contents-dlc{
  background-color: rgba(0, 0,0, 0.75);
}
.contents-story{
  background-color: rgba(0, 0,0, 0.5);
}
.contents-story #spec,
.contents-sys #spec{
  background-color: rgba(0,0,0,0.45);
}
.copy{
  /* margin-top: 30vh; */
  /* margin-top: 10vh; */
}
@media screen and (max-width:767px) {
  .copy{
    position: absolute;
    top: 0rem;
    z-index: 9;
    /* width: 100vw; */
    /* left: 0; */
  }
  
}
.copy-ja{
      position: absolute;
    right: 0;
    top: 0;
    /* max-height: 100vh; */
}
.copy-ja img{
    max-height: 78vh;
    max-width: 10vw;
    margin-top: 5rem;
    margin-right: 1rem;
}
@media screen and (max-width:767px){
.copy-ja img{
    max-width: 17vw;
}
}
.fadein {
  opacity : 0;
  -webkit-transition : all 1s;
  transition : all 1s;
}
  
.fadein.active{
  opacity : 1;
}
section{
  padding:  8vw 0em 0em;
  z-index: 2;
  position: relative;
  /* margin-bottom: 5em; */
}
.bg-sand{
  background: url(../img/bg_note.jpg) center top repeat-y;
  background-color: #e3d1bd;
  background-size: contain;
  background-attachment: fixed;
  margin-bottom: 9vw;
  position: relative;
  z-index: 2;
}
.bg-sand::before{
    content: "";
    width: 100%;
  display: -webkit-box;
  display: flex;
    height: 8.1vw;
    background: url(../img/bg_note_hd.png) center bottom no-repeat #000;
    background-size: 100%;
    position: relative;
    top: -8.1vw;
}
.bg-sand::after{
    content: "";
    width: 100%;
    display: -webkit-box;
    display: flex;
    height: 8.1vw;
    background: url(../img/bg_note_hd.png) center bottom no-repeat;
    background-size: 100%;
    position: relative;
    top: 7.3vw;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.bg-sand-pg{
  padding-top: 8vw;
  position: relative;
  z-index: 3;
  margin-bottom: 4vw;
}
.bg-sand-pg::before{
  /* display: none; */
}
.bg-sand-pg + #spec h2{
  /* padding-top: 4vw; */
}
.bg-sand section:first-of-type{
  padding-top: 0;
  /* margin-top: -5vw; */
}
.bg-sand section:last-of-type{
  /* margin-bottom: -25vw; */
}
.bg-no{
  background: none;
  margin-bottom: 0px;
}
.bg-no::after{
  display: none;

  /* background: none;
  background: linear-gradient(rgba(0,0,0,0.85), 50%, rgba(0,0,0,0));
  margin-bottom: 8vw; */
}
.body-pg #story .bg-no::after{
  display: none;
}
.body-pg h2{
  margin-top: 5rem;
}
.sec-frm{
  color: #481a1a;
  padding: 0em 0 ;
  font-size: 1.2rem;
  text-shadow: 0 0 4px #ECD5A5,0 0 4px #ECD5A5,0 0 4px #ECD5A5,0 0 4px #ECD5A5;
}
.sec-frm-systop{
    top: -5rem;
    position: relative;
}

@media screen and (max-width:767px) {
  .sec-frm{
    font-size: 1rem;
  }
}
.bg-sys .sec-frm,
.bg-dlc .sec-frm{
    text-align: center;
    color: #FFF;
    text-shadow: 0 0 4px #000,0 0 4px #000,0 0 4px #000,0 0 4px #000;
}
#story .sec-frm{
  color: #FFF;
  text-shadow: 0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000;
}
.bg-sys .sec-frm{
  border-radius: 1rem;
  padding: 1rem;
  max-width: 1150px;
  margin: auto;
}
.sec-frm.sec-frm-world{
  /* background-color: #000; */

}
.sec-frm::before,
.sec-frm::after{
  /* content: "";
  display: block;
  height: 8px;
  background: url(../img/sec_line.jpg) repeat-x center top;
  background-size: auto;
  position: relative; */
}
.sec-frm::before{
  top: -5em;
}
.sec-frm::after{
  bottom: -5em;
}
.sec-frm-inner{
  position: relative;
}
.sec-frm-inner::before{
  /* content: "";
  display: block;
  width: 300px;
  height: 300px;
  background: url(../img/gear_bg.png) -170px -200px no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.4;
  position: absolute;
  left: 0;
  top: -5em; */
}
.sec-frm-inner::after{
  /* content: "";
  display: block;
  width: 300px;
  height: 300px;
  background: url(../img/gear_bg.png) 0px 44px no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.4;
  position: absolute;
  right: 0;
  bottom: -5em; */
}
.sec-frm-inner > *:last-of-type{
  margin-bottom: 0!important;
}
.sec-contents{
  /* max-width: 1150px; */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.sec-contents p{
  padding: 0 0em 1em;
  position: relative;
  z-index: 1;
}
.sec-contents-wd{
  max-width: 1150px;
}


.cap-line{
  background: url(../img/line2.png) no-repeat center 78px;
  text-align: center;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  margin-bottom: 7vw;
  /* height: 1em; */
  /* margin: 2em; */
}
#character .cap-line{
  margin-bottom: 0;
}
#story .cap-line{
  margin-bottom: -3vw;
}
.body-en .cap-line img{
  height: 90px;
  -o-object-fit: none;
     object-fit: none;
  width: 100%;
  -o-object-position: top;
     object-position: top;
}
.cap-line img{
  max-height: 15vw;
}
.ttl-float-chara{
  position: absolute;
  z-index: 3;
  left: calc(50% - 580px);
  top: 2rem;
  max-width: 24%;
}
@media screen and (max-width:1099px) {
  .ttl-float-chara{
    left: 0%;
  }  
}
.ttl-float-cap{
      position: absolute;
    z-index: 4;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    margin: auto;
    width: 100%;
}
@media screen and (max-width:929px) { 
.ttl-float-cap img{
    max-width: 76%;
    margin-left: auto;
    margin-right: 5vw;
}
}

.bg-sys #system .cap-line img{
  -webkit-filter: invert(1) drop-shadow(0px 0px 3px black);
          filter: invert(1) drop-shadow(0px 0px 3px black);
}
.bg-sys section:last-of-type{
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.45)), color-stop(3%), to(rgba(0,0,0,0)));
    background: linear-gradient(to top, rgba(0,0,0,0.45), 3%, rgba(0,0,0,0));
}

@media screen and (max-width:750px) {
  .cap-line{
    background-position: center 9vw;
  }
  .body-en .cap-line{
    height: 9.8vw;
    overflow: hidden;
  display: -webkit-box;
  display: flex;
    -webkit-box-align: normal;
            align-items: normal;
  }
  .body-en .cap-line img{
    -o-object-fit: contain;
       object-fit: contain;
  }
  
}
@media screen and (min-width:768px) {
  #story{
  /* margin-bottom: -120px; */
  margin-top: -11rem;
  padding-top: 6rem;
}
}
/* @media screen and (max-width:900px) {
  #story{
    padding-bottom: 21vw;
  }
} */
#story p{
  /* font-size: 1.2rem; */
  font-size: 1.5rem;
  line-height: 2;
  -webkit-filter: drop-shadow(0 0 4px #b79d35);
          filter: drop-shadow(0 0 4px #b79d35);
  /* margin-bottom: 1em; */
  padding: 0 2rem;
}
#story .story-monologue p:first-of-type{
  /* font-size: 1.4rem; */
  font-size: 2.0rem;
}
#story .sec-frm-world p{
  font-size: 2vw;
}
.movie-thum {
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.movie-thum img{
  border: 5px solid #b79d35;
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);

}
.movie-thum:hover {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.movie-thum:hover img{
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
.movie-thum::before{
      position: absolute;
    content: "";
    z-index: 2;
    height: 80px;
    background-image: url(../img/i_play.png);
    width: 80px;
    background-size: cover;
}
@media  screen and (max-width:767px) {
.movie-thum::before{
    position: absolute;
    content: "";
    z-index: 2;
    display: block;
    width: 20vw;
    height: 20vw;
    background: url(../img/i_play.png) no-repeat;
    background-size: contain;}
  
}
.pointer:hover{
	cursor: pointer;
}
#spec{
  padding-bottom: 5em;
}
.tbl-spec{
    width: 80%;
    max-width: 750px;
    margin: 0 auto;
    text-align: left;
}
.tbl-spec th,
.tbl-spec td{
  padding: 0.5em;
  vertical-align: top;
}
.tbl-spec th{
  width: 30%;
  text-align: right;
  white-space: nowrap;
}
@media screen and (max-width:767px){
  .tbl-spec th,
  .tbl-spec td{
    display: block;
    text-align: left;
  }
  .tbl-spec td{
    padding-left: 2em;
  }
}

.slider-img {
  /* margin: 0 10px; */
  border: 5px solid #b79d35;
  height: auto;
  width: 100%;
  opacity: .5;
  -webkit-transform: scale(.9);
          transform: scale(.9);
  -webkit-transition: opacity .4s, -webkit-transform .4s;
  transition: opacity .4s, -webkit-transform .4s;
  transition: opacity .4s, transform .4s;
  transition: opacity .4s, transform .4s, -webkit-transform .4s;
  width: 100%;
}
.slider-ss .slick-center{
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}


.slick-dots{
	bottom: -45px;
  position: relative;
}
.slick-dots li button:before{
	color: #FFF;
	opacity: 0.35;
	content: '';
	border: 7px solid #FFF;
	border-radius: 50%;
	height: 7px;
	width: 7px;
}
.slick-dots li button:focus:before{
	opacity: 0.35;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #FFF;
}
.slick-dots li button:hover:before{
	opacity: 1;
}
.slider-bn-wrap{
	position: relative;
	z-index: 11;
}
.slick-next,
.slick-prev{
  z-index: 1;
}
.slider-ss .slick-next::before,
.slider-ss .slick-prev::before{
  position: absolute;
  top: -50%;
  -webkit-filter: drop-shadow(0px 0px 4px #000);
          filter: drop-shadow(0px 0px 4px #000);
}
.slider-ss .slick-next{
  margin-right: 6%;
}
.slider-ss .slick-prev{
  margin-left: 6%;
}
.slider-ss .slick-next:before {
    content: url(../img/i_arr_right.png);
  right: 50%;
}
.slider-ss .slick-prev:before {
    content: url(../img/i_arr_left.png);
  left: 50%;
}
.wrapInner{
  background: url(../img/bg_grad.png) center bottom no-repeat;
  background-size: 100%;
      position: absolute;
    top: -80vh;
    left: 0;
    height: 80vh;
    display: block;
    z-index: 1;
    width: 100%;
    z-index: 0;
    opacity: 0.3;
}

#footer{
  background-color: #000;
  padding: 3em 2em 5em;
  position: relative;
}
#footer p{
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 3em;
}
@media screen and (min-width:1025px) , (max-width:500px){
	.br-footer{display: none!important;}
}

#page-top {
    position: fixed;
    bottom: 1em;
    right: 1em;
    text-align: right;
    margin: 0;
    z-index: 11;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
#page-top img {
    height: 7em;
}
#page-top:hover{
  -webkit-transform: scale(1.0);
          transform: scale(1.0);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
#menu-ft{
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
    flex-flow: nowrap;
}


#menu-ft ul{
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
  flex-flow: nowrap;
  list-style-type: none;
  margin:  0 10px;
}
@media screen and  (max-width:767px){
#menu-ft {
    flex-flow: wrap;
}
}
.ul-sns{
  font-size: 2rem;
  /* margin-right: 5em; */
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
    margin: 5em auto 0em;
  }
.ul-sns a{
    width: 1em;
    display: block;
    margin: 0 0.5em;
}
@media screen and  (max-width:767px){
.ul-sns {
  margin-right: 0;
}
}
/* .ul-lang{
  font-size: 1.8em;
}
.ul-lang a{ 
  text-decoration: none;
}
.ul-lang a.active{ 
  opacity: 0.6;
  pointer-events: none;
}
.ul-lang a.active::before{ 
  content: ;
} */
#menu-ft li a{
  display: block;
  width: 2em;
}
/* 

opacity reset

 */

 .chara-1,
.chara-2,
.chara-3,
.info,
.bgWrap,
.main-pa,
.copy-ja{
  opacity: 0;
}

/* 

modal

 */

.modal-open {
  padding-right: 0px  !important;
  overflow: auto;
}
.modal {
  padding-right: 0px  !important;
}
.modal-content{
	/* background: #000; */
	border: none;
	/* width:100%;              横幅いっぱいにwidthを指定 */
	/* padding-bottom: 56.25%;  高さをpaddingで指定(16:9) */
	/* height:0px;              高さはpaddingで指定するためheightは0に */
	/* position: relative; */
	text-shadow: none;
    border-radius: 1em;
    /* width: 100%;
    position: relative; */
    /* box-shadow: 0px 0px 8px #666; */
    -webkit-filter: drop-shadow(0px 0px 5px #511511);
            filter: drop-shadow(0px 0px 5px #511511);
   }
.modal-content-movie{
	width:100%;              /*横幅いっぱいにwidthを指定*/
	padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
	height:0px;              /*高さはpaddingで指定するためheightは0に*/
	position: relative;
  background-color: transparent;
  box-shadow: none;
}
.loader-wrap {
    position: absolute;
    z-index: -1;
    /* background-color: #DDD; */
    height: 100%;
    width: 100%;
    /* border-radius: 13px; */
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.modal-content .close{
	position: absolute;
	z-index: 99;
	font-size: 2rem;
	border-radius: 2rem;
	right: 0em;
	top: -1em;
	background-color: #000;
	border-radius: 1.3em;
	width: 1.3em;
	height: 1.3em;
}
@media (min-width: 576px) and (max-width: 991px){
	.modal-dialog {
			max-width: 90%;
			margin: 1.75em auto;
	}
}
.modal-content > iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
 }
 .modal-content-movie iframe{
  /* filter: drop-shadow(0px 0px 5px #511511); */

}

.modal-backdrop.show{
	opacity: 0.7;
}

.close{
	display: block;
	width: 3em;
	margin-left: auto;
  font-family: sans-serif;
}
.modal-content-nopd{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.modal-content-nopd .modal-body{
  padding: 0;
}
.modal-content-nopd .modal-body img{
  max-height: 80vh;
  max-width: 90vw;
}
.modal-content-nopd .close{
  top: -1.4em;
  right: -1rem;
}

.modal-info .modal-content .close{
	color: #FFF;
	top: 5px;
	right: 5px;
	/* border: 2px solid #FFF; */
}
.modal-info .modal-body{
  background-color: #000000CC;
  border-radius: 1em;
  /* border: 1px solid #666; */
  padding: 3em 1.5em;
  background: url(../img/bg_note.jpg) center top repeat-y;
  background-color: #e3d1bd;
  background-size: 100%;
  /* margin-bottom: 9vw; */
  -webkit-filter: drop-shadow(0px 0px 5px #511511);
          filter: drop-shadow(0px 0px 5px #511511);
}
.modal-info .modal-body h3{
    border-bottom: 1px solid;
    margin-bottom: 1em;
}
.modal-info .modal-body hr{
    border-color: #6C2C2F;
    width: 100%;
    margin: 1.5rem 0;
}
.modal-info-light .modal-body{
	background-color: #EFDEB9;
	color: #6C2C2F;
}
.modal-info .modal-body p,
.modal-info .modal-body li{
    font-weight: bold;
}
.modal-info .modal-body a{
  text-decoration: underline;
}
.modal-info .modal-body > *:first-child{
	padding-right: 25px;
  padding-bottom: 1rem;
}
.modal-info .modal-body .table-bordered td, 
.modal-info .modal-body .table-bordered th {
    border: 1px solid #dee2e6;
    border-color: #6C2C2F;
    color: #6C2C2F;
}
.modal-info .modal-body .table-bordered th {
  white-space: nowrap;
}
.modal-info ol{
	margin-left: 1em;
}
.modal-info ol li{
	list-style-type:decimal;
	padding-bottom: 0.8em;
}
.modal-info ol li ol{
	margin-top: 0.8em;
}
.modal-info ol li li{
	list-style-type: lower-alpha;
}
.modal-info ol li li li{
	list-style-type: disc;
}
.modal-topics{
  text-align: left;
}
.modal-topics ul{
  list-style-type: disc;
  margin-left: 1.6rem;
}
.modal-topics .modal-body img{
  max-height: 50vh;
}
.fixed {
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100%;
}
.flex{
  display: -webkit-box;
  display: flex;
}
section#topics{
  padding-bottom: 10rem;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), color-stop(0rem),color-stop(rgba(0,0,0,1)), color-stop(18rem), to(rgba(0,0,0,0)));
  background: linear-gradient(to top, rgba(0,0,0,1), 0rem,rgba(0,0,0,1), 18rem, rgba(0,0,0,0));
}
@media screen and (min-width: 1738px) {
.ul-topics{
  padding-bottom: 5em;
}
  
}
.ul-topics .slick-prev, 
.ul-topics .slick-next {
  width: 2rem;
  height: 2rem;
}
.ul-topics .slick-prev:before, 
.ul-topics .slick-next:before {
    font-size: 2rem;
}
.ul-topics .slick-prev {
    left: -2.5rem;
}
.ul-topics .slick-next {
    right: -2.5rem;
}
.ul-topics-item {
  /* width: 30%;
  display: flex;
  flex-flow: column; */
  text-align: left;
  border: 1px solid #FFF;
  margin: 0 0.5em;
  line-height: 1.2;
}
.ul-topics-item a:hover{
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  text-shadow: 0 0 3px #eae4d1, 0 0 6px #eae4d1;
    /* box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); */
    -webkit-filter: brightness(1.2);
            filter: brightness(1.2);
}
.ul-topics-item p{
  padding: 0.8em;
  margin-bottom: 0;
}
.ul-topics-item p:first-of-type{
  height: 4.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* @media screen and (max-width:767px) {
.ul-topics-item p:first-of-type{
  height: 7.0rem;
}  
} */
.ul-topics-item img{
    width: 100%;
    max-height: 210px;
    -o-object-fit: cover;
       object-fit: cover;
    height: 30vw;
}
.ul-topics-item .txt-date{
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 0.5em;
}
.ul-topics .slick-next,
.ul-topics .slick-prev{
  margin: 0;
}
.fade-up {
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  /* transform: translateY(30px); */
  opacity: 0;
}
.on{
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    opacity: 1;
}
.fade-up.on {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1.0;
}
.fade-left {
    -webkit-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fade-left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.fade-right {
    -webkit-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fade-right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.slider-chara-wrap{
  /* width: 900px; */
  margin: 0em auto 0px;
  /* padding: 3em; */
  /* height: 550px; */
  padding-top: 2em;
  margin-top: -2em;
}
.slider-chara-wrap::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/chara_base.png) no-repeat;
    display: block;
    position: absolute;
    background-size: contain;
}
.slider-chara-wrap .slick-slider{
  z-index: 999;
}
.slider-chara-wrap .slick-track{
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
          align-items: baseline;
}
.slider-chara .slick-next,
.slider-chara .slick-prev{
    background-color: #511511;
    border-radius: 100%;
    width: 6vw;
    height: 6vw;
    top: 50%;
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    max-width: 70px;
    max-height: 70px;
}
.slider-chara .slick-next:hover{
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5);

}
.slider-chara .slick-prev:hover{
  -webkit-transform: scale(1.1) rotate(180deg);
          transform: scale(1.1) rotate(180deg);
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5);
}
.slider-chara .slick-next::before{
  margin: auto;
  content: "";
  right: 50%;
  background: url(../img/chara-arrw.png) no-repeat center center;
  background-size: contain;
  width: 2.5vw;
  height: 2.5vw;
  display: block;
}
.slider-chara .slick-prev::before{
    content: "";
  margin: auto;
  left: 50%;
    background: url(../img/chara-arrw.png) no-repeat center center;
    background-size: contain;
    width: 2.5vw;
    height: 2.5vw;
    display: block;
}
.slider-chara .slick-next{
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  right: 0.8vw;
}
.slider-chara .slick-prev{
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  left: 0.8vw;
}
.slider-chara .slick-next:before {
}
.slider-chara .slick-prev:before {
}

.slider-chara-nav .slick-slide{
  position: relative;
  min-width: 150px;
}
@media screen and (max-width: 1100px) {
  .slider-chara-nav .slick-slide{
    min-width: auto;
  }
}
@media screen and (max-width: 778px) {
  .slider-chara-nav .slick-slide{
    /* margin-top: 1em; */
  }
}
.slider-chara-nav .slick-track {
    /* flex-wrap: wrap; */
      -webkit-transform: unset !important;
              transform: unset !important;
  width: 100% !important;
  display: -webkit-box;
  display: flex;
      -webkit-box-pack: justify;
              justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
}
@media screen and (max-width: 1100px) {
  .slider-chara-nav .slick-track{
    /* flex-wrap: nowrap; */
  }
}
@media screen and (max-width: 778px) {
  .slider-chara-nav .slick-track{
    flex-wrap: wrap;
  }
}
.chara-img{
  position: absolute;
  left: 0;
  top: -250px;
}
.chara-prof{
  /* width: 60%; */
  margin-left: auto;
      /* position: absolute;
    right: 0;
    top: 0; */
}
.chara-btn{
    position: absolute;
    z-index: 2;
    left: 3%;
    width: 10%;
    bottom: 13%;
  display: -webkit-box;
  display: flex;
    -webkit-box-pack: start;
            justify-content: flex-start;
	-webkit-box-align: center;
	        align-items: center;
    z-index: 2;
}
@media screen and (max-width:720px) {
  .chara-btn{
    left: 44%;
  }  
}
.chara-btn:hover{
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.chara-btn::before{
  content: "";
  left: -18.7%;
  background: url(../img/i_arrow_f.png) no-repeat;
  display: block;
  width: 4vw;
  height: 4vw;
  position: absolute;
  z-index: 5;
  background-size: contain;
  /* top: 1vw; */
  -webkit-animation-name: finger;
          animation-name: finger;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  max-width: 50px;
  max-height: 50px;
  /* min-height: 25px;
  min-width: 25px; */
  /* animation: finger 1s ease-out infinite; */
}
.chara-all{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  position: relative;
  /* top: -3.5em; */
}
.chara-all-vanilla .v1,
.chara-all-vanilla .v2{
  position: absolute;
  left: 0;
  top: 0;
}
.chara-all-vanilla .v2{
  display: none;
}
.slider-chara-nav{
  position: relative;
  top: 0em;
  margin-top: 1em;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
.slider-chara-nav .slick-track{
	-webkit-box-pack: center;
	        justify-content: center;
  -webkit-transform:unset!important;
          transform:unset!important;
}
.slider-chara-nav .slick-slide{
  width: -webkit-fit-content!important;
  width: -moz-fit-content!important;
  width: fit-content!important;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  padding-bottom: 1.3rem;
}
.slider-chara-nav .slick-slide .chara-nav-img{
  /* width: fit-content!important; */
  background: url(../img/chara_frm.png) no-repeat;
  background-size: contain;
  background-position: center;
  padding: 13px;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  /* transition: 0.2s; */
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
@media screen and (max-width:767px) {
  .slider-chara-nav .slick-slide .chara-nav-img{
    padding: 8px;
  }
}
.slider-chara-nav .slick-slide .chara-nav-img-g{
  background-image: url(../img/chara_frm2.png);
}
.slider-chara-nav .slick-slide{
  cursor: pointer;
}

.slider-chara-nav .slick-slide {
    display: block;
    float: none !important;
    margin-bottom: 1rem;
    /* flex: 0 0 47.5%; */
}
.slider-chara-nav .slick-track:before {
  display: none;
}
.slider-chara-nav .slick-track:after {
  display: none;
}

.slider-chara-nav .slick-slide:hover .chara-nav-img{
  -webkit-transform: translateY(-5px) scale(1.1);
          transform: translateY(-5px) scale(1.1);
}
.slider-chara-nav .slick-slide img{
  background: #FFF;
  border-radius: 100%;
  width: 110px;
  margin: 0px auto;
}
@media screen and (max-width: 767px) {
  .slider-chara-nav .slick-slide{
    min-width: inherit;
  }
  .slider-chara-nav .slick-slide img{
    width: 14vw;
  }  
}
.slider-chara-nav .slick-slide img:hover{
  /* transform: scale(1.08); */
}
.slider-chara-nav .slick-current .chara-nav-img{
  background-image: url(../img/chara_frm_on.png);
  /* background: rgb(235 142 76); */
}
.slider-chara-nav .slick-current .chara-nav-img-g{
  background-image: url(../img/chara_frm2_on.png);
  /* background: rgb(235 142 76); */
}
.slider-chara-nav .chara-nav-name{
  color: #FFF;
  text-shadow: none;
  background: url(../img/chara_name_base.png) no-repeat center center;
  background-size: contain;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  text-align: center;
  padding: 3px;
  position: absolute;
  bottom: 0px;
  width: 100%;
    /* box-shadow: 0 0 3px #000; */
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  white-space: nowrap;
  line-height: 1.9rem;
}
.slider-chara-nav .chara-nav-name-s {
    letter-spacing: -0.3rem;
    font-size: 1rem;
}
.slider-chara-nav .chara-nav-name-g{
  background-image: url(../img/chara_name_base2.png);
}
.body-en .slider-chara-nav-item-14 .chara-nav-name{
  letter-spacing: -0.05em;
}
@media screen and (max-width:767px) {
.body-en .slider-chara-nav-item-14 .chara-nav-name{
  font-size: 0.7rem;
}
}
@media screen and (max-width:767px) {
  .slider-chara-nav .chara-nav-name{
    font-size: 1.0rem;
  }
}
.slider-chara-nav-item-15 .chara-nav-name,
.slider-chara-nav-item-17 .chara-nav-name{
  letter-spacing: -0.25em;
}
.body-en .slider-chara-nav-item-15 .chara-nav-name,
.body-en .slider-chara-nav-item-17 .chara-nav-name{
  letter-spacing: 0em;
}
@media screen and (max-width:767px) {
.slider-chara-nav-item-15 .chara-nav-name,
.slider-chara-nav-item-17 .chara-nav-name{
  font-size: 0.7rem;
}
}

.slider-chara-nav .slick-slide:hover .chara-nav-name{
  color: #FFF;
  text-shadow: 0 0 3px #eae4d1, 0 0 6px #eae4d1;
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.slider-chara-nav .slick-list{
  overflow: visible;
  padding-left: 0.5vw!important;
  padding-right: 0.5vw!important;
}
.chara-designer{
  margin-top: 3em;
  margin-bottom: 5em;
  /* background: #FFF6; */
  /* border-radius: 1em; */
  text-align: center;
  max-width: 900px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  position: relative;
}
.chara-designer .cap-name{
  margin-top: 1em;
  text-align: left;
}
@media screen and (max-width:767px) {
  .chara-designer .cap-name{
    margin-left: auto;
    margin-right: auto;
  }
}
.chara-designer::before{
  content: "";
  background: #FFF6;
  -webkit-transform: rotate(1.4deg);
          transform: rotate(1.4deg);
  position: absolute;
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
  left: -5px;
    top: 5px;
    overflow-x: hidden;
}
.chara-designer::after{
    content: url(../img/note_tape.png);
    display: block;
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    right: -15px;
    top: -16px;
    -webkit-transform-origin-x: right;
    margin-left: auto;
    mix-blend-mode: multiply;
    overflow-x: hidden;
}
.chara-designer .row > div:last-of-type{
  padding-right: 2.2em;
}
.chara-designer h3 {
    /* font-size: 0.8em; */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(0%, #E0BA89AA));
    background: linear-gradient(transparent 80%, #E0BA89AA 0%);
    /* padding: 0 0.5em; */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    line-height: 1;
    margin-bottom: 0.5em;}

.chara-designer img{
    border-radius: 100%;
}
@media screen and (max-width:767px) {  
  .chara-designer img{
      max-width: 193px;
  }
}
.btn-detail{
  color: #FFF;
  text-shadow: 0 0 3px #000,0 0 3px #000,0 0 3px #000;
  background: url(../img/btn_base.png) no-repeat ;
  background-size: contain;
  background-position: center;
  display: block;
  padding: 1.0rem 3rem 1.0rem 2rem;
  position: relative;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2;
  min-width: 21rem;
}
.bg-sys .btn-detail{
    min-width: 27rem;
    line-height: 1;
}
.body-en.bg-sys .btn-detail{
  font-size: 1rem;
}
@media screen and (max-width:767px) {
  .bg-sys .btn-detail{
    font-size: 1.1rem;
    min-width: 100%;
  }
}
.btn-detail:hover{
  color: #FFF;
  text-shadow: 0 0 3px #eae4d1, 0 0 6px #eae4d1;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.btn-detail .cap{
  margin-right: 7%;
  height: 24px;
}
.btn-buy {
  color: #FFF!important;
    position: relative;
    /* background: linear-gradient(to top,#362706, #99846a 100%); */
    background-color: #c8161d;
    border: 0;
    border-radius: 3px;
    display: inline-block;
    color: #6d2c2f;
    padding: 0.5em 1.5em 0.5em 2.3em;
    font-size: 1.1rem;
    margin: 15px auto 0px;
    /* font-weight: bold; */
    text-shadow: 0px 0px 4px #000;
    border: 1px solid #ff5a60;
    cursor: pointer;
    border-radius: 2px;
    min-width: 10em;
}
.btn-buy:hover {
  transform: scale(1.05);
}
.btn-buy::before {
    content: "\f054";
    font-family: 'Font awesome 6 Free';
    font-weight: bold;
    padding-right: 0.5em;
    /* position: absolute; */
    font-size: 0.7em;
    line-height: 2;
    left: 2em;
    vertical-align: middle;
    margin-left: -1.3em;
    font: var(--fa-font-solid);
}
.i-arrw{
    display: block;
    opacity: 1;
    -webkit-animation-name: finger;
            animation-name: finger;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    width: 6rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin-right: 0.5rem;
}
.btn-detail .i-arrw{
  right: 8%;
  display: block;
	/* -webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center; */
  /* height: 2.0em; */
  width: 2.0em;
  height: auto;
  opacity: 1;
  -webkit-animation-name: finger;
          animation-name: finger;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  min-height: 35px;
  min-width: 35px;
  /* width: fit-content; */
}
.btn-detail-img{
  background: none;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.btn-detail-img .i-arrw{
    position: absolute;
    left: 2rem;
}
.btn-detail-img:hover{
  -webkit-transform: scale(1.0);
          transform: scale(1.0);
}

/* .anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
} */
@-webkit-keyframes poyopoyo {
  0% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
  50% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  /* 0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.85);
  } */
}
@keyframes poyopoyo {
  0% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
  50% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  /* 0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.85);
  } */
}

@-webkit-keyframes finger {
  0% {
    -webkit-transform:translate(0, 0);
            transform:translate(0, 0);
  }
  50% {
    -webkit-transform:translate(-7px, 0px);
            transform:translate(-7px, 0px);
  }
  100% {
    -webkit-transform:translate(0, 0);
            transform:translate(0, 0);
  }
}

@keyframes finger {
  0% {
    -webkit-transform:translate(0, 0);
            transform:translate(0, 0);
  }
  50% {
    -webkit-transform:translate(-7px, 0px);
            transform:translate(-7px, 0px);
  }
  100% {
    -webkit-transform:translate(0, 0);
            transform:translate(0, 0);
  }
}

.slider-story-wrap{
  /* max-width: 1100px; */
  margin: 0em auto;
  position: relative;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  padding: 0 0 ;
  height: 65vw;
}
@media screen and (max-width:767px) {
  .slider-story-wrap{
  height: 37rem;
  }  
}
.slider-story-wrap::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 29vw;
    background: url(../img/note_cut_frm_top.png) no-repeat;
    background-size: 100%;
    top: -7.6vw;
    z-index: 1;
}
.slider-story-wrap::after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 6vw;
    background: url(../img/note_cut_frm_btm.png) no-repeat;
    background-size: 100%;
    bottom: -1.8vw;
    z-index: 1;
}
.slider-story{
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    /* -webkit-mask-image: url(../img/story_mask.png);
    mask-image: url(../img/story_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%; */
    background-color: #000;
}
.slider-story .slick-slide{
  height: 100%;
}
.slider-story .slick-track{
  height: 100%;
}
.slider-story .slick-list{
  opacity: 0.4;
  height: 100%;
}
.slider-story-item img{
    display: block;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
}
.story-monologue{
    position: absolute;
    color: #FFF;
    text-shadow: 0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000;
    /* left: 45%; */
    /* text-align: left; */
    /* width: 50%; */
    /* margin-bottom: 1.2em; */
    margin-top: 11vw;
    z-index: 2;
}
@media screen and (max-width:1020px) {
  .story-monologue{
    /* top: 11vw; */
    font-size: 2vw;
  }
  #story p:not(:first-of-type){
    padding-bottom: 0;
    line-height: 1.6;
  }
  
}
.story-img{
    position: absolute;
    left: 0;
    width: 43%;
    bottom: -10px;
}
.story-text{
  position: relative;
  z-index: 2;
  padding: 0 0.5em;
}
.fade-blr{
    -webkit-filter: blur(40px) brightness(1.5);
            filter: blur(40px) brightness(1.5);
    opacity: 0;
    /* transition-delay: 1s; */
    -webkit-transition: 2s;
    transition: 2s;
}
.fade-blr.on {
  -webkit-filter: blur(0) brightness(1);
          filter: blur(0) brightness(1);
  opacity: 1.0;
} 
.story-mask{
    position: relative;
    width: 96.875%;
    margin-left: auto;
    -webkit-mask-image: url(../img/story_mask.png);
    mask-image: url(../img/story_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: #000;
    max-width: 900px;
    margin: auto;
}
.story-mask img{
    display: block;
    width: 100%;
}
.story-last-img{
  position: relative;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  padding: 20vh 0 40vh;
}
.story-last-img span{
  /* position: absolute;
  width: fit-content; */
  color: #FFF;
  text-shadow: 0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000;
  padding: 0 1em;
}
.story-last-img span.fade-blr{
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition: 1s;
    transition: 1s;
}
.story-last-img img{
  width: 100%;
}
.body-pg #story p{
  text-align: center;
  font-size: 1.4rem;
}
.body-pg #story .sec-frm-inner:first-of-type  p{
  font-size: 2.1rem;
}
.body-pg #story .sec-frm{
  background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), color-stop(3vw),color-stop(rgba(0,0,0,0)), color-stop(16vh), to(rgba(0,0,0,0)));
  background:linear-gradient(to top, rgba(0,0,0,1), 3vw,rgba(0,0,0,0), 16vh, rgba(0,0,0,0));
}
.body-pg #story .sec-frm-inner{
  /* height: 20vh; */
  /* margin-top: 100vh; */
  padding-bottom: 20vh;
}
.body-pg #story .sec-frm-inner.story-bg-4{
  /* background:linear-gradient(to top, rgba(0,0,0,0.85), 8vh,rgba(0,0,0,0), 15vh, rgba(0,0,0,0)); */
}
.body-pg #story .sec-frm-inner:first-of-type{
  margin-top: 20vh;
  /* margin-top: 100vh; */
}
.body-pg #story .sec-frm-world .sec-frm-inner{
  height: 100vh;
}
.body-pg #story .sec-frm-inner.fixed{
  margin-top: 0vh;
}
.body-pg #story .sec-frm-inner.fixed.none {
  opacity: 0;
  z-index: -1;
}
.body-pg #story .sec-frm-inner > div{
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    flex-wrap: wrap;
}


.op-half{
  opacity: 1;
  position: relative;
  height: 80vw;
  width: 80%;
  margin: auto;
}
.story-fade{
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  /* opacity: 0.5; */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: start;
	-webkit-box-pack: center;
	        justify-content: center;
  position: absolute;
  width: 70%;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
}
.story-fade.on{
  opacity: 1;
}
.sec-contents .story-fade:not(:first-of-type){
  /* top: -15em; */
}
.story-fade1{
  -webkit-transform: rotate(-0.5deg) translate(12px,0px);
          transform: rotate(-0.5deg) translate(12px,0px);
  /* transform: scaleX(2); */
  top: 2vw;
  left: 0px;
}
.story-fade2{
  -webkit-transform: rotate(0.5deg) translate(12px,0px);
          transform: rotate(0.5deg) translate(12px,0px);
  /* transform: scaleX(2); */
  top: 32vw;
  right: 0px;
}
.story-fade3{
  -webkit-transform: rotate(-0.5deg) translate(-12px,0px);
          transform: rotate(-0.5deg) translate(-12px,0px);
  top: 25vw;
  /* right: ; */

}
.story-fade4{
  -webkit-transform: rotate(-1deg) translate(5px,0px);
          transform: rotate(-1deg) translate(5px,0px);
  top: 31vw;
  right: 0px;
}
.story-fade5{
  -webkit-transform: rotate(1.5deg) translate(-5px,0px);
          transform: rotate(1.5deg) translate(-5px,0px);
  top: 0vw;
}
.story-fade6{
  -webkit-transform: rotate(4deg) translate(-5px,0px);
          transform: rotate(4deg) translate(-5px,0px);
  top: 0vw;
  right: 0px;
}
.fs-lg{
  font-size: 1.2rem;
}

.tab-wrap {
  display: -webkit-box;
  display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 20px 0 0px;
  /* margin-bottom: 6em; */
}
.tab-wrap-world{
  -webkit-filter: drop-shadow(0px 0px 5px #511511);
          filter: drop-shadow(0px 0px 5px #511511);
}
.tab-label {
	/* color: Gray; */
	cursor: pointer;
	-webkit-box-flex: 1;
	        flex: 1;
	font-weight: bold;
	-webkit-box-ordinal-group: 0;
	        order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	-webkit-transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	white-space: nowrap;
  background-color: #511511;
  color: #FFF;
  text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
  font-size: 1.1rem;
  z-index: 1;
}
#product .tab-label {
  margin-left:0.05rem;
  margin-right:0.05rem;
  /* min-width: 33%; */
  padding: 1vw;
}
@media screen and (min-width: 769px) {
  #product .tab-label {
    flex: 1 1 190px;
    padding: 12px 24px;
  }  
}
#world{
  padding-top: 5em;
  margin-top: -5em;
}
#world .tab-label{
  margin-bottom: 0;
  height: 15vh;
  /* width: calc(100% / 3); */
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
  background-color: #0006;
  background-blend-mode: multiply;

}
#world .tab-label-1{
  background-image: url(../img/world_gasco.jpg);
  background-size: cover;
}
@media screen and (max-width:767px){
  #world .tab-label-1{
    letter-spacing: -0.05em;
    font-size: 0.8rem;
  }
}
#world .tab-label-2{
  background-image: url(../img/world_pharaoh.jpg);
  background-size: cover;
}
#world .tab-label-3{
  background-image: url(../img/world_port.jpg);
  background-size: cover;
}
.tab-label:hover {
	/* background: rgba(0, 191, 255,.1); */
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  /* transform: scale(1.1); */
}

.tab-switch:checked + .tab-label {
    text-shadow: 0 0 4px #FFF;
    background-color: #8d2e27;
    /* filter: brightness(1.2); */
	/* color: DeepSkyBlue; */
}
#world .tab-switch:checked + .tab-label {
    text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
      /* background-color: #0003; */
  background-blend-mode: normal;

    /* filter: brightness(0.8); */
    /* background-color: #8d2e27; */
	/* color: DeepSkyBlue; */
}
.tab-icon-f .tab-switch:checked + .tab-label::before {
  content: "";
  background: url(../img/i_arrow_f.png) no-repeat;
  display: block;
  width: 4vw;
  height: 4vw;
  /* position: absolute; */
  z-index: 5;
  background-size: contain;
  top: 1vw;
  -webkit-animation-name: finger;
          animation-name: finger;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  min-height: 35px;
  min-width: 35px;
  /* animation: finger 1s ease-out infinite; */

}

.tab-label::after {
	/* background: DeepSkyBlue; */
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	-webkit-transform: translateX(100%);
	        transform: translateX(100%);
	-webkit-transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;

}

.tab-switch:checked ~ .tab-label::after {
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0em 20px 0;
	pointer-events:none;
	/* transform: translateX(-30%); */
	-webkit-transition: opacity .3s 80ms, -webkit-transform .3s 80ms;
	transition: opacity .3s 80ms, -webkit-transform .3s 80ms;
	transition: transform .3s 80ms, opacity .3s 80ms;
	transition: transform .3s 80ms, opacity .3s 80ms, -webkit-transform .3s 80ms;
	width: 100%;
    /* background: url(../img/frm_brwn.png) center center no-repeat; */
    /* background-size: 100%; */
    position: relative;
    top: -3em;
}
#world .tab-content{
  /* top: 0; */
  padding: 0;
    color: #FFF;
  text-shadow: 0 0 4px #000,0 0 4px #000,0 0 4px #000,0 0 4px #000;

}
#world .tab-content .vegas-slide{
  /* -webkit-mask-image: url(../img/mask_world.png);
  mask-image: url(../img/mask_world.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%; */
  height: 90vh;
}
.tab-content-inner{
  padding: 2em 1em 0em;
}
#world .tab-content-inner{
  /* height: 80vh; */
}
.tab-content-inner > *{
  margin-top: 1em;
}
.tab-content-inner h3{
  margin-top: 1em;
}
.tab-switch:checked ~ .tab-content {
	/* transform: translateX(30%); */
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	-webkit-box-ordinal-group: 2;
	        order: 1;
	pointer-events:auto;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	-webkit-box-ordinal-group: 0;
	        order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}

.slider-sys img{
    position: relative;
    width: 96.875%;
    margin-left: auto;
    max-width: 900px;
    margin: auto;
    -webkit-filter: drop-shadow(0px 0px 5px #511511);
            filter: drop-shadow(0px 0px 5px #511511);
}
.slider-sys .slick-slide{
  padding: 10px 0;
}

/* .tab-label.fs-small{
    font-size: 1em;
    letter-spacing: -2px;
    line-height: 2;
} */
.sys-title{
  background: url(../img/sys_bg_01.png) top center no-repeat;
  background-size: cover;
}
/* .tab-wrap .tab-label:nth-of-type(1){
  background: url(../img/sys_01_1.jpg);
  background-size: 100%;
  background-blend-mode:multiply;
  background-color:rgba(0,0,0,0.8);
} */
.sys-cap{
  position: relative;
  top: -3em;
}

.slider-sys .slick-dots li button:before{
	color: #511511;
	opacity: 0.35;
	content: '';
	border: 7px solid #511511;
	border-radius: 50%;
	height: 7px;
	width: 7px;
}
.slider-sys  .slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #511511;
}

.box-tape{
  position: relative;
  -webkit-transform: rotate(1deg);
          transform: rotate(1deg);
}
.box-tape::after {
    content: url(../img/note_tape.png);
    display: block;
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    right: -38px;
    top: -16px;
    -webkit-transform-origin-x: right;
    margin-left: auto;
    mix-blend-mode: multiply;
}
.ul-nml{
    list-style-type: disc;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}
.frm-grd-bk{
    /* background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 12% 88%, rgba(0, 0, 0, 0)); */
    /* background: linear-gradient(to right, rgba(0,0,0,0.25), 69%, rgba(0,0,0,0)); */
    /* width: 50vw; */
    /* position: absolute; */
    left: 0;
    /* padding: 1rem 1rem 0; */
    top: 0;
    width: 100%;
    padding: 1rem 1rem 0;
    text-align: center;
    color: #FFF;
    text-shadow: 0 0 4px #000,0 0 4px #000,0 0 4px #000,0 0 4px #000;
}

.frm-grd-bk::before{
    content: "";
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 12% 88%, rgba(0, 0, 0, 0));
    left: 0;
    top: 0;
    width: 100%;
    -webkit-filter: blur(8px);
            filter: blur(8px);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}
.bg-sys .frm-grd-bk::before{
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5% 88%, rgba(0, 0, 0, 0));

}

.sec-frm-world h3{
  font-size: 1.8rem;
}
.sec-frm-world .vegas-content-scrollable{
  height: 100vh;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    /* padding-top: 0; */
}
.sec-frm-world h4{
    /* text-align: left; */
    font-size: 1.4rem;
}
.sec-frm-world p{
  text-align: center;
  position: relative;
}
.sec-frm-world .vegas-content{
  padding-top: 0!important;
  width: 100%;
}
.world-3 .vegas-slide-inner{
  background-position: bottom center!important;
}
#endcard{
  overflow: hidden;
}
#endcard .container-fluid{
  max-width: 1150px;
}
.endcard-inner{
  padding: 3em 0 12vh;
}
.endcard-inner::before{
    content: "";
    background: #FFF6;
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
    position: absolute;
  display: -webkit-box;
  display: flex;
    width: 200%;
    height: 90%;
    left: -50%;
    top: 3em;
    overflow: hidden;
}

.row-thanks{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
-webkit-box-align: center;
        align-items: center;
  margin: auto;
}
.row-thanks a{
  /* width: fit-content; */
}
.i-zoom{
	position: relative;
	display: inline-block;
}
.i-zoom::before{
	position: absolute;
	right: -9px;
	bottom: 0;
	content: "\f00e";
	font-family: 'Font awesome 6 Free';
	z-index: 2;
	font-weight: 900;
	font-size: 1.5em;
  font: var(--fa-font-solid);
	/* transform: rotate(90deg); */
}
.i-zoom img {
    /* -webkit-filter: brightness(0.85);
    filter: brightness(0.85); */
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    /* transform: scale(0.95); */
}
.i-zoom:hover img {
    transform: scale(1.05);
    /* -webkit-filter: brightness(1);
    filter: brightness(1); */
}
.box-char .box-endcard-frm{
	background: url(../img/character/char_frame.png) left top no-repeat;
	display: block;
	width: 242px;
	height: 262px;
	position: relative;
	margin: auto;
  margin-bottom: 0.5rem;
}
.box-char-g a{
	background: url(../img/character/char_frame_g.png) left top no-repeat;
}
.box-char-b a{
	background: url(../img/character/char_frame_b.png) left top no-repeat;
}
.box-char-b .i-zoom-char::before{
	right: -10px;
}
.box-char-b a span{
	font-size: 0.9em;
	line-height: 1.7;
}

.box-char a:hover img{
	opacity: 1;
}
.box-char a:hover{
	cursor: pointer;
	/* opacity: 0.7; */
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.box-char a span{
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 19px;
	text-align: center;
	width: 242px;
	font-weight: bold;
	color: #FFF;
	/* text-shadow: none; */
}

.box-endcard{
  text-align: center;
}
.box-endcard a{
    display: block;
    margin: 0 4px;
}
.box-endcard .box-endcard-frm{
    background: url(../img/endcard_frm.png) left top no-repeat;
    background-size: 100%;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    flex-wrap: wrap;
    padding: 1em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.box-endcard a:hover .box-endcard-frm{
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.box-endcard p::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
}
.box-endcard img{
	border-radius: 100%;
  width: 180px;
	/* border: 2px solid #E0BA89; */
	/* width: 180px;
	position: absolute;
	left: 28px;
	top: 27px; */
}
.box-endcard p{
  text-align: center;
  font-weight: bold;
}
.box-endcard .i-zoom::before{
	right: 5px;
}
@media screen and (max-width:767px){
	/* .modal-endcard{
			display: flex;
			align-items: center;
	} */
	.modal-endcard .modal-dialog-centered{
		-webkit-box-align: inherit;
		        align-items: inherit;

	}
	/* .modal-endcard .modal-dialog-centered .modal-content{
		    padding-bottom: 100%;
	} */
}
.w-fit-center{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.modal-endcard .modal-content{
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}
.modal-endcard p{
	margin-bottom: 0;
	text-align: center;
}
.modal-endcard .close{
	top: 0;
	background: none;
}
.modal-endcard .row{
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
	padding: 0 15px;
  width: 100%;
}
.modal-endcard .endcard-name{
	font-size: 1.2em;
	text-align: center;
}
.modal-endcard .endcard-icon img{
	border-radius: 100%;
	width: 320px;
	margin-bottom: 0.5em;
}
.modal-endcard .modal-body > .row::before{
    content: "";
    position: absolute;
    display: block;
    left: -30px;
    top: -40px;
    background: url(../img/mark_salut.png) no-repeat left top;
    background-size: contain;
    width: 7em;
    height: 7em;
    /* transform: rotate(155deg); */
}
.modal-endcard .modal-body::after{
    content: "";
    position: absolute;
    display: block;
    right: -40px;
    bottom: -50px;
    background: url(../img/mark_gear.png) no-repeat left top;
    background-size: contain;
    width: 8em;
    height: 8em;
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
}
@media screen and (max-width:767px){
	.modal-endcard .modal-body > .row::before{
    left: -10px;
    top: -10px;
    /* transform: rotate(155deg) scale(0.6); */
	}
	.modal-endcard .modal-body::after{
    right: -20px;
    bottom: -5em;
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
	}
}
.endcard-pro span,
.endcard-mes span,
.endcard-sns span{
	font-size: 0.8em;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(0%, #E0BA89AA));
	background: linear-gradient(transparent 80%, #E0BA89AA 0%);
	line-height: 2.5;
	padding: 0 0.5em;
}
p.endcard-pro {
	margin-bottom: 0.5em;
	padding-bottom: 1.5em;
	text-align: left;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.endcard-name{
	letter-spacing: 0.1em;
	font-weight: bold;
}
.endcard-name a{
	display: inline-block;
	margin: 0 0.2em;
}
.endcard-name img{
	vertical-align: middle;
	max-height: 21px;
}
.endcard-name i{
	font-size: 21px;
}
.fa-twitter{
	color: #1DA1F2;
}
.ul-sns .fa-twitter{
	color: inherit;
}
.endcard-name ul{
  display: -webkit-box;
  display: flex;
}
.endcard-name li{
	font-size: 0;
	padding: 0.2em;
	width: 28px;
	/* display: inline-block; */
}
.modal-dialog-endcard {
    min-height: calc(100vh - 60px);
  display: -webkit-box;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
	-webkit-box-pack: center;
	        justify-content: center;
    overflow: auto;
}
@media(max-width: 767px) {
  .modal-dialog-endcard {
    min-height: calc(100vh - 20px);
  }
}

.modal-endcard .modal-body{
	background: url(../img/endcard_01.jpg) right center no-repeat;
	background-size: cover;
	border-radius: 1em;
	color: #222;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
}
.modal-endcard .modal-body .row .col-lg:last-of-type{
	padding-bottom: 3em;
}
#endcard_01 .modal-body{
	background-image: url(../img/endcard_01.jpg);
}
#endcard_02 .modal-body{
	background-image: url(../img/endcard_02.jpg);
}
#endcard_03 .modal-body{
	background-image: url(../img/endcard_03.jpg);
}
#endcard_04 .modal-body{
	background-image: url(../img/endcard_04.jpg);
}
#endcard_05 .modal-body{
	background-image: url(../img/endcard_05.jpg);
}
#endcard_06 .modal-body{
	background-image: url(../img/endcard_06.jpg);
}
#endcard_07 .modal-body{
	background-image: url(../img/endcard_07.jpg);
}
#endcard_08 .modal-body{
	background-image: url(../img/endcard_08.jpg);
}
#endcard_09 .modal-body{
	background-image: url(../img/endcard_09.jpg);
}
#endcard_10 .modal-body{
	background-image: url(../img/endcard_10.jpg);
}
#endcard_11 .modal-body{
	background-image: url(../img/endcard_11.jpg);
}
.modal-endcard .modal-body a,
.modal-endcard .modal-body a:hover,
.modal-endcard .modal-body a:active{
	color:#461719;
}
.modal-endcard .modal-body::before{
    content: "";
    background-color: #fff4e9db;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 1em;
}
.modal-dialog-fluid {
  max-width: inherit;
  width: 98%;
}
.timeline{
	text-align: center;
  display: -webkit-box;
  display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	        flex-flow: column;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
}
.twitter-follow-button{
	margin-left: 0.7em;
	vertical-align: middle;
}
.twitter-timeline{
	background-color: #000a;
}

.cap-twi {
    font-size: 1.2rem;
    max-width: 500px;
    padding: 0.5em 0em;
    border-top: 1px solid #6b2c2f;
    border-bottom: 1px solid #6b2c2f;
    background: -webkit-gradient(linear, left top, right top, from(#0000), color-stop(10%, #000a), color-stop(90%, #000a), to(#0000));
    background: linear-gradient(to right, #0000 0%, #000a 10%, #000a 90%, #0000 100%);
}
.cap-sys{
    width: 100%;
    line-height: 1.6;
    font-size: 1.4rem;
    font-weight: bold;
    /* text-shadow: 0px 0px 2px #E4C499,0px 0px 3px #E4C499; */
    padding: 0.5em 0em;
    /* color: #3C230F; */
    /* border-top: 1px solid #6C2C2F;
    border-bottom: 1px solid #6C2C2F; */
    /* background: -moz-linear-gradient(right, #6C2B2F00 0%, #6C2B2FCC 10%, #6C2B2FCC 90%, #6C2B2F00 100%);
    background: -webkit-linear-gradient(right, #6C2B2F00 0%, #6C2B2FCC 10%, #6C2B2FCC 90%, #6C2B2F00 100%); */
    background: -webkit-gradient(linear, left top, right top, from(#3c010400), color-stop(10%, #3c0104cc), color-stop(90%, #6C2B2FCC), to(#6C2B2F00));
    background: linear-gradient(to right, #3c010400 0%, #3c0104cc 10%, #6C2B2FCC 90%, #6C2B2F00 100%);
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    margin-bottom: 2rem;
}
.line-white-g{
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
.line-white-g::before{
  content: "";
  width: 100%;
  height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(#FFF0), color-stop(10%, #FFF9), color-stop(90%, #FFF9), to(#FFF0));
    background: linear-gradient(to right, #FFF0 0%, #FFF9 10%, #FFF9
     90%, #FFF0 100%);
    content: "";
    display: block;
    position: relative;
    top: 2.5rem;
}
@media(max-width: 767px) {
.cap-sys .i-arrw{
    position: absolute;
    left: 0;
    top: -1.6rem;
}
}
.img-zoom{
	width: 2em;
  cursor: pointer;
}
.is-animate {
   opacity: 1;
   -webkit-animation: .6s zoom-in;
           animation: .6s zoom-in;
}

@-webkit-keyframes zoom-in {
   0% {
     opacity: 0.3;
     -webkit-transform: scale(.9);
             transform: scale(.9);
   }
   100% {
     opacity: 1;
     -webkit-transform: none;
             transform: none;
   }
}

@keyframes zoom-in {
   0% {
     opacity: 0.3;
     -webkit-transform: scale(.9);
             transform: scale(.9);
   }
   100% {
     opacity: 1;
     -webkit-transform: none;
             transform: none;
   }
}
.category-btn{
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    position: relative;
    z-index: 9;
}
.category-btn .tab-icon-f{
  display: -webkit-box;
  display: flex;
}
.category-btn .tab-label{ 
    padding: 0.5rem;
    background-color: #6b2c2f;
    color: #FFF;
    border-radius: 0.2rem;
    margin: 0rem 0.3rem 0;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
}
/* .syspg-slider-01,
.syspg-slider-02,
.syspg-slider-03{
  margin-bottom: 6rem!important;
} */
.syspg-slider-01 .slick-slide,
.syspg-slider-02 .slick-slide,
.syspg-slider-03 .slick-slide{
    /* display: block; */
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
}

#box1{
    -webkit-animation: 90s linear infinite rotation1;
            animation: 90s linear infinite rotation1;
    opacity: 0.2;
    position: absolute;
    /* left: -20vw; */
    top: 0vw;
  }
#box1 img{
  width: 40vw;
  max-width: 25rem;
}
.box-right{
  right: 0px;
}
@-webkit-keyframes rotation1{
  0%{ -webkit-transform:rotate(0); transform:rotate(0);}
  100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes rotation1{
  0%{ -webkit-transform:rotate(0); transform:rotate(0);}
  100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
#chapter_01{
  font-weight: bold;
}
.i-skill{
  width: 3rem;
    -webkit-filter: drop-shadow(0px 0px 3px #FFF);
            filter: drop-shadow(0px 0px 3px #FFF);
    float: left;
    margin-right: 0.5rem;
}
.pd-icon{
  padding-left: 3.4rem!important;
}
.pd-icon img{
  position: absolute;
  left: 0px;
}
.shadow-white{
    -webkit-filter: drop-shadow(0px 0px 3px #FFF);
            filter: drop-shadow(0px 0px 3px #FFF);
    display: block;
}
.shadow-brown{
  -webkit-filter: drop-shadow(0px 0px 3px #511511);
          filter: drop-shadow(0px 0px 3px #511511);
}
.slick-slide .shadow-white,
[class*="col-"] .shadow-white{
    margin: 5px auto;
    max-width: 97.5%;
}
.sys-up{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #8d2e27));
    background: linear-gradient(transparent 50%, #8d2e27 0%);
    line-height: 2.5;
    padding: 0 0.5em;
}
.line-green{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #0b7222));
    background: linear-gradient(transparent 50%, #0b7222 0%);
    line-height: 2.5;
    padding: 0 0.5em;
}
.line-red{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #921f38));
    background: linear-gradient(transparent 50%, #921f38 0%);
    line-height: 2.5;
    padding: 0 0.5em;
}
.line-yellow{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #f5e2ac));
    background: linear-gradient(transparent 50%, #f5e2ac 0%);
    line-height: 2.5;
    padding: 0 0.5em;
}
p .line-red{
  line-height: inherit;
}
.line-blue{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #104fa0));
    background: linear-gradient(transparent 50%, #104fa0 0%);
    line-height: 2.5;
    padding: 0 0.5em;
}
.anim-poyo2 {
  -webkit-animation: poyo2 2s ease-out infinite;
          animation: poyo2 2s ease-out infinite;
  opacity: 1;
}
@-webkit-keyframes poyo2 {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
  50%, 70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@keyframes poyo2 {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
  50%, 70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media screen and (max-width:767px) {
  
.row-r{
  display: -webkit-box;
  display: flex;
    flex-wrap: wrap;
    margin: 0 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
}
}

.i-new::before{
  content: "";
  background: url(../img/i_new.png) no-repeat;
  background-size: 100%;
  width: 3rem;
  position: absolute;
  left: 0;
  top: -0.5rem;
  -webkit-animation: poyo2 2s ease-out infinite;
          animation: poyo2 2s ease-out infinite;
  opacity: 1;
      display: block;
    height: 3rem;
}
.row-thanks .i-new::before {
    content: "";
    background: url(../img/i_new.png) no-repeat;
    background-size: 100%;
    width: 3rem;
    position: absolute;
    -webkit-animation: poyo2 2s ease-out infinite;
            animation: poyo2 2s ease-out infinite;
    opacity: 1;
    display: block;
    height: 3rem;
    left: calc(50% - 6rem);
    top: 1rem;
    z-index: 2;
    width: 4rem;
}
.tab-label.i-new::before{
  left: 20%;
}
.btn-movie{
  font-size: 1.4rem;
    position: relative;
    height: 11rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    /* width: 25rem; */
    width: 100%;
    overflow: hidden;
    border-radius: 0.9rem;
    border: 9px solid #c5b361;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    /* padding-top: 4rem; */
    background-color: #c5b361;
    /* color: #000; */
    text-shadow: 0 0 8px #000,0 0 4px #000,0 0 4px #000,0 0 4px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000;
}
.btn-movie::before {
    /* position: absolute; */
    content: "";
    z-index: 2;
    width: 5rem;
    background: url(../img/i_play_w.png) no-repeat;
    height: 5rem;
    background-size: contain;
    z-index: 0;
    /* top: 1rem; */
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    margin-right: 0.5rem;
    z-index: 2;
    position: relative;

}
.btn-movie:hover{
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
}
.btn-movie:hover::before{
    -webkit-transform: scale(1);
            transform: scale(1);
}
.btn-movie video{
    position: absolute;
    display: block;
    /* height: 20rem; */
    z-index: -1;
    -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
    opacity: 0.8;
    width: 110%;
    box-sizing:border-box;
    /* min-width: 95vw; */
    /* height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content; */
    /* filter: blur(5px); */
    -o-object-fit: cover;
       object-fit: cover;
}
.btn-movie .i-arrw{
  width: 4rem;
}
.btn-movie .frm-gear{
  position: absolute;
  width: 100%;
  height: 100%;
}
.btn-movie .frm-gear::before{
    content: "";
    background: url(../img/frm_gear.png) no-repeat;
    width: 12rem;
    height: 12rem;
    position: absolute;
    background-size: cover;
    z-index: 0;
    left: -6rem;
    top: -6rem;
    -webkit-animation: 30s linear infinite rotation1;
            animation: 30s linear infinite rotation1;
    /* opacity: 0.6; */
}
.btn-movie .frm-gear::after{
    content: "";
    background: url(../img/frm_gear.png) no-repeat;
    width: 12rem;
    height: 12rem;
    position: absolute;
    background-size: cover;
    z-index: 0;
    right: -6rem;
    bottom: -6rem;
    -webkit-animation: 30s linear infinite rotation1;
            animation: 30s linear infinite rotation1;
    /* opacity: 0.6; */
}
@media screen and (max-width:767px) {
.btn-movie .frm-gear::before{
    width: 10rem;
    height: 10rem;
    left: -5rem;
    top: -5rem;
}
.btn-movie .frm-gear::after{
    width: 10rem;
    height: 10rem;
    right: -5rem;
    bottom: -5rem;
}
  
}
.a-cap{
  position: relative;
  z-index: 2;
}
.sys-02-bg{
    position: -webkit-sticky;
    position: sticky;
    height: 120vh;
    top: -5vh;
    width: 100%;
}
.sys-02-bg + .sec-frm{
  margin-top: calc(-120vh + 3rem);
}
.sys-02-bg img{
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    left: 0%;
    height: 100%;
}
.img-target{
  position: relative;

}
.target {
	-webkit-animation: flash 0.3s linear infinite;
	        animation: flash 0.3s linear infinite;
	-webkit-animation: flash-move 0.5s linear infinite;
	        animation: flash-move 0.5s linear infinite;
  position: absolute;
  z-index: 2;
}
.target-2 {
  right: 0px;
}
@-webkit-keyframes flash {
  /* .000.00.0000.0000 */
	0%,
	35%,
	80%,
	100% {
		opacity: 0;
	}
	1%,
  34%,
  36%,
  79%,
  81%,
  99% {
		opacity: 1;
	}
}
@keyframes flash {
  /* .000.00.0000.0000 */
	0%,
	35%,
	80%,
	100% {
		opacity: 0;
	}
	1%,
  34%,
  36%,
  79%,
  81%,
  99% {
		opacity: 1;
	}
}
@-webkit-keyframes flash-move {
  	0% {
		-webkit-transform: translateX(0) translateY(0);
		        transform: translateX(0) translateY(0);
	}

	40% {
		-webkit-transform: translateX(-3%) translateY(2%);
		        transform: translateX(-3%) translateY(2%);
	}

	80% {
		-webkit-transform: translateX(3%) translateY(-6%);
		        transform: translateX(3%) translateY(-6%);
	}

	100% {
		-webkit-transform: translateX(0) translateY(0);
		        transform: translateX(0) translateY(0);
	}
}
@keyframes flash-move {
  	0% {
		-webkit-transform: translateX(0) translateY(0);
		        transform: translateX(0) translateY(0);
	}

	40% {
		-webkit-transform: translateX(-3%) translateY(2%);
		        transform: translateX(-3%) translateY(2%);
	}

	80% {
		-webkit-transform: translateX(3%) translateY(-6%);
		        transform: translateX(3%) translateY(-6%);
	}

	100% {
		-webkit-transform: translateX(0) translateY(0);
		        transform: translateX(0) translateY(0);
	}
}
.resize-animation-stopper * {
  -webkit-animation: none !important;
          animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}
.top-sys-mv-wrap{
    background: url(../img/top_sys_movie_frm.png) center center no-repeat;
    background-size: contain;
    height: 53.3vw;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
    position: relative;
    margin: auto;
    margin-top: 17rem;
    z-index: 3;
}
@media screen and (max-width:767px) { 
  .top-sys-mv-wrap{
      margin-top: 14rem;
  }
}
.top-sys-mv{
    position: relative;
    width: 100%;
    height: 100%;
    /* margin-left: auto; */
    -webkit-mask-image: url(../img/top_sys_movie_mask.png);
    mask-image: url(../img/top_sys_movie_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: #000;
    position: absolute;
    /* left: 51px; */
    width: 80%;
    height: 82%;
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
}
.top-sys-mv video{
      overflow: hidden;
    width: 80vw;
}
.wrap-nnm-bg{
  margin-bottom: 5rem;
  margin-top: -3rem;
}
.wrap-nnm-bg::before{
      content: "";
    /* background: #FFF6; */
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
    position: absolute;
  display: -webkit-box;
  display: flex;
    width: 200%;
    height: calc(60vw + 730px);
    left: -50%;
    top: 3rem;
    overflow: hidden;
    z-index: -1;
  background-color: #6d2c2f;
}
@media screen and (max-width:991px) {
  .wrap-nnm-bg::before{
    height: calc(((375 / 425) * 100%));
  }
}
.sys-slide-wrap{
  overflow: hidden;
}

.sys-s1-img,
.sys-s2-img{
    position: absolute;
    z-index: 0;
    left: 0;
    top: -1rem;
    max-width: 50vw;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0;
}
@media screen and (max-width:991px) {
.row .col-lg-6:first-of-type .sys-s1-img{
    right: 0;
    left: auto;
} 
}
.fade-pop{
  opacity: 0;
}
.fade-pop.on{
    -webkit-transform: scale(1);
            transform: scale(1);
  /* transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68); */
    opacity: 1;
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    /* opacity: 1; */
}
.sys-s1-img.on,
.sys-s2-img.on{
  opacity: 0.4;
}
.sys-s1-wrap{
    -webkit-mask-image: url(../img/mask_wide.svg);
    mask-image: url(../img/mask_wide.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 90%;
    mask-size: 90%;
    -webkit-mask-position: center;
    mask-position: center;
    height: 250px;
    width: 100%;
    display: block;
  /* display: -webkit-box;
  display: flex; */
	-webkit-box-pack: center;
	        justify-content: center;
          /* background-color: red; */
}
.sys-s1-slide{
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
  top: 2.8rem;
}
@media screen and (max-width:767px) {
/* .sys-s1-slide{
  -webkit-transform: none;
          transform: none;
} */
  
}
.sys-s1-slide .img,
.sys-s2-slide .img{
  background-size:cover!important; 
  width:300px!important; 
  height:169px!important;
}
.sys-s1-slide .sys-s1-bg01{
  background-image: url(../img/sys_s1_01.jpg);
}
.sys-s1-slide .sys-s1-bg02{
  background-image: url(../img/sys_s1_02.jpg);
}
.sys-s1-slide .sys-s1-bg03{
  background-image: url(../img/sys_s1_03.jpg);
}
.sys-s1-slide .sys-s1-bg04{
  background-image: url(../img/sys_s1_04.jpg);
}
.sys-s1-slide .sys-s1-bg05{
  background-image: url(../img/sys_s1_05.jpg);
}
.sys-s1-slide .sys-s1-bg06{
  background-image: url(../img/sys_s1_06.jpg);
}
.sys-s1-slide .sys-s1-bg07{
  background-image: url(../img/sys_s1_07.jpg);
}
.sys-s1-slide .sys-s1-bg08{
  background-image: url(../img/sys_s1_08.jpg);
}
.sys-s2-slide .sys-s2-bg01{
  background-image: url(../img/sys_s2_01.jpg);
}
.sys-s2-slide .sys-s2-bg02{
  background-image: url(../img/sys_s2_02.jpg);
}
.sys-s2-slide .sys-s2-bg03{
  background-image: url(../img/sys_s2_03.jpg);
}
.sys-s2-slide .sys-s2-bg04{
  background-image: url(../img/sys_s2_04.jpg);
}
.sys-s2-slide .sys-s2-bg05{
  background-image: url(../img/sys_s2_05.jpg);
}
.sys-s2-slide .sys-s2-bg06{
  background-image: url(../img/sys_s2_06.jpg);
}
.sys-s2-slide .sys-s2-bg07{
  background-image: url(../img/sys_s2_07.jpg);
}
@media screen and (min-width:992px) {
  .row-fit .col-lg-6:first-of-type{
    margin-left: 2.5rem;
  }
  .row-fit .col-lg-6:last-of-type{
    margin-left: -2.5rem;
  }
}

.posi-rb{
  display: -webkit-box;
  display: flex;
  position: relative;
}
.posi-rb .img-zoom{
  position: absolute;
  right: 5px;
  bottom: 5px;
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.posi-rb:hover .img-zoom{
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.menu-side{
    /* position: fixed; */
    z-index: 999;
    /* height: 100vh; */
  display: -webkit-box;
  display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
    /* align-items: center; */
    /* flex-flow: column; */
    margin-top: -4rem;
    margin-bottom: 4rem;
}
.menu-side-wrap{
  position: relative;
    /* border: 1px solid #FFF3; */
    border-radius: 0 1rem 1rem 0;
    left: 0; 
  /* filter: drop-shadow(0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF); */
  -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
  border-left: 0;
      /* max-width: 10rem; */
    font-size: 14px;
}
.menu-side-wrap.side-close{
  left: calc(-100% + 2rem);
}
.menu-side ul{
  max-width: 1150px;
    padding: 0.5rem;
    /* background-color: #4e1813DD; */
    margin-right: 2rem;
    /* border-radius: 3px; */
    /* left: -1rem; */
    /* position: fixed; */
  display: -webkit-box;
  display: flex;
    flex-flow: wrap;
	-webkit-box-pack: center;
	        justify-content: center;
    margin: auto;
}
.menu-side ul li a{
  display: block;
padding: 0.8rem 2rem 0.8rem 1.1rem;
    background-color: #4e1813DD;
    border-radius: 3px;
    margin: 0 0.3rem 0.5rem;
    position: relative;
  -webkit-filter: drop-shadow(0 0 4px #b79d35);
          filter: drop-shadow(0 0 4px #b79d35);
}
.menu-side ul li a::after{
    content: "\f078";
    font-family: 'Font awesome 6 Free';
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    right: 5px;
    top: 50%;
    width: 1.2rem;
    margin-top: -6px;
    text-align: center;
    -webkit-transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    font: var(--fa-font-solid);
}
.menu-side ul li a:hover{
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  text-shadow: 0 0 3px #eae4d1, 0 0 6px #eae4d1;
}
.menu-side ul li a:hover::after{
    top: 60%;
    -webkit-transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.menu-side ul li:not(:last-of-type) a{
/* border-bottom: 1px solid #FFF3; */
}
.menu-side-close{
    position: absolute;
    height: 100%;
    background-color: #c5b361aa;
    width: 2rem;
    right: 0;
    border-radius: 0 1rem 1rem 0;
    cursor: pointer;
}
.menu-side-close::before{
    content: "\f053";
    font-family: 'Font awesome 6 Free';
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    left: 5px;
    top: 50%;
    width: 1.2rem;
    margin-top: -6px;
    text-align: center;
    font: var(--fa-font-solid);
}
.row .slick-dotted.slick-slider{
  margin-bottom: 5rem;
}
.row [class*="col-"]{
  padding-bottom: 1.5rem;
}


.ul-order {
  margin-left: 0!important;
}
.ul-order li{
  list-style-type: none;
	margin-bottom: 0.5em;
	padding: 5px;
}
#bn-area .ul-order {
    margin: 0em 0em 1em;
}
#bn-area .ul-order li{
	margin-bottom: 0;
}
#bn-area-sub{
	margin-top: -100px;
	padding-top: 100px;
}
.ul-order li a{
	display: block;
	background: #666;
	border-radius: 2em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	padding: 0.5em 0;
	border: 2px solid #FFF;
	line-height: 2rem;
	font-size: 0.9em;
  text-decoration: none!important;
}
.ul-order li a .notes{
	font-size: 0.7em;
}
#bn-area .ul-order li a{
	line-height: 1.5rem;
}
.ul-order li a:hover{
	opacity: 0.7;
}
.ul-order li a.no-link{
	opacity: 0.4;
}
.ul-order li a.a-ns{
	/* background-color: #E60012; */
	background:-webkit-gradient(linear, left top, left bottom, from(#E60012FF), to(#E60012CC));
	background:linear-gradient(#E60012FF, #E60012CC);
}
.ul-order li a.a-ps{
	/* background-color: #0070D1; */
	background:-webkit-gradient(linear, left top, left bottom, from(#0070D1FF), to(#0070D1CC));
	background:linear-gradient(#0070D1FF, #0070D1CC);
}
.ul-order li a.a-st{
	/* background-color: #112C5F; */
	background:-webkit-gradient(linear, left top, left bottom, from(#112C5FFF), to(#112C5FCC));
	background:linear-gradient(#112C5FFF, #112C5FCC);
}
.ul-order li a.a-xb{
	/* background-color: #107C10; */
	background:-webkit-gradient(linear, left top, left bottom, from(#107C10FF), to(#107C10CC));
	background:linear-gradient(#107C10FF, #107C10CC);
}
.ul-order li a.a-eg{
	/* background-color: #2A2A2A; */
	background:-webkit-gradient(linear, left top, left bottom, from(#2A2A2AFF), to(#2A2A2ACC));
	background:linear-gradient(#2A2A2AFF, #2A2A2ACC);
}
.hover-btn{
-webkit-transform: scale(0.98);
        transform: scale(0.98);
    -webkit-transition: 0.4s cubic-bezier(.19, 1, .22, 1);
    transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.hover-btn:hover{
  -webkit-transform: scale(1.0);
          transform: scale(1.0);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.div-edition{
  padding-left: 2px;
  padding-right: 2px;
}
.div-edition .btn-buy{
  font-size: 84%;
}
.div-edition a.i-question {
    display: inline-block;
	-webkit-box-pack: center;
	        justify-content: center;
    position: relative;
    /* margin-right: -15px; */
    margin: auto;
}
.i-question::after {
    content: "\f059";
    font-family: 'Font awesome 6 Free';
    vertical-align: top;
    position: absolute;
    top: 0;
    right: 0%;
    font: var(--fa-font-solid);
}
.slider-nav{
  margin: 0 1.5rem;
}
.slider-nav .slick-slide {
    max-height: 280px!important;
    width: auto;
}
@media screen and (max-width:767px) {  
  .slider-nav .slick-slide {
      max-height: 150px;
  }
}
.modal-body .twitter-tweet{
margin-left: auto!important;
margin-right: auto!important;
}
.modal-info .modal-body .staff-icon{
  padding: 1rem 0;
  margin-bottom: 0;
}
.staff-icon img{
  display: block;
    max-height: 600px;
    max-width: 85vw;
    margin: auto;
    /* width: fit-content; */
}
.staff-name{
  text-align: center!important;
}
.box-shadow-white{
  position: relative;
}
.box-shadow-white:before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
      border: 1px solid #4f1d20;
    border-radius: 2rem;
    padding: 1.5rem;
    -webkit-filter: drop-shadow(0px 0px 3px #FFF);
    filter: drop-shadow(0px 0px 3px #FFF);
}
.btn-entry{
    background-color: #d51212;
    color: #FFF;
    text-decoration: none;
    margin: auto;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.hover-zoom{
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.hover-zoom:hover{
  transform: scale(1.05);
}
.embed-mv {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed-mv iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed-mv-container{
  position: static;
}
.btn-nml{
    color: #FFF;
    border: 2px solid #999;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
  transition: 0.4s cubic-bezier(.19, 1, .22, 1);
}
.btn-nml:hover{
  opacity: 0.7;
}
.row-white{
  background-color: #FFF; 
  padding: 1rem; 
  border-radius: 5px;
}
.row-white img{
  display: block;
  margin: auto;
}
.ul-order-row{
  flex-flow: column;
  text-align: center;
  margin-right: -5px;
}
.ul-order-row li {
    margin-bottom: 0;
    padding: 2px;
}
@media (min-width: 992px) {	
.a-small{
    font-size: 0.8rem!important;
    line-height: 1.1!important;
    padding: 0.7rem 0.2rem!important;
    border-radius: 3rem!important;
}
}
@media screen and (max-width: 768px) {
  .d-flex-thum img{
  max-width: 27vw;}
  
}
#movie h3{
  font-size: 1.2rem;
}
.anim-blink{
	-webkit-animation: i-new-anim .7s infinite alternate ease-in-out;
	animation: i-new-anim .7s infinite alternate ease-in-out;
}
.tag-new{
    background-color: #DA526B;
    color: #FFF;
		font-weight: bold;
    border-radius: 0.3rem;
    display: inline-block;
    padding: 0.2rem 0.3rem;
    line-height: 1;
    margin: 0;
		font-size: 0.8rem;
}
@-webkit-keyframes i-new-anim {
  from {
    /* transform: translateY(0); */
		opacity: 1;
  }
  to {
    /* transform: translateY(5px); */
		opacity: 0;
  }

}
@keyframes i-new-anim {
  from {
    /* transform: translateY(0); */
		opacity: 1;
  }
  to {
    /* transform: translateY(5px); */
		opacity: 0;
  }

}

/* modal-video */
.modal-video {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.modal-video.modal-video-close {
  opacity: 0;
}
.modal-video-movie-wrap { 
  animation: slideIn 0.3s ease-out forwards;
}
@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-video.modal-video-close .modal-video-movie-wrap {
  animation: slideOut 0.3s ease-in forwards;
}
@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-50px);
    /* 下にスライドアウト */
    opacity: 0;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .modal-video-body {
    max-width: 90%;
    margin: 1.75em auto;
  }
}
@media (min-width: 992px) {
  .modal-video-body {
    max-width: 800px
  }
}
@media (min-width: 1200px) {
  .modal-video-body {
    max-width: 1140px
  }
}
button.modal-video-close-btn {
  color: #FFF;
  /* display: block; */
  /* width: 3em; */
  margin-left: auto;
  font-family: sans-serif;
  position: absolute;
  z-index: 99;
  font-size: 2rem;
  border-radius: 2rem;
  right: -0.5em;
  top: -1.4em;
  background-color: #000;
  border-radius: 1.3em;
  width: 1.3em;
  height: 1.3em;
  line-height: 1;
  font-size: 2.0em;
  font-weight: bold;
}
.close:hover {
  color: #FFF;
}
button.modal-video-close-btn:before,
button.modal-video-close-btn:after {
  display: none;
}
.modal-video-movie-wrap {
  -webkit-filter: drop-shadow(0px 0px 5px #511511);
  filter: drop-shadow(0px 0px 5px #511511);
}
.modal-video-inner {
  padding: 10px 0px;
  box-sizing: border-box;
}
.row-movie [class*="col-"]{
    display: flex;
    flex-direction: column;
}
.row-movie [class*="col-"] h3{
    margin-top: auto;
    margin-bottom: auto;
}
.row-movie [class*="col-"] p{
    margin-top: auto;
}


/*  */