@charset "UTF-8";

/*  INTRO                                 
------------------------------------------- */
#intro{
}

@media screen and (min-width:1201px){
	#intro{
		
	}
	#intro h3{
		width:100%;
		height:160px;
		text-indent:-9999px;
		background:url(../images/intro_pc.png) center top no-repeat;
	}
	.content p{
		margin-bottom:20px !important;
	}
}
@media screen and (min-width:769px) and (max-width:1200px){
	#intro .content{
	}
	#intro h3{
		width:100%;
		height:160px;
		text-indent:-9999px;
		background:url(../images/intro_pc.png) center top no-repeat;
	}
}
@media screen and (max-width:768px){
	#intro .content{
	
	}
	#intro h3{
		width:100%;
		height:38vw;
		text-indent:-9999px;
		background:url(../images/intro_sp.png) center top no-repeat;
		background-size:100% auto;
	}
	.content p{
		margin-bottom:20px !important;
	}
}

/*  photoArea 04                             
------------------------------------------- */
@media screen and (min-width:769px){
	#photoArea04{
		width:100%;
		height:13vw;
		overflow:hidden;
		border-bottom:3px solid #fff;
	}
	#photoArea04 li{
		float:left;
		width: 25%;
		border-right:3px solid #fff;
		line-height:0;
	}
	#photoArea04 li img{
		width:100%;
		height:auto;
	}
	#photoArea04 li:nth-child(4){ border-right:none; }
}
@media screen and (max-width:768px){
	#photoArea04{
		width:100%;
		border-bottom:2px solid #fff;
	}
	#photoArea04 li{
		float:left;
		width: 50%;
		border-right:1px solid #fff;
		border-bottom:2px solid #fff;
		line-height:0;
	}
	#photoArea04 li img{
		width:100%;
		height:auto;
	}
	
	#photoArea04 li:nth-child(2),
	#photoArea04 li:nth-child(4){
		border-right:none;
		border-left:1px solid #fff;
	}
}


/*  SYNOPSIS                                 
------------------------------------------- */
#synopsis{
	background:rgba(61, 80, 87, 0.9);
}

@media screen and (min-width:1201px){
	#synopsis p{
		color:#fff;
	}
	
}
@media screen and (min-width:769px) and (max-width:1200px){
	#synopsis p{
		color:#fff;
	}
}
@media screen and (max-width:768px){
	#synopsis {
		clear:both;
	}
	#synopsis p{
		color:#fff;
	}
}

/*  photoArea 03                              
------------------------------------------- */
@media screen and (min-width:769px){
	#photoArea03{
		width:100%;
		height:31vw;
		overflow:hidden;
		background:url(../images/synop_01.jpg) no-repeat;
		background-size:60% auto;
		background-position:top left;
	}
	#photoArea03 li{
		float:right;
		border-left:3px solid #fff;
		border-bottom:3px solid #fff;
		line-height:0;
	}
	#photoArea03 li img{
		width:100%;
		height:auto;
	}
	#photoArea03 li:nth-child(4){ width:32%;}
	#photoArea03 li:nth-child(3){ clear:both;  width:8%; height:54.5%; background:#b80c34;}
	#photoArea03 li:nth-child(2){width: 12%; height:47.5%; background:#cbdcdc;}
	#photoArea03 li:nth-child(1){ width:28%; }
}
@media screen and (max-width:768px){
	#photoArea03{
		width:100%;
		height:32vw;
		overflow:hidden;
		background:url(../images/synop_01.jpg) no-repeat;
		background-size:100% auto;
		background-position:top left;
	}
	#photoArea03 li{
		float:right;
		border-left:2px solid #fff;
		border-bottom:2px solid #fff;
		line-height:0;
	}
	#photoArea03 li img{
		width:100%;
		height:auto;
	}
	#photoArea03 li:nth-child(4){ width:32%;}
	#photoArea03 li:nth-child(3){ clear:both;  width:8%; height:54.5%; background:#b80c34;}
	#photoArea03 li:nth-child(2){width: 12%; height:47.5%; background:#cbdcdc;}
	#photoArea03 li:nth-child(1){ width:28%; }
}


/*  DIRECTOR                                 
------------------------------------------- */
#director{
}

@media screen and (min-width:769px){
	#director .content h3{
		font-size:24px;
		font-weight:700;
		margin-bottom:20px;
	}
	#director .content h6{
		font-size:14px;
		font-weight:700;
		margin-bottom:5px;
		padding-top:20px;
	}
	#director .content img{
		float:right;
		margin:0 0 15px 30px;
	}
	#director .content p{
	}
	#direcLink {
		margin:30px 0 0 0;
	}
	#direcLink li {
		width:47%;
		float:left;
	}
	#direcLink li a{
		width:100%;
		height:100%;
		display:block;
		text-align:center;
		padding:13px 0;
		border-radius: 8px;
		background:#008085;
		font-size:19px;
		color:#fff;
		line-height:1.6;
		letter-spacing:1px;
	} 
	#direcLink li a:hover{opacity:1;}
	#direcLink .linkJp{
		color:#000;
		font-weight:700;
	}
	
	#direcLink li:last-child{
		float:right
	}
}

@media screen and (max-width:768px){
	#director .content h3{
		font-size:18px;
		font-weight:700;
		margin-bottom:20px;
		line-height:1.4;
	}
	#director .content h6{
		font-size:14px;
		font-weight:700;
		margin-bottom:5px;
		padding-top:20px;
	}
	#director .content img{
		float:right;
		width:120px;
		margin:0 0 15px 30px;
	}
	#director .content p{
	}
	#direcLink {
		width:80%;
		margin:30px auto 0 auto;
	}
	#direcLink li {
		width:100%;
		margin-bottom:12px;
	}
	#direcLink li a{
		width:100%;
		height:100%;
		display:block;
		text-align:center;
		padding:13px 0;
		border-radius: 8px;
		background:#008085;
		font-size:16px;
		color:#fff;
		line-height:1.4;
		letter-spacing:1px;
	} 
	#direcLink li a:hover{opacity:1;}
	#direcLink .linkJp{
		color:#000;
		font-weight:700;
		font-size:15px;
	}
	
	#direcLink li:last-child{
		float:right
	}
}