@charset "Shift_JIS";

/* reset */
body{
	margin:0;
	padding:0;
	text-align:center;
	font-size:112.5%;
	line-height:1.6;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo ;
	color:#444444;
	background-color:#000000;
	min-width:300px;
background-image: url(back.jpg);
}

html,body,h1,h2,h3,h4,h5,p,div,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}

img{
	border-top:0;
	border-right:0;
	border-bottom:0;
	border-left:0;
  max-width: 100%; /* bodyの幅に対する割合 */
  height: auto;

  margin:3px;
}

/*--------------------------------------------------------
  layout
--------------------------------------------------------*/

/* hpb-skip */
#hpb-skip{
	display:none;
}

/* hpb-container */
#hpb-container{
	
	position:relative;
	background-position:top;
	background-repeat:repeat-x;
}

/* hpb-header */
#hpb-header{
	min-width:300px;
	margin-left:auto;
	margin-right:auto;
	padding-top:10px;
	padding-left:10px;
	padding-bottom:10px;
	position:relative;
	overflow:hidden;
	zoom:1;
}



/* hpb-inner */
#hpb-inner{
	min-width: 300px;
	margin-left:auto;
	margin-right:auto;
	padding-top:24px;
	padding-bottom:30px;
	position:relative;
	overflow:hidden;
	zoom:1;
}

/* hpb-wrapper */
#hpb-wrapper{
	width:600px;
	padding-top:40px;

}

.hpb-layoutset-02 #hpb-wrapper{
	padding-top:64px;
}

/* hpb-title */
.hpb-layoutset-01 #hpb-title{
	width:1000px;
	height:260px;
	position:relative;
	background-position:top left;
	background-repeat:no-repeat;
}

/* hpb-main */
#hpb-main{
	width:600px;
	padding-left:32px;
	float:left;
}

.hpb-layoutset-02 #hpb-main{
	width:600px;
	padding-top:16px;
}

/* hpb-aside */
#hpb-aside{
	width:192px;
	padding-top:64px;
	float:right;
}

/* hpb-footer */
#hpb-footer{
	min-width:300px;
	margin-left:auto;
	margin-right:auto;
	padding-top:130px;
	padding-bottom:30px;
	padding-left:32px;
	position:relative;
	overflow:hidden;
	zoom:1;
}

/* hpb-nav */
#hpb-nav{
	position:absolute;
	top:0;
	left:32px;
}

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {

	body{
		min-width: 100%;
background-image: url(kabegami.jpg);
background-attachment: fixed;
	}

	/*--------------------------------------------------------
	  layout
	--------------------------------------------------------*/
	/* hpb-header */
	#hpb-header{
		min-width: 100%;
		padding-top:0;
		padding-left:0;
		padding-bottom:0;
	}


	/* hpb-inner */
	#hpb-inner{
		min-width: 100%;
		padding-top:24px;
		padding-bottom:30px;
	}
	/* hpb-wrapper */
	#hpb-wrapper{
		width: 100%;
		padding-top: 0;

	}
	.hpb-layoutset-02 #hpb-wrapper{
		padding-top: 0;
	}
	/* hpb-title */
	.hpb-layoutset-01 #hpb-title{
		width:100%;
		height:260px;
		position:relative;
		background-size: contain;
background-attachment: fixed;
	}
	/* hpb-main */
	#hpb-main{
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-left:0;
		float:none;
		padding-bottom: 20px;
	}
	.hpb-layoutset-02 #hpb-main{
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-top:16px;
	}
	/* hpb-aside */
	#hpb-aside{
		width: 96%;
		margin-left:auto;
		margin-right:auto;
		padding-top:0;
		float:none;
		padding-bottom: 20px;
	}
	/* hpb-footer */
	#hpb-footer{
		min-width:100%;
		padding-top:0;
		padding-bottom:0;
		padding-left:0;
	}
	/* hpb-nav */
	#hpb-nav{
		position:relative;
		top:0;
		left:0;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ddd;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #ddd;
	}



}