@import 'default.css';

#main{
	padding: 0px 0px 20px 0px;
	background-color: #FFF;
}

h2 span {
	position: relative;
	display: inline-block;
	padding: 0 50px;
}

h2 span:before,
h2 span:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 40px;
	height: 1px;
	background-color: #222;
	color: #FFF;
}
h2 span:before {
	left: 0;
	background-color: #FFF;
}
h2 span:after {
	right: 0;
	background-color: #FFF;
}

@media screen and (max-width:900px) {
	h2{
		overflow: hidden;
		text-align: center;
		background-color: #FFF;
		padding: 50px 0;
		width: 100%;
	}
}
/*********************************
* Movie
*********************************/
#bgmovie{
	position: fixed;
	width: 100%;
	top: 80px;
	z-index: -9999;
	/*
	background-image: url(../img/key_visual.png);
	background-size: cover;
	height: auto;
	*/

}
	#keyvisual{
		width: 100%;
		height: auto;
	}
	
		#keyvisual img{
			width: 100%;
			height: auto;
		}
			
	/*
	#bgmovie iframe{
		width: 100%;
		height: auto;
	}
		*/
@media screen and (max-width:900px) {
	#bgmovie{
		top: 70px;
	}
}
	#message{
		position: absolute;
		top: 75%;
		left: 4vw;
		z-index: 1;
		font-size: 6vw;
		line-height: 160%;
		color: #FFF;
		font-family: "Sawarabi Mincho";
	}
	@media screen and (max-width:900px) {
		#message{
			font-size: 6vw;
		}
	}

	
/*********************************
* Images
*********************************/
	#images{
		width: 100%;
		max-height: 700px;
		background-color: #FFF;
		padding: 0px 50px 50px 50px;
		/*border-bottom: 1px solid #E8E8E8;*/
	}
		#image_wrapper{
			display: flex;
			flex-wrap:nowrap;
			margin: 0 auto;
			border: 1px solid #E0E0E0;
		}
			#image_wrapper img{
				width: 600px;
				height: 320px;
				background-color: #CCC;
			}
			#image{
				list-style-type: none;
				width: 600px;
				max-height: 320px;
				overflow: hidden;
				position: relative;
			}
				#image img{
					position: absolute;
					width: 600px;
					height: auto;
					top: 0;
					left: 0;
					display: none;
				}

			#imagetext{
				list-style-type: none;
				width: calc(100% - 600px);
				min-width: 200px;
				height: 320px;
			}
				#imagetext li{
					height: 320px;
					padding: 60px 20px;
					margin-bottom: 1px solid #000;                  
					background-color: #FFF;
					overflow: hidden;
				}
					#imagetext1{display: block;}
					#imagetext2{display: none;}
					#imagetext3{display: none;}

				#imagetext li p{
					opacity: 0;
					transform: translateX(100px);
				}
				.image_title{
					font-weight: bold;
					font-size: 1.1em;
					padding: 5px 0;
					margin-bottom: 5px;
					border-bottom: 1px dotted #CCC;
				}
					#imagetext li p:nth-of-type(1).show{
						opacity: 1;
						transform: translateX(100px);
						animation: fadeInH 0.8s ease 0s 1 both;
					}
					#imagetext li p:nth-of-type(2).show{
						opacity: 1;
						transform: translateX(100px);
						animation: fadeInH 0.8s ease 0.2s 1 both;
					}
					#imagetext li p:nth-of-type(3).show{
						opacity: 1;
						transform: translateX(100px);
						animation: fadeInH 0.8s ease 0.4s 1 both;
					}
				@media screen and (max-width:900px) {
					#images{
						background-color: #FFF;
						padding: 0;
						border: 0;
					}
						#image_wrapper{
							display: block;
							position: relative;
						}
							#image{
								line-height: 0;
								width: 100%;
								overflow: hidden;
								position: relative;
								border: 0;
							}
								#image img{
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: auto;
									background-color: #CCC;
								}

							#imagetext{
								padding: 0px;
								width: 100%;
								height: 200px;
								min-width: 100px;
								overflow: hidden;
							}
								#imagetext li{
									padding: 20px;
									height: auto;
								}
				}




/*********************************
* 20210629
*********************************/ 
#labor_pop{
	margin-left: 0px;
	padding-bottom: 50px;
}
	#labor_pop .date{
		padding-left: 20px;
	}
	#labor_pop .title{
		padding-left: 20px;
	}
	div.pop_info_body{
		display: flex;
		justify-content: center;
	}
	div.pop_img{
		padding-right: 20px;
		padding-left: 20px;

	}
	#labor_pop a:link{
		color: #0000FF;
	}
	#labor_pop a:visited{
		color: #2600ff;
	}
	.pop_info_body_txet a{
		white-space: nowrap;
	}

