@charset "utf-8";
/***********************
sp.css
************************/
@media screen and (min-width: 0px) and (max-width: 800px) {

	/*---------------------
	TOPアニメーション
	-----------------------*/
	.c_path1.--ready1 {
		opacity: 1;
		animation: clipping .4s ease-in-out;
	}

	.c_path2.--ready2 {
		opacity: 1;
		animation: clipping2 1.5s ease-in-out;
	}

	/*---------------------
	全体
	-----------------------*/
	html {
		background: #fff;
	}

	#container {
		min-width: 0;
		max-width: initial;
		/* background: url(../img/sp_bgbg.jpg) no-repeat center top;
		background-size: 100% auto; */
	}

	/*---------------
	メインエリア
	-----------------*/
	#works_top {
		background: #000;
		/*background: url("../img/top_sp/bg2.jpg") no-repeat center top;
		background-size: 100% auto; */
	}

	#main {
		position: relative;
		width: 100%;
		max-width: 100%;
		height: inherit;
		padding-top: 0;
		margin: 0;
		padding-bottom: 0;
		background: #000;
	}

	.x_icon {
		position: absolute;
		top: inherit;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100%;
		background: none;
	}

	.x_icon img:hover {
		opacity: 1;
	}

	.title_area {
		/* height: calc(1000 / 640 * 100vw); */
		min-width: 0;
	}

	#main_visual {
		max-width: unset;
		width: 100%;
		min-width: 100%;
	}

	.copy_1 {
		width: calc(427 / 640 * 100vw);
		top: calc(13 / 640 * 100vw);
	}

	.copy_2 {
		width: calc(338 / 640 * 100vw);
		bottom: calc(244.5 / 640 * 100vw);
	}

	.logo {
		width: calc(368 / 640 * 100vw);
		bottom: calc(71 / 640 * 100vw);
	}

	.t_day {
		position: absolute;
		width: calc(91 / 640 * 100vw);
		left: inherit;
		top: inherit;
		right: calc(24 / 640 * 100vw);
		bottom: calc(72.5 / 640 * 100vw);
	}

	.lf {
		width: calc(442 / 640 * 100vw);
		bottom: calc(27.5 / 640 * 100vw);
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	/* ARエリア */
	.sp_ar_area {
		position: relative;
	}

	.ar_back {
		position: relative;
		width: 100%;
		padding-top: calc(29 / 640 * 100vw);
	}

	.camera {
		position: absolute;
		width: calc(134 / 640 * 100vw);
		top: calc(218 / 640 * 100vw);
		left: calc(95 / 640 * 100vw);
	}

	.creeper,
	.llama {
		position: absolute;
		width: calc(139 / 640 * 100vw);
		top: calc(219 / 640 * 100vw);
		left: calc(269.5 / 640 * 100vw);
	}

	.llama {
		left: calc(416.5 / 640 * 100vw);
	}

	.cp_btn {
		position: relative;
		width: 100%;
		padding-top: calc(19 / 640 * 100vw);
		left: 0;
		bottom: 0;
	}

	/* 劇場ボタン */
	.sp_theater_btn_area {
		position: relative;
		width: 100%;
		display: flex;
	}

	.sp_theater_btn,
	.sp_x_btn,
	.sp_mvtk_btn,
	.pl_bnr {
		position: relative;
		width: 100%;
		/* width: calc(560 / 640 * 100vw);
		margin: 0 auto;
		padding-top: 12vw; */
	}

	.pl_bnr {
		position: absolute;
		left: 0;
		bottom: 0;
		top: calc(957 / 640 * 100vw);
	}

	/*---------------
	動画エリア
	-----------------*/
	.yt_area {
		/* height: calc(628 / 640 * 100vw);
		background: url(../img/top_sp/yt_back.png) no-repeat center top;
		background-size: 100% auto; */
		background: #000;
		height: auto;
		padding: calc(100 / 640 *100%) 0 calc(45 / 640* 100%);
	}

	.yt_area_title {
		width: calc(318 / 640* 100%);
		/* margin: 0 auto calc(60 / 640* 100%); */
		margin: 0 auto;
	}

	.trailer_img {
		width: calc(601 / 640 * 100vw);
	}

	.btn {
		width: calc(128.5 / 640 * 100vw);
		margin-top: calc(-237 / 640 * 100vw);
	}

	.video_title {
		top: calc(355 / 640* 100vw);
		font-size: calc(26.9 / 640* 100vw);
		letter-spacing: calc(5 / 640* 100vw);
	}

	.video_more {
		width: calc(399 / 640 * 100vw);
		top: calc(420 / 640 * 100vw);
		left: calc(119.5 / 640 * 100vw);
		margin-left: 0;
		background: none;
	}

	.video_more:hover img {
		opacity: 1;
	}

	#closeBtn {
		right: 0px;
		top: -60px;
	}

	#closeBtn img {
		width: 30px;
	}

	#youtube_wrap {
		border: none;
		/* margin-top: 9.37%; */
		padding: 0;
	}

	#youtube_area {
		position: relative;
		width: 100%;
		height: auto;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#yt_load_area {
		position: relative;
		top: 0;
		left: 0;
		transform: translateX(0);
		width: auto;
		height: auto;
		margin: -1px 0 0;
		overflow: auto;
		display: flex;
		padding: 0 8%;
	}

	#yt_load {
		position: relative;
		transform: translateX(0px);
		margin: 0;
		display: flex;
		gap: 3vw;
	}

	.yt_list {
		position: relative;
		width: 85vw;
		cursor: pointer;
		transform: translateX(0) !important;
		margin: 0;
	}

	.bg_border {
		border: solid 1px #999999;
	}

	.yt_list_img {
		width: 98.8%;
	}

	.yt_title {
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 15px;
		line-height: 26px;
		margin: 3.6% auto 0;
	}

	#yt_more {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		top: inherit;
		width: 100%;
		padding: 3% 0 12.5%;
		background: none;
		margin-top: 0;
	}

	#yt_more img {
		opacity: 1;
	}

	#yt_more:hover img {
		opacity: 1;
	}

	#yt_more:hover {
		background: none;
		background-size: 0;
	}

	.yt_fade {
		background: rgba(0, 0, 0, 0.5) url(../img/top/play_btn.png) no-repeat center center;
		background-size: 50px auto;
		margin-top: 0%;
		background-position: center;
		top: 2px;
	}

	.yt_fade:hover {
		background: rgba(0, 0, 0, 0.2) url(../img/top/play_btn.png) no-repeat center center;
		background-size: 50px auto;
		margin-top: 0%;
		background-position: center;
	}

	#videoPlayer {
		position: absolute;
		width: 90% !important;
		height: auto !important;
		padding: 0 !important;
		padding-top: 0px !important;
		left: 0 !important;
		margin-left: 5% !important;
		z-index: 999 !important;
	}

	#videoPlayer {
		position: absolute !important;
		width: 90% !important;
		padding-top: 50.6% !important;
	}

	#videoPlayer iframe {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	#closeBtn2 {
		right: 0 !important;
	}

	.yt_list_img {
		width: calc(100% - 0px);
	}

	/*---------------
	ムビチケエリア
	-----------------*/
	#mvtk_ticket {
		max-width: 100%;
	}

	#mvtk-widgets-container {
		margin: auto;
		left: 0;
		right: 0;
		width: 100%;
	}

	.mvtk_area {
		width: 100%;
	}

	.section_bnr {
		padding: 0 10.9% 16%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.mb-1 {
		width: auto;
		flex-direction: column;
	}

	.mb-1 img {
		width: 100%;
	}

	.mb-1>a:first-child {
		margin-bottom: 4%;
	}

	.mv_widget {
		margin-bottom: 8.4%;
	}

	/*---------------
	イントロエリア
	-----------------*/
	.intro_area {
		padding-bottom: 10.5%;
		background: url(../img/top/intro_v2/sp/bg.jpg) no-repeat center top;
		/* background: url(../img/top/intro_v2/back_sp.jpg) no-repeat center top; */
		background-size: 100% auto;
	}

	.bee {
		width: calc(300 / 640 * 100vw);
		top: calc(460 / 640 * 100vw);
		left: 0;
		margin-left: 0;
	}

	.wolf {
		width: calc(215 / 640 * 100vw);
		bottom: initial;
		top: calc(1490 / 640 * 100vw);
		left: calc(435 / 640 * 100vw);
		margin-left: 0;
	}

	.survival {
		width: calc(404.5 / 640 * 100vw);
		padding-top: calc(43.5 / 640 * 100vw);
	}

	.intro_txt1 {
		width: 100%;
		padding-top: calc(17 / 640 * 100vw);
		/* top: calc(243.5 / 640 * 100vw); */
	}

	.intro_txt2 {
		width: 100%;
		padding: calc(20 / 640 * 100vw) 0 calc(194.5 / 640 * 100vw);
	}

	.dot_border_1 {
		background: url(../img/top_sp/dot_1.png) center top;
		background-repeat: repeat-x;
		background-size: 100% auto;
		height: calc(40 / 640 * 100vw);
		animation: loop 30s linear infinite;
	}

	@keyframes loop {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: -600px 0;
		}
	}

	.dot_border_2 {
		background: url(../img/ch/sp/dot.png) center top;
		background-repeat: repeat-x;
		background-size: 100% auto;
		height: calc(40 / 640 * 100vw);
	}

	.dot_border_2.--ch {
		background: url(../img/top_sp/dot_2.png) center top;
		background-size: 100% auto;
		animation: loop2 30s linear infinite;
	}

	@keyframes loop2 {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 600px 0;
		}
	}

	.scene {
		height: calc(214 / 640 * 100vw);
		background-size: auto calc(214 / 640 * 100vw);
		animation: loop3 75s linear infinite;
	}

	/*---------------
	バナーエリア
	-----------------*/
	#bnr_wrap {
		position: relative;
		width: 100%;
		background: #f3eddf;
		background: url(../img/top_sp/bnr_bg.jpg) repeat-y center top;
		background-size: 100% auto;
		padding: 0;
		min-height: 0;
	}

	.dot_border_pk {
		background: url(../img/top_sp/dot_pk.png) center top;
		background-repeat: repeat-x;
		background-size: 100% auto;
		height: calc(40 / 640 * 100vw);
	}

	#bnr_wrap a {
		color: #141414
	}

	#bnr_wrap a:hover {
		text-decoration: underline;
	}

	/* .sp_pickup_title {
		padding-top: 2.56%;
	} */

	.works_bnr {
		width: 46.6%;
		margin: 0 10px 0;
	}

	#bnr_load {
		position: relative;
		width: 96%;
		/*padding-top: 9.3%;*/
		padding-top: 0;
		/* padding-bottom: 10%; */
		padding-bottom: 0;
	}

	.bnr_column {
		width: 100%;
		margin: 0 auto;
		display: none;
		padding-bottom: 5%;
		justify-content: center;
	}

	#bnr_more {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 10%;
		left: 50%;
		transform: translateX(-50%);
		background: url(../img/top_sp/news/more_v2.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: -20px;
		cursor: pointer;
		padding-bottom: 15.8%;
	}

	.bnr_text {
		font-size: 12px;
		line-height: 18px;
		margin: 10px 0;
		text-align: center;
	}

	#bnr_sort {
		position: relative;
		width: 100%;
		display: flex !important;
		justify-content: center;
		margin-bottom: 0;
		padding-top: 12%;
		z-index: 1;
		display: none !important;
	}

	.bnr_category {
		margin: 0 4px;
	}

	.bnr_category {
		width: 21.85%;
		height: auto;
		cursor: pointer;
	}

	.bnr_category:nth-child(1) {
		background: url(../img/category/sp/cate1.png) no-repeat left top;
		background-size: 100% auto;
	}

	.bnr_category:nth-child(2) {
		background: url(../img/category/sp/cate2.png) no-repeat left top;
		background-size: 100% auto;
	}

	.bnr_category:nth-child(3) {
		background: url(../img/category/sp/cate3.png) no-repeat left top;
		background-size: 100% auto;
	}

	.bnr_category:nth-child(4) {
		background: url(../img/category/sp/cate4.png) no-repeat left top;
		background-size: 100% auto;
	}

	.bnr_category img {
		opacity: 0;
		transition: 0s;
		/* vertical-align: top; */
		display: block;
		margin: 0;
		padding: 0;
	}

	.bnr_category img:hover {
		opacity: 1;
	}

	.category_target img {
		opacity: 1;
	}

	.category_target img:hover {
		opacity: 1;
	}

	/*---------------
	キャスト
	-----------------*/
	.vc_area {
		background: url(../img/vc/bg_sp.jpg) no-repeat center top;
		background-size: 100% auto;
		padding-bottom: calc(290 / 640 * 100vw);
	}

	.vc_ttl {
		width: calc(501 / 640 * 100vw);
		padding-top: calc(80.5 / 640 * 100vw);
	}

	.vc_casts {
		width: calc(503 / 640 * 100vw);
		left: calc(111.5 / 640 * 100vw);
		margin-left: 0;
		padding-top: calc(55 / 640 * 100vw);
	}

	/*---------------
	ニュースエリア
	-----------------*/
	#news_area {
		position: relative;
		width: 100%;
		background: #000;
		padding-top: 0% !important;
		padding-bottom: 17% !important;
	}

	#news_title {
		position: relative;
		top: 0;
		left: 50%;
		/* transform: translateX(-50%) !important; */
		margin: 0;
		width: 100%;
		height: 0;
		padding-top: 0%;
		/* background: url(../img/top_sp/sp_news_title.png) no-repeat center top;
		background-size: 100% auto; */
	}

	/* #news_wrap {
		margin-top: -1.5%;
	} */

	.news_article {
		position: relative;
		display: flex;
		width: 90%;
		margin: 15px auto;
		padding-bottom: 15px;
		border-bottom: solid 0px #262733;
		align-items: center;
	}

	.news_article:first-child {
		margin-top: 0px;
	}

	.news_thumb {
		position: relative;
		width: 23%;
		height: auto;
		overflow: hidden;
	}

	.news_thumb img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.news_day {
		font-size: 12px;
		font-weight: bold;
	}

	.news_title {
		width: 68%;
		margin-left: 15px;
		margin-top: 0;
		font-size: 12px;
		line-height: 22px;
		-webkit-box-orient: vertical;
		/* -webkit-line-clamp: 4; */
		overflow: hidden;
		display: -webkit-box;
	}

	#credit {
		position: relative;
		left: 50%;
		width: 842px;
		padding-top: 70px;
		transform: translateX(-50%);
	}

	.news_border {
		width: 100%;
		background: url(../img/top_sp/news/border.png) no-repeat center top;
		background-size: 100% auto;
	}

	#news_more {
		position: relative;
		width: 100%;
		height: 0;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0px;
		cursor: pointer;
	}

	#news_more img {
		opacity: 1;
	}

	#news_more:hover img {
		opacity: 1;
	}

	/* 前作サイトリンクボタン */
	#series1 {
		margin: inherit;
		padding-top: 30px;
	}

	#series1 img {
		padding-top: inherit;
		width: 75%;
	}

	#series1:hover {
		opacity: 1;
	}

	/* フッター追記 */
	#footer_wrap {
		padding: 8% 0;
		/*シアター固定ボタンなし*/
	}

	/* アニメーション */
	.steam01 img,
	.steam03 img,
	.steam05 img,
	.steam06 img {
		width: 150px;
		height: 300px
	}

	.steam02 img,
	.steam04 img {
		width: 200px;
		height: 200px
	}

}