@media screen and (max-width: 767px) {
	html {
		height: 100%;
	}

	body {
		height: 100%;

	}

	.sp {
		display: inline-block;
	}

	.sp_b {
		display: block;
	}

	.vsp {
		display: none;
	}

	.pc,
	.pc_b {
		display: none;
	}

	/*-----Loading-------*/
	#loading {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 999;
		background: #fff;
		text-align: center;
		color: #fff;
		display: none;
	}

	#loading_logo {
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#loading_logo img {
		width: 90%;
		height: auto;
	}
	
	/*-----HEADER-------*/
	#header_sp{
		width: 100%;
		height: 4.6rem;
		position: fixed;
		top: 0;
		z-index: 300;
		color: #fff;
		background-image: url(../images/menu_bg.jpg);
		background-position: center bottom;
		background-repeat: repeat-x;
	}
	
	#header_sp_sns{
/*		text-align: center;*/
		width: calc(100% - 4.6rem);
	}
	
	#header_sp_sns a{
		color: #fff;
		font-size: 17pt;
		margin: 0 0.9rem;
		line-height: 4.4rem;
	}

	.share_box_sp {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 5px;
		font-size: 0;
		line-height: 0;
		margin: 10px auto 0 auto;
		opacity: 0;
		pointer-events: none;
		transition: opacity .5s;
		width: 90%;
		text-align: center;
	}

	.share_box_sp.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/*-----TOP-------*/

	#top_sp_box {
		width: 100%;
		margin-top: 4.6rem;
	}




	.top_logo_sp {
		width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: 0px;
		display: block;
		z-index: 10;
	}
	
	
	#video_box_sp{
		position: absolute;
		margin-top: 0%;
		margin-left: 0%;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	#video_box_sp::before {
		z-index: 2;
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: url(../images/bgpatternb.png) center top/3px 3px;
	}

	#video_box_sp video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0%;
		left: 0%;
		object-fit: cover;
	}
	
	.top_bnr_poster_sp{
		width: 27.3%;
		height: auto;
		position: absolute;
		margin-top: 62%;
		right: 1%;
		z-index: 120;
	}
	
	.top_bnr_nurie_sp_link{
		width: 23.3%;
		height: auto;
		position: absolute;
		margin-top: 36%;
		right: 4.6%;
		z-index: 120;
	}
	
	.top_bnr_nurie_sp{
		width: 100%;
		height: auto;
	}
	
	
	


	
	/*------- SUB PAGE ----------------*/
	#main {
		min-width: inherit;
	}

	.sub_box {
		min-width: inherit;
	}

	.in_box {
		width: 100%;
	}
	
	h3 {
		display: block;
		font-size: 22pt;
		text-align: center;
	}
	
	.pad_lr {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#sub_container{
		background-image: url(../images/sub_bg_sp.jpg);
		padding-bottom: 70vw;
	}

	
	/*----------PHOTO SCROLL------------*/

	#slide_photo_pc1 {
		width: 100%;
		height: 250px;
		background: repeat-x url("../images/scrl_1_sp.jpg") left top/auto 100%;
		-webkit-animation: loop-sp infinite 40s linear;
		animation: loop-sp infinite 40s linear;
		z-index: 20;
	}

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

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

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

		100% {
			background-position: -2557px 0;
		}
	}
	
	.kiri_2{
		width: 47px;
		height: auto;
		margin-top: -47px;
		margin-left: -142px;
	}

	#slide_photo_pc2 {
		width: 100%;
		height: 200px;
		background: repeat-x url("../images/scrl2_sp.jpg") left top/auto 100%;
		-webkit-animation: loop-sp2 infinite 40s linear;
		animation: loop-sp2 infinite 40s linear;
		z-index: 20;
	}

	@-webkit-keyframes loop-sp2 {
		0% {
			background-position: -1267px 0;
		}

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

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

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



	/*----------MOVIE------------*/

	#movie_box{
		padding-top:1px;
		padding-bottom: 80px;
	}
	
	#movie_box .pad_lr{
		padding-left: 6px;
	}
	
	.kiri_1{
		width: 40px;
		height: auto;
	}
	
	.yokoku_slidebox{
		width: 300px;
		height: 168px;
	}
	
	.yokoku{
		width: 300px;
		height: 168px;
	}
	
	.yokoku iframe{
		width: 300px;
		height: 168px;
	}
	
	
	
	/*----------INTRODUCTION------------*/

	#intro_box{
		padding: 50px 0px;
	}

	#intro_inbox{
		padding: 20px 25px;
	}
	
	#intro_box h3{
		margin-bottom: 70px;
	}

	.kiri_3{
		width: 150px;
		height: auto;
		margin-top: -50px;
		margin-right: 10px;
		margin-left: -54px;
	}
	
	.kiri_4{
		display: none;
	}
	
	.kiri_4_sp{
		width: 90px;
		height: auto;
		margin-top: -3px;
		margin-left: auto;
		display: block;
	}
	
	#intro_inbox .txt_box{
		font-size: 14pt;
		line-height: 1.9em;
	}
	
	
	/*----------STORY------------*/

	#story_box{
		padding: 50px 0px;
	}

	#story_inbox{
		padding: 20px 25px 60px;
	}
	
	#story_box h3{
		margin-bottom: 70px;
	}
	
	#story_box .txt_box{
		font-size: 14pt;
		line-height: 1.9em;
	}
	
	
	.kiri_5{
		width: 100px;
		height: auto;
		margin-top: -50px;
		margin-right: 10px;
		margin-left: -54px;
	}

	
	.kiri_6{
		width: 150px;
		height: auto;
		margin-top: 35px;
		margin-left: auto;
		right: 10px;
	}

	.kiri_7{
		width: 150px;
		height: auto;
		position: absolute;
		margin-top: 11px;
		margin-left: auto;
		right: 10px;
	}
	

	/*----------CHARACTER------------*/

	#chara_box{
		padding: 50px 0px;
	}

	#chara_inbox{
		padding: 20px 20px 20px;
	}
	
	#chara_box h3{
		margin-top: 30px;
		margin-bottom: 50px;
	}
	
	.kiri_10{
		width: 118px;
		height: auto;
		margin-top: -53px;
	}
	
	.chara{
		height: 110vw;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}

	.charaU{
		width: 100%;
		height: auto;
		display: block;
/*		border: 1px #000 solid;*/
	}
	
	.chara_img{
		width: 80%;
		display: block;
		margin: 0 auto;
	}
	
	.chara_img img{
		width: 100%;
		height: auto;
	}
	
	.chara3 .chara_img{
		width: 100%;
	}
	
	.chara3 .chara_img img{
		width: 45%;
	}
	
	.chara_txt{
		flex: none;
		font-size: 16pt;
		display: block;
		text-align: center;
	}
	
	.chara_btn{
		height: auto;
	}
	
	.chara_btn img{
		width: 73px;
		margin: 0 4px 10px;
	}
	
	.chara_txt{
		font-size: 19pt;
		font-weight: 800;
		line-height: 1.5em;
		padding-left: 0;
	}
	
	.chara_name{
		font-size: 24pt;
		margin-bottom: 15px;
		text-align: center;
	}

	
	/*----------CAST------------*/

	#cast_box{
		padding: 80px 0px;
	}

	#cast_inbox{
		padding: 20px 25px 60px;
	}
	
	#cast_box h3{
		margin-bottom: 30px;
	}
	
	#cast_box .txt_box{
		font-size: 14pt;
		line-height: 2.9em;
	}
	
	.casts{
		width: 45%;
	}
	
	.kiri_8{
		width: 80px;
		height: auto;
		margin-top: -94px;
		margin-left: -24px;
	}
	
	.kiri_9{
		width: 60px;
		height: auto;
		margin-top: -9px;
		margin-left: auto;
		right: 10px;
	}
	
	
	
	
	
	
	/*----------Footer------------*/
	footer{
		min-width:inherit;
		padding: 30px 15px 50px;
	}

}

@media screen and (max-width: 320px) {
	
	.yokoku_slidebox{
		width: 250px;
		height: 140px;
	}
	
	.yokoku{
		width: 250px;
		height: 140px;
	}
	
	.yokoku iframe{
		width: 250px;
		height: 140px;
	}
	
	.chara{
		height: 130vw;
	}
}

_::-webkit-full-page-media, _:future, :root rt {
	position: relative;
	top: 0.5em;
	transform: translateY(0.5em);
}

___rt {
position: relative;
top: 0.5em;
transform: translateY(0.5em);
}	


@media screen and (max-width: 320px) {
	
	.chara_btn img{
		width: 59px;
		margin: 0 4px 10px;
	}
}