@media screen and (max-width:900px) {
	div.pop_info_body{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap; 
	}
	div.pop_img{
		width: 100%;
		text-align: center;
		padding-right: 0px;
		padding-left: 0px;
	}
		div.pop_img img{
			width: 100%;
		}
		#labor_pop .date{
			padding-left: 0px;
		}
		#labor_pop .title{
			padding-left: 0px;
		}

}

/*********************************
* Info
*********************************/ 
	#info{
		background-color: #FFF;
		padding: 0px 0px 50px 0;
		/*border-bottom: 1px solid #E8E8E8;*/
	}
							
		#info ul{
			list-style-type: none;
		}
			#info li{
				width: 100%;
				transform: translateY(100px);
				opacity: 0; 
				background-color: #FFF;
				padding: 0 20px;
				border: 0px solid #E9EBEA;
			}
				#info li:nth-of-type(1).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0s 1 both;
				}
				#info li:nth-of-type(2).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0.2s 1 both;
				}   
				#info li:nth-of-type(3).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0.2s 1 both;
				}   
				#info li:nth-of-type(4).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0.2s 1 both;
				}   
				#info li:nth-of-type(5).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0.2s 1 both;
				}   
	@media screen and (max-width:900px) {
		#info{
			padding: 0px 30px 50px 30px;
		}
			#info ul{
				flex-direction: column;
		}
				#info ul li{
					width: 100%;
					margin-bottom: 20px;
					padding-bottom: 0px;
				}
	}
		.info_date{
			text-align: left;
			padding-right: 5px;
		}
		.info_title{
			font-size: 1.1em;
			font-family: toppan-bunkyu-gothic-pr6n, serif;
			font-weight: 600;
			font-style: normal;
			/*border-bottom: 1px dotted #CCC;*/
			padding: 0 0 10px 0;
			margin: 0 0 10px 0;
		}
		@media screen and (max-width:900px) {
			.info_title{
				font-size: 1em;
			}
		}
		.continued{
			padding: 20px 0 0 0;
			text-align: right;
		}
		#info_arcive{
			text-align: center;
			margin-top: 50px;
		}
		@media screen and (max-width:900px) {
			#info_arcive{
				margin-top: 30px;
			}
		}
		#info_arcive a{
			background-color: #222;
			color: #FFF;
			display: inline-block;
			line-height: 60px;
			padding: 0px 30px;
			text-decoration: none;
		}

/*********************************
* Topics
*********************************/
	#topics{
		background-color: #FFF;
		padding: 0px 50px 30px 0;
		/*border-bottom: 1px solid #E8E8E8;*/
	}
		#topics ul{
			display: flex;
			flex-wrap:nowrap;
			list-style-type: none;
			justify-content: space-around;
			align-items: flex-start;
		}
			#topics li{
				background-color: #FFF;
				width: 50%;
				padding: 15px;
				transform: translateY(100px);
				opacity: 0; 
				border: 0px solid #E1E5E8;
			}
				#topics li:nth-of-type(1).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0s 1 both;
				}    
				#topics li:nth-of-type(2).show{
					transform: translateY(100px);
					animation: fadeInV 0.8s ease 0.2s 1 both;
				}   
			iframe{
				width: 100%;
			}
			#topics li:nth-child(2){
				margin-top: 100px;
			}
			p.btn_playmovie{
				text-align: right;
				margin: 20px 0 0 0;
			}
			p.btn_playmovie a{
				background-color: #222;
				color: #FFF;
				padding: 0 30px;
				line-height: 60px;
				display: inline-block;
				text-decoration: none;
			}
			p.youtube{
				margin: 20px 0 0 0;
			}
	@media screen and (max-width:900px) {
		#topics{
			padding: 0px 20px;
		}
			#topics ul{
				flex-direction: column;
			}            
				#topics li{
					width: 100%;
					padding: 10px;
				}
				#topics li:nth-child(2){
					margin-top: 20px;
				}
	}  

/*********************************
* Instagram
*********************************/
	#instagram{
		background-color: #FFF;
		margin: 0 0 100px 0;
		overflow-x: auto;
		width: 100%;
	}
		#instagram ul{
			display: flex;
			flex-wrap:nowrap;
			list-style-type: none;
			margin: 0 auto;
			width: 1050px;
		}
			#instagram ul li{
				min-width: 210px;
			}
	#instagram img{
		width: 200px;
		height: 250px;
	}