/* CSS Document */


main #fv {
	background: #E8CA43 url("../img/fv_bg.svg") no-repeat center 20px;
	background-size: 1300px;
	border-top: 10px solid #D3A012;
	padding: 40px 20px 30px;
	position: relative;
}


#fv h1 {
	max-width: 680px;
	margin: auto;
}
#fv .flex {
	max-width: 1200px;
	margin: 10px auto 12px;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 3%;
}
#fv .flex img:nth-of-type(1) { width: 50%;}
#fv .flex .fvbn {
	width: 46%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fv .flex .fvbn img { width: 100%;}


#fv .flex2 {
	max-width: 1200px;
	margin: 40px auto 12px;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 2%;
	position: relative;
}
#fv .flex2::before {
	content: url("../img/fv_img1.svg");
	width: 21%;
	position: absolute;
	bottom: 10%;
	left: -20px;
}
#fv .flex2::after {
	content: url("../img/fv_img2.svg");
	width: 18%;
	position: absolute;
	bottom: 0;
	right: 0;
}




/*#fv .slider {
  opacity: 0;
  transition: opacity .25s ease;
  height: 70vh;
  min-height: 400px;
}
#fv .slider.slick-initialized { opacity: 1;}
#fv .slider { margin: 30px 0 3px;}
#fv .slick-dots { bottom: 15px;}
#fv .slick-prev,
#fv .slick-next { z-index: 1; height: auto;}
#fv .slick-prev { left: 25px;}
#fv .slick-next { right: 25px;}
#fv .slick-prev::before,
#fv .slick-next::before { content: url("/module/img/arrow.svg"); display: block;}
#fv .slick-prev::before { transform: scaleX(-1);}

#fv .sliderNav { opacity: 0; transition: opacity .25s ease; height: 0;}
#fv .sliderNav.slick-initialized { opacity: 1; height: auto;}
#fv .sliderNav .slick-track::before,
#fv .sliderNav .slick-track::after { content: none;}
#fv .sliderNav .slick-slide { cursor: pointer; filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity: .8;
	width: 33.3% !important;
	padding: 3px;
	box-sizing: border-box;
}
#fv .sliderNav .slick-slide:hover,
#fv .sliderNav .slick-slide.slick-current {	filter: none;	opacity: 1;}
#fv .sliderNav .slick-slide img {	border-radius: 5px;}*/


#role {
	padding: 120px 0;
}
#role h2 {
  font-family: 'SenobiGothicBold';
  font-size: 460%;
  line-height: 1em;
  letter-spacing: 0;
	color: #E8CA43;
	text-align: center;
}
#role ul.step {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 40px 20px;
}
#role ul.step li {
	width: 200px;
}
#role .lead {
	font-weight: 500;
	max-width: 850px;
	margin: 40px auto;
}
#role dl {
	max-width: 850px;
	margin: 40px auto;
	border: 5px solid #E8CA43;
	border-radius: 10px;
	padding: 15px 40px;
	box-sizing: border-box;
}
#role dl dt {
	font-size: 140%;
	font-weight: 600;
	color: #E8CA43;
	margin: 20px 0 5px;
}
#role dl dd {
	line-height: 1.6em;
	margin: 5px 0 20px;
}




#start {
	background: #F4FAEC;
	padding: 80px 0;
}
#start h2 {
  font-family: 'SenobiGothicBold';
  font-size: 460%;
  line-height: 1em;
  letter-spacing: 0;
	color: #618433;
	text-align: center;
}
#start .lead {
	max-width: 920px;
	margin: 40px auto;
}
#start .lead strong {
	color: #FF8B04;
}
#start ul.step {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 40px 20px;
}
#start ul.step li {
	width: 200px;
}
#start .box {
	max-width: 920px;
	margin: 40px auto;
}
#start article {
	margin: 80px 0;
}
#start h3 {
	font-size: 140%;
	font-weight: 500;
	line-height: 1.4em;
	letter-spacing: 3px;
	text-align: center;
	color: #fff;
	background: #8CC63F;
	border-radius: 3px;
	padding: 10px;
	margin: 30px 0;
}
#start table th, #start table td {	border: 1px solid #D3E9B5;}
#start table th { color: #8cc63f;	background: #E8F4D9;}
#start table td strong { color: #FF8B04;}
#start table td ul li:not(:last-of-type) { margin: 0 0 15px;}




#movie {
	background: #E8CA43;
	padding: 80px 0;
}
#movie h2 {
	font-family: 'SenobiGothicBold';
	font-size: 480%;
  line-height: 1em;
	letter-spacing: 0;
  color: #fff;
  text-align: center;
}
#movie .block {
	font-weight: 500;
	margin: 40px 0 0;
	background: #fff;
	border-radius: 15px;
	padding: 40px 50px;
}
#movie .block h3 {
	font-size: 180%;
	color: #E8CA43;
	text-align: center;
	margin: 0 0 30px;
}
#movie .block .youtubeBlock {
	border-radius: 15px;
	overflow: hidden;
}

