@charset "UTF-8";
#hometop {position: relative; padding: 20px 0 0 0; background-size: auto;}

#works { padding: 20px;}
	#works .inner { max-width:1200px;}
	#works h2 { padding: 10px 0;}
	#works h3 { padding: 10px 0; font-weight: normal; font-size: 16px; display: block;  margin: 0 auto; width: 100%; max-width: 820px;}
	#works p { padding: 10px 0; font-size: 16px;}
		#works p a { display: block; width: 260px; margin: 0 auto; border-radius: 40px; padding: 16px 0; text-align: center; text-decoration: none; color:#FFF; background:#FBB03B;}
		#works p a:hover { color:#FBB03B; background:#FFFCD9;}

#products { padding: 20px;}
	#products .inner { max-width:1200px;}
	#products h2 { padding: 10px 0; font-size: 22px; color:#FEDA5A;}
		#products h2::before { content:"Products"; display: block; text-align: center; font-size: 36px; color: #534741;}
	#products ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
		#products li { padding: 20px 0; display: block; justify-content:center; align-items: flex-end;}
			#products li a { display: block; text-align: center;}
			#products li a::after { display: inline-block; content: url("../images/p-arrow.svg"); padding-top: 15px;}
			#products li a:hover::after { content: url("../images/p-arrow-bg.svg");}
	#products p { padding: 10px 0; font-size: 16px;}
		#products p a { display: block; width: 260px; margin: 0 auto; border-radius: 40px; padding: 16px 0; text-align: center; text-decoration: none; color:#FFF; background:#FBB03B;}
		#products p a:hover { color:#F7931E; background:#FEDA5A;}


#topics { padding: 20px;}
	#topics .inner { max-width:1200px; display: flex; flex-wrap: wrap; align-items: center;}
	#topicsinfo { margin: 20px 0;}
		#topicsinfoinner { width: 100%; padding-top:100%; position: relative;}
			#topicsinfodata { width: 100%; height: 100%; background:#FFFCD9; border-radius: 300px; display: flex; justify-content:center; align-items: center; position: absolute; left: 0; top: 0;}
			#topicsinfo h2 { padding: 10px 0; font-size: 22px; color:#FEDA5A;}
				#topicsinfo h2::before { content:"Topics"; display: block; text-align: center; font-size: 36px; color: #534741;}
			#topicsinfo p { padding: 10px 0; font-size: 16px; color:#F7931E;}
	#topicstw {padding: 20px 0; max-width: 480px;}
		#topicstw iframe { margin: 0 auto;}


#aboutus { padding: 20px;}
	#aboutus .inner { max-width:1200px; display: flex; flex-wrap: wrap; align-items: center;}
	#aboutusinfo { margin: 20px 0;}
		#aboutusinfoinner { width: 100%; padding-top:100%; position: relative;}
		#aboutusinfodata { width: 100%; height: 100%; background:#FFEC86; border-radius: 300px; display: flex; justify-content:center; align-items: center; position: absolute; left: 0; top: 0;}
			#aboutusinfo h2 { padding: 10px 0; font-size: 22px; color:#FBB03B; margin-bottom: 10px;}
				#aboutusinfo h2::before { content:"About Us"; display: block; text-align: center; font-size: 36px; color: #534741;}
			#aboutusinfo p { padding: 10px 0; font-size: 16px;}
				#aboutusinfo p a { display: block; width: 180px; margin: 0 auto; border-radius: 40px; padding: 16px 0; text-align: center; text-decoration: none; color:#FFF; background:#FBB03B;}
				#aboutusinfo p a:hover { color:#F7931E; background:#FEDA5A;}
	#aboutusphoto { text-align: center; padding: 20px 0;}


#recruit { padding: 20px;}
	#recruit .inner { max-width:1200px; display: flex; flex-wrap: wrap; align-items: center;}
	#recruitinfo { margin: 20px 0;}
		#recruitinfoinner { width: 100%; padding-top:100%; position: relative;}
			#recruitinfodata { width: 100%; height: 100%; background:#FFFCD9; border-radius: 300px; display: flex; justify-content:center; align-items: center; position: absolute; left: 0; top: 0;}
			#recruitinfo h2 { padding: 10px 0; font-size: 22px; color:#FEDA5A;}
				#recruitinfo h2::before { content:"Recruit"; display: block; text-align: center; font-size: 36px; color: #534741;}
			#recruitinfo p { padding: 10px 0; font-size: 16px;}
				#recruitinfo p a { display: block; width: 180px; margin: 0 auto; border-radius: 40px; padding: 16px 0; text-align: center; text-decoration: none; color:#FFF; background:#FBB03B;}
				#recruitinfo p a:hover { color:#F7931E; background:#FEDA5A;}
	#recruitphoto { text-align: center; padding: 20px 0;}



@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop p img{	height: 200px; object-fit: cover;}	
		#hometop::after { position: absolute; bottom: -1px; left: 0;	width: 100%; height: 12px; background-image: url(../images/title-bg.png); background-position: 0 0; background-repeat: repeat-x; background-size: contain; content: '';}
	#works h2 { font-size: 24px;}
	#works h3 { text-align: left;}
	#products li { width:calc(50% - 15px);}
	#topics .inner { justify-content: center;}
		#topicsinfo { width:80%; }
		#topicstw { width:100%;}
	#aboutus .inner { justify-content: center;}
		#aboutusinfo { width:80%; }
		#aboutusphoto { width:100%;}
	#recruit .inner { justify-content: center;}
		#recruitinfo { width:80%;}
		#recruitphoto { width:100%;}

}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#hometop p img { height: 350px;}
		#hometop::after { height: 20px;}
	#works h2 { font-size: 38px;}
	#products li { width:calc(33.3% - 20px);}
		#products ul::after { display: block; content:""; width:calc(33.3% - 20px); height: 0; overflow: hidden;}
	#topics .inner { justify-content: space-between;}
		#topicsinfo { width:48%;}
		#topicstw { width:50%;}
	#aboutus .inner { justify-content: space-between;}
		#aboutusinfo { width:48%; order: +1;}
		#aboutusphoto { width:50%;}
	#recruit .inner { justify-content: space-between;}
		#recruitinfo { width:48%;}
		#recruitphoto { width:50%;}
	
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#works h2 { font-size: 42px;}
	#works h3 { text-align: center;}
	#products li { width:calc(25% - 20px);}
	#topicsinfo { width:37.5%;}
	#topicstw { width:58%; margin-right: 40px;}
	#aboutusinfo {  width:37.5%;}
	#aboutusphoto { width:58%;}
	#recruitinfo { width:37.5%;}
	#recruitphoto { width:58%;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#hometop p img { height: 582px;}
		#hometop::after { height: 39px; background-size: contain;}
}

@media all and (min-width:1830px) {
	/* 1300px+ settings */
		#hometop::after { height: 56px;}
}