@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing .passing-box {
	display: block;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.passing .passing-txt {
	opacity: 0;
	/* 後ほど解説 */
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* 任意の値 */
	font-size: 4.0rem;
	font-weight: bold;
	line-height: 1.5;
}
.js-scroll-trigger.is-active .passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.js-scroll-trigger.is-active .passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}

#shinkalion{padding:5% 0 5% 0;}

.backlargeshinkalionWrap{position: fixed;width: 100%;height: 100vh;overflow: hidden;top: 0;z-index: -1;}
.backlargeshinkalion{
	position: absolute;
    height: 250vh;
    width: 100%;
    z-index: -1;
}

.shinkalionWrap{display: flex;overflow: hidden;    align-items: flex-start;}

.shinkalionImg{min-width: 50%;display: flex;justify-content: center;align-items: center;position: relative;padding-top: 8%;}

.shinkalion{position: relative;}

.shinkalion-fade.js-scroll-trigger.is-active{
	animation: shinkalionmove 1s;
	transition: .3s;
}

.shinkalion-fade{padding-right: 2%;}



.vehicle-fade.js-scroll-trigger.is-active{
	animation: vehiclemove 1s;
	transition: .3s;
}

@keyframes vehiclemove {
  0% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(0);
  }
}


@keyframes shinkalionmove {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(0);
  }
}
		
    .charaon {
		transition: 0.4s;
      opacity: 1;
		height: auto;
		
    }
    .charaoff {
		transition: 0.4s;
		position: absolute;
        opacity: 0;
		height: 0;
    }

.StyleChange{
	position: absolute;
    left: 21%;
    top: 0;
    width: 8%;
    height: 16%;
    max-width: 55px;
    max-height: 203px;
    cursor: pointer;
    z-index: 2;
	transform: rotate(90deg);
}

.shinkalionAbout{width: 600px;padding-right: 2%;padding-top: 5%;position: relative;}

.shinkalionTxtWrap{padding-bottom: 5%;}

.profile{margin-top: 25px;}

