@charset "utf-8";
/* CSS Document */
@media all{
	
/* ファーストビュー */
	#firstimage{
		width: 100%;
		height:24vw;
	}
	#firstimage .text{
		position: absolute;
		width: 100%;
		top: 12vw;
		left: 0;
		transform: translateY(10%);
		-webkit-transform: translateY(10%);
		-ms-transform: translateY(10%);
		color: #fff;
		text-align: center;
		letter-spacing: .1em;
	}
	#firstimage .fvimage{
		width: 100%;
		height: 100%;
	}
	
/* benefits */
	#benefits{
		padding: 100px 0;
	}
	#benefits .image{
		width: calc(100% - 40px);
		max-width: 600px;
		margin: 0 auto;
	}
	
/* フェア */
	#fair{
		padding: 0 0 60px;
	}
	.fairbox{
		width: calc(100% - 40px);
		max-width: 980px;
		margin: 0 auto 40px;
		padding: 15px;
		display: flex;
		border: solid 1px #aaa;
	}
	.fairbox .image{
		width: 50%;
	}
	.fairbox .text{
		width: 50%;
		padding: 0 40px 0;
		text-align: center;
	}
	.fairbox .text .price{
		font-size: 1.6rem;
		margin-bottom: 1em;
	}
	.fairbox .text .title{
		width: 100%;
		font-size: 2.6rem;
		padding: 0.5em 0;
		border: solid #000;
		border-width: 1px 0 1px 0;
	}
	.fairbox .text .date{
		font-size: 2.2rem;
		padding: 0.5em 0 1em;
	}
	
}

@media screen and (max-width: 567px){

/* ファーストビュー */
	#firstimage{
	height: 47vw;
}
	#firstimage .fvimage img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#firstimage .text{
		top: 23.5vw;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
	#firstimage .text h2{
		font-size: 2rem;
	}
	
/* benefits */
	#benefits{
		padding: 50px 0;
	}
	
/* フェア */
	#fair{
		padding: 0 0 20px;
	}
	.fairbox{
		margin: 0 auto 20px;
		flex-direction: column;
	}
	.fairbox .image{
		width: 100%;
	}
	.fairbox .text{
		width: 100%;
		padding: 20px 0 10px;
	}
	.fairbox .text .price{
		font-size: 1rem;
	}
	.fairbox .text .title{
		font-size: 1.8rem;
	}
	.fairbox .text .date{
		font-size: 1.4rem;
	}	
	
}

@media screen and (min-width: 568px) and (max-width: 1024px){

	#firstimage .text h2{
		font-size: 2.5rem;
	}
	
/* フェア */
	.fairbox .text{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
}

@media screen and (min-width: 1025px), print{

	#firstimage .text h2{
		font-size: 3rem;
	}
	
/* フェア */
	.fairbox .text{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
}