.sp {
    display: none;
}
@media screen and (max-width: 480px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}
body {
	background: #000;
}

.scene1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
}
.scene1.unvisible {
	display: none;
}

.flash {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: #FFF;
	pointer-events: none;
}
.shadow3 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.shadow2 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.shadow2 .chara {
	opacity: 0;
	position: absolute;
	transform-origin: center center;
}
@media screen and (max-width: 860px) {
	.shadow2 {
		top: 11vh;
	}
}
@media screen and (max-width: 480px) {
	.shadow2 {
		align-items: flex-start;
		top: 0vh;
	}
}

.bg-grad {
	content: '';
	display: block;
	position: fixed;
	pointer-events: none;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background: url(../images/shadow_grad.png) no-repeat center top;
	background-size: 100% 100%;
}
@media screen and (max-width: 480px) {
    .bg-grad {
        opacity: 0.5;
    }
}

.shadow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

#show {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	transition: opacity 1s;
}
#show.visible {
	opacity: 1;
}

/* シーン2 */
.scene2 {
	opacity: 0;
	/*position: absolute;
	top: 0;
	left: 0;*/
	width: 100%;
	min-width: 1200px;
	min-height: 100%;
	background: #cf141b;
	transition: opacity 0.1s;
}
.scene2-inner {
	/*display: flex;*/
	position: relative;
}
.scene2.visible {
	opacity: 1;
}
.col-a {
	position: absolute;
	top: 47px;
	left: 0;
	width: 48.82%;
	padding-left: 143px;
}
.col-b {
	width: 100%;
	margin-left: auto;
	aspect-ratio: 2732/1904;
	position: relative;
	pointer-events: none;
}

/* サイドバー */
.side-nav {
	position: fixed;
	left: 0;
	top: 47px;
	background: rgba(0,0,0,1);
	width: 143px;
	height: calc(100% - 47px);
	z-index: 999;
	padding: 0 0px 10px;
	transition: all 0.3s ease-out;
}
.side-nav._scrolled {
	top: 0;
	height: 100%;
}
.side-nav .comingsoon-img {
	width: 17px;
	position: fixed;
	top: 108px;
	left: 132px;
	z-index: 1000;
	pointer-events: none;
}
.side-nav .btn-home a {
	display: block;
	background: #de0010;
	height: 0;
	overflow: none;
	margin-bottom: 13px;
	transition: all 0.3s ease-out;
}
.side-nav .btn-home a img {
	width: 100%;
	height: 100%;
}
.side-nav._scrolled .btn-home a {
	height: 47px;
}

.side-nav .btn-sub {
	position: relative;
	padding-top: 13px;
	margin-top: 13px;
}
.side-nav .btn-main span,
.side-nav .btn-main a,
.side-nav .btn-sub a {
	display: block;
	padding: 13px 0;
	transition: all 0.2s;
}
.side-nav a:hover {
	opacity: 0.7;
}
.side-nav .btn-main span.comingsoon {
	opacity: 0.3;
}

.side-nav .btn-sub::before {
	content: '';
	display: block;
	width: calc(100% - 20px);
	height: 1px;
	background: #5c5c5c;
	position: absolute;
	top: 0;
	left: 10px;
}
.side-nav .btn-sns {
	margin: 10px 0;
	display: flex;
	padding: 0 15px;
}

.side-banner {
	margin-top: 15px;
	padding: 0 8%;
}
.filmarks {
	margin-top: 10px;
}
@media screen and (max-height: 650px) {
	.side-nav .btn-main span,
	.side-nav .btn-main a,
	.side-nav .btn-sub a {
		padding: 8px 0;
	}
}


.home-btns {
	position: relative;
	padding: 4vh 0;
}
.snsbtn {
	display: flex;
	width: 20%;
	max-width: 110px;
	margin: 0 auto;
}
.snsbtn li {
	padding: 0 10px;
}
.snsbtn a {
    display: block;
    background: rgba(255,255,255,0);
    border-radius: 50%;
    width: 100%;
    margin: 0 auto;
    transition: all 0.2s;
}
.snsbtn a:hover {
	background: rgba(255,255,255,0.2);
}


