@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);



#maintitle.acv {
	position:relative;
	padding:0;
}

#maintitle.acv .titlebox h2 {
	position:static;
	transform:none;
	color:#000;
	text-align:center;
	padding:30px 0;
}


#maintitle.acv .titlebox:before,
#maintitle.acv .titlebox:after {
	display:none;
}


/*-------------------------------------------------------------------
	archive
-------------------------------------------------------------------*/

#archive {
}

#archive h3 {
	width:960px;
	margin:0 auto 50px;
}


#archive #slider {
	overflow:hidden;
	zoom:1;
	padding:0;
	margin:0 0 60px;
}

#archive #slider img {
	max-width:100%;
}

#archive #slider .slider-for {
	width:760px;
	margin:0 auto 120px;
}

/*
#archive #slider .slider-nav li {
	max-width:120px;
}
*/


/* first */

#archive .first {
	margin:0 0 80px;
	text-align:center;
}

#archive .first p {
	margin:0 0 30px;
}

#archive .first p:last-child {
	margin:0;
}


/* movie */

#movie {
	position:relative;
	background:#a50a03;
	width:100%;
	height:100%;
	padding:100px 0;
	margin:0 0 100px;
}

#movie:after {
	width:50%;
	height:100%;
	background:#074137;
	position:absolute;
	top:0;
	right:0;
	content:'';
}

#movie .inner {
	position:relative;
	z-index:5;
	width:1120px;
	margin:0 auto;
}

#movie .inner .ttl {
	position:absolute;
	top:-30px;
	left:30px;
	z-index:100;
}

#movie .inner ul {
	overflow:hidden;
	zoom:1;
}

#movie .inner ul li {
	width:50%;
	float:left;
	position:relative;
}

#movie .inner ul li:after {
	width:50px;
	height:2px;
	background:#074137;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	content:"";
}

#movie .inner ul li:last-child:after {
	width:50px;
	height:2px;
	background:#fff;
	position:absolute;
	top:50%;
	right:auto;
	left:0;
	transform:translateY(-50%);
	content:"";
}


/* second */

#archive .second {
	background:#c5b776;
	padding:80px 0;
	margin:0 0 150px;
}

#archive .second .link {
	width:1100px;
	margin:0 auto;
}

#archive .second .link a {
	display:block;
	position:relative;
}

#archive .second .link a .ttl {
	position:absolute;
	top:-40px;
	right:-50px;
	z-index:5;
}

#archive .second .link a .icon {
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	z-index:5;
}

#archive .second .link a:hover {
	opacity:0.7;
}


#archive .gallery img {
	max-width:100%;
}


/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* archive */

	#archive h3 {
		width:94%;
		margin:0 auto 50px;
	}

	#movie .inner {
		position:relative;
		z-index:5;
		width:94%;
		margin:0 auto;
	}

	/* second */

	
	#archive .second .link {
		width:94%;
		margin:0 auto;
	}

	#archive .second .link a .ttl {
		position:absolute;
		top:-30px;
		right:0;
		z-index:5;
		text-align:center;
		width:100%;
	}
	
	#archive .second .link a .ttl img {
		max-width:50%;
	}

	#archive .second .link a .icon {
		display:none;
	}

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#maintitle.acv {
		position:relative;
		padding:0;
	}
	
	#maintitle.acv .titlebox {
		position:static;
		transform:none;
		background:none;
		width:100%;
		padding:0;
	}

	#maintitle.acv .titlebox h2 {
		position:static;
		transform:none;
		color:#000;
		width:auto;
		text-align:center;
		padding:20px 0;
	}


	#maintitle.acv .titlebox:before,
	#maintitle.acv .titlebox:after {
		display:none;
	}
	
	
	#archive #slider {
		margin:0 0 40px;
	}
	
	#archive #slider .slider-for {
		width:94%;
		margin:0 auto 30px;
	}
	
	/* first */

	#archive .first {
		margin:0 0 40px;
	}

	#archive .first p {
		margin:0 0 20px;
	}


	/* movie */
	
	#movie {
		padding:50px 0;
		margin:0 0 50px;
	}

	#movie .inner .ttl {
		position:absolute;
		top:-20px;
		left:20px;
		z-index:100;
	}
	
	#movie .inner .ttl img {
		max-width:50%;
	}


	#movie .inner ul li:after {
		width:20px;
	}

	#movie .inner ul li:last-child:after {
		width:20px;
	}


	/* second */

	#archive .second {
		padding:40px 0;
		margin:0 0 70px;
	}

}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
	
}