@charset "utf-8";

body {
	margin: 0;
	font-family: sans-serif;
}
.container {
	margin: 0 auto 0 auto;
	max-width: 1000px;
	padding: 0 10px;
}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

  a{
    color: #fff;
    text-decoration: none;
    padding: 1px 3px 3px;
	 background-color: #008db7;
  }
  a:visited{
    color: #fff;
	 background-color: #666;
  }
  a:hover{
    color: #FFFFFF;
    background-color: #ff6347;
  }

/* 
各パートにパディング、背景、テキスト色などを指定する
<div class="container">の子要素に指定する
*/
.header-inner {
	padding: 10px;
	background: #4496d3;
}
main {
	padding: 30px;
}

.footer-inner {
	padding: 10px;
	background: #4496d3;
	color: #fff;
	text-align: center;
}




@media only screen and (min-width: 768px) {
	.container {
		padding: 0 20px;
	}
	main {
		padding: 20px 30px;
		background: #fff;
	}


}


h1 {
color: #fff;
margin-left: 20px;
}

h2 {
padding-bottom: .5em;
border-bottom: 1px solid #b22222;
color: #b22222;
font-size: 120%;
}

.brown {
	font-weight: bold;
	color: #663300;
}

.pink {
	font-weight: bold;
	color: #cc3399;
    font-size: 140%;
}

.sakuhin3{
	color: #90ee90;
}


.tableSample {
width: 100%;
border-collapse: collapse;
}

.tableSample th,td {
padding: 30px 15px;
border: 1px solid #ddd;
}

.tableSample th {
background: #f4f4f4;
width: 15%;
text-align: left;
}

@media only screen and (max-width:479px) {
.tableSample th,td {
width: auto;
display: block;
border-top: none;
}
.tableSample tr:first-child {
border-top: 1px solid #d5d5d5;
}
}


.sakuhin1 {
	color: #0099cc;
}

.sakuhin2 {
	color: #cc3366;
}

.sakuhin3 {
	color: #009900;
}

.sakuhin4 {
	color: #ff9900;
}

.sakuhin5 {
	color: #9900cc;
}

.sakuhin6 {
	color: #ff0000;
}
.sakuhin7 {
	color: #b8860b;
}

.sakuhin8 {
	color:aqua;
}

.sakuhin9 {
	color:blueviolet;
}

.sakuhin10 {
	color:chartreuse;
}