@charset "UTF-8";


/*--------------------------------------------------------------------
=== [topoage] ====================================
 -------------------------------------------------------------------*/

main {
    background-image: url(../img/base/frame_top.png), url(../img/base/frame_btm.png) ;
    background-size: 1920px auto;
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    padding-bottom: 50px;
	overflow: hidden;
}

main .frameMid {
    background-image: url(../img/base/frame_mid.png);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center;
    padding-bottom: 100px;

}



.home .mvWrap {
    position: relative;
    width: 100%;
}

.home .mainCopy {
    width: 37vw;
    right: 60px;
/*    top: 23vw;*/
  	bottom : 10vh;
  	top: unset;
    position: fixed;
    transition: 0.5s;
}
.home.en-US .mainCopy {
    width: 43vw;
}

.mv-fix.mv-fixed {
    position: absolute;
/*    top: 29vw;*/
	  top: 100vw;
	  bottom: unset;
    transition: 0.5s;
}

.home .snsBox {
    position: absolute;
    top: 125vw;
    right: 4vw;
    background-image: url(../img/top/sns_bg.png);
    background-size: 404px auto;
    width: 404px;
    color: #777777;
    font-size: 16px;
    display: flex;
    height: 54px;
    background-repeat: no-repeat;
    align-items: center;
    padding: 0 20px;
    letter-spacing: 0.1em;
}

.home .snsBox a {
    color: #777777;
    vertical-align: top;
    display: inline-flex;
    height: 25px;
}

.home .snsBox .oficialTw a::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-image: url(../img/top/ico_tw.png);
    width: 25px;
    height: 25px;
    background-position: center;
    margin: 0 15px;
}

.home .snsBox .shareSns::before {
    content: "";
    width: 1px;
    height: 32px;
    background-color: #777777;
    margin-right: 15px;
    margin-top: -5px;
}

.home .snsBox .shareSns {
    display: flex;
}

.home .snsBox .shareSns ul {
    height: 25px;
    display: flex;
}

.home .snsBox .shareSns ul li {
    margin-left: 15px;
}

.home .snsBox .shareSns img {
    width: auto;
    height: 100%;
}

.home .infoBox {
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 130vw 20px 0 20px;
}

.home .infoBox .news {
    width: 510px;
    height: 305px;
    background-image: url(../img/top/grange.bg.png);
/*    background-size: 510px auto;*/
	background-size: cover;
    background-repeat: no-repeat;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
    margin-right: 10px;
}

.home .infoBox .news h3 {
    width: 84px;
    padding: 25px 0 15px 0;
}

.home .infoBox .news ul {
    border-top: 1px solid #000;
    font-size: 16px;
}

.home .infoBox .news ul li {
    padding: 15px 0;
    border-bottom: 1px solid #000;
}

.home .infoBox .news ul li a {
    color: #00f3f7;
}

.home .infoBox .news .date {
    color: #c3c3c3;
    display: block;
}

.home .infoBox .news .more {
    width: 124px;
    height: 82px;
    position: absolute;
    top: 0px;
    right: 20px;
}

.home .infoBox .movie {
    width: 510px;
    height: 305px;
    background-image: url(../img/top/grange.bg.png);
/*    background-size: 510px auto;*/
    background-size: cover;
    background-repeat: no-repeat;
    padding: 14px;
    box-sizing: border-box;
}

.home .infoBox .movie iframe {
    width: 100%;
    height:98%;
    border: 2px solid #00f3f7;
}


/*--------------------------------------------------------------------
=== [btmpage] ====================================
 -------------------------------------------------------------------*/


.contents {
    max-width: 1080px;
    margin: 0 auto;
    padding: 6vw 8vw 0 8vw;
}

.contents .pageTtl {
    max-width: 850px;
    max-height: 340px;
    height: 17.7vw;
    color: #c01466;
    text-align: center;
    font-size: 66px;
    padding-top: 7.8vw;
    box-sizing: border-box;
    line-height: 1;
    margin: 0 auto;
    letter-spacing: 0.06em;
	position: relative;
}

