@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

body{
	background-color:#ffffff;
}



/***********************************
 メインタイトル
 ***********************************/
#coverBlock h1{
	display:block;
	overflow:hidden;
	width:100%;
	height:20vh;
	max-height:200px;
	padding:10px 20px;
	text-align:center;
}

#coverBlock h1 img{
	width:auto;
	height:100%;
	max-width:1280px;
}

#coverBlock h1 > span{
	display:none;
}



/* for Sp --------------------*/
@media screen and (max-width:480px){

	#coverBlock h1{
		height:auto;
		padding:3vw 0 0;
		padding-right:15vw;
	}

	#coverBlock h1 > img{
		width:100%;
		height:auto;
	}

}





/***********************************
 カバー画像
 ***********************************/
#coverBlock{
	display:block;
	width:100%;
	position:relative;
}

#coverImg{
	display:block;
	overflow:hidden;
	width:100%;
	text-align:center;
	position:relative;
	line-height:0;
}


#coverInner{
	display:inline-block;
	overflow:hidden;
	width:auto;
	height:calc(100vh - 20vh);
	position:relative;
}

#coverInner img{
	width:auto;
	height:100%;
	object-fit: cover;
	object-position: right 50%;
}


#coverInner > p{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	bottom:20px;
	left:20px;
	text-align:left;
	font-size:2.1rem;
	line-height:155%;
}

#coverInner > p > span{
	font-size:2.4rem;
	line-height:155%;
	color:#ffffff;
	font-weight:700;
}

#coverInner > p > strong{
	display:block;
	font-size:2.8rem;
	font-weight:700;
	line-height:125%;
	margin-top:0.25em;
}

.covetTxt{
	display:none;
}


/* for Sp --------------------*/
@media screen and (max-width:480px){

	#coverInner{
		display:block;
		width:100%;
		height:auto;
	}


	#coverInner img{
		width:100%;
		height:auto;
	}

	#coverInner > p{
		bottom:3vw;
		left:3vw;
		font-size:1.6rem;
	}

	#coverInner > p > span{
		font-size:1.8rem;
	}

	#coverInner > p > strong{
		font-size:2.1rem;
	}

}



/*コピーテキスト*/
#topCopy{
	display:block;
	overflow:hidden;
	width:100%;
	text-align:center;
	margin:25px 0 0;
}

#topCopy > p{
	display:none;
}


/* for Sp --------------------*/
@media screen and (max-width:480px){
	#topCopy{
		margin:3vw auto;
	}

	#topCopy > p{
		display:block;
		overflow:hidden;
		font-size:1.8rem;
		font-weight:700;
		line-height:155%;
		font-style:italic;
		color:#2196f3;
		padding:0 3vw 3vw;
	}


}



section+section{
	margin-top:25px;
}


.dataFrame h2{
	display:block;
	overflow:hidden;
	font-size:2.1rem;
	font-weight:700;
	line-height:125%;
	text-align:center;
	padding:0.5em 0;
	background-color:#ff9a64;
	color:#ffffff;
	/*border:1px solid #cccccc;*/
	margin-bottom:1em;
}

.dataFrame p{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height:175%;
}



.dataFrame p+p{
	margin-top:1em;
}



/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	
}

#sec01 img{
	width:calc(50% - 0.5em);
	height:auto;
	float:left;
	margin:2em 0;
}
#sec01 img:nth-child(8){
	margin-right:0.5em;
}
#sec01 img:nth-child(9){
	margin-left:0.5em;
}



/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	#sec01 img{
		width:100%;
		float:none;
		margin:1em 0 0!important;
	}
	
}


#sec02 h3{
	display:block;
	overflow:hidden;
	text-align:center;
	font-size:2.0rem;
	font-weight:bold;
	line-height:175%;
	color:#2196f3;
	font-style:italic;
	margin:1em 0;
}


#sec02 h4{
	font-size:1.8rem;
	font-weight:700;
}


#sec02 dl{
	display:block;
	overflow:hidden;
	width:50%;
	float:left;
	padding:0.5em 0;
}


#sec02 dl > dt{
	clear:both;
	display:block;
	overflow:hidden;
	width:4em;
	padding:0.5em 0;
	float:left;
	border-top:1px dotted #cccccc;
}

#sec02 dl > dd{
	display:block;
	overflow:hidden;
	width:calc(100% - 4em);
	padding:0.5em 0;
	border-top:1px dotted #cccccc;
	float:left;
}

#sec02 img{
	width:calc(50% - 1em);
	height:auto;
	float:right;
}


