@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 481px){
.mainmessage{
	width:1024px;
	height:325px;
	background-color:#D9A300;
	color:#FFF;
	background-image:url(../img/forsilver/mainimg.jpg);
	background-position: top right;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
.mainmessage h2{
	width:465px;
	text-align: center;
	font-size:3.1rem;
	padding-top:30px;
	margin-top:0;
	margin-bottom:0;
}
.mainmessage p{
	margin-top:10px;
	font-size:1.8rem;
	line-height:1.5em;
	width:465px;
	box-sizing: border-box;
	padding:1em;
}
.imgphoto{
	float:right;
	width:370px;
}
.imgphoto img{
	width:100%;
	height:auto;
}
.infotext{
	width:600px;
	float:left;
	line-height:1.5em;
}
h2{
	margin-top:80px;
	font-size:2.8rem;
	margin-bottom:30px;
}
.sample{
	width:100%;
	box-sizing: border-box;
	padding:1em;
	border-radius:0.5em;
	background-color:#FFF;
	border:1px solid #F4F4F4;
	margin-top:2em;
}
.sample h3{
	text-align: center;
	font-size:1.8rem;
}
.sample ul{
	display:flex;
	justify-content: space-around;
	padding-top:1em;
}
.sample ul li{
	width:80px;
	padding-top:80px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	text-align: center;
}
.manufacture{
	background-image: url(../img/forsilver/manufacture.jpg);	
}
.food{
	background-image: url(../img/forsilver/food.jpg);
}
.cleaning{
	background-image: url(../img/forsilver/cleaning.jpg);
}
.factory{
	background-image: url(../img/forsilver/factory.jpg);
}
.cooking{
	background-image: url(../img/forsilver/cooking.jpg);
}
.flow{
	margin-top:1em;
}
.flow ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flow ul li.step1{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step1.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #FF8000;
	background-color:#FF8000;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.flow ul li.step2{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step2.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #D15AFF;
	background-color:#D15AFF;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.flow ul li.step3{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step3.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #0000B2;
	background-color:#0000B2;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.flow ul li.step4{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step4.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #00AF00;
	background-color:#00AF00;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.listbutton{
display:block;
margin:50px; auto;
font-size:2.8rem;
color:#FFF;
background-color:red;
padding:0.5em 2em;
border-radius:1.5em;
width:auto;
text-align:center;
}
}
@media screen and (max-width: 480px){
.mainmessage{
	width:100%;
	background-color:#D9A300;
	color:#FFF;
}
.mainmessage h2{
	width:100%;
	text-align: center;
	font-size:2.2rem;
	padding:20px 5px 0 5px;
	margin:0;
}
.mainmessage p{
	font-size:1.4rem;
	line-height:1.5em;
	box-sizing: border-box;
	padding:1em;
}
.imgphoto{
	width:100%;
}
.imgphoto img{
	width:100%;
	height:auto;
}
.infotext{
	width:100%;
	box-sizing:border-box;
	padding:5px;
}
h2{
	font-size:3.1rem;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	font-weight:bold;
	text-align: center;
	margin-top:30px;
	margin-bottom:20px;
}
.sample{
	width:100%;
	box-sizing: border-box;
	padding:1em;
	border-radius:0.5em;
	background-color:#FFF;
	border:1px solid #F4F4F4;
	margin-top:2em;
}
.sample h3{
	text-align: center;
	font-size:1.8rem;
}
.sample ul{
	display:flex;
	flex-wrap: wrap;
	padding-top:1em;
	width:100%;
}
.sample ul li{
	width:30%;
	padding-top:100px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	text-align: center;
	color:FFF;
	margin-right:5px;
}
.manufacture{
	background-image: url(../img/forsilver/manufacture.jpg);	
}
.food{
	background-image: url(../img/forsilver/food.jpg);
}
.cleaning{
	background-image: url(../img/forsilver/cleaning.jpg);
}
.factory{
	background-image: url(../img/forsilver/factory.jpg);
}
.cooking{
	background-image: url(../img/forsilver/cooking.jpg);
}
.flow{
	margin-top:1em;
}
.flow ul{
	display: block;
}
.flow ul li.step1{
	display:block;
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step1.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #FF8000;
	background-color:#FF8000;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
	.flow ul li{
		
	margin:5px auto;
	}
	.flow ul li img{
		display: none;
	}
.flow ul li.step2{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step2.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #D15AFF;
	background-color:#D15AFF;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.flow ul li.step3{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step3.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #0000B2;
	background-color:#0000B2;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.flow ul li.step4{
	width:230px;
	padding-top:158px;
	background-image:url(../img/forsilver/step4.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #00AF00;
	background-color:#00AF00;
	color:#FFF;
	text-align: center;
	font-size:2.2rem;
}
.listbutton{
display:block;
margin:50px; auto;
font-size:2.8rem;
color:#FFF;
background-color:red;
padding:0.5em 2em;
border-radius:1.5em;
width:auto;
text-align:center;
}
}