@charset "utf-8";

/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/
    body {
	margin: 0 ;
	padding: 0;
	line-height: 150%;
	letter-spacing:normal;
	background:#fff;
	color:#1f1f1f;
	font-size: 16px;
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}


/* Default link styling */
	a {
	text-decoration: none;
	outline: none; /* リンクの点線を消去 */
}
    a:link { color:#007CE6; }
    a:visited { color:#007CE6; }
    a:hover, a:focus { color:#bd02fb; }
    a:active { color:#999; }
    
    
/* フロート解除 */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{
    display: inline-block;
}
/* clearfix for ie7 */
.clearfix {
    display: block;
}



/* ---------------------------------------- 領域別スタイル*/


/* ------ ヘッダー ------ */


header {
	width:100%;
	margin:0;
    padding:0;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
background:url(../img/bg_main.jpg) repeat-x;
}

header h1 {
	width:960px;
	height:540px;
	margin:0 auto;
}
	
/* ------ ネットショップに必要な物を全て揃えました！ ------ */

#contents01 {
	width:100%;
	height:auto;
	margin:0;
	padding:40px 0;
	text-align:center;
	background:#FFCC00;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
}


#contents01 h2 {
	width:960px;
	height:47px;
	margin:0 auto 18px;
}

#contents01 #necessary {
	width:960px;
	height:145px;
	margin:0 auto 40px;
	padding:0 ;
}

#contents01 #necessary ul {
	width:978px;
	height:145px;
	margin:0 -18px 0 0;
	padding:0 ;
}

#contents01 #necessary ul li {
	width:145px;
	height:145px;
	margin:0 18px 0 0;
	padding:0;
	float:left;
	list-style:none;
}


#contents01 #btn_form {
	width:900px;
	height:80px;
	margin:0 auto;
	padding:0 ;
}


/* ------ ナビ ------ */
/**/
nav#first {
	width:100%;
	height:106px;	
	margin:0;
    padding:0;
	background:url(../img/bg_navi.png) repeat-x #eee;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
}

nav#first .inner {
  overflow: hidden;
}

nav#first .inner ul {
	width:960px;
  height:100px;
	margin:0 auto;
	padding:0;
}

nav#first .inner ul li {
	margin:0;
	float:left;
	list-style:none;
}

/**/
nav#change {
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
  z-index: 9999;
	width:100%;
	height:106px;
	margin:0;
    padding:0;
	background:url(../img/bg_navi.png) repeat-x;
}

nav#change .inner {
  overflow: hidden;
}


nav#change .inner ul {
  width:960px;
  height:100px;
	margin:0 auto;
	padding:0;
}

nav#change .inner ul li {
	margin:0;
	float:left;
	list-style:none;
}

/*#contentより下にスクロールするとnav#changeに変わる*/

#content {
	margin:0 auto;
}

#content .inner {
  position: relative;
}

.inner {
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
margin:0 auto;
}


/*********************************/
/* HATのEC-CUBEホスティングサービスとは */
/*********************************/
#contents02 {
	margin:0 auto;
	padding:50px 0 40px;
	width: 100%;
	text-align:center;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
	background: #eee;
}


/* タイトル */
#contents02 h2 {
	width:960px;
	height:47px;
	margin:0 auto 40px;
}

#arrow_gray {
	width:168px;
	height:40px;
	margin:0 auto 40px;
}


/*********************************/
/* ここが違う */
/*********************************/

.ttl_pickup {
	width:960px;
	height:50px;
	margin:0 auto 40px;
}

/*********************************/
/* 5つの特長 */
/*********************************/
#point {
	margin:0 auto 40px;
	padding: 0;
	width: 100%;
	text-align:center;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
}


/* タイトル */
#point h2 {
	width:960px;
	height:100px;
	margin:0 auto;
	padding: 0;
	*position: relative;/*IE7*/
}

#point_list {
	margin:-50px auto 0;
	padding: 0;
	width: 100%;
	text-align:center;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
	background:#FFCC00;	
}

#point #point_list ul {
	width:960px;
	margin:0 auto;
	padding:90px 0 0;
}

#point #point_list ul li {
	width:960px;
	margin:0 auto 40px;
	padding:0;
	list-style:none;
}


/*********************************/
/* 3つのメリット */
/*********************************/
#merit {
	margin:0 auto 40px;
	padding: 0;
	width: 100%;
	text-align:center;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
}


/* タイトル */
#merit h2 {
	width:960px;
	height:100px;
	margin:0 auto;
	padding: 0;
	*position: relative;/*IE7*/
}

#merit_list {
	margin:-50px auto 0;
	padding: 0;
	width: 100%;
	text-align:center;
	min-width:960px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
	background:#FFCC00;	
}

#merit #merit_list ul {
	width:960px;
	margin:0 auto;
	padding:90px 0 0;
}

#merit #merit_list ul li {
	width:960px;
	margin:0 auto 40px;
	padding:0;
	list-style:none;
}




/*********************************/
/* ご利用料金 */
/*********************************/

#price {
	margin:0 auto 40px;
	padding:40px 0 0;
	width: 960px;
}


/* タイトル */
#price h2 {
	width:600px;
	height:50px;
	margin:0 auto 40px;
	padding: 0;
}

#price table{
	width:100%;
	height:auto;
	margin:0 0 40px;
	font-size:15px;
}

#price th{
	padding:10px 20px;
	text-align:left;
	vertical-align:middle;
	background:#FDE9D9;
	border:solid 1px #7a7a7a;
	font-weight:normal;
}