/* for Sp --------------------*/
@media screen and (max-width:480px){

	#sec02 h3{
		font-size:1.8rem;
	}

	#sec02 img{
		width:100%;
		float:none;
		margin-top:3vw;
	}
	#sec02 h4{
		font-size:1.8rem;
		font-weight:700;
	}


	#sec02 dl{
		display:block;
		overflow:hidden;
		width:100%;
		float:none;
		padding:0.5em 0;
	}

	
}




#sec04 dl{
	display:block;
	overflow:hidden;
	border-bottom:1px dotted #cccccc;
}


#sec04 dl > dt,
#sec04 dl > dd{
	display:block;
	overflow:hidden;
	float:left;
	padding:0.5em 0;
	border-top:1px dotted #cccccc;
}

#sec04 dl > dt{
	clear:both;
	width:10em;
}

#sec04 dl > dd{
	width:calc(100% - 10em);
}


#sec04 dl > dt:nth-child(1),
#sec04 dl > dd:nth-child(2){
	border-top:none;
}

strong{
	font-weight:700;
	font-size:1.8rem;
}

.notes{
	padding:1em;
	font-style: italic;
	color:#3c3c3c;
	background-color:#f5f5f5;
}

p.alRight{
	text-align:right;
	font-size: 1.8rem;
	font-style:italic;
}

/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	#sec04 dl{
		font-size:1.4rem;
	}

	#sec04 dl > dt,
	#sec04 dl > dd{
		width:100%;
		float:none;
		padding:0;
		border-top:none;
	}

	#sec04 dl > dt{
		padding:0.5em 0 0;
		font-weight:700;
	}
	#sec04 dl > dt::before{
		content:"■";
	}

	#sec04 dl > dd{
		padding:0 0 0.5em 1em;
		border-bottom:1px dotted #cccccc
	}

}



#endFrame{
	display:block;
	overflow:hidden;
	clear:both;
	width:100%;
	height:120px;
	position:relative;
}


/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	#endFrame{
		height:12vw;
	}

}


/***********************************
 CSS スライダ
 ***********************************/

.slider {
	display:block;
	overflow:hidden;
	width:1280px;
	height:230px;
	margin: auto;
	position: relative;
	white-space:nowrap;
}

.slider::before,
.slider::after {
	content: "";
	height: 100%;
	position: absolute;
	width: 10vw;
	z-index: 2;
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
  
.slider::after {
	right:-1px;
	top: 0;
	transform: rotateZ(180deg);
  }

.slider::before {
	left: 0;
	top: 0;
}
  
.slider > img{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	width:1280px;
	height:230px;
}

.slider > img:nth-child(1){
	animation: scroll 30s linear infinite;
}

.slider > img:nth-child(2){
	animation: scroll 30s linear infinite;
	transform: translateX(100%);
	animation-delay:15s;
}

.slider > img:nth-child(3){
	animation: scrollFst 15s linear forwards;
}

@keyframes scroll {
  0% { transform: translateX(100%);}
  100% { transform: translateX(-100%);}
}

@keyframes scrollFst {
  0% { transform: translateX(0);}
  100% { transform: translateX(-100%);}
}




/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	.slider {
		width:640px;
		height:115px;
	}
	
	.slider > img{
		width:640px;
		height:115px;
	}
}




/***********************************
 映画祭タグ
 ***********************************/
#festList{
	display:block;
	overflow:hidden;
	position:relative;
	text-align:center;
	margin-bottom:1em;
	/*position:absolute;
	top:20px;
	left:20px;

	filter: brightness(75%);*/
}

.fettTag{
	display:inline-block;
	overflow:hidden;
	width:auto;
	height:5em;
	padding:0 2.5em;

	white-space:nowrap;
	font-family: "Noto Serif JP", serif;
	font-size:1.6rem;
	text-align:center;
	line-height:125%;
	color:#CEAA3C;


	background-image:url('../images/festa/gkk_l.svg'),url('../images/festa/gkk_r.svg');
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:left 50% ,right 50%;
	background-size:contain,contain;

}

.fettTag + .fettTag{
	margin-left: 2em;
}

.fettTag p{
	display:inline-block;
	overflow:hidden;
	position:relative;
	top:50%;
	left:0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.fettTag strong{
	display: block;
	overflow:hidden;
	font-weight: 600;
}

.fettTag span{
	display: block;
	overflow:hidden;
	margin-top: 0.5em;
	border-top:1px solid #CEAA3C;
	font-size:1.4rem;
}



/* for Sp --------------------*/
@media screen and (max-width:480px){
	
	.fettTag + .fettTag{
		margin-left: 0;
		margin-top:1em;
	}

}