@charset "UTF-8";

#hometop { display: flex; justify-content: center; align-items: center; width: 100%; background: url("images/hometop.jpg") center center / cover no-repeat; z-index: 0;}

.art { width: 100%; padding:20px 20px;}
	.art .inner { width: 100%; max-width: 960px; margin: 0 auto;}
		.art h2 { font-size: 24px; text-align: center; padding:30px 0 10px 0;}
		.art p { padding: 10px 0;}
		.art ul { display: flex; justify-content: space-between; flex-wrap: wrap; padding:30px 0;}
		.art li { padding: 10px 0; text-align: left; font-size: 14px;}
			.art li img { padding-bottom: 4px;}

.introbgsp { text-align: center !important; display:block;}


/* 320 + settings */
@media all and (min-width:320px){
	#hometop { height: 100vw;}
		#hometop h1 img { height: 66vw; width: auto; margin-top: 18vw;}
	.art p { font-size: 16px; text-align: left;}
		.art p br { display: none;}
	.art li { width: 100%;}
	.introbgpc { background: none;}
	.introbgsp { padding:40px 110px 40px 90px !important; background: url("images/intro-bg.png") center / contain no-repeat;}
}

/* 640 + settings */
@media all and (min-width:640px){
	#hometop { height: 72vw;}
		#hometop h1 img { height: 48vw; width: auto; margin-top: 12vw;}
	.art p { font-size: 16px; text-align: center;}
		.art p br { display: inline-block;}
	.art li { width: calc(50% - 10px);}
	.introbgpc { background: url("images/intro-bg.png") center bottom / contain no-repeat;}
	.introbgsp { padding:100px 100px 100px 80px !important;  background: none;}
}

/* 960px+ settings */
@media all and (min-width:960px) {
	.art p { font-size: 18px;}
}

/* 1200 + settings */
@media all and (min-width:1200px){
}

/* print only settings */
@media print{

}