.contents .pageTtl p {
position: absolute;
z-index: 10;
left: 0;
right: 0;
animation-name: slidedown;
animation-duration: 0.5s;/* アニメーション時間 */
animation-delay: 0.4s;/* 変化開始の時間 */
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes slidedown {
  0% {
    opacity: 0;
    transform: translateY(-100px)
  }
  
   50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
	opacity: 1;
  }
}

.contents .pageTtl::after {
	content: "";
    background-image: url(../img/base/page_ttl.png);
    background-size: 100%;
    width: 44.2vw;
    max-width: 850px;
    max-height: 340px;
    height: 17.7vw;	
	display: inline-block;
	position: absolute;
	background-repeat: no-repeat;
    top: 0;
    left: 0;
	right: 0;
	margin: auto;
    z-index: 1;	
 	 animation-name: slidein;
	  animation-duration: 0.4s;/* アニメーション時間 */
	  animation-delay: 0.4s;/* 変化開始の時間 */
	  animation-iteration-count: 1;
	  animation-fill-mode: forwards; 
	  opacity: 0;
}

		@keyframes slidein {
		  0% {
			opacity: 0;
			transform: translateX(-200px);
			  clip-path: inset(0 100% 0 0);
		  }
		   50% {
			opacity: 0.5;
			   clip-path: inset(0 50% 0 0);
		  }
		   90% {
			transform: translateX(5px);
				clip-path: inset(0 5% 0 0);
		  } 
		  100% {
			transform: translateX(0);
			  clip-path: inset(0 0 0 0);
			  opacity: 1;
		  }
		}


.contents .pageTtl span {
    font-size: 16px;
    display: block;
    margin-top: 0.5vw;
    font-weight: bold;
    letter-spacing: 0;
}

.contents .note{
	text-align: center;
    padding-bottom: 50px;
    font-size: 22px;
    color: #fff;
}

.contents .note02{
	text-align: center;
    font-size: 16px;
    color: #fff;
}

/*--- NEWS ---*/

.news #wrapper {
    background-image: url(../img/news/news_bg.jpg);
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    /*min-height: 1000px;*/
	min-height: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}

.news .newsList {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 45px;
    box-sizing: border-box;
    font-size: 18px;
}

.news .newsList li {
    border-top: 1px solid #666666;
}

.news .newsList li:last-child {
    border-bottom: 1px solid #666666;
}

.news .newsList a {
    color: #fff;
    display: block;
    padding: 30px 0;
}

.news .newsList li p {
    margin-left: 7em;
}

.news .newsList a .date {
    color: #c3c3c3;
    margin-right: 45px;
    display: block;
    float: left;
}

.news .pager{
    display: flex;
    justify-content: space-between;
    margin-top: 1vw;
}

.news .pager .btnBack {
    width: 132px;
    margin-top: 4vw;
}

.news .pager .btnPrev {
    width: 129px;
    padding-left: 1.5vw;
    margin-right: 1vw;
}

.news .pager .btnNext {
    width: 135px;
    margin-left: 1.5vw;
}

.news .pager .prevNext {
    display: flex;
    justify-content: space-between;
    background-image: url(../img/base/pager_bg.png);
    max-height: 140px;
    height: 7.3vw;
    background-size: auto 7.3vw;
    padding: 4vw 0 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
}


.news .newsDetail {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 30px 45px 45px;
    box-sizing: border-box;
    font-size: 16px;
}

.news .newsData {
    color: #c3c3c3;
    display: flex;
    justify-content: flex-end;
}

.news .newsData .cate {
    margin-right: 15px;
}

.news .newsData .cate span,
.news .newsData .date span {
    color: #c3c3c3;
    color: #fff;
    font-size: 18px;
}

.news .newsDetail .ttl {
    font-size: 28px;
    color: #fff;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 60px;

}

