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


p,a,span,h1,h2,h3,h4,h5,h6{
	font-size:13px;
	line-height:1.6;
}
li{
	list-style:none;
}
a{
	text-decoration:none;
}

a:link{
	color: #336;
}

a:hover{
	opacity:0.6;
}

img {
	max-width: 100%;
	height: auto;
}

/* PC用 */
body{
	background-color: #fff;
	width:100%;
	height:100%;
	background-image:url(../img/back.jpg);
	background-size:cover;
	background-attachment:fixed;
}

header {
  background: #333 none repeat scroll 0 0;
  height: 50px;
  margin: 0 0 20px;
  width: 100%;
}
header h1 {
  color: #fff;
  font-size: 28px;
  line-height: 50px;
  text-align: center;
}

#top{
	width:1020px;
	margin:0 auto 20px;	
}

#content{
	width:1020px;
	margin:0 auto 20px;	
}

#main {
  background: none repeat scroll 0 0;
  float: left;
  width: 580px;
  margin-bottom:50px ;
}

/* サイドバー */
#sidebar {
  float: left;
  width: 420px;
  height: 600px;
  margin-right: 20px;
}
#sidebar > p {
  margin: auto;
}


/* タブ部分 */
ul#tab {
  text-align: center;
  margin: 0 0 20px;
}
#tab li {
  display: inline-block;
}
#tab li a {
  background: skyblue none repeat scroll 0 0;
  border-radius: 20px;
  color: #336;
  font-size: 15px;
  height: 15px;
  line-height: 15px;
  margin: 0 5px 0 0;
  padding: 10px 15px;
  display: block;
}
#tab li a.selected {
  background: mediumaquamarine none repeat scroll 0 0 !important;
}

/* パネル部分 */
#panel {
  height: 600px;
  margin: 0 0 20px;
  padding: 20px;
}

#panel h2 {
	font-size: 24px;
	margin-left: 30px;
}

#panel p {
	font-size:20px;
	margin-left: 30px;
	margin-right: 30px;
	line-height: 30px;
}

#panel a {
	font-size: 18px;
}

#member {
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	float: left;
}

#member h2 {
	font-size: 20px;
	margin: auto;
}

#member p {
	font-size: 16px;
	margin: auto;
	line-height: 18px;
}

#member img {
	margin-left: auto;
	margin-right: auto;
}

/* フッター部分 */
footer {
  background: #fee none;
  padding-top:5px ;
  clear: both;
  height: 100px;
  width: 100%;
}
footer p {
  line-height:20px;
  text-align: center;
}

/* フレーム部分 */
#sample {
	max-width: 600px;
	margin: 10px;
	float: left;
}

#sample p {
	font-size: 18px;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 24px;
}

#sample h2 {
	font-size: 20px;
	margin-left: 10px;
	margin-top: 10px;
}

/* スマホ用 */
@media only screen and (max-width: 640px){

body{
	background-color: #fff;
	width:100%;
	height:100%;
}

header {
  background: #333 none repeat scroll 0 0;
  height: 50px;
  margin: 0 0 5%;
  width: 100%;
}

header h1 {
  color: #fff;
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}

ul#tab {
  margin: 0 0 5%;
  text-align: center;
}

#top{
  margin: 0 auto 5%;
  width: 100%;
}

#content {
  margin: 0 auto 5%;
  width: 100%;
}

#main {
  background: none repeat scroll 0 0;
  float: none;
  margin: 0 5% 5%;
  width: 90%;
}

#sidebar {
  float: none;
  margin: 0 5% 5%;
  width: 90%;
}

/* パネル部分 */
#panel {
  height: 600px;
  margin: 0 0 20px;
  padding: 20px;
}

#panel h2 {
	font-size: 18px;
	margin-left: 20px;
}

#panel p {
	font-size:14px;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 20px;
}

#panel a {
	font-size: 12px;
}

#member {
	width: 160px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	float: left;
}

#member h2 {
	font-size: 14px;
	margin: auto;
}

#member p {
	font-size: 12px;
	margin: auto;
	line-height: 18px;
}

#member img {
	margin-left: auto;
	margin-right: auto;
}

}