/* Responsive (Smartphones) */
@media (max-width: 768px) {

    body,
    html {
        overflow-x: hidden;
    }

    .top-section {
        min-width: 0;
    }

    .pc-only {
        display: none !important;
    }

    .sp-only {
        display: block !important;
    }

    ul.pc-only {
        display: none !important;
    }
	.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: 9999;
		background: #000;
		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 {
        padding: 0;
        height: auto;
    }

    .social-icons {
        width: 100px;
        height: 40px;
        margin-right: 15px;
    }

    .hamburger {
        width: 40px;
        height: 40px;
    }

    .hamburger .bar {
        width: 22px;
        margin-left: -11px;
    }

    .hamburger .bar:nth-child(1) {
        top: 12px;
    }

    .hamburger .bar:nth-child(3) {
        bottom: 12px;
    }

    .hamburger.active .bar {
        margin-left: -11px;
    }

    .side-menu {
        width: 100vw;
        /* SP: Full screen */
        right: -100vw;
    }

    .side-menu.active {
        right: 0;
    }

    .menu-links li a {
        font-size: 20px;
    }

    .top-images.sp-only {
        padding-top: 30px;
    }

    .top-images img.top-layer {
        object-position: center top;
    }

    .top-banner-fixed img {
        max-width: 200px;
    }

    .top-banner-fixed {
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 30;
        margin-top: -8%;
        /* border: 1px #fff solid; */
    }


    /* Common Section Title */
    .section-title {
        font-size: 19px;
        letter-spacing: 0.3em;
        text-align: center;
        margin-bottom: 40px;
    }

    /* TRAILER Section */
    .trailer-section {
        position: relative;
        min-width: inherit;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .trailer-content{
        width: 100%;
        font-size: 14px;
        line-height: 2;
        text-align: center;
    }

	.trailer-section iframe.yokoku_sp {
		width: 90%;
		height: calc(100vw * 0.9 * 9 /16);
		margin: 0 auto;
	}


	.movie_nav {
		width: 90%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-top: 7px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 0;
		padding: 0;
	}

	.movie_nav_box {
		width: 50%;
		padding: 1px;
	}

	.movie_nav_box_long {
		width: 100%;
		padding: 1px;
	}

	.movie_nav_btn {
		display: block;
		text-align: center;
		text-decoration: none;
		/*  font-family: 'Noto Sans JP', serif;*/
	}

	/* .movie_nav_btn.selected {
	} */

	/* a.movie_nav_btn:link,
	a.movie_nav_btn:visited {
	} */

	a.movie_nav_btn.selected:link,
	a.movie_nav_btn.selected:visited {
		color: #fff;
	}

	.mv4 {
		width: 25%;
		padding: 1px;
	}

	.mv3 {
		width: 33%;
		padding: 1px;
	}

	.mv2 {
		width: 50%;
		padding: 1px;
	}

	.mv1 {
		width: 100%;
		padding: 1px;
	}



    .intro-section {
        min-width: 0;
        background-color: #000;
        background-image: url('../images/intro_bg_sp.jpg');
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
        padding-top: 17%;
        padding-bottom: 50px;
    }

    .intro-content {
        width: 100%;
        font-size: 14px;
        line-height: 2;
        padding-top: 14%;
    }

    .story-section {
        min-width: 0;
        background-color: #000;
        background-image: url('../images/story_bg_sp.jpg');
        background-size: 100% auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .story-content {
        width: 100%;
        font-size: 14px;
        line-height: 2;
    }

    .cast-section,
    .gallery-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .cast-slider,
    .gallery-slider {
        padding: 0 50px;
    }

    .cast-text {
        margin: 12px auto 0;
        font-size: 12px;
        letter-spacing: 0px;
        text-align: center;

}

    .slick-prev {
        left: 10px;
    }

    .slick-next {
        right: 10px;
    }

    .cast-slider .slick-prev,
    .cast-slider .slick-next {
        top: 32%;
        /* Lower text ratio pushes image center higher up in % */
    }

    .slick-prev img,
    .slick-next img {
        width: 25px;
    }

    .cast-img-wrap .icon12 {
        bottom: 10px;
        right: 10px;
        font-size: 24px;
        /* Scaled down proportionally to image size on SP */
    }

    .cast-modal-content {
        flex-direction: column;
        gap: 30px;
    }

    .cast-modal-left {
        width: 100%;
        flex: none;
    }

    .cast-modal-inner {
        padding: 50px 20px 30px;
        max-height: 95vh;
    }

    .cast-modal-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .cast-modal-close {
        top: 15px;
        right: 15px;
    }
}