.news .newsDetail .ttl:before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#39ab6e), to(#00e4ec));
    background: -moz-linear-gradient(left, #39ab6e, #00e4ec);
    background: linear-gradient(left, #39ab6e, #00e4ec);
    margin-bottom: 20px;
}

.news .newsDetail .ttl:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#39ab6e), to(#00e4ec));
    background: -moz-linear-gradient(left, #39ab6e, #00e4ec);
    background: linear-gradient(left, #39ab6e, #00e4ec);
    margin-top: 20px;
}

.news .newsDetail article {
    padding: 0 55px;
    color: #fff;
    line-height: 2.2;
    font-size: 18px;
}

.news .newsDetail article div + div {
    margin-top: 50px;
}

.news .newsDetail article .rTxt {
    overflow: hidden;
}

.news .newsDetail article .rTxt img {
    float: left;
    width: 460px;
    margin-right: 30px;
    margin-bottom: 20px;
}

/*--- INTRODUCTION ---*/

.intro #wrapper {
    background-image: url(../img/intro/intro_bg.jpg);
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    min-height: 1000px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}

.intro .txt {
    margin: 60px 0 60px;
    font-size: 22px;
    font-weight: bold;
    line-height: 3.5em;
    color: #fff;
    text-align: center;
}

.intro .btn {
    width: 475px;
    height: 105px;
    margin: 0 auto;
}

/*--- PRIVACY POLICY ---*/

.privacy #wrapper {
    background-image: url(../img/privacy/privacy_bg.png);
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    min-height: 1000px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}


.privacy .privacyBox {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 65px 45px 45px;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
}

.privacy .privacyBox dt {
    font-size: 21px;
    font-weight: bold;
}

.privacy .privacyBox dt:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#39ab6e), to(#00e4ec));
    background: -moz-linear-gradient(left, #39ab6e, #00e4ec);
    background: linear-gradient(left, #39ab6e, #00e4ec);
    margin-top: 10px;
    margin-bottom: 20px;
}

.privacy .privacyBox dd {
    line-height: 2;
    margin-bottom: 40px;
}

.privacy .privacyBox dd span {
    display: block;
    float: right;
    margin-top: 40px;
}

.privacy .privacyBox a {
    color: #e24379;
}

/*--- STAFF & CAST ---*/

.staff #wrapper {
    background-image: url(../img/staff/staff_bg.png);
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    min-height: 1000px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}

.staff .staffList {
    margin-bottom: 50px;
}

.staff .staffList,
.staff .castList {
    display: flex;
    padding-left: 80px;
}

.staff .staffList .left,
.staff .castList .left {
    color: #c3c3c3;
    font-size: 36px;
    line-height: 1.2;
    text-align: right;
    margin-right: 30px;
    letter-spacing: 0.04em;
    width: 10%;
}

.staff .staffList .left span,
.staff .castList .left span {
    display: block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
}

.staff .staffList .right,
.staff .castList .right {
    color: #fff;
    width: 100%;
}

.staff .staffList .right dl:before,
.staff .castList .right dl:before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#39ab6e), to(#00e4ec));
    background: -moz-linear-gradient(left, #39ab6e, #00e4ec);
    background: linear-gradient(left, #39ab6e, #00e4ec);
    margin-bottom: 30px;
    margin-top: 4px;
}



.staff .staffList .right dl,
.staff .castList .right dl{
	display: flex;
	flex-wrap: wrap;
}

.staff .staffList .right dt,
.staff .castList .right dt {
/*	float: left;*/
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 30px;
    width: 190px;
    margin-right: 30px;
    text-align: right;
}

.staff .staffList .right dd,
.staff .castList .right dd {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 30px;
	width: calc(100% - 30px - 190px);
	flex-grow: 1;
}

.staff .staffList .right dd span,
.staff .castList .right dd span {
    font-size: 18px;
    margin-left: 20px;
}

.en-US.staff .staffList .right dl > dt:first-of-type,
.en-US.staff .staffList .right dl > dd:first-of-type,
.en-US.staff .staffList .right dl > dd:first-of-type span{
	margin-right: 0;
	margin-left: 0;
}
.en-US.staff .staffList .right dl > dd:first-of-type span.txtItalic{
	margin-right: 1em;
	margin-left: 1em;
}

.en-US.staff .staffList .txtItalic{
	font-size: inherit;
	margin-left: unset;
}



/*--- MOVIE ---*/

.movie #wrapper {
    background-image: url(../img/movie/movie_bg.png);
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    min-height: 1000px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}


