@charset "utf-8";

/* PC_TOPのみ */
@media screen and (min-width: 768px){
	.top_non{display:block;width:0;height:0;overflow:hidden;padding-top: 0;margin: 0;}
}

/*========================
==== -- TOP_HEADER -- ====
========================*/
#top_header{
	width: 100%;
	position: relative;
	padding-top: 32px;
	padding-bottom: 6.667%;
}

@media screen and (max-width: 768px){
	#top_header{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding-top: 16px;
	}
}
/*== MAIN VISUAL ==*/
#mainVisual{
	width: 50%;
	margin: 0 auto;
	/*padding-top: 4%;*/
	padding-top: 48px;
	/*margin-top: 2.667%;*/
	/*margin-top: 32px;*/
	position: relative;
	z-index: 3;
}
.mainVisualLists{
	z-index: 3;
}
.mainVisual_barWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mainVisual_ttl{
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.025em;
	margin-right: 16px;
	flex-shrink: 0;
}
.mainVisual__bar{
	width: 100%;
	height: 2px;
	background-color: rgba(0,0,0,.24);
}
.mainVisual__bar div{
	height: 2px;
	background-color: #f0005a;
}
.mainVisual__pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
	width: auto;
	flex-shrink: 0;
}
.mainVisual__pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	border: 2px solid #000;
	background-color: #fff;
	opacity: 1;
}
.mainVisual__pagination .swiper-pagination-bullet-active{
	background-color: #ffec18;
}

/* mainVisual PC pagination margin Settings */
.mainVisual__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
	margin: 0 0 0 16px;
}

/* VISUAL SETTING */
.mvLink{
	display: block;
}
#visual01{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual01.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual02{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual02.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual03{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual03.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual04{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual04.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara01{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara1.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara02{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara2.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara03{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara3.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara04{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara4.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara05{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara5.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara06{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara6.jpg) no-repeat center / cover;
	border: 2px solid #000;
}
#visual_chara07{
	width: 100%;
	padding-top: 141.3334%;
	background: url(../img/top/visual_chara7.jpg) no-repeat center / cover;
	border: 2px solid #000;
}


@media screen and (max-width: 768px){
	#mainVisual{
		order: 1;
		width: 87.2%;
		padding-top: 32px;
	}
	.mainVisual_barWrap{
		width: 85.3212%;
	}
	.mainVisual_ttl{
		margin-right: 6px;
		letter-spacing: -0.025em;
	}
	.mainVisual__pagination .swiper-pagination-bullet{
		width: 8px;
		height: 8px;
		border-width: 1px;
	}
	.mainVisual__pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
		margin: 0 0 0 6px;
	}
}


/*==== TOP HEADER FIXED WRAP ==*/
@media screen and (min-width: 768px){
	#top_header_fixedWrap{
		width: 100%;
		min-width: 1200px;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 3;
	}
	#top_header_fixedInWrap{
		position: sticky;
		top: 0;
		bottom: 0;
		height: 100vh;
		min-height: 640px;
	}
	/* TOP LOGO WRAP */
	.line_logoWrap{
		min-width: 1200px;
		width: 100%;
		position: absolute;
		z-index: 2;
	}
	.line_logoInWrap{
		position: absolute;
		top: 0;
		right: 6.667%;
		width: 19.08334%;
		padding-top: 63.3334%;
		z-index: 2;
	}
	.top_header_h1{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: url(../img/top/top_logo.png) no-repeat 0 0 / contain;
		z-index: 2;
	}
	#line_top_h1{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: url(../img/top/line_top_h1.png) no-repeat 0 0 / contain;
	}

	/* TOP SHARE */
	.top_shareWrap{
		position: absolute;
		/*top: 305px;*/
		top: calc(50% - 75px - 7.03125vw);
		right: 32px;
	}

	/*== topMovie ==*/
	.top_movieMain{
		z-index: 3;
	}
	.top_movie_com{
		width: 25%;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.top_movie_comIn{
		width: 100%;
		padding-top: 56.25%;
		position: relative;
		overflow: hidden;
	}
	.movBG{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,.24);
	}
	.top_movie_comIn_cont{
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-size: cover;
		background-position: center;
	}
	.top_movie_comIn_cont .icon_yt{
		width: 40px;
		height: 40px;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #000;
		transition: .3s ease-in-out;
	}
	.top_movie_comIn_cont .icon_yt:after{
		content: '';
		width: 24px;
		height: 17px;
		background: url(../img/common/icon_yt.svg)no-repeat center center / contain;
		position: absolute;
		top: calc(50% - 8.5px);
		left: calc(50% - 12px);
		transition: .3s ease-in-out;
	}

	button.top_movie_comIn_cont:hover .icon_yt{
		background-color: #ffec18;
	}
	button.top_movie_comIn_cont:hover .icon_yt:after{
		filter: invert(1);
	}

	/* TOP DATE */
	.top_header_dateWrap{
		position: sticky;
		top: 0;
	}
	.top_header_date{
		min-width: 392px;
		min-width: 493px;
		/*width: 32.6667%;*/
		width: 41.0834%;
		/*padding-top: 8.41667%;*/
		padding-top: 8.5834%; /* 103px */
		background: url(../img/top/top_header_date4.png) no-repeat center / contain;
		position: fixed;
		bottom: 10px;
		/*left: 33.66663%;*/
		left: 29.4583%;
		z-index: 11;
	}
}

@media screen and (max-width: 768px){
	#top_header_fixedWrap{
		order: 2;
		min-width: 100%;
		position: relative;
		z-index: 4;
		margin-top: -6.5334%;
	}
	#top_header_fixedInWrap{
		position: relative;
		height: auto;
		min-height: auto;
		width: 100%;
		padding-bottom: 41.6%;
	}
	.line_logoWrap{
		width: 100%;
		padding-top: 23.7334%;
		min-width: auto;
		position: relative;
	}
	.line_logoInWrap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.top_header_h1{
		background: url(../img/top/top_logo_sp.png) no-repeat 0 0 / contain;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}
	#line_top_h1{
		display: none;
	}

	/* TOP DATE SP*/
	.top_header_dateWrap_sp{
		position: relative;
		width: 100%;
		padding: 0 5.7334%;
		margin-bottom: 6.4%;
	}
	.top_header_date_sp{
		width: 100%;
		padding-top: 18.0452%;
		background: url(../img/top/top_header_date4.png) no-repeat center / contain;
	}

	/* TOP MOVIE */
	.top_movie_com{
		position: absolute;
		width: 74.4%;
		padding-top: 41.6%;
		bottom: 0;
		left: 12.8%;
	}
	.top_movie_comIn{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.top_movie_comIn_cont{
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-size: cover;
		background-position: center;
	}
	.top_movie_comIn_cont .icon_yt{
		width: 17.2044%;
		padding-top: 17.2044%;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #000;
	}
	.top_movie_comIn_cont .icon_yt:after{
		content: '';
		width: 60.41667%;
		padding-top: 43.75%;
		background: url(../img/common/icon_yt.svg)no-repeat center center / contain;
		position: absolute;
		top: 28.125%;
		left: 19.79167%;
	}
	.movBG{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,.24);
	}
}





/*========================
==== -- TOP_UPDATE -- ====
========================*/
#update{
	margin-top: 140px;
}
#update .contIn{
	padding-top: 9.6%;
}
#updateWrap{
	width: 100%;
	display: flex;
	justify-content: center;
	/*padding-top: 80px;*/
}
.update_cont{
	width: 50%;
	padding: 0 4.4445%;
}

#update_newsLists{
	display: block;
	height: calc(100% - 88px);
}
.update_newsList{
	margin-bottom: 24px;
}
.update_newsList:last-child{
	margin-bottom: 0;
}
.update_newsList a{
	width: 100%;
	height: 128px;
	display: block;
	padding: 30px 4.4445%;
	position: relative;
	border: 2px solid #000;
	background-color: #fff;
	text-decoration: none;
}
.update_newsList a:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #ffec18;
	transform: scale(0.9);
	opacity: 0;
	transition: all 0.3s ease;
}
.update_newsList a:hover::before  {
	transform: scale(1);
	opacity: 1;
}
.newsList_Date{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 6px 4px;
	color: #ffec18;
	background-color: #000;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1;
	font-style: italic;
	font-weight: 700;
}
.newsList_Date time{
	line-height: 1;
}
.newsList_Title{
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	position: relative;
}
.newsList_arrow{
	width: 24px;
	height: 8px;
	position: absolute;
	right: 14px;
	bottom: 14px;
	transition: .3s ease;
	background: url(../img/common/arrow_b.svg) no-repeat center / contain;
}
.update_newsList a:hover .newsList_arrow{
	right: 8px;
}

.update_btnWrap{
	padding-top: 40px;
	text-align: center;
}

.btn_link{
	position: relative;
	padding-bottom: 6px;
	text-decoration: none;
	letter-spacing: 0;
}
.btn_link .btnTxt{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #000;
	position: relative;
	padding: 12px 0 12px;
	width: 290px;
	background-color: #ffec18;
	height: 48px;
	border-radius: 40px;
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
	box-shadow: 0px 6px 0 #000;
	transition: .25s ease-in-out;
}
.btn_link:hover .btnTxt{
	transform: translate3d(0, 6px, 0);
	box-shadow: none;
}
#update_twitterWrap{
}
.twitterWidgetWrap{
	width: 100%;
	height: 432px;
	padding: 30px 3.556%;
	border: 2px solid #000;
	background-color: #fff;
}
.twitterWidget {
	width: 100%;
	height: 360px;
	overflow-x: hidden;
	/*position: relative;*/
}

.btnTxt.tw span{
	display: inline-block;
	padding: 0 20px 0 40px;
	position: relative;
}

.btnTxt.tw span:before{
	content: '';
	width: 20px;
	height: 18px;
	position: absolute;
	top: calc(50% - 9px);
	left: 0;
	background: url(../img/common/sns_tw_b.svg) no-repeat center / contain;
}

@media screen and (max-width: 768px){
	#update{
		margin-top: 0;
	}
	#updateWrap{
		flex-direction: column;
		flex-wrap: wrap;
		margin-bottom: 7.3395%;
	}
	.update_cont{
		width: 100%;
		padding: 0;
	}
	#update_newsLists{
		height: auto;
	}
	.update_newsList{
		margin-bottom: 3.66973%;
	}
	.update_newsList a{
		height: auto;
		padding: 28px 10px 24px;
	}
	.newsList_Date{
		font-size: 1.2rem;
	}
	.newsList_Title{
		font-size: 1.2rem;
	}
	.update_btnWrap{
		padding-top: 6.1162%;
	}
	.btn_link .btnTxt{
		padding: 6px 0 6px;
		width: auto;
		width: 38.667%;
		min-width: 220px;
		height: auto;
		font-size: 1.2rem;
	}
	.btn_link .btnTxt span{
		display: inline-block;
		padding: 0 48px;
	}
	#update_twitterWrap{
		padding-top: 15.9021%;
	}
	.twitterWidgetWrap{
		height: 74.6667vw;
		padding: 12px;
	}
	.twitterWidget {
		height: 100%;
	}
	.btnTxt.tw span{
		padding: 0 10px 0 20px;
	}
	.btnTxt.tw span:before{
		width: 10px;
		height: 9px;
		left: 0;
		top: calc(50% - 4.5px);
	}
}