@charset "utf-8";
@media screen and (min-width: 0px) and (max-width: 800px) {
	/* body{
		background: #0d0a1f;
	} */
	#container{
		min-width:0;
	}
	/* #wrap{
		padding-bottom: 12.81%;
	} */
	#sp_wrap{
		position: relative;
	}
	.open_sp {
		z-index: 30;
	}
	/*-----------------------
	top
	------------------------*/
	#main_area {
		position: relative;
	}
	#top_area {
		width: 100%;
		height: auto;
		left: 0;
		margin-left: 0;
	}
	.border_1 {
	width: 100%;
	}
	#yt_area {
		width: 100%;
		background: url(../img/sp/bg_1.jpg) no-repeat center top;
		background-size: 100% auto;
		padding: 10.5vw 0 10.5vw 0;
	}

	#main_inner {
	position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
	background: unset;
	}

	/*video*/
	.video_area_wrap {
		position: relative;
		width: 100%;
		margin: 0 auto;
		justify-content: none;
		flex-direction: column;
		display: block;
	}
	.video_area_m {
		display: block;
		position: relative;
        /* background: url("../img/sp/sp_ytbg.png") no-repeat center top;背景装飾あり */
		/* background-size: 100% auto;背景装飾あり */
		height: auto;
		/* margin-top: 2%;背景装飾あり */
		margin-top: 0;
		/* padding: 0.8% 0 2.4%;背景装飾あり */
		padding: 0;
		width: 100%;
		/* margin-top: 2%;
		padding: 0.8% 0 2.4%; */
	}
	.video_area {
		display: block;
		position: relative;
		margin-top: 2%;
        /* background: url("../img/sp/sp_ytbg.png") no-repeat center top; */
		/* background-size: 100% auto; */
		height: auto;
		padding: 0.8% 0 2.4%;
		width: 100%;
	}
	.video_area_wrap:first-child{
		margin-top: 0;
	}
	.video_area_wrap:nth-child(2){
		margin-top: 0;
	}
	.main_video {
		position: relative;
        /* width: 90.5%;背景装飾あり */
        width: 94.5%;
        height: auto;
        padding-top: 53%;
        margin: 0 auto;
        /* margin-top: 1.5%;背景装飾あり */
        margin-top: 0;
        /* margin-bottom: 2%;背景装飾あり */
        margin-bottom: 0;
	}
	.sub_video {
		position: relative;
        /* width: 90.5%;背景装飾あり */
        width: 94.5%;
        height: auto;
        padding-top: 53%;
        margin: 0 auto;
        /* margin-top: 1.5%;背景装飾あり */
        margin-top: 0;
        /* margin-bottom: 2%;背景装飾あり */
        margin-bottom: 0;
	}
	iframe{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	/*digital*/
	#digital_area {
		position: relative;
		background: url(../img/sp/bg_2.jpg) no-repeat center top;
		background-size: 100% auto;
		padding-bottom: calc(187 / 640 * 100vw);
	}
	.border_2 {
		position: relative;
		width: 100%;
		padding-bottom: 11.5vw;
	}
	#digital{
		position: relative;
		background:none;
		width: 100%;
		height: auto;
		/* margin: 5% auto 0; */
	}
	.digital_wrap{
		position: relative;
		width: 100%;
		background: none;
		top: 0;
		padding: 0 0 0;
	}
	.digital_bnr{
		position: relative;
		top: 0;
		margin-top: 30px;
		left: 50%;
		margin-left: -310px;
		z-index: 9;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.digital_bnr{
		width: 100%;
		top: 0;
		left: 0;
		margin-top: -0.5%;
		margin-left: 0;
		padding: 0 4.8% 2%;
		background: url("../img/sp/pic_re.png") repeat-y top center;
		background-size: 100% auto;
	}
	.digital_bnr li{
		width: 33%;
	}
	/* 要素が3カラムの場合の擬似要素 */
	.digital_bnr::after{
		content:"";
		display: block;
		width:33%;
	}
	.digital_wrap p{
		margin-top: 0;
		/* background: url("../img/sp/pic_re.png") repeat-y top center;
		background-size: 100% auto;
		padding: 0 4.8% 5%; */
	}

	/*dvd1*/
	#dvd1{
		position: relative;
		background: url("../img/sp/dvd_bg.png") repeat-y top center;/* 枠がパターンの場合 */
		/* background: none; */
		background-size: 100% auto;
		width: 100%;
		height: auto;
		margin: 11% auto 0;
	}
	#dvd1 .more_btn{
		position: relative;
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		left: inherit;
		top:inherit;
		margin: 0 auto;
	}
	.dvd_bnr_wrap{
		position: relative;
		width:100%;
		background: none;
		/* background: url("../img/sp/dvd_re.png") repeat-y top center; */
		/* background-size: 100% auto; */
		top: 0 !important;
		right: inherit;
		margin: 0;
		padding: 0;
	}
	.bnr_bg{
		width: 100%;
		background: url(../img/sp/sp_bnrbg.png) repeat-y center top;
		background-size: 100% auto;
	}
	.dvd_bnr{
		position: relative;
		width: 88%;
		height: auto;
		top: 0;
		left: 0;
		margin: 0 auto;
	}
	.dvd_bnr li{
		margin-bottom: 3%;
		margin-right: 2%;
		width: 32%;
	}
	.sp_dvd1_1 {
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		margin: 0 auto;
		/* background-color: #fff; */
	}
	.sp_dvd1_1 img,.sp_dvd2_1 img{
		display: block;
	}
	.sp_dvd1_2 {
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		margin: 0 auto;
		/* background-color: #efefef; */
	}
	.sp_buy_txt {
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		margin: 0 auto;
	}

	/*dvd2*/
	.dvd2{
		position: relative;
		/* 枠がパターンの場合 */
		/* background: url("../img/sp/dvd_bg.png") repeat-y top center; */
		background: url("../img/sp/bg_bottom_2.jpg") no-repeat bottom center;
		background-size: 100% auto;
		width: 100%;
		height: auto;
		margin: 11% auto 0;
	}
	.dvd2 .more_btn{
		position: relative;
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		left: inherit;
		top:inherit;
		margin: 0 auto;
	}
	.sp_dvd2_1 {
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		margin: 0 auto;
		/* background-color: #fff; */
	}
	.sp_dvd2_2 {
		width: 92%;/* 枠がパターンの場合 */
		width: 100%;
		margin: 0 auto;
		/* background-color: #efefef; */
	}

	/*dvd3*/
	.dvd3{
		position: relative;
		background: none;
		width: 100%;
		height: auto;
		margin: 3% auto 0;
	}
	.dvd3 .more_btn{
		position: relative;
		width: 100%;
		left: inherit;
		top:inherit;
	}
	.dvd3 .dvd_bnr_wrap{
		top: 0;
	}

	/*dvd4*/
	.dvd4{
		position: relative;
		background:none;
		width: 100%;
		height: auto;
		margin: 3% auto 0;
	}
	.dvd4 .more_btn{
		position: relative;
		width: 100%;
		left: inherit;
		top:inherit;
	}
	.dvd4 .dvd_bnr_wrap{
		top: 0;
	}

	/*dvd4*/
	/* .dvd4{
		position: relative;
		background:none;
		width: 100%;
		height: auto;
		margin: 3% auto 0;
	} */

	.drama_bnr_wrap{
		top: 0;
	}
	.drama_bnr_wrap{
		position: relative;
		width:100%;
		background: url("../img/sp/dvd4_re.png") repeat-y top center;
		background-size: 100% auto;
		top: 0px;
		right: inherit;
		margin: -2px 0 0;
		padding: 0;
	}
	.drama_bnr{
		position: relative;
		width: 88%;
		height: auto;
		top: 1px;
		left: 0;
		margin: 0 auto;
	}
	.drama_bnr li{
		margin-bottom: 3%;
		margin-right: 2%;
		width: 32%;
	}
	.drama_bnr li:nth-of-type(5n){
		margin-right: 2%;
	}
	.drama_bnr li:nth-of-type(3n){
		margin-right: 0;
	}
	.drama_bnr_buy_wrap{
		background: url("../img/sp/dvd4_re2.png") repeat-y top center;
		background-size: 100% auto;
	}

	/*dvd5*/
	.dvd5{
		position: relative;
		background:none;
		width: 100%;
		height: auto;
		margin: 0 auto 0;
	}
	.dvd5 .drama_bnr_wrap{
		position: relative;
		width:100%;
		background: url("../img/sp/dvd4_re2.png") repeat-y top center;
		background-size: 100% auto;
		top: 0px;
		right: inherit;
		margin: 0;
		padding: 0;
	}

	/*dvd6*/
	.dvd6{
		position: relative;
		background:none;
		width: 100%;
		height: auto;
		margin: 0 auto 0;
	}
	.dvd6 .drama_bnr_wrap{
		position: relative;
		width:100%;
		background: url("../img/sp/dvd4_re2.png") repeat-y top center;
		background-size: 100% auto;
		top: 0px;
		right: inherit;
		margin: 0;
		padding: 0;
	}

	.dvd_hash:hover {
		opacity: inherit;
	}

	/*---------------------
	swiper.js
	-----------------------*/
	.swiper {
		width: 91%;
		height: auto;
		/* padding: 0 4.8%; */
	}
	.swiper-wrapper {
		/* wrapperのサイズを調整 */
		width: 100%;
		height: auto;
		top: 0;
	}
	.swiper-slide {
		height: auto;
		margin-bottom: 10%;
	}
	.swiper-pagination {
		bottom: 10px !important;
	}
	.swiper-button-prev,
	.swiper-button-next {
        width: 20px;
        height: 25px;
        background-size: 20px auto;
        margin-top: -2%;
        margin-left: 0;
        margin-right: 0;
	}

	/* .pkg_area {
		width: 100%;
		background: url(../img/sp/sp_sliderbg.png) repeat-y center top;
		background-size: 100% auto;
	} */

	.border_3 {
		width: 100%;
	}
}