.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	/*padding: 0 3%;*/
}

.backtotop {
	position: fixed;
	width: 150px;
	display: block;
	bottom: 0;
	right: 40px;
	z-index: 2;
}

.is-ls10 {
	letter-spacing: -10px;
}

.is-ls5 {
	letter-spacing: -5px;
}

.is-ls2 {
	letter-spacing: -2px;
}

.home-ttl {
	width: 295px;
}

.is-pc {
	display: block;
}

.is-sp {
	display: none;
}

@media screen and (max-width:768px) {

	.backtotop {
		width: 50px;
		right: 20px;
	}

	.wrapper {
		padding: 0 3%;
	}

	.home-ttl {
		width: 50%;
	}

	.is-pc {
		display: none;
	}

	.is-sp {
		display: block;
	}

}

/* about */

.about {
	padding: 115px 0 104px 0;
	background-image: url(../img/home/about_bg.png);
}

.about-wrapper {
}

.about-ttl {
	max-width: 845px;
	margin: 0 auto 60px auto;
}

.about-copy-01 {
	margin: 0 0 20px 0;
}

.about-copy-02 {
	margin: 0 0 30px 0;
}

.about-copy-03 {
}

.about-txt {
	display: block;
	background-size: 100% 100%;
}

.about-txt-01 {
	background-image: url(../img/home/about_copy_01.png);
	padding-top: 16.666%;
}

.about-txt-02 {
	background-image: url(../img/home/about_copy_02.png);
	padding-top: 3.5%;
}

.about-txt-03 {
	background-image: url(../img/home/about_copy_03.png);
	padding-top: 20.63228%;
}

.about-txt-04 {
	background-image: url(../img/home/about_copy_04.png);
	padding-top: 3.080766%;
}

@media screen and (max-width:768px) {

	.about {
		padding: 105px 0 8% 0;
	}

	.about-ttl {
		margin: 0 auto 4% auto;
	}

	.about-copy-01 {
		margin: 0 0 4% 0;
	}

	.about-copy-02 {
		margin: 0 0 6.4% 0;
	}

	.about-copy-03 {
	}

	.about-txt-01 {
		background-image: url(../img/home/about_copy_01_sp.png);
		padding-top: 16.857143%;
	}

	.about-txt-02 {
		background-image: url(../img/home/about_copy_02_sp.png);
		padding-top: 14.8208469%;
	}

	.about-txt-03 {
		background-image: url(../img/home/about_copy_03_sp.png);
		padding-top: 78.6423841%;
	}

	.about-txt-04 {
		background-image: url(../img/home/about_copy_04_sp.png);
		padding-top: 13.6655949%;
	}

}

.story {
	padding: 120px 0 0 0;
}

.story-wrapper {
	max-width: 1300px;
}

.story-ttl {
	margin: 0 auto 57px auto;
}

.story-copy {
	text-align: center;
	font-size: 18px;
	line-height: 1.777em;
}

.story-bg {
    background: url("../img/home/bg-story.png") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    margin-top: 90px;
}
.story-bg:before {
    content: "";
    display: block;
    padding-top: 50%;
}

@media screen and (max-width:768px) {

	.story {
		padding: 16% 0 8% 0;
		margin: -8% 0 0 0;
	}

	.story-ttl {
		margin: 0 auto 8% auto;
	}

	.story-copy {
		text-align: left;
		font-size: 14px;
	}

	.story-copy br {
		display: none;
	}
    .story-bg {
        background-attachment: scroll;
        margin-top: 1em;
    }

}

.character-bg {
	background-image: url(../img/home/character_bg.png);
	background-size: contain;
	position: relative;
}

.character {
	padding: 206px 0 100px 0;
}

.character-wrapper {
	max-width: 1310px;
}

.character-ttl {
	margin: 0 auto 78px auto;
}

@media screen and (max-width:768px) {

	.character {
		padding: 18% 0 8% 0;
		margin: -8% 0 0 0;
	}

	.character-ttl {
		margin: 0 auto 8% auto;
	}

}

.keyword {
	padding: 154px 0 182px 0;
}

.keyword-wrapper {
	max-width: 1300px;
}

.keyword-ttl {
	margin: 0 auto 57px auto;
}