#news {
	padding: 140px 20px 80px;
}
#news h2 {
	font-family: 'SenobiGothicBold';
	font-size: 340%;
	line-height: 1em;
	letter-spacing: 0;
	text-decoration: underline wavy #E8CA43;
	color: #E8CA43;
	text-align: center;
	margin: 0 0 60px;
}
#news dl {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 30px 0;
	border: 1px solid #ccc;
	border-radius: 15px;
	padding: 20px;
	background: #fff;
}
#news dl dt {
	aspect-ratio: 1/1;
	width: 280px;
	height: 280px;
	border-radius: 10px;
	overflow: hidden;
}
#news dl dt img {
  object-fit: cover;
  height: 100%;
}
#news dl dd {
	max-width: 650px;
	min-width: calc(100% - 310px);
}
#news dl dd time {
	font-size: 120%;
	font-weight: 600;
	display: block;
	margin: 10px 0;
}
#news dl dd h3 {
	font-size: 170%;
	font-weight: 600;
	margin: 10px 0 15px;
}
#news dl dd .btn a {
	font-size: 120%;
	font-weight: 500;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #E8CA43;
	padding: 8px 40px;
	border-radius: 5px;
	margin: 25px 0 10px;
}




@media screen and (max-width: 480px) {
  
	#fv .flex {
		flex-direction: column-reverse;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0;
	}
	#fv .flex img:nth-of-type(1){ width: auto;}
	#fv .flex .fvbn {
		width: 95%;
	}
	
	
	#role {
		padding: 40px 20px;
	}
	#role h2 {
		font-size: 240%;
	}
	#role ul.step {
		gap: 5px;
		margin: 20px 0px;
	}
	#role .lead {
		margin: 20px auto;
	}
	#role dl {
		border: 3px solid #E8CA43;
		padding: 10px 15px;
	}
	#role dl dt {
		font-size: 125%;
		margin: 10px 0 2px;
	}
	#role dl dd {
		margin: 2px 0 15px;
	}
	
	
	#start {
		padding: 40px 20px;
	}
	#start h2 {
		font-size: 230%;
		letter-spacing: -5px;
	}
	#start .lead {
		margin: 20px auto;
	}
	#start ul.step {
		gap: 2px;
		margin: 20px 0px;
	}
	#start .box {
		margin: 20px auto;
		line-height: 1.4em;
		font-size: 90%;
	}
	#start .box li {
		margin: 10px 0;
	}
	#start article {
		margin: 40px 0;
	}
	#start h3 {
		font-size: 120%;
		margin: 10px 0;
	}
	#start table {
		font-size: 95%;
	}
	#start table th {
		width: 80px;
		padding: 5px;
	}
	
	
	
	#movie {
		padding: 40px 20px;
	}
	#movie h2 {
		font-size: 210%;
	}
	#movie .block {
		border-radius: 10px;
		padding: 20px 15px;
		margin: 20px 0 0;
	}
	#movie .block h3 {
		font-size: 140%;
		margin: 0 0 15px;
	}

	
	#news {
		padding: 80px 20px 40px;
	}
	#news h2 {
		font-size: 180%;
		margin: 0 0 30px;
	}
	/*#news dl {
		flex-direction: column;
		padding: 30px;
		border-radius: 10px;
	}
	#news dl dt {
		width: auto;
		height: auto;
		margin: auto;
	}
	#news dl dd time {
		font-size: 110%;
		margin: 10px 0 0;
	}
	#news dl dd h3 {
		font-size: 130%;
		margin: 5px 0 10px;
	}
	#news dl dd .btn {
		text-align: center;
	}*/
	
	#news dl {
		flex-direction: row;
		margin: 15px 0;
		padding: 10px;
		border-radius: 5px;
	}
	#news dl dt {
		width: 100px;
		height: auto;
		border-radius: 5px;
		margin: 0;
	}
	#news dl dd {
		width: calc(100% - 115px);
	}	
	#news dl dd time {
		font-size: 90%;
		font-weight: 500;
		line-height: 1.4em;
		margin: 0;
	}	
	#news dl dd h3 {
		font-size: 100%;
		line-height: 1.3em;
		margin: 0;
	}	
	#news dl dd .lead {
		display: none;
	}
	#news dl dd .btn {
		text-align: left;
	}
	#news dl dd .btn a {
		font-size: 90%;
		padding: 1px 10px;
		margin: 5px 0 0;
	}
	

	
	
	
}