.btn-trailer {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -30px;
	z-index: 1;
}
.btn-theater {
	position: absolute;
	top: calc(50% + 62px);
	left: 0;
	margin-top: -30px;
	z-index: 1;
}
.btn-comment {
	position: absolute;
	top: calc(50% + 124px);
	left: 0;
	margin-top: -30px;
	z-index: 1;
}
.btn-trailer a,
.btn-theater a,
.btn-comment a {
	display: block;
	background: #FFF;
	color: #000;
	width: 130px;
	height: 46px;
	font-weight: 700;
	/*transform: skew(-12deg);*/
	position: relative;
	font-family: "Bebas Neue", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	overflow: hidden;
	transition: all 0.2s ease-out;
}
.btn-trailer a span,
.btn-theater a span,
.btn-comment a span {
	display: block;
	position: absolute;
	top: 0; 
	left: 0;
	font-size: 26px;
	line-height: 1em;
	padding: 12px 15px 10px 37px;
	width: 100%;
	color: #000;
	z-index: 2;
	transition: all 0.2s;
}
.btn-trailer a:hover,
.btn-theater a:hover,
.btn-comment a:hover {
	width: 180px;
}
.btn-trailer a:hover span,
.btn-theater a:hover span,
.btn-comment a:hover span {
	color: #FFF;
	padding: 12px 20px 10px 60px;
}
.btn-trailer a::before,
.btn-theater a::before,
.btn-comment a::before {
	content: '';
	display: block;
	width: 200%;
	height: 52px;
	position: absolute;
	top: 0%;
	left: -200%;
	background: linear-gradient(90deg, #000 0%, #000 50%, #df0011 50%, #df0011 100%);
	/*background: linear-gradient(90deg, #df0011 0%, #df0011 50%, #000 50%, #000 100%);*/
	transition: all 0.3s ease-out;
}
.btn-trailer a:hover::before,
.btn-theater a:hover::before,
.btn-comment a:hover::before {
	left: 0;
}
.btn-trailer a::after,
.btn-theater a::after,
.btn-comment a::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	top: 50%;
	left: 12px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	transform: translateY(-50%) rotateZ(45deg);
	z-index: 3;
}
.btn-trailer a:hover::after,
.btn-theater a:hover::after,
.btn-comment a:hover::after {
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
}
.catch1 {
	position: absolute;
	top: 0;
	left : 0;
	width: 33%;
	z-index: 900
}
.catch2 {
	position: absolute;
	bottom: 30px;
	left : 0;
	width: 100%;
	z-index: 900
}
.catch3 {
	margin: 30px auto 0;
	width: 88%;
}
.billing {
	width: 74%;
	max-width: 550px;
	margin: 20px auto 0;
	padding-bottom: 0px;
}
.catch3-foot {
	text-align: center;
	padding-left: 143px;
	margin: 150px auto 0;
	width: 54%;
	max-width: 720px;
}
.mubichike {
    text-align: center;
	padding-left: 143px;
	margin: 20px auto 0;
	padding-bottom: 40px;
}
.mubichike #mvtk-widgets-container {
    max-width: 840px;
	margin: 0 auto;
}
.mubichike-banner {
	width: 160px;
	margin: 0 auto 30px;
}
.mubichike-banner a {
	transition: all 0.3s;
}
.mubichike-banner a:hover {
	opacity: 0.7;
}

/*.mubichike-banner a {
	border: solid 1px #FFF;
	display: block;
}*/

