@charset "utf-8";
/*---------------------
メニュー上書き
-----------------------*/
.bt_home{
	pointer-events: none;
}
.bt_home{
	opacity: 0.6;
}
body {
	position: relative;
	width: 100%;
	background: #000;
}
#base {
	position: absolute;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden;
	max-width: 1920px;
	background: url(../img/top_base.jpg) no-repeat;
	background-position: center top;
	background-size: 100% auto;
	opacity: 1;
}
#container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
    background: #000;
	max-width: 1920px;
}
/* 縦フィット調整 */
/* .bg{
	height: 100vh;
	min-height: 880px;
	background: url(../img/top_joker.png) no-repeat top left, url(../img/top_harley.png) no-repeat top right;
	background-size: auto 100%;
	background-color: #010f16;
	max-height: 1080px;
} */
.bg {
    height: auto;
    background: url(../img/top_joker.png) no-repeat top left, url(../img/top_harley.png) no-repeat top right;
    background-size: auto 100%;
    background-color: #010f16;
    height: 100vh;
	max-height: 1000px;
    min-height: 950px;
}
h2 {
	position: absolute;
	text-indent: -9999px;
}
#works_top {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	z-index: 1;
}
#main {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto
}
.main_wrap {
    position: relative;
}
#logo_area {
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	/* width: calc(629 / 1920* 100%); */
	width: calc(680 / 1920* 100%);
	min-width: 640px;
	bottom: 0;
	margin-bottom: calc(20 / 1920* 100%);
}
#logo {
    position: relative;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-bottom:  calc(75 / 1920* 100%);
    /* margin-top: calc(360 / 1920* 100%); */
	/* width: calc(563.5 / 1920* 100%); */
	/* bottom: calc(535 / 1920* 100%); */
    /* margin-left: calc(268 / 1920* 100%);
	margin-left: calc(80 / 1920* 100%); */
    /* max-width: calc(918px / 2); */
	/* height: calc(710 / 1920* 100%); */
	/* min-width: 470px; */
}
#copy {
    position: relative;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-bottom:  calc(50 / 1920* 100%);
    /* width: calc(563.5 / 1920* 100%); */
	/* bottom: calc(445 / 1920* 100%); */
	/* height: calc(43 / 1920* 100%); */
    /* max-width: 1920px; */
    /* left: calc(1010 / 1920* 100%); */
	/* right: calc(400 / 1920* 100%);
	right: calc(500 / 1920* 100%); */
	/* min-width: 470px; */
}
#day {
    position: relative;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-bottom: calc(50 / 1920* 100%);
    /* width: calc(563.5 / 1920* 100%); */
	height: auto;
	/* bottom: calc(180 / 1920* 100%); */
	/* min-width: 470px; */
}
.bnr_he {
	position: relative;
	right: 0;
	left: 0;
	margin: 0 auto;
	transition: .5s;
}
.bnr_he:hover {
	opacity: 0.5;
}
.dclogo {
	position: absolute;
    bottom: calc(34 / 1920* 100%);
    right: calc(27 / 1920* 100%);
    width: calc(54 / 1920* 100%);
    margin-top: 20px;
    transition: .3s;
}
.dclogo:hover{
	opacity: 0.7;
}

.sns_wrap {
	position: relative;
    display: flex !important;
    justify-content: space-between;
	align-items: center;
    flex-wrap: nowrap;
    margin: 0 auto;
    width: calc(1200 / 1920* 100%);
    margin-top: calc(160 / 1920* 100%);
    /* transform: translateY(40%); */
    right:0;
    left: 0;
}
.dcsns {
    position: relative;
    /* width: calc(137 / 1920* 100%); */
    margin: 0 auto;
    transition: .3s;
    right: 0;
    left: 0;
}
.x_main, .tt_main, .ig_main {
	position: relative;
	/* width: calc(180 / 1920* 100%); */
	margin: 0 3px;
	transition: .3s;
}
.x_main:hover, .tt_main:hover, .ig_main:hover {
	opacity: .6
}
.x_hash {
	position: relative;
    /* bottom: 60px; */
    /* width: calc(114 / 1920* 100%); */
    transition: .3s;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.x_hash:hover {
	opacity: .6
}
.largeformat {
	position: absolute;
    bottom: 0;
    right: 0;
    width: calc(1252px / 2);
    margin-top: 20px;
    transition: .3s;
}
/* .bnr_wrap {
	position: absolute;
    background: url(../img/bnr_cp_over.png) no-repeat center top;
    background-size: cover;
    width: 210px;
	right: 50%;
	margin-right: 190px;
	bottom: 0;
	margin-bottom: 600px;
} */

.bnr_wrap.bnr_theater{
	position: absolute;
    background: url(../img/bnr_theater_over.png) no-repeat center top;
    background-size: 100% auto;
    width: calc(150 / 500* 100%);
	top: calc(-160 / 500* 100%);
    left: calc(-80 / 500* 100%);
}
.bnr_wrap {
	position: absolute;
    background: url(../img/bnr_cp_over.png) no-repeat center top;
    background-size: 100% auto;
    width: calc(150 / 500* 100%);
    top: calc(-30 / 500* 100%);
    left: calc(-80 / 500* 100%);
}
.bnr_wrap img {
	transition: .5s;
}
.bnr_wrap img:hover {
	opacity: .0
}

/* 横幅が801px以上〜1400px以下の場合に適用 */
@media screen and (min-width:801px) and (max-width: 1420px) {
	.bg {
		height: auto;
		padding-top: 55%;
		background: url(../img/top_joker.png) no-repeat top left, url(../img/top_harley.png) no-repeat top right;
		background-size: contain;
		background-color: #010f16;
		max-height: inherit;
		min-height: inherit;
	}
	#logo_area {
		width: calc(750 / 1920* 100%);
		min-width: inherit;
	}
}

