@charset "UTF-8";
/* CSS Document */
/* @media only screen and (max-width: 768px)
{
    body
    {
        min-width: inherit;
    }
}
*/
@media only screen and (max-width: 1000px) {
		body:before {
				display: none;
		}
		body:after {
				display: none;
		}
}
@media only screen and (max-width: 768px) {
		/* -------------------------------------------------------- header */
		header {
				width: 100%;
		}
		header > div.inner {
				height: auto;
				padding: 0;
				max-height: none;
		}
		header div.top {
				display: none;
		}
		header div.logo {
				float: none;
				padding: 0.5em 0 0.5em 0.5em;
				margin-bottom: 0;
		}
		header div.logo a img, footer div.logo a img {
				max-width: 25rem;
				height: auto;
				display: block;
		}
		/* -------------------------------------------------------- header ul.utility */
		header > div.inner.clearfix > div.fr {
				float: none;
		}
		header ul.utility {
				background: #f0f0f0;
		}
		header ul.utility {
				width: 100%;
				text-align: center;
		}
		header ul.utility li a {
				font-size: 1.1rem;
				white-space: nowrap;
				padding: 0 0.2em;
		}
		header ul.utility li a::before {
				border: none;
				content: "";
				height: auto;
				left: 0;
				margin: 0;
				position: relative;
				top: 0;
				transform: none;
				width: auto;
		}
		/* -------------------------------------------------------- header nav */
		header nav {
				left: 0;
				overflow: visible;
				width: 100%;
		}
		header nav div.inner {
				width: 100%;
				padding: 0;
		}
		header nav ul {
				display: block;
				overflow: hidden;
				width: 100%;
				max-height: 0;
				margin: 0 auto;
				transition: all .5s ease-in-out;
		}
		header nav ul.active {
				max-height: 1000px;
		}
		header nav ul li {
				font-size: 1.6rem;
				display: block;
				/* border-bottom: 1px solid #e6e6e6; */
				height: 100%;
		}
		header nav ul li:first-child {
				/* border-top: 1px solid #e6e6e6; */
		}
		header nav ul li:last-child {
				border-bottom: none;
		}
		header nav ul li a {
				font-weight: bold;
				position: relative;
				display: block;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				padding: 18px 20px;
				text-align: left;
				font-size: 1.6rem;
		}
		header nav ul li a:after {
				position: absolute;
				top: 50%;
				right: 15px;
				left: inherit;
				display: block;
				width: 5px;
				height: 5px;
				margin-top: -5px;
				content: '';
				transition: all .2s ease-in-out;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				border-top: 2px solid #f35955;
				border-right: 2px solid #f35955;
				background: none;
		}
		header nav ul li:first-child a::before {
				position: relative;
				top: auto;
				left: 0;
				width: auto;
				height: auto;
				margin-top: 0;
				content: '';
				background: none;
		}
		/*
    header nav ul li a::after
    {
        position: relative;
        z-index: 9999;
        bottom: 0;
        left: 0;

        width: 0;
        height: auto;

        content: '';

        background: none;
    }
	*/
		nav ul li a:hover::after {
				left: inherit;
				width: 5px;
				border-right: 2px solid #f75651;
				border-top: 2px solid #f75651;
		}
		nav ul li.current a {
				color: #333;
		}
		nav ul li.current:after {
				position: relative;
				content: "";
				bottom: 0;
				width: auto;
				height: 0;
				left: 0;
				background: none;
				-webkit-transform: translate(-50%, 0);
				transform: translate(-50%, 0);
		}
		/* -------------------------------------------------------- menu-button */
		header div.menu-button {
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				width: 40px;
				height: 40px;
				z-index: 9999;
		}
		header div.menu-button div.menu-trigger {
				display: block;
				cursor: pointer;
		}
		header div.menu-button div.menu-trigger > div {
				position: relative;
				display: block;
				width: 40px;
				height: 40px;
				margin: 0 auto;
		}
		header div.menu-button div.menu-trigger > div div.label {
				font-size: 1.0rem;
				font-weight: bold;
				position: absolute;
				box-sizing: border-box;
				width: 40px;
				/* color: #f35955; */
				color: #333;
				bottom: -0.5em;
				text-align: center;
		}
		header div.menu-button div.menu-trigger > div div.label::before {
				content: 'MENU';
		}
		header div.menu-button div.menu-trigger > div div.label.open::before {
				content: 'CLOSE';
		}
		header div.menu-button div.menu-trigger > div div.hamburger {
				position: relative;
				width: 40px;
				height: 40px;
		}
		header div.menu-button span {
				position: absolute;
				left: 0;
				display: inline-block;
				box-sizing: border-box;
				width: 20px;
				height: 2px;
				transition: all .4s;
				/* background: #f35955; */
				background: #333;
		}
		header div.menu-button span:nth-of-type(1) {
				top: 13px;
				left: 10px;
		}
		header div.menu-button span:nth-of-type(2) {
				top: 19px;
				left: 10px;
		}
		header div.menu-button span:nth-of-type(3) {
				bottom: 13px;
				left: 10px;
		}
		header div.menu-button.active span:nth-of-type(1) {
				-webkit-transform: translateY(6px) rotate(-45deg);
				transform: translateY(6px) rotate(-45deg);
		}
		header div.menu-button.active span:nth-of-type(2) {
				opacity: 0;
		}
		header div.menu-button.active span:nth-of-type(3) {
				-webkit-transform: translateY(-6px) rotate(45deg);
				transform: translateY(-6px) rotate(45deg);
		}
		/* ie9 */
		/*
    html.ie9 header div.menu-button
    {
        position: relative;

        display: block;

        width: 100%;
        height: 40px;

        background: #003e6c;
    }

    html.ie9 header div.menu-button div.menu-trigger > div div.hamburger
    {
        background: url(../img/menu-button.png) no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }

    html.ie9 header div.menu-button.active div.menu-trigger > div div.hamburger
    {
        background: url(../img/menu-button_active.png) no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }

    html.ie9 header div.menu-button span
    {
        display: none;
    }
	*/
		/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ common */
		div.contents-wrapper > div.inner {
				padding: 0;
		}
		div.tab ul li div span {
				display: block;
		}
		div.tab ul li div {
				font-size: 3vw;
		}
		div.tab-contents {
				padding: 2rem 1rem;
		}
		div.search-bar div.category-type {
				float: none;
				margin-right: 0;
				width: 100%;
				margin-bottom: 0.5rem;
		}
		div.search-bar div.category-type-select {
				width: 100%;
				box-sizing: border-box;
		}
		div.search-bar div.category-type-select label {
				display: block;
		}
		div.search-bar div.keyword {
				float: left;
				margin-right: 2%;
				width: 69%;
		}
		div.search-bar div.search-btn {
				float: left;
				width: 29%;
		}
		div.step-arrow ul li {
				float: none;
				margin-right: 0;
				width: 100%;
				margin-bottom: 2rem;
		}
		div.step-arrow ul li::after {
				right: inherit;
				left: 50%;
				top: inherit;
				bottom: -2rem;
				/*transform: translateX(-50%) translateY(-50%) rotate(45deg);*/
				transform: translateX(-50%) translateY(-50%) rotate(45deg);
				width: 2.3rem;
				z-index: 0;
		}
		div.movie-list ul li {
				width: 49.0%;
		}
		div.movie-list ul li:nth-child(2n) {
				margin-right: 0;
		}
		div.movie-list ul li div.headline {
				font-size: 1.4rem;
		}
		div.movie-list ul li div.btn.addition-list {
				font-size: 1.4rem;
		}
		div.movie-list ul li div.btn.addition-list span.material-icons {
				top: 0;
				margin-right: 0.5rem;
		}
		div.movie-list ul li div.btn.addition-list {
				white-space: nowrap;
		}
		div.pagination {
				display: none;
		}
		.resp-pagination-display {
				border: 1px solid #ccc;
				display: block;
				border-radius: 4px;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 4rem;
		}
		.resp-pagination-display > div.prev {
				float: left;
				width: 20%;
				height: 40px;
		}
		.resp-pagination-display > div.next {
				float: right;
				width: 20%;
				height: 40px;
		}
		.resp-pagination-display > div.count {
				float: left;
				text-align: center;
				width: 60%;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				box-sizing: border-box;
				height: 40px;
		}
		.resp-pagination-display > div.count > div {
				display: inline-block;
				line-height: 40px;
				padding-left: 0.25em;
				padding-right: 0.25em;
		}
		.resp-pagination-display div span, .resp-pagination-display div a {
				display: block;
				height: 40px;
				position: relative;
				background: #ffec00;
		}
		.resp-pagination-display .next a::after, .resp-pagination-display .next span::after {
				border-right: 1px solid #000;
				border-top: 1px solid #000;
				content: "";
				display: block;
				height: 5px;
				left: 50%;
				position: absolute;
				top: 50%;
				transform: translateX(-50%) translateY(-50%) rotate(45deg);
				-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
				transition: all 0.2s ease-in-out 0s;
				width: 5px;
		}
		.resp-pagination-display .prev a::after, .resp-pagination-display .prev span::after {
				border-right: 1px solid #000;
				border-top: 1px solid #000;
				content: "";
				display: block;
				height: 5px;
				left: 50%;
				position: absolute;
				top: 50%;
				transform: translateX(-50%) translateY(-50%) rotate(-135deg);
				-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
				transition: all 0.2s ease-in-out 0s;
				width: 5px;
		}
		/* */
		.select-movie-list-wrap {
				padding: 2rem 1rem;
		}
		.description-wrap {
				padding: 2rem 1rem;
		}
		.rule-wrap {
				padding: 2rem 1rem;
		}
	
	
	div.banner {
	width: 100%;
	}
	
	div.banner ul li img {
		width: 100%;
	}
	
	div.banner ul li {
	width: 48%;
}
	
}