.characters {
	position: relative:
}
.characters .chara {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
}
.characters .angry {
	opacity: 0;
}
.characters .chara-bg {
	z-index: 800;
}
.characters .chara1 {
	z-index: 805;
}
.characters .chara2 {
	z-index: 804;
}
.characters .chara3 {
	z-index: 803;
}
.characters .chara4 {
	z-index: 802;
}
.characters .chara5 {
	z-index: 801;
}
.characters .chara-black {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	opacity: 0;
	z-index: 799;
	background: #000;
	width: 51.1%;
	height: auto;
	aspect-ratio: 1396/1763;
}
.characters .chara-catch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	z-index: 810;
	height: auto;
}
.after .angry,
.after .chara-bg {
	animation-name:fadeFromRightAnime;
    animation-duration: 0.1s;
	animation-delay: 0s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara1 {
	animation-name:fadeInChara;
    animation-duration: 0.3s;
	animation-delay: 0.3s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara2 {
	animation-name:fadeInChara;
    animation-duration: 0.3s;
	animation-delay: 0.4s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara3 {
	animation-name:fadeInChara;
    animation-duration: 0.3s;
	animation-delay: 0.5s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara4 {
	animation-name:fadeInChara;
    animation-duration: 0.3s;
	animation-delay: 0.6s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara5 {
	animation-name:fadeInChara;
    animation-duration: 0.3s;
	animation-delay: 0.7s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara-catch {
	animation-name:zoomOutBounceAnimeLarge;
    animation-duration: 0.3s;
	animation-delay: 0.8s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}
.after .chara-black {
	animation-name:fadeInAnime;
    animation-duration: 0.3s;
	animation-delay: 0s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}

@media screen and (max-width: 860px) {
	.scene2 {
		width: 100%;
		min-width: auto;
	}
	.scene2-inner {
		display: flex;
		flex-direction: column-reverse;
	}
	.col-l,
	.col-r {
		width: 100%;
		padding: 0px;
	}
	.catch1 {
		position: absolute;
		top: 0;
		left : 0;
		width: 33%;
		z-index: 900
	}
	.catch2 {
		position: absolute;
		bottom: 30px;
		left : 20px;
		width: calc(100% - 20px);
		z-index: 900
	}
	.koukai2 {
		margin: 20px 0;
	}
	.snsbtn {
		margin-bottom: 20px;
	}
	.snsbtn li {
		padding: 0 10px;
	}
	.snsbtn a {
		display: block;
		background: rgba(255,255,255,0);
		border-radius: 50%;
		width: 100%;
		margin: 0 auto;
		transition: all 0.2s;
	}
	.trailer-area-sp {
		display: block;
		position: relative;
		width: 100%;
		padding: 0 20px;
		margin: 40px auto 0;
		max-width: 640px;
	}
	.trailer-area-sp iframe {
		width: 100%;
		aspect-ratio: 560 / 315;
		height: auto;
		vertical-align: bottom;
		z-index: 1;
	}
	.btn-trailer {
		display: none;
	}
	.btn-theater {
		position: static;
		width: 200px;
		margin: 20px auto 0;
	}
	.btn-comment {
		position: static;
		width: 200px;
		margin: 20px auto 0;
	}
	.btn-theater a,
	.btn-comment a {
		display: block;
		background: #FFF;
		color: #000;
		width: 100%;
		height: 52px;
		font-weight: 700;
		/*transform: skew(-12deg);*/
		position: relative;
		font-family: "Bebas Neue", sans-serif;
		font-weight: 400;
		font-style: normal;
		overflow: hidden;
	}
	.btn-theater a span,
	.btn-comment a span {
		font-size: 32px;
		padding: 11px 20px 10px 64px;
		transition: none;
	}
	.btn-theater a:hover,
	.btn-comment a:hover {
		width: 100%;
	}
	.btn-theater a:hover span,
	.btn-comment a:hover span {
		color: #000;
		padding: 11px 20px 10px 64px;
	}
	.btn-theater a::before,
	.btn-comment a::before {
		content: '';
		display: block;
		width: 200%;
		height: 52px;
		position: absolute;
		top: 0%;
		left: -200%;
		background: linear-gradient(90deg, #df0011 0%, #df0011 50%, #000 50%, #000 100%);
		transition: all 0.3s ease-out;
	}
	.btn-theater a:hover::before,
	.btn-comment a:hover::before {
		left: 0;
	}
}

.noiz {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: url(../images/bg_noiz.png) repeat left top;
	background-size: 50%;
	mix-blend-mode: multiply;
	opacity: 0.18;
}
.bg,
.bg-line-v {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	background: #000;
}

.bg-line-v .line {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 12.5%;
	height: 100%;
	transform-origin: left top;
	text-indent: -9999px;
	top: 0;
	width: 12.5%;
	background-image: linear-gradient(90deg, rgba(206, 0, 16, 1), rgba(206, 0, 16, 1), rgba(122, 0, 10, 1));
}
.is_loaded .bg-line-v .line1 {
	left: 0;
}
.is_loaded .bg-line-v .line2 {
	left: 12.5%;
}
.is_loaded .bg-line-v .line3 {
	left: 25%;
}
.is_loaded .bg-line-v .line4 {
	left: 37.5%;
}
.is_loaded .bg-line-v .line5 {
	left: 50%;
}
.is_loaded .bg-line-v .line6 {
	left: 62.5%;
}
.is_loaded .bg-line-v .line7 {
	left: 75%;
}
.is_loaded .bg-line-v .line8 {
	left: 87.5%;
}

@media screen and (max-width: 480px) {
    .bg-line-v {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        background: #000;
    }
    
    .bg-line-v .line {
        top: 0;
        left: 0;
        width: 25%;
        height: 50vh;
        transform-origin: left top;
        text-indent: -9999px;
        top: 0;
        background-image: linear-gradient(90deg, rgba(206, 0, 16, 1), rgba(206, 0, 16, 1), rgba(122, 0, 10, 1));
    }
    .is_loaded .bg-line-v .line1 {
        left: 0;
    }
    .is_loaded .bg-line-v .line2 {
        left: 25vw;
    }
    .is_loaded .bg-line-v .line3 {
        left: 50vw;
    }
    .is_loaded .bg-line-v .line4 {
        left: 75vw;
    }
    .is_loaded .bg-line-v .line5 {
        top: 50vh;
        left: 0;
    }
    .is_loaded .bg-line-v .line6 {
        top: 50vh;
        left: 25vw;
    }
    .is_loaded .bg-line-v .line7 {
        top: 50vh;
        left: 50vw;
    }
    .is_loaded .bg-line-v .line8 {
        top: 50vh;
        left: 75vw;
    }
}

/*.is_loaded .bg-line-v .line1,
.is_loaded .bg-line-v .line3,
.is_loaded .bg-line-v .line5,
.is_loaded .bg-line-v .line7 {
	top: 0;
	width: 12.5%;
	background-image: linear-gradient(90deg, rgba(206, 0, 16, 1), rgba(206, 0, 16, 1), rgba(122, 0, 10, 1));
	animation-name:lineScaleX;
    animation-duration: 0.8s;
	animation-delay: 0s;
    animation-fill-mode:forwards;
}

.is_loaded .bg-line-v .line2,
.is_loaded .bg-line-v .line4,
.is_loaded .bg-line-v .line6,
.is_loaded .bg-line-v .line8 {
	top: 0;
	width: 12.5%;
	background-image: linear-gradient(90deg, rgba(206, 0, 16, 1), rgba(206, 0, 16, 1), rgba(122, 0, 10, 1));
	animation-name:lineScaleX;
    animation-duration: 0.8s;
	animation-delay: 0s;
    animation-fill-mode:forwards;
}*/
.bg-line-v.after_flash ._closed {
	filter: grayscale(100%);
}

.is_loaded .bg-line-v .line {
	animation-name:lineScaleX;
    animation-duration: 0.8s;
    animation-fill-mode:forwards;
}
.is_loaded .bg-line-v .line4 {
	animation-delay: 0s;
}
.is_loaded .bg-line-v .line5 {
	animation-delay: 0.2s;
}
.is_loaded .bg-line-v .line3 {
	animation-delay: 0.4s;
}
.is_loaded .bg-line-v .line6 {
	animation-delay: 0.4s;
}
.is_loaded .bg-line-v .line2 {
	animation-delay: 0.6s;
}
.is_loaded .bg-line-v .line7 {
	animation-delay: 0.6s;
}
.is_loaded .bg-line-v .line1 {
	animation-delay: 0.8s;
}
.is_loaded .bg-line-v .line8 {
	animation-delay: 0.8s;
}

.home-wrap {
    min-width: 810px;
    /*height: 100%;
    min-height: 740px;*/
    position: relative;
}
.home-main {
	/*height: 100%;*/
	padding: 5vh 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.site-title {
	width: 90%;
	margin: 12px auto;
}
.catch4 {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 40px;
	background: #000;
	overflow: hidden;
}
.catch4 img {
	height: 40px;
	width: auto;
	animation: loop_animation_right 18s linear infinite;
}
.catch4 .catch-loop {
	/*animation: loop_animation_right 3s linear infinite;
	width: 100%;*/
	transform: translateX(-20px);
}
@keyframes loop_animation_right {
	0% {
		transform: translateX(50vw);
	}
	100% {
		transform: translateX(-100%);
	}
}


.koukai {
	max-width: 130px;
	margin: 32px auto 20px;
}
.trailer-area-pc {
	width: 70%;
	margin: 20px auto 20px;
	position: relative;
}
.trailer-area-btn {
	display: block;
	position: relative;
	overflow: hidden;
	background: #000;
}
.trailer-area-btn::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/home/btn_player2.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.trailer-area-btn img {
	transition: all 0.3s ease-out;
}
.trailer-area-btn:hover img {
	transform: scale(1.08);
}
.trailer-area-pc .trailer-catch {
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	z-index: 1;
}
.bnr-lemino {
	width: 70%;
	margin: 15px auto 20px;
	position: relative;
}
.bnr-goods {
	width: 70%;
	margin: 15px auto 20px;
	position: relative;
}
.bnr-honnetalk {
	width: 40%;
	margin: 15px auto 20px;
	position: relative;
}
.bnr-lemino a,
.bnr-goods a,
.bnr-honnetalk a {
    transition: all 0.3s;
}
.bnr-lemino a:hover,
.bnr-goods a:hover,
.bnr-honnetalk a:hover {
    opacity: 0.7;
}
.sub-title {
	width: 54.9%;
	margin: 0 auto 30px;
}

.scene2 .home-sns {
	width: 120px;
	margin: 0 auto;
}

@media screen and (max-width: 860px) {
	.home-wrap {
		background: none;
		min-width: 100%;
		min-height: auto;
	}
	.home-main {
		min-height: 100%;
		height: auto;
	}
	.site-title,
	.sub-title {
		width: 100%;
		max-width: 100%;
	}
	.catch1 {
		margin: 0px auto 0;
		max-width: 680px;
	}
	.site-title {
		max-width: 680px;
	}
	.sub-title {
		margin: 0 auto 23vh;
		max-width: 680px;
	}
	.snsbtn {
		display: flex;
		width: 100%;
		/*width: 110px;*/
		margin: 0 auto;
	}
	
}
@media screen and (max-width: 480px) {
    .sub-title {
        margin: 0 auto 20px;
        max-width: 680px;
    }
}


@media screen and (min-width: 1600px) {
	/*.btn-comment {
		width: 320px;
	}
	.btn-comment a {
		width: 100%;
		height: 104px;
	}
	.btn-comment a span {
		font-size: 58px;
		line-height: 1em;
		padding: 26px 20px 20px 100px;
	}
	.btn-comment a:hover::before {
		left: 0;
	}
	.btn-comment a::after {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		left: 30px;
		border-top: solid 3px #000;
		border-right: solid 3px #000;
		transform: translateY(-50%) rotateZ(45deg);
		z-index: 3;
	}*/
}

.trailer-btns ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.trailer-btns ul li {
	width: calc(50% - 5px);
}
.trailer-btns ul li span {
	display: block;
	background: #AAA;
	color: #000;
	text-align: center;
	padding: 14px 0;
	letter-spacing: 0.075em;
	font-size: 14px;
	font-weight: 500;
	border-radius: 1px;
}
.trailer-btns ul li span.current {
	color: #FFF;
	background: #cf141b;
}


.box-comment {
	max-width: 700px!important;
	padding: 30px;
}
.comment-block {
	text-align: left;
	margin-top: 50px;
	padding: 0 20px;
}
.comment-block:first-child {
	margin-top: 0px;
}
.comment-title {
	font-size: 23px;
	font-weight: 700;
	margin-bottom: 20px;
}
.comment-text p {
	font-size: 16px;
	line-height: 1.6em;
}
.comment-img {
	float: left;
	width: 36%;
	max-width: 230px;
	padding: 0 30px 30px 0;
}
@media screen and (max-width: 860px) {
	.box-comment {
		padding: 20px;
	}
	.comment-block {
		padding: 0px;
	}
}
/*@media screen and (max-width: 860px) {
	.home-wrap {
		background: none;
		min-width: 100%;
		min-height: auto;
	}
	.home-main {
		min-height: 100%;
		height: auto;
	}
	.site-title {
		width: 100%;
		max-width: 100%;
	}
	.home-catch {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
	}
	.koukai {
		position: static;
		width: 30%;
		padding: 0;
		margin: 0 auto;
	}
	.billing {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40px;
	}
}*/


@media screen and (max-width: 860px) {
	/*.home-sns {
		width: 100%;
		max-width: 100%; 
		margin: 0;
	}
	.snsbtn {
		width: 280px;
		margin: 10vw auto;
	}
	.snsbtn li {
		width: calc(100% / 3);
		padding: 0 5px;
	}
	.snsbtn a {
    	background: rgba(255,255,255,0);
	}
	.snsbtn a:hover {
		background: rgba(255,255,255,0);
	}
	
	.trailer-area-sp {
		position: relative;
		width: 100%;
		aspect-ratio: 560 / 315;
		background: #000;
		margin-bottom: 10vw;
		padding: 0;
		border-top: solid 1px #8b8810;
	}
	.trailer-area-sp iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 560 / 315;
		height: auto;
		vertical-align: bottom;
		z-index: 1;
		border-bottom: solid 1px #8b8810;
	}*/
}


/* Close Button */
.btn-close {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: 440px;
    color: #FFF;
    z-index: 1100;
    transition: all 0.2s ease-out;
}
.btn-close:hover {
    transform: rotateZ(180deg);
    cursor: pointer;
}
.btn-close span {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
}
.btn-close span:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 5px;
    background: #FFF;
    transform: translateY(20px) rotate(45deg);
}
.btn-close span:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 5px;
    background: #FFF;
    transform: translateY(20px) rotate(-45deg);
}

/* Scroll Text */
.scroll-text {
    width: 100%;
    max-width: 600px;
    height: 320px;
    overflow-y: auto;
}
.scroll-text::-webkit-scrollbar {
    width: 8px; /* 横幅設定 */
}
.scroll-text::-webkit-scrollbar-thumb {
    background: #f7ee12; /* ハンドルの色 */
}
.scroll-text::-webkit-scrollbar-track {
    background: #000; /* 背景色 */
}

@media screen and (min-width: 1600px) {
    
}

.flash,
.site-title,
.site-title2,
.sub-title,
.catch1,
.catch2,
.catch3,
.catch2_1,
.catch2_2,
.home-catch,
.home-trailer,
.trailer-area-pc,
.bnr-lemino,
.bnr-goods,
.bnr-honnetalk,
.billing,
.mubichike,
.koukai,
.koukai2,
.snsbtn,
.btn-comment,
.btn-trailer,
.btn-theater {
    opacity: 0;
}

.is_loaded .flash {
	animation-name:flashOut;
    animation-duration: 2s;
	animation-delay: 2s;
    animation-fill-mode:forwards;
}

.is_loaded .home-catch {
    animation-name:fadeInFromBottomAnime;
    animation-duration: 1.2s;
	animation-delay: 2s;
    animation-fill-mode:forwards;
}
.is_loaded .site-title,
.is_loaded .site-title2 {
    animation-name:zoomOutBounceAnimeLarge;
    animation-duration: 0.6s;
	animation-delay: 2.2s;
    animation-fill-mode:forwards;
}
.is_loaded .catch1 {
	animation-name:zoomOutBounceAnime;
    animation-duration: 0.4s;
	animation-delay: 2.6s;
    animation-fill-mode:forwards;
}
.is_loaded .sub-title {
	animation-name:fadeFromRightAnime;
    animation-duration: 0.4s;
	animation-delay: 2.7s;
    animation-fill-mode:forwards;
}
.is_loaded .catch2,
.is_loaded .catch3 {
    animation-name:fadeFromRightAnime;
    animation-duration: 0.2s;
	animation-delay: 2.7s;
    animation-fill-mode:forwards;
}
.is_loaded .catch2_1 {
    animation-name:fadeFromRightAnime;
    animation-duration: 0.6s;
	animation-delay: 2.8s;
    animation-fill-mode:forwards;
}
.is_loaded .catch2_2 {
    animation-name:fadeFromRightAnime;
    animation-duration: 0.6s;
	animation-delay: 2.9s;
    animation-fill-mode:forwards;
}
.is_loaded .koukai,
.is_loaded .koukai2,
.is_loaded .snsbtn,
.is_loaded .mubichike,
.is_loaded .trailer-area-pc {
    animation-name:fadeFromRightAnime;
    animation-duration: 1.2s;
	animation-delay: 2.9s;
    animation-fill-mode:forwards;
}
.is_loaded .bnr-lemino,
.is_loaded .bnr-goods,
.is_loaded .bnr-honnetalk,
.is_loaded .btn-comment,
.is_loaded .btn-trailer,
.is_loaded .btn-theater {
    animation-name:fadeFromLeftAnime;
    animation-duration: 1.2s;
	animation-delay: 3s;
    animation-fill-mode:forwards;
}
.is_loaded .billing {
    animation-name:fadeInAnime;
    animation-duration: 0.8s;
	animation-delay: 3.1s;
    animation-fill-mode:forwards;
}

/* 縮小 */
.zoomOut{

}


@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInFromBottomAnime {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeFromBottom {
    from {
        transform: translateY(120px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes zoomOutAnime {
    from {
        transform: scale(2);
        opacity: 0;
    }
    to {
        transform:scale(1);
        opacity: 1;
    }
}

@keyframes fadeFromRightBounceAnime {
    0%   { transform: translateX(20px); opacity: 0; }
    40%  { transform: translateX(0px); opacity: 1; }
    50%  { transform: translateX(5px); }
    100% { transform: translateX(0px); opacity: 1; }
}
@keyframes zoomOutBounceAnime {
    0%   { transform: scale(2.4); opacity: 0; }
    40%  { transform: scale(1.0, 1.0); opacity: 1; }
    50%  { transform: scale(1.1, 1.1); }
    100% { transform: scale(1.0, 1.0); opacity: 1; }
}
@keyframes zoomOutBounceAnimeLarge {
    0%   { transform: scale(4); opacity: 0; animation-timing-function: ease-in;}
    80%  { transform: scale(1.0, 1.0); opacity: 1; }
    90%  { transform: scale(1.1, 1.1); }
    100% { transform: scale(1.0, 1.0); opacity: 1; }
}
@keyframes flashOut {
    0%   { opacity: 0; animation-timing-function: ease-in;}
	10%   { opacity: 1; animation-timing-function: ease-out;}
    100% { opacity: 0; }
}
@keyframes fadeIn {
    from   { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInChara {
    0%   { transform: translateY(40px); opacity: 0; animation-timing-function: ease-out;}
    100% { transform: translateY(0px); opacity: 1; }
}
@keyframes fadeFromLeftAnime {
    from   { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0px); opacity: 1; }
}
@keyframes fadeFromRightAnime {
    from   { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0px); opacity: 1; }
}
/*@keyframes fadeOutBounceFromLeftAnime {
    0%   { transform: scale(1.2, 1.0) translateX(-600px); opacity: 0; }
    70%  { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; }
    76%  { transform: scale(0.9, 1.0) translateX(20px); opacity: 1; }
    100% { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; }
}
@keyframes fadeOutBounceFromRightAnime {
    0%   { transform: scale(1.2, 1.0) translateX(600px); opacity: 0; }
    70%  { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; }
    88%  { transform: scale(0.9, 1.0) translateX(-20px); opacity: 1; }
    100% { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; }
}*/

@keyframes rotateFromRight30Anime {
    0%   { transform: rotateZ(20deg); opacity: 0; }
    30%  { transform: rotateZ(-4deg); opacity: 1; }
    40%  { transform: rotateZ(3deg); opacity: 1; }
    50%  { transform: rotateZ(1deg); opacity: 1; }
    60%  { transform: rotateZ(-1deg); opacity: 1; }
    80% { transform: rotateZ(0deg); opacity: 1; }
    100% { transform: rotateZ(0deg); opacity: 1; }
}

@keyframes lineScaleX {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform:scaleX(1);
        opacity: 1;
    }
}

@keyframes lineScaleY {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform:scaleY(1);
        opacity: 1;
    }
}