/*-- trailer_area --*/
#trailer_area{
	background: #000;
}
#youtube_wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 50px 0 30px;
}
#youtube_area {
	position: relative;
	width: 100%
}
#yt_load_area {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 1190px;
	overflow: hidden;
	height: 100%
}
#yt_load {
	position: relative;
	top: 0;
	left: 0;
	width: 2210px;
	display: flex
}
.yt_list {
	position: relative;
	width: 595px;
	width: 375px;/* 2つ以降 */
	margin: 0 10px;
	cursor: pointer;
	overflow: hidden;
	transform: translateX(0%)
}
.yt_list_img {
	border: solid 1px #000;
	box-sizing: border-box
}
.yt_cursor {
	position: absolute;
	width: 100%;
	max-width: 1680px;
	left: 50%;
	transform: translateX(-50%);
	top: 0
}
.yt_left {
	position: absolute;
	left: 30px;
	top: 120px;
	cursor: pointer;
	display: none;
	transition: 0.5s;
	width: 80px;
}
.yt_right {
	position: absolute;
	right: 30px;
	top: 120px;
	cursor: pointer;
	transition: 0.5s;
	width: 80px;
}
.yt_fade {
	position: absolute;
	width: 99.7%;
    padding-bottom: 57%;
	left: 1px;
	top: 1px;
	background: rgba(0, 0, 0, .5) url(../img/yt_play.png) no-repeat center 50%;
	background-size: 110px 110px;
	transition: 0.5s;
	transform-origin: center center
}
.yt_right:hover, .yt_left:hover {
	opacity: .7
}
.yt_fade:hover {
	background: rgba(0, 0, 0, .2) url(../img/yt_play_over.png) no-repeat center 50%;
	background-size: 110px 110px
}
.yt_title {
	position: relative;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 22px;
	font-size: 14px;/* 2つ以降 */
    line-height: 32px;
    margin-top: 14px;
    letter-spacing: .2em;
}
#yt_more {
    position: relative;
    display: flex;
    margin-top: 53px;
    top: 0;
    cursor: pointer;
    justify-content: center;
    transition:0.5s;
}
#yt_more img {
    transition: 0.5s;
}
#yt_more img:hover {
    opacity: 0.8;
}
/* #yt_more:hover {
    background: url(../img/watchonyuotube_over.png) no-repeat center top;
    background-size: 292px auto;
    transition: 0.5s;
    opacity: 0.8;
} */

/*-- Filmarksバナー --*/
.obi_area{
	background: #000;
	padding-top: 50px;
	padding-bottom: 70px;
	display: flex;
    justify-content: center;
}
.bnr_filmarks img{
	width: calc(926px / 2);
}