.movie .movielList .ttlArea {
    color: #fff;
    position: relative;
    min-height:110px;
	margin-bottom: 20px;
    
}

.movie .movielList li + li {
    margin-top: 100px;
}

.movie .movielList .ttlArea::after {
    content: "";
    display: inline-block;
    background-image: url(../img/base/splash.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 180px;
    height: 165px;
    top: -60px;
    left: -50px;
    z-index: 10;
}


.movie .movielList .ttlArea .date span {
    color: #c3c3c3;
    font-size: 16px;  
}


.movie .movielList .ttlArea .date {
    font-size: 18px;
    z-index: 11;
    position: inherit;
}

.movie .movielList .ttlArea .ttl {
    font-size: 28px;
    font-weight: bold;
    z-index: 11;
    position: sticky;
    top: 30px;  
}

.movie .movielList .wrap {
     position:relative;
    width:100%;
    height:0;
    padding-top:56%;
}

.movie .movielList .wrap + .wrap {
    margin-top: 40px;
}

.movie .movielList iframe {
   position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


/*--- CHARACTER ---*/

.chara .contents {
    max-width: 1280px;
}

.chara #wrapper {
    background-image: url("../img/chara/chara_bg.png");
    background-position: top center;
    background-size: 100% auto;
    margin: 0 auto;
    min-height: 1000px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #004f55;
}

.chara .charaBox {
/*    margin-top: -2vw;*/
}

ul#charaList {
    display: flex;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 0 auto;
	justify-content: center;
}

ul#charaList li{
max-width:160px;
max-height:160px;
cursor: pointer;
margin: 0.5vw;
box-sizing: border-box;
position: relative;
    transition: 0.3s;
}

ul#charaList li:hover{
    opacity: 0.6;
}



ul#charaList li img {
    vertical-align: inherit;
    z-index: 10;
    position: inherit;
}

ul#charaList li::after {
    content: "";
    display: inline-block;
    background-color: #000;
    position: absolute;
    left: 0.52vw;
    top: 0.52vw;
    z-index: 1;
    width: 100%;
    height: 100%;
}

ul#charaList li.nosignal {
    pointer-events: none;
}

ul#charaList li.nosignal::after {
    content: none;
}



ul#charaList li .on {
    display: none;
}

ul#charaList li .off {
    display: block;
}

ul#charaList li.current .off{
display: none;
}

ul#charaList li.current .on{
display: block;
}

ul#charaDetail {
    margin-top: -5vw;
}

ul#charaDetail li{
display: none;
z-index: 2;
color: #fff;
}

ul#charaDetail li.current {
    display: block;
}

ul#charaDetail li .wrap {
    background-image: url("../img/story/story_frame_l.png"),url("../img/story/story_frame_r.png");
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: left top, right bottom; 
    padding: 15vw 8vw 0 12vw;
    justify-content: space-between;
    display: flex;
}



ul#charaDetail li .data h4 {
    font-size: 80px;
    margin-bottom: 40px;
}

ul#charaDetail li .data h4 span {
    display: block;
    font-size: 16px;
}
ul#charaDetail li .data h4 br.forTab{
	display: none;
}

ul#charaDetail li .data .txt {
    font-size: 22px;
    line-height: 2;
}

ul#charaDetail li .charaImg {
    height: 850px;
    margin-top: -8vw;
}

ul#charaDetail li .charaImg img {
    height: 100%;
    width: auto;
}