.keyword-list {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.keyword-list-item {
	width: 22.5%;
	list-style: none;
	margin: 0 1% 4% 1%;
}

.keyword-list-item:nth-child(4n) {
}

.keyword-list-btn {
	display: block;
	font-size: 24px;
	font-weight: bold;
	padding: 29.629% 0 0 0;
	background-image: url(../img/home/keyword_btn.svg);
	background-size: 100% 100%;
	box-sizing: border-box;
	color: #715219;
	text-decoration: none;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	position: relative;
}

.keyword-list-btn .is-wrap {
	text-align: center;
	width: 100%;
	display: block;
	position: absolute;
	line-height: 1em;
	height: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
}

@media screen and (max-width:1240px) {

	.keyword-list-item {
		width: 30%;
		margin: 0 1.5% 3% 1.5%;
	}

}

@media screen and (max-width:768px) {

	.keyword {
		padding: 18% 0 8% 0;
		margin: -8% 0 0 0;
	}

	.keyword-list {
		justify-content: space-between;
	}

	.keyword-list-item {
		width: 48%;
		margin: 0 0 4% 0;
	}

	.keyword-list-btn {
		display: block;
		font-size: 13px;
	}

}

.cast-bg {
	background-image: url(../img/home/plant_bg.png);
	position: relative;
}

.cast-bg:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	opacity: 0.6;
	z-index: 1;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.cast {
	padding: 380px 0 100px 0;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.cast-head {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

.cast-side-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	z-index: 5;
}

.cast-side-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 250px;
	z-index: 5;
}

.cast-wrapper {
	position: relative;
	z-index: 10;
}

.cast-ttl {
	margin: 0 auto 80px auto;
}

.cast-main,
.cast-sub {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.cast-main-item,
.cast-sub-item {
	list-style: none;
	text-align: center;
}

.cast-main-btn,
.cast-sub-btn {
	color: #fff;
	text-decoration: none;
}

.cast-main {
	margin: 0 0 90px 0;
}

.cast-main-item {
	width: 50%;
	margin: 0 0 90px 0;
}

.cast-main-prof {
	font-size: 16px;
	font-weight: bold;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.cast-main-prof .is-name {
	font-size: 25px;
}

.cast-main-img {
	max-width: 400px;
	margin: 0 auto -10px auto;
}

.cast-subttl {
	margin: 50px 0 30px;
}

.cast-sub-item {
	width: 25%;
}

.cast-sub-prof {
	font-size: 16px;
	font-weight: bold;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.cast-sub-prof .is-long {
	letter-spacing: -1px;
	font-size: 14px;
}

.cast-sub-prof .is-name {
	font-size: 25px;
}

.cast-sub-prof .is-long.is-name {
	letter-spacing: -3px;
	font-size: 24px;
}

.cast-sub-img {
	max-width: 300px;
	margin: 0 auto -20px auto;
}

.cast-txt {
	display: block;
	background-size: 100% 100%;
}

.cast-txt-01 {
	background-image: url(../img/home/cast_subttl.png);
	padding-top: 1.8%;
}

@media screen and (max-width:768px) {

	.cast-head {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.cast-side-left {
		position: absolute;
		top: 0;
		left: 0;
		width: 80px;
		z-index: 5;
	}

	.cast-side-right {
		position: absolute;
		top: 0;
		right: 0;
		width: 80px;
		z-index: 5;
	}


	.cast-bg:before {
		height: 200px;
	}

	.cast {
		padding: 30% 0 8% 0;
		margin: -6% 0 0 0;
	}

	.cast-main {
		margin: 0 0 5% 0;
	}

	.cast-main-item {
		width: 100%;
		margin: 0 0 5% 0;
	}

	.cast-main-img {
		max-width: 280px;
	}

	.cast-main-prof .is-name {
		font-size: 16px;
	}

	.cast-main-prof {
		font-size: 12px;
	}

	.cast-subttl {
		margin: 8% 0 3% 0;
	}

	.cast-sub-item {
		width: 50%;
		margin: 0 0 5% 0;
	}

	.cast-sub-prof {
		font-size: 12px;
	}

	.cast-sub-prof .is-name {
		font-size: 16px;
	}

	.cast-sub-prof .is-long {
		font-size: 12px;
	}

	.cast-sub-prof .is-long.is-name {
		letter-spacing: 0;
		font-size: 16px;
	}

	.cast-sub-img {
		margin: 0 auto -10px auto;
	}

	.cast-txt-01 {
		background-image: url(../img/home/cast_subttl_sp.png);
		padding-top: 4.5%;
	}

}

.original {
	padding: 140px 0 50px 0;
}

.original-ttl {
	margin: 0 auto 50px auto;
}

.original-list {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.original-list-item {
	width: 585px;
	list-style: none;
}

.original-list-btn {
	display: block;
	font-size: 24px;
	font-weight: bold;
	padding: 18.803% 0 0 0;
	background-image: url(../img/home/original_btn.svg);
	background-size: 100% 100%;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	position: relative;
}

.original-list-btn .is-wrap {
	text-align: center;
	width: 100%;
	display: block;
	position: absolute;
	line-height: 1.2em;
	height: 2.4em;
	top: 0;
	bottom: 0;
	margin: auto;
}

.original-list-btn .is-small {
	font-size: 16px;
	letter-spacing: 0;
}

@media screen and (max-width:768px) {

	.original {
		padding: 16% 0 10% 0;
		margin: -8% 0 0 0;
	}

	.original-ttl {
		margin: 0 auto 4% auto;
	}

	.original-list-btn {
		font-size: 16px;
		padding: 23.913% 0 0 0;
		background-image: url(../img/home/original_btn.svg);
	}

	.original-list-item .is-small {
		font-size: 10px;
	}

	.original-list-btn .is-wrap {
		line-height: 1em;
		height: 3em;
	}

}

.staff {
	padding: 150px 0 50px 0;
}

.staff-wrapper {
	max-width: 1500px;
}

.staff-ttl {
	margin: 0 auto 50px auto;
}

.staff-list {
	padding: 0;
	margin: 0 0 50px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.staff-list-item {
	width: 30%;
	list-style: none;
	margin: 0 1.5%;
}

.staff-list-btn {
	display: block;
	font-size: 24px;
	font-weight: bold;
	padding: 23.913% 0 0 0;
	background-image: url(../img/home/original_btn.svg);
	background-size: 100% 100%;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	position: relative;
}

.staff-list-btn .is-wrap {
	text-align: center;
	width: 100%;
	display: block;
	position: absolute;
	line-height: 1em;
	height: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
}

.staff-list-item:nth-child(2) .is-wrap {
	line-height: 1em;
	height: 3em;
}

.staff-list-item:last-child {
	margin-bottom: 0;
}

.staff-list-item .is-small {
	font-size: 16px;
	letter-spacing: 0;
}

@media screen and (max-width:1282px) {

	.staff-list-item {
		width: 44%;
		margin: 0 1% 50px 1%;
	}

	.staff-list-btn {
		font-size: 20px;
	}

	.staff-list-item .is-small {
		font-size: 12px;
		letter-spacing: 0;
	}

}

@media screen and (max-width:768px) {

	.staff {
		padding: 16% 0 10% 0;
		margin: -8% 0 0 0;
	}


	.staff-ttl {
		margin: 0 auto 4% auto;
	}

	.staff-list {
		margin: 0 0 5% 0;
	}

	.staff-list-item {
		width: 100%;
		margin: 0 0 5% 0;
	}

	.staff-list-btn {
		font-size: 16px;
	}

	.staff-btn-item .is-small {
		font-size: 10px;
	}

}

.vi {
	height: 650px;
	overflow: hidden;
	background-image: url(../img/home/vi.png);
	background-size: cover;
}


@media screen and (max-width:768px) {

	.vi {
		height: 300px;
	}

}

.ranking-bg {
	background-image: url(../img/home/plant_bg.png);
	position: relative;
}

.ranking-bg:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	z-index: 1;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99&0+0,1+99 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.ranking {
	padding: 150px 0 160px 0;
	position: relative;
	z-index: 2;
}

.ranking-ttl {
	max-width: 788px;
	margin: 0 auto 55px auto;
}

.ranking-list {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.ranking-list-item {
	list-style: none;
	width: 257px;
	margin: 0 0 43px 0;
}

.ranking-copy {
	max-width: 830px;
	margin: 0 auto;
	font-size: 11px;
	text-align: center;
	color: #ffdc00;
}
.ranking-copy a {
	color: #ffdc00;
	text-decoration: none;
}
.ranking-copy a:hover {
	color: #ffdc00;
	text-decoration: underline;
}

@media screen and (max-width:768px) {

	.ranking {
		padding: 16% 0 16% 0;
	}

	.ranking-ttl {
		margin: 0 auto 8% auto;
	}

	.ranking-list {
		display: flex;
		justify-content: space-around;
	}

	.ranking-list-item {
		width: 46%;
		margin: 0 0 4% 0;
	}

}

.footer {
	background: none;
	padding: 0 0 100px 0;
	position: relative;
	z-index: 2;
}

.footer-wrapper {
	max-width: 1208px;
}

.footer-copy-01 {
	max-width: 226px;
	margin: 0 auto;
}

@media screen and (max-width:768px) {

	.footer {
		padding: 0 0 4% 0;
	}

	.footer-copy-01 {
		width: 30%;
	}

}

.modal {
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

.modal-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	cursor: pointer;
}

.modal.is-open {
	display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-item {
	display: none;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
	z-index: 10000;
	margin: 5%;
}

.modal-item.is-open {
	display: block;
  opacity: 1;
  visibility: visible;
}

.modal-item .is-ttl {
	font-weight: bold;
}

.modal-btn-black {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background-image: url(../img/home/btn_close_black.svg);
	background-size: 100% 100%;
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: pointer;
}

.modal-btn-white {
	content: "";
	display: block;
	width: 65px;
	height: 65px;
	background-image: url(../img/home/btn_close_white.svg);
	background-size: 100% 100%;
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: pointer;
}

.modal-outline {
	color: #fff;
	font-size: 16px;
	margin: 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight: bold;
}

.modal-outline .is-name {
	font-size: 24px;
}

.modal-col {
	display: flex;
}

.modal-comment,
.modal-profile,
.modal-role {
	line-height: 1.777em;
}

@media screen and (max-width:768px) {

	.modal-btn-black {
		width: 24px;
		height: 24px;
		right: 15px;
		top: 15px;
	}

	.modal-btn-white {
		width: 24px;
		height: 24px;
		right: 15px;
		top: 15px;
	}

	.modal-outline {
		font-size: 12px;
		text-align: center;
	}

	.modal-outline .is-name {
		font-size: 16px;
	}

	.modal-profile ,
	.modal-comment ,
	.modal-role {
		font-size: 12px;
	}

	.modal-col {
		display: block;
	}

}

.modal-keyword {
	box-sizing: border-box;
	width: 790px;
	padding: 60px 98px;
	background-color: #fff;
	position: relative;
	margin: 5%;
}

.modal-keyword-ttl {
	color: #715219;
	font-size: 40px;
	text-align: center;
	margin: 0 0 40px 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight: bold;
}

.modal-keyword-copy {
	color: #000;
	font-size: 18px;
	/*text-align: center;*/
}

.modal-keyword-img {
	text-align: center;
	margin: 58px auto 0 auto;
}

.modal-saitama .modal-keyword-img {
	max-width: 490px;
}

.modal-saitama .modal-keyword-img {
	max-width: 490px;
}

@media screen and (max-width:768px) {

	.modal-keyword {
		padding: 8%;
	}

	.modal-keyword-ttl {
		font-size: 20px;
		margin: 0 0 4% 0;
	}

	.modal-keyword-copy {
		font-size: 12px;
	}

	.modal-keyword-img {
		text-align: center;
		margin: 6% 0 0 0;
	}

}

.modal-maincast {
	box-sizing: border-box;
	padding: 4%;
	background-color: #9B0000;
	position: relative;
	height: 90%;
	overflow-y: scroll;
	width: 1277px;
}

.modal-subcast {
	box-sizing: border-box;
	padding: 4%;
	background-color: #9B0000;
	position: relative;
}

.modal-cast-img {
	width: 100%;
	max-width: 364px;
	margin: -26px 0 0 -28px;
}

.modal-maincast .modal-comment {
	width: 100%;
	max-width: 700px;
}

.modal-maincast .modal-profile {
	padding: 3% 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.modal-subcast .modal-profile {
	width: 100%;
	max-width: 563px;
}

.modal-original {
	box-sizing: border-box;
	padding: 4%;
	background-color: #9B0000;
	position: relative;
	height: 90%;
	overflow-y: scroll;
	width: 1277px;
}

.modal-original .modal-comment {
	width: 100%;
	max-width: 700px;
}

.modal-original-img {
	width: 100%;
	max-width: 357px;
	margin: 0 30px 30px 0;
	text-align: center;
}

.modal-original-img img:last-child {
	max-width: 233px;
	height: auto;
	margin: 74px 0 0 0;
}

.modal-original .modal-profile {
	padding: 3% 0 0 0;
	border-top: 1px solid #fff;
}

.modal-director {
	box-sizing: border-box;
	padding: 4%;
	background-color: #9B0000;
	position: relative;
	height: 90%;
	overflow-y: scroll;
	width: 1277px;
}

.modal-director-img {
	width: 100%;
	max-width: 357px;
	margin: 0 30px 30px 0;
	text-align: center;
}

.modal-director .modal-comment {
	width: 100%;
	max-width: 700px;
}

.modal-director .modal-profile {
	padding: 3% 0 0 0;
	border-top: 1px solid #fff;
}

.modal-staff {
	box-sizing: border-box;
	padding: 4%;
	background-color: #9B0000;
	position: relative;
	width: 815px;
}

@media screen and (max-width:768px) {

	.modal-cast-img {
		margin: 0 0 -15px 0;
	}

	.modal-maincast {
		padding: 2% 6%;
	}

	.modal-subcast {
		padding: 2% 6%;
		height: 90%;
		overflow-y: scroll;
	}

	.modal-maincast .modal-profile {
		padding: 5% 0;
		margin: 5% 0;
	}

	.modal-original {
		padding: 2% 6%;
	}

	.modal-original-img {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 6% 0 4% 0;
	}

	.modal-original-img img:last-child {
		margin: 0;
	}

	.modal-original-img img {
		width: 48%;
		height: auto;
	}

	.modal-director {
		padding: 2% 6%;
	}

	.modal-director-img {
		margin: 6% 0 4% 0;
	}

	.modal-staff {
		padding: 12% 6% 2% 6%;
	}

}

.vi{
    /*画像のサイズを指定する*/
     /* animation:アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
     -webkit-animation: bgscroll 60s linear infinite;
     animation: bgscroll 60s linear infinite;
     background-size: 3669px 605px;
     height: 605px !important;
}
/*アニメーションの指定
background-position: x軸 , y軸;
今回は縦にスクロールする
背景画像のサイズ分移動させる
*/
@-webkit-keyframes bgscroll {
 0% { background-position: 0 0; }
 100% { background-position: -7338px 0; }
}

@keyframes bgscroll {
 0% { background-position: 0 0; }
 100% { background-position: -7338px 0; }
}

@media screen and (max-width:768px) {

    .vi{
        /*画像のサイズを指定する*/
         /* animation:アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
         -webkit-animation: bgscroll 60s linear infinite;
         animation: bgscroll 60s linear infinite;
         background-size: 1834px 302px;
         height: 302px !important;
    }
    /*アニメーションの指定
    background-position: x軸 , y軸;
    今回は縦にスクロールする
    背景画像のサイズ分移動させる
    */
    @-webkit-keyframes bgscroll {
     0% { background-position: 0 0; }
     100% { background-position: -3668px 0; }
    }

    @keyframes bgscroll {
     0% { background-position: 0 0; }
     100% { background-position: -3668px 0; }
    }


}

.keyword-list-btn,
.original-list-btn,
.staff-list-btn {
    overflow: hidden;
}
.keyword-list-btn .is-wrap,
.original-list-btn .is-wrap,
.staff-list-btn .is-wrap {
    transition: all 0.2s;
}
.keyword-list-btn:hover .is-wrap,
.original-list-btn:hover .is-wrap,
.staff-list-btn:hover .is-wrap {
    top: -2em;
    opacity: 0;
}
.keyword-list-btn .is-shadow,
.original-list-btn .is-shadow,
.staff-list-btn .is-shadow {
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    line-height: 1em;
    height: 1em;
    top: 0;
    bottom: -2em;
    margin: auto;
    opacity: 0;
    transition: all 0.2s;
    color: #fff;
    z-index: 2;
}

.original-list-btn .is-shadow ,
.staff-list-btn .is-shadow {
    color: #a90d15;
}

.original-list-btn .is-shadow {
    line-height: 1.2em;
    height: 2.4em;
}

.staff-list-item:nth-child(2) .staff-list-btn .is-shadow {
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    line-height: 1em;
    height: 3em;
}

.keyword-list-btn:hover .is-shadow,
.original-list-btn:hover .is-shadow,
.staff-list-btn:hover .is-shadow {
    bottom: 0;
    opacity: 1;
}

.keyword-list-btn .is-back,
.original-list-btn .is-back,
.staff-list-btn .is-back {
    background-image: url(../img/home/keyword_btn_on.svg);
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10px;
    left: 0;
    opacity: 0;
    transition: all 0.2s;
    color: #fff;
    z-index: 1;
}

.original-list-btn .is-back {
    background-image: url(../img/home/original_btn_on.svg);
}

.staff-list-btn .is-back {
    background-image: url(../img/home/staff_btn_on.svg);
}

.keyword-list-btn:hover .is-back,
.original-list-btn:hover .is-back,
.staff-list-btn:hover .is-back {
    opacity: 1;
    top: 0;
}

@media screen and (max-width:768px) {
	.original-list-btn .is-back {
    background-image: url(../img/home/staff_btn_on.svg);
	}
.original-list-btn .is-shadow {
    line-height: 1em;
    height: 3em;
}
}