/*-- mvtk_ticket --*/
#mvtk_ticket {
    max-width: 1920px;
    margin: 0 auto;
	position: relative;
	z-index: 1;
	background: #000;
}
.section_bnr {
    width: 100%;
    position: relative;
    padding: 80px 0 120px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.mvtk_area {
    position: relative;
    max-width: 840px;
    width: 100%;
}
.mb-1{
	display: flex;
	justify-content: space-between;
    width: 840px;
}
.mb-1 img {
	margin: 0 auto;
	width: 411px;
	cursor: pointer;
	transition: 0.3s;
}
.mb-1 img:hover {
	opacity: 0.9;
}
.full img {
    width: 100%;
    height: auto;
}
.mv_widget{
	margin-bottom: 30px;
}

/*-- bnr_area --*/
#bnr_area{
	position: relative;
	z-index: 1;
	max-width: 1920px;
    margin: 0 auto;
}
#bnr_wrap {
	position: relative;
    width: 100%;
    background: url(../img/bnr_bg.jpg) no-repeat center top;
    background-size: cover;
    min-height: 409px;
    padding: 80px 0 60px;
}
#bnr_wrap a {
	color: #fff
}
#bnr_wrap a:hover {
	text-decoration: underline
}
.pickup_title {
	text-align: center
}
.works_bnr {
	width: 260px;
	margin: 10px;
	text-align: center
}
#bnr_load {
	position: relative;
	width: 100%;
	padding-top: 50px;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 30px
}
.bnr_column {
	width: 1120px;
	width: 100%;
	margin: 0 auto;
	display: none;
	/* display: flex; *//*8.8修正*/
    justify-content: center;
}
#bnr_more {
	position: relative;
	width: calc(356px / 2);/*8.8修正*/
	height: auto;/*8.8修正*/
	padding-top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0;
	cursor: pointer;
	display: none;
	padding-bottom: 80px
}
#bnr_more img {
	transition: 0.3s
}
#bnr_more img:hover {
	opacity: .6;
}
.bnr_text {
	font-size: 14px;
	line-height: 22px;
	margin: 20px 0
}
#bnr_sort {
	position: relative;
	width: 100%;
	display: flex!important;
	justify-content: center;
	margin-bottom: -5px;
	z-index: 1;
	display: none!important;
	opacity: 0!important
}
.bnr_category {
	margin: 0 5px
}
.bnr_category {
	width: 162px;
	height: 40px;
	cursor: pointer
}
.bnr_category:nth-child(1) {
	background: url(../img/category/cate1.png) no-repeat left top
}
.bnr_category:nth-child(2) {
	background: url(../img/category/cate2.png) no-repeat left top
}
.bnr_category:nth-child(3) {
	background: url(../img/category/cate3.png) no-repeat left top
}
.bnr_category:nth-child(4) {
	background: url(../img/category/cate4.png) no-repeat left top
}
.bnr_category img {
	opacity: 0;
	transition: 0.3s
}
.bnr_category img:hover {
	opacity: 1
}
.category_target img {
	opacity: 1
}
.category_target img:hover {
	opacity: 1
}

/*-- ABOUT --*/
#about_area {
	position: relative;
    width: 100%;
    max-width: 1920px;
    padding: 120px 0;/*旧*/
    padding: 120px 0 220px;/*新*/
    margin: 0 auto;
}
.about_txt{
	position: relative;
    max-width: 1073px;/*旧*/
    max-width: 1134.5px;/*新*/
    margin: 0 auto;
    z-index: 1;
}
#voice_txt{
	position: relative;
    max-width: 540px;
	margin: 0 auto;
	padding-top: 180px;
    z-index: 1;
}
/*-- 動画 --*/
#video_area {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	max-width: 1920px;
    overflow: hidden;
    margin: 0 auto;
    right: 0;
}
#top_video_sp {
	display: none;
}

#top_video {
	position: absolute;
	width: auto;
	height: 100%;
	margin-top: 0;
	margin-left: 0;
}

.videos {
	position: absolute;
	width: auto;
	height: 100%;
	margin-top: 0;
	margin-left: 0;
}

#dotted {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/dotted.png") repeat center top;
	/*background: url("../img/about/sample.jpg") repeat center top;*/
}

#bk_img {
	position: absolute;
}

@media screen and (min-width: 801px) and (max-width: 1250px) {
	#yt_load_area {
        width: 870px;
    }
    .yt_list {
        width: 270px;
    }
	.yt_right,.yt_left {
		top: 100px;
        width: 60px;
	}
}

/*-- NEWS --*/
#news_area {
	position: relative;
	width: 100%;
	max-width: 1920px;
	padding: 100px 0 100px;
	background: url(../img/news_bg.jpg) repeat-y center top;
	background-size: cover;
	margin: 0 auto;
}
#news_title {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto 60px;
    width: calc(298px / 2);
    height: calc(98px / 2);
    background: url(../img/news_title.png) no-repeat center top;
    background-size: 100% auto;
}
.news_article {
	position: relative;
	display: flex;
	max-width: 1000px;
	margin: 35px auto;
	padding-bottom: 0;
	border-bottom: none;
	align-items: top
}
.news_thumb {
	position: relative;
	width: 130px;
	height: 130px;
	overflow: visible;
	margin-left: 30px
}
.news_thumb img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0
}
.news_title {
	margin-left: 40px;
	margin-right: 20px;
	color: #C6AB73;
	font-size: 14px;
	max-width: 850px;
	line-height: 26px;
	margin-top: 20px;
	width: 100%
}
.news_day {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 1px;
	color: #436f74;
	font-size: 16px;
	padding-bottom: 20px
}
#news_more {
	position: relative;
	width: calc(356px / 2);
	padding-top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 60px;
	cursor: pointer;
	transition: 0.3s
}
#news_more:hover {
	opacity: .6
}
.news_article a {
	color: #000;
	transition: 0.5s;
	display: block;
	font-weight: 700
}
.news_article a:hover {
	opacity: .7
}
.news_border {
	position: relative;
	width: 194px;
	margin: 0 auto
}
.news_border:last-child {
	border-bottom: none
}
.news_border_top {
	position: relative;
	width: 100%;
	border-bottom: 2px dotted #863215;
	margin: 0 auto;
	opacity: .8;
}

#series1{
	position: relative;
    background: #000;
    display: flex;
    justify-content: center;
    padding-top: 80px;
}
.series1_btn{
	transition: .3s;
}
.series1_btn:hover{
	opacity: 0.7;
}