@charset "utf-8";

.s_inner { width: 750px; margin: 0 auto;}
.m_inner { width: 880px; margin: 0 auto;}

/*--------------------------fv--------------------------*/
#fv { position: relative; background: url(../images/lineup/fv_bg.png) repeat-x left top / 1100px;}
#fv .title { display: flex; min-width: 1100px; position: relative;}
#fv .title .left { width: 50%; padding: 168px 0 140px 0; padding-left: max( ( 100% - 1000px ) / 2, 40px);}
#fv .title .left p { font-size: 14px; line-height: 180%;}
#fv .title .fv { width: 50%; background: url(../images/gallery/fv.png) no-repeat left bottom / cover; border-radius: 0 0 0 140px;}
#fv:before,
#fv:after { position: absolute; content: "";}
#fv:before { top: 0; left: 0; width: 386px; height: 100%; background: url(../images/lineup/fv_before.png) no-repeat left top / 100%;}
#fv:after { top: 550px; right: 0; width: 100px; height: 100%; background: url(../images/lineup/fv_after.png) no-repeat right top / 100%;}

#fv .list { padding: 55px 0 45px; margin-top: -42px; background: #EFFFEF;}
#fv .list p { font-size: 26px; font-family: 'NotoSansJP-Light'; margin-bottom: 40px;}
#fv .list ul { display: flex; justify-content: flex-start; align-items: center; flex-flow: wrap;}
#fv .list li { width: 31.25%; margin-bottom: 20px;}
#fv .list li:nth-child(3n+2) { margin: 0 3% 20px;}
#fv .list li a { display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid #309B2C; padding-bottom: 10px; font-size: 15px; line-height: 120%;}
#fv .list li a:after { content: ""; display: inline-block; margin-right: 5px; width: 20px; height: 20px; background: url(../images/lineup/fv_lineup_arrow.png) no-repeat center / 100%;}

/*--------------------------jalist--------------------------*/
#cmlist { padding: 50px 0 60px;}
#cmlist .cm { padding: 60px 0 40px;}
#cmlist .cm h3 { font-size: 30px; margin-bottom: 24px; font-family: 'NotoSansJP-Light'; color: #008337;}
#cmlist .cm h4{padding: 0 0 14px;}
#cmlist .list { display: flex; flex-flow: wrap; justify-content: flex-start; align-items: flex-start;}
#cmlist .list .img_box { width: 32%; margin-right: 2%; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); margin-bottom: 20px;}
#cmlist .list .img_box:nth-child(3n) { margin-right: 0;}
#cmlist .list .img_box img { width: 100%; height: auto; margin-bottom: 10px;}
#cmlist .list .img_box p { font-size: 14px; padding: 0 5px 10px; line-height: 140%; color: #309B2C;}
#cmlist .poster { display: flex;justify-content: space-between; align-items: flex-start;}
#cmlist .poster .img_box { height: 195px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);}
#cmlist .poster .img_box img { width: auto; height: 100%;}



.modal_box{width: 100%; height: 100%;}
.modal_box .modal{display: none; position: fixed; width: 100%; height: 100%;z-index: 2000;top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.5); visibility: visible;}
.modal_box .modal .bg_box{ width: 85vw; max-width: 1400px; max-height: 66vh; margin:17vh auto; display: flex; align-items: center; height: 100%;}
.modal_box .modal .bg_box .youtube{background: #FDFDF0; width: 100%; height: auto; padding: 5%; border-radius: 20px; position: relative;}
.modal_box .modal .bg_box .youtube .clos_box{border-radius: 100px ; background: #4FDB3E; position: absolute; width: 90px; height: 90px; top: -45px; right: -45px; z-index: 10;}
.modal_box .modal .bg_box .youtube .clos_box:after,
.modal_box .modal .bg_box .youtube .clos_box:before{content: ""; display: block; width: 30px; height: 2px; background: #fff; position: absolute;}
.modal_box .modal .bg_box .youtube .clos_box:before{ top: 50%; left: 35%; transform: rotateZ(45deg) ; -webkit-transition: rotateZ(45deg) ;}
.modal_box .modal .bg_box .youtube .clos_box:after{ top: 50%; left: 35%; transform: rotateZ(-45deg); -webkit-transition: rotateZ(-45deg) ;}
.modal_box .modal .bg_box .youtube_box{ position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden;}
.modal_box .modal .bg_box .youtube_box iframe{width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}



@media only screen and (max-width: 768px){
	
	.s_inner,
	.m_inner { width: 90%;}
	
	/*--------------------------fv--------------------------*/
	#fv { background: url(../images/lineup/fv_bg.png) repeat-x left top / 1100px;}
	#fv .title { display: flex; flex-flow: column-reverse; min-width: auto;}
	#fv .title .left { width: 90%; padding: 60px 0 45px; margin: 0 auto; }
	#fv .title .left h2 img { width: 240px; height: auto;}
	#fv .title .left p { font-size: 14px;}
	#fv .title .fv { width: 100%; padding: 30vw; background: url(../images/gallery/fv.png) no-repeat right bottom / 90%; border-radius: 0;}
	#fv:before { top: 0; left: 0; width: 182px; height: 240px;}
	#fv:after { top: 130px; right: 0; width: 71px; height: 180px;}

	
	
	#fv .list { padding: 45px 0 30px; margin-top: 0;}
	#fv .list p { font-size: 20px; margin-bottom: 40px;}
	#fv .list ul { display: flex; justify-content: space-between;}
	#fv .list li { width: 48%; margin-bottom: 20px;}
	#fv .list li:nth-child(3n+2) { margin: 0 0 20px;}
	#fv .list li a {font-size: 14px; padding-bottom: 10px;}
	#fv .list li a:after { margin-right: 5px; width: 16px; height: 16px;}

	/*--------------------------jalist--------------------------*/
	#cmlist { padding: 0px 0 60px;}
	#cmlist .cm h3 {margin-bottom: 30px; font-size: 24px;}
	#cmlist .cm h4{padding: 0 0 34px;}
	#cmlist .list { display: block; }
	#cmlist .list .img_box { width: 100%; margin-right: 0; margin-bottom: 20px;}
	#cmlist .list .img_box .movie_warpper { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; margin-bottom: 15px;}
	#cmlist .list .img_box .movie_warpper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	#cmlist .list .img_box p { font-size: 14px; padding: 0 5px 15px;}
	#cmlist .poster { display: block;}
	#cmlist .poster .img_box { width: 100%; height: auto; margin-bottom: 40px;}
	#cmlist .poster .img_box img { width: 100%; height: auto;}

	
}