#price td {
	text-align:left;
	border:solid 1px #7a7a7a;
	padding:10px 20px;
	font-weight:normal;
}

#price td span {
	font-weight:bold;
	font-size:20px;
	color: #E4465A;
}



/*********************************/
/* サーバー仕様 */
/*********************************/


#spec {
	margin:0 auto 40px;
	padding:40px 0 0;
	width: 960px;
}


/* タイトル */
#spec h2 {
	width:600px;
	height:50px;
	margin:0 auto 40px;
	padding: 0;
}

#spec h3 {
	margin:0 0 20px;
	padding:0 10px;
	height:40px;
	line-height:40px;
	font-size:18px;
	background:#4A526C;
	color:#fff;
}

#spec table{
	width:100%;
	height:auto;
	margin:0 0 40px;
	font-size:15px;
}

#spec th{
	padding:10px 20px;
	text-align:center;
	vertical-align:middle;
	background:#B8CCE4;
	border:solid 1px #7a7a7a;
	font-weight:normal;
}

#spec td {
	text-align:left;
	border:solid 1px #7a7a7a;
	padding:10px 20px;
	font-weight:normal;
}




/*********************************/
/* お申し込みフォーム */
/*********************************/

#inquiry {
	margin:0 auto 40px;
	padding:40px 0 0;
	width: 960px;
}


/* タイトル */
#inquiry h2 {
	width:600px;
	height:50px;
	margin:0 auto 40px;
	padding: 0;
}

#inquiry h3 {
	margin:0 0 20px;
	padding:0 10px;
	height:40px;
	line-height:40px;
	font-size:18px;
	background:#4A526C;
	color:#fff;
}

#inquiry table{
	width:100%;
	height:auto;
	line-height:250%;
	margin:0 0 40px;
	font-size:15px;
}

#inquiry th{
	width:20%;
	padding:10px 20px;
	text-align:left;
	vertical-align:middle;
	background:#B8CCE4;
	border:solid 1px #7a7a7a;
	font-weight:normal;
}

#inquiry td {
	text-align:left;
	border:solid 1px #7a7a7a;
	padding:10px 20px;
	font-weight:normal;
}

.attention {
	color:#E4465A;
}

.mini{
	font-size:12px;
}

/******エラーメッセージ********/  
#_error_area_ {
	width:100%;
	box-sizing:border-box;
	border: 2px solid #E4465A;
	margin:0 auto 20px;
	font-size:15px;
}

#err_msg_item {
	background-color: #E4465A;
	color: #fff;
	margin: 3px;
	line-height: 200%;
	text-align:center;
}

#err_msg_contents {
	color: #E4465A;
	padding: 5px;
}

.err {
	color:#E4465A;
	display:inline;
	margin:0 0 0 10px;
	font-size:12px;
}


/* Thankyouメッセージ */
#thankyou_msg {
	width:100%;
	box-sizing:border-box;
	border: 2px solid #E4465A;
	margin:0 auto 20px;
	padding:20px;
	color: #E4465A;
	text-align:center;
	font-size:18px;
}


/* 完了画面 */
#complete {
	width:100%;
	box-sizing:border-box;
	border: 2px solid #E4465A;
	margin:0 auto 20px;
	padding: 10px;
	color: #E4465A;
	text-align:center;
	font-size:24px;
    }
	#complete span{
	font-size:18px;
    }
	
	
/******ボタン設定********/

/*　ボタン大枠　*/  
.contact_btn {
  margin:0 auto 20px;
  padding:0;
  text-align:center;
  }

/*　内容を確認する　*/ 
.contact_btn ul.send1 {
	width:285px;
	margin:0 auto;
	padding:0;
}

.contact_btn ul.send1 li {
	list-style:none;
	text-decoration:none;
}



/*　戻る・送信　*/ 
.contact_btn ul.send2 {
	width:430px;
	margin:0 auto;
	padding:0;
	background:#FDA3E1;
}

.contact_btn ul.send2 li.back {
	float:left;
	list-style:none;
	text-decoration:none;
}

.contact_btn ul.send2 li.send {
	float:right;	
	list-style:none;
	text-decoration:none;

}


.btn{
	font-size:18px;
	letter-spacing:0.1em;
	line-height:100%;
	text-align: center;
	display: block;
	margin:0 auto;
	padding: 10px 80px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	border:1px solid #00937C;
	background:#00C0A2;
	}

/* ロールオーバー設定 */
.contact_btn input:hover {
	background:#00DBBA;
	border:1px solid #00C0A2;
	color: #fff;
}

#kiyaku {
	height:200px;
	overflow:auto;
	border:1px solid #a7a7a7;
	padding:20px;
	font-size:14px;
	margin:0 0 10px;
}


/********ページトップ設定************/ 

#pagetop {
    position: fixed;
    bottom: 90px;
    right: 10px;
}



/********フッタ設定************/ 


footer {
	width:100%;
	margin:0;
    padding:20px 0;
	min-width:980px;/*iPad対策*/
overflow: hidden;/*iPad対策*/
border-top:1px solid #d5d5d5;
line-height:100%;
}


footer .inner {
	width:960px;
margin:0 auto;
}

footer .inner #f_navi {
	float:left;
}

footer .inner #f_navi ul{
	margin:0;
    padding: 0;
}
	
footer .inner #f_navi ul li{
	float:left;
	list-style:none;
	background:url(../img/arrow_blue.png) no-repeat 0 2px;
	margin:0 30px 0 0;
	padding:0 0 0 14px;
	font-size:14px;
}
	
footer .inner #copy {
	float:right;
	font-size:12px;
}