.shinkalionTxt{color: #000;font-size: 16px;font-weight: 500;line-height: 3.3rem;}
.shinkalionName{
	position: relative;
	max-width: 77%;
	display: inline-block;
	background: #212426;
	-webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
	padding: 1rem 2rem 1.2rem 2rem;
	margin: 0 0 3rem 2%;
}

.shinkalionName::before{
   content: "";
    display: block;
    width: 100vh;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 97%;
}

.shinkalionNameWrap.is-active .shinkalionName::before{
	animation: shinkalionnameLine 1.2s;
}
.shinkalionNameWrap.is-active{
	animation: shinkalionname 1.2s;
	transition: .6s;
}


@keyframes shinkalionname {
  0% {
    transform: translateY(10%);
	  opacity: 0;
  }
  100% {
    transform: translateY(0);
	  opacity: 1;
  }
}

@keyframes shinkalionnameLine {
  0% {
    left: 300%;
  }
  100% {
    left: 97%;
  }
}

.shinkalionName p{
	display: inline-block;
	color: #fff;
	font-size: 52px;
	line-height: 52px;
	font-weight: 600;
   	-webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
}

.voiceActor{
	position: absolute;
	padding: 0.3rem 1.2rem 0.5rem 1.2rem;
    left: 15px;
    bottom: -26px;
}
.voiceActor p{
	display: inline-block;
	color: #fff;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
   	-webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
}

.voiceActor p span{font-size: 80%;color: #fff!important; margin-right: 4px;}


.shinkalionSelect{
	background: #4fead8;
	padding: 5% 2%;
	margin-bottom: 8%;
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.shinkalionSelectBg1 {
    background: url(../img/shinkalion/shinkalionSelectBg1.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
    height: 98%;
    width: 40%;
    left: 0.5%;
    top: 1%;
    position: absolute;
    z-index: -1;
}

.shinkalionSelectBg2 {
    background: url(../img/shinkalion/shinkalionSelectBg2.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom right;
    height: 98%;
    width: 40%;
    right: 0.5%;
    bottom: 1%;
    position: absolute;
    z-index: -1;
}

.shinkalionSelectIcons{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 96%;
    margin: 0 auto;
    max-width: 1300px;
	z-index: 1;
}
.shinkalionSelectIcons li{
	flex-basis: 14%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 2%;
	background: url("../img/shinkalion/shinkalionBtnBg.svg");
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	border: 2px solid #00d7be;
	position: relative;
	box-shadow: 7px 7px 0px 0px #00a08d;
}

.shinkalionSelectIcons li a{display: block;
    line-height: 0;}

.shinkalionSelectIcons li a img:hover {
    transform: scale(1.2,1.2);
    transition: 0.45s all;
}

.shinkalionSelectIcons li:before,
.shinkalionSelectIcons div:before {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

.shinkalionSelectIcons li:after,
.shinkalionSelectIcons div:after {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

/* 下のボーダー */
.shinkalionSelectIcons li:before {
    bottom: 0;
    left: -150%;;
    width: 100%;
    height: 1px;
}
/* 右のボーダー */
.shinkalionSelectIcons li:after {
    bottom: -150%;;
    right: 0;
    width: 1px;
    height: 100%;
}
/* 上のボーダー */
.shinkalionSelectIcons div:before {
    top: 0;
    right: -150%;;
    width: 100%;
    height: 1px;
}
/* 左のボーダー */
.shinkalionSelectIcons div:after {
    top: -150%;;
    left: 0;
    width: 1px;
    height: 100%;
}

/* ホバー時のアニメーション指定 */
.shinkalionSelectIcons li::before {
    animation: leftAnim2 3s linear 0s infinite;
}
.shinkalionSelectIcons li::after {
    animation: bottomAnim2 3s linear 1.5s infinite;
}
.shinkalionSelectIcons div::before {
    animation: rightAnim2 3s linear 0s infinite;
}
.shinkalionSelectIcons div::after {
    animation: topAnim2 3s linear 1.5s infinite;
}


.shinkalionSelectIcons2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 96%;
    margin: 0 auto;
    max-width: 1300px;
	z-index: 1;
}
.shinkalionSelectIcons2 li{
	flex-basis: 17%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 3%;
	position: relative;
}

.shinkalionListName{font-size: 18px;
	font-weight: 700;
    margin: 7px 0 0;
    position: relative;
    padding-left: 15px;}
.shinkalionListName::before {
    content: "";
    background: #1aedd2;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0px;
    width: 11px;
    height: 5px;
    margin-right: 10px;
}

.shinkalionSelectLineAnime{overflow: hidden;position: relative;border: 2px solid #00d7be;box-shadow: 5px 5px 0px 0px #00a08d;}

.shinkalionSelectLineAnime a{
	background: url("../img/shinkalion/shinkalionBtnBg.svg");
	background-size: cover;
	background-repeat: no-repeat;
	display: block;
	line-height: 0;}

.shinkalionSelectLineAnime a img:hover {
    transform: scale(1.2,1.2);
    transition: 0.45s all;
}

.shinkalionSelectLineAnime:before,
.shinkalionSelectLineAnime a:before {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

.shinkalionSelectLineAnime:after,
.shinkalionSelectLineAnime a:after {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

/* 下のボーダー */
.shinkalionSelectLineAnime:before {
    bottom: 0;
    left: -150%;;
    width: 100%;
    height: 1px;
}
/* 右のボーダー */
.shinkalionSelectLineAnime:after {
    bottom: -150%;;
    right: 0;
    width: 1px;
    height: 100%;
}
/* 上のボーダー */
.shinkalionSelectLineAnime a:before {
    top: 0;
    right: -150%;;
    width: 100%;
    height: 1px;
}
/* 左のボーダー */
.shinkalionSelectLineAnime a:after {
    top: -150%;;
    left: 0;
    width: 1px;
    height: 100%;
}

/* ホバー時のアニメーション指定 */
.shinkalionSelectLineAnime::before {
    animation: leftAnim2 3s linear 0s infinite;
}
.shinkalionSelectLineAnime::after {
    animation: bottomAnim2 3s linear 1.5s infinite;
}
.shinkalionSelectLineAnime a::before {
    animation: rightAnim2 3s linear 0s infinite;
}
.shinkalionSelectLineAnime a::after {
    animation: topAnim2 3s linear 1.5s infinite;
}


/* 各アニメーション */
@keyframes topAnim2 {
    0% {top:-150%;}
    100% {top:105%;}
}
@keyframes bottomAnim2 {
    0% {bottom:-150%;}
    100% {bottom:105%;}
}
@keyframes rightAnim2 {
    0% {right:-150%;}
    100% {right:105%;}
}
@keyframes leftAnim2 {
    0% {left:-150%;}
    100% {left:105%;}
}


.shinkalionformTxt{font-weight: bold; font-size: 40%;}
.shinkalionformMarg{ margin-top: 30px;}

@media screen and (max-width:1400px) {
	.shinkalionName p{
	font-size: 40px;
	line-height: 50px;
}
	
.shinkalionImg {
    min-width: 40%;
    margin: 0 3% 0 0%;
}
	
	.wordImg {
    right: 6%;
}
	
	.voiceActor p{
	font-size: 17px;
	line-height: 17px;
	}
	
}

.connectionBtn{
	display: flex;
    justify-content: center;
    width: 85%;
    margin: 8% auto 0 auto;
	line-height: 0;
}

.connectionBtn a{display: block;
box-shadow: 5px 5px 0px 0px #00a08d;}

@media screen and (max-width:1400px) {
	
	.shinkalionListName {
    font-size: 16px;
}
	
}

@media screen and (max-width:1200px) {
	
	.shinkalionSelectIcons2 li{
		flex-basis: 21%;
		margin-left: 1%;
		margin-right: 1%;
}

	
	.shinkalionListName {font-size: 15px;}
	
}

@media screen and (max-width:1100px) {
	.shinkalionName p{
	font-size: 39px;
	line-height: 44px;
}
	.shinkalionTxt{font-size: 15px;line-height: 3rem;}
	
	.voiceActor p{
	font-size: 16px;
	line-height: 16px;
	}
}

@media screen and (max-width:1000px) {
	.shinkalionName p{
	font-size: 30px;
	line-height: 35px;
}
	.shinkalionTxt{font-size: 14px;line-height: 2.8rem;}
	
	.voiceActor p{
	font-size: 14px;
	line-height: 14px;
	}
	
	.shinkalionSelectIcons li{
		flex-basis: 22%;
		margin-left: 1%;
		margin-right: 1%;
}
	
	
	.shinkalionSelectIcons2 li{
		flex-basis: 29%;
		margin-left: 1.5%;
		margin-right: 1.5%;
}
	
	.shinkalionListName {font-size: 14px;}
	
	.StyleChange{
        width: 34px;
    height: 115px;
}
	
}


[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1.7em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.16em;
    text-align: center;
    letter-spacing: normal;
}

@media screen and (max-width:1400px) {
	
	[data-ruby]::before {
    top: -2.5em;
}
	
}

@media screen and (max-width:767px) {
	
	[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.18em;
    text-align: center;
    letter-spacing: normal;
}
	
	#shinkalioncter{padding: 8% 0 15% 0;}
	.shinkalionSelect {
    background: #4fead8;
    padding: 15% 2%;
    margin-bottom: 17%;}
	
	.shinkalionWrap{flex-wrap: wrap;}
	.shinkalionImg{width: 100%;margin: 0 auto 20px auto;padding-top: 0}
	.shinkalion-fade{width: 100%;padding-right: 1%;}
	.wordImg {width: 18%;}
	
	.shinkalionAbout {
    width: 88%;
    margin: 0 auto;
    padding-right: 0;
    padding-top: 0;
    position: relative;
}
	
	.StyleChange{
	position: absolute;
    left: 0;
    top: 17%;
    width: 44px;
    height: 166px;
    max-width: 100px;
    max-height: 367px;
		transform: rotate(0deg);
}
	
	.shinkalionSelectIcons li{
		flex-basis: 28%;
		margin-left: 2%;
		margin-right: 2%;
}

	
	
	.shinkalionSelectIcons2 li{
		flex-basis: 46%;
		margin-left: 2%;
		margin-right: 2%;
		margin-bottom: 5%;
}

.shinkalionSelectIcons2 li:nth-child(2n+1){margin-left: 0;}
	
	
	.pageback {
    font-size: 14px;
}
	
}