@charset "UTF-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pagetitle
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pagetitle{
	img{
		max-width: 100%;
		height: auto;
	}
}
@media only screen and (max-width: 767px) {
	.pagetitle:not(h2){
		margin-top: 0;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
intro_sec
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#intro_sec{
	text-align: center;
	
	@media only screen and (max-width: 767px) {
		.vi_text02{
			text-align: left;
		}
	}
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
list_sec
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#list_sec{
	.vi_btn02{
		margin: 0 auto;
	}
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
page_anchor_block
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page_anchor_block{
	.vi_btn01 {
		margin-bottom: 0;
		@media only screen and (max-width: 767px) {
			justify-content: center;
		}
		& li{
			width: 14.25%;
			padding: 0 2px;
			@media only screen and (max-width: 767px) {
				width: 25%;
			}
		}
	}
}

/*テキスト版*/
.page_anchor_txt{
	margin: -20px 0 50px;
	@media only screen and (max-width: 767px) {
		margin: -5px 0 10px;
	}
	.vi_text02{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		li{
			border-right: 1px solid #222426;
			margin: 0;
			padding: 0;
			line-height: 1.2;
			@media only screen and (max-width: 767px) {
				margin-bottom: 10px;
			}
			&:nth-of-type(1){
				border-left: 1px solid #222426;
			}
			span{
				padding: 0 20px;
			}
		}
	}
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
month_block
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.month_block{
	margin-top: 80px;
	@media only screen and (max-width: 767px) {
		margin-top: 40px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
movie_list
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.movie_list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	&:before,
	&:after{
		content: "";
		display: block;
		width: calc(25% - 10px);
	}
	&:before{
		order: 1;
	}
	li{
		width: calc(25% - 10px);
		margin: 0 0 30px;
	}
	a{
		display: block;
		text-decoration: none !important;
		&:after{
			content: none !important;
			position: absolute;
			right: 0;
			bottom: 8px;
		}
	}
	.img{
		border: 1px solid #D2D7DA;
		position: relative;
		img{
			width: 100%;
			height: auto;
		}
		&:before{
			content: "";
			display: block;
			background: url(../img/ico_youtube.png) no-repeat center center;
			background-size: 50px auto;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
		}
	}
	.txt_area{
		margin-top: 10px;
		text-align: center;
		color: #222426;
		line-height: 1.6;
		/*padding-right: 15px;*/
		.date{
			font-size: 2rem;
			font-weight: 700;
			word-break: break-word;
		}
	}
	
	a.none{
		pointer-events: none;
		.img{
			background: #000;
			img{
				opacity: 0.5;
			}
		}
		.txt_area{
			opacity: 0.4;
		}
		&:after{
			content: none !important;
		}
	}
	
	@media only screen and (max-width: 1095px) {
		&:after{
			width: calc(33.33% - 10px);
		}
		&:before{
			content: none;
		}
		li{
			width: calc(33.33% - 10px);
		}
	}
	@media only screen and (max-width: 767px) {
		&:after{
			content: none;
		}
		li{
			width: 48%;
		}
		.txt_area{
			margin-top: 10px;
			color: #222426;
			line-height: 1.6;
			padding-right: 15px;
			.sub{
				font-size: 1.2rem;
			}
			.name{
				font-size: 1.7rem;
			}
		}
	}
	@media only screen and (max-width: 550px) {
		li{
			width: 100%;
			max-width: inherit;
		}
		
	}
}





/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
英語の調整
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lang_other{
	.movie_list .txt_area .date{
		font-size: 1.7rem;
	}
	.page_anchor_txt .vi_text02 li span{
		@media only screen and (max-width: 767px) {
			padding: 0 10px;
		}
	}
}