@charset "Shift_JIS";
/*___________ 基本設定 ________________________________________________________________________ */
body {
	margin: 0;
	padding: 0;
	font: 12px/16px 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック', sans-serif;
	text-align: center;
	background: #FFFFFF url(img/body_bg.jpg) repeat-x;
}
a:link {color: #12A0B5;}
a:visited {color: #277B86;}

#CONTAINER {
	width: 780px;
	margin: 0 auto;
}
div,td,th {
	text-align: left;
}
img {
	border: 0;
}
p,pre {
	margin: 0;
	font: 12px/16px 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック', sans-serif;
}
li {
	margin: 0;
	list-style: none;
}
ol, ul {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	margin: 0;
}
h2 {
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	margin: 0;
}
h3 {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	margin: 0;
}
h4,h5,h6 {
	font-size: 8px;
	line-height: 10px;
	font-weight: normal;
	margin: 0px;
}
select {
	display: block;
}
form {
	margin: 0;
}
.indent {
	text-indent: -9999px;
	font-size: 9px;
	line-height: 10px;
}

/* HEADER CSS --------------------------------------------------------------------------------------------------------- */
#HEADER {width: 100%;}
#HEADER h1 {width: 170px; height: 60px; float: left; margin: 0 0 5px 0; padding: 0px;}
#BANNER1 {width: 468px; height: 60px; float: right; margin: 2px 0 3px 0; padding: 0px;}
/* -------------------------------------------------------------------------------------------------------------------- */

/* UTILITY CSS -------------------------------------------------------------------------------------------------------- */
#UTILITY {width: 100%; background: url(img/utility_bg.jpg) no-repeat;}

/* キーワード検索 */
#SEARCH {width: 312px; height: 23px; margin: 0 0 15px 0; float: left;}
#SEARCH form {margin: 0px; padding: 0px;}
#SEARCH-LABEL {width: 72px; height: 23px; float: left; background: url(img/search_label.gif) no-repeat; margin: 0px; padding: 0px; text-indent: -9999em;}

/* ナビゲーションボタン */
#NAVI {width: 468px; float: right;}
#NAVI ul {list-style: none; margin: 0px; padding: 0px;}
#NAVI a {
	margin: 0px;
	padding: 0px;
	text-indent: -9999em;
/*\*/
	overflow: hidden;
/**/
}

#NAVI01,#NAVI02,#NAVI03,#NAVI04,#NAVI05,
#NAVI01s,#NAVI02s,#NAVI03s,#NAVI04s,#NAVI05s,
#NAVI01 a,#NAVI02 a,#NAVI03 a,#NAVI04 a,#NAVI05 a,
#NAVI01s a,#NAVI02s a,#NAVI03s a,#NAVI04s a,#NAVI05s a {
	height: 23px; padding: 0px; text-indent: -9999em;
}

#NAVI01 {width: 92px; float: left; background: url(img/navi01.gif) no-repeat 0 0; margin: 0 2px 15px 0; display: inline;}
#NAVI02 {width: 92px; float: left; background: url(img/navi02.gif) no-repeat 0 0; margin: 0 2px 15px 0; display: inline;}
#NAVI03 {width: 92px; float: left; background: url(img/navi03.gif) no-repeat 0 0; margin: 0 2px 15px 0; display: inline;}
#NAVI04 {width: 92px; float: left; background: url(img/navi04.gif) no-repeat 0 0; margin: 0 2px 15px 0; display: inline;}
#NAVI05 {width: 92px; float: left; background: url(img/navi05.gif) no-repeat 0 0; margin: 0 0 15px 0; display: inline;}

#NAVI01 a {width: 92px; float: left; background: url(img/navi01.gif) no-repeat 0 0;}
#NAVI02 a {width: 92px; float: left; background: url(img/navi02.gif) no-repeat 0 0;}
#NAVI03 a {width: 92px; float: left; background: url(img/navi03.gif) no-repeat 0 0;}
#NAVI04 a {width: 92px; float: left; background: url(img/navi04.gif) no-repeat 0 0;}
#NAVI05 a {width: 92px; float: left; background: url(img/navi05.gif) no-repeat 0 0;}

#NAVI01 a:hover,#NAVI02 a:hover,#NAVI03 a:hover,#NAVI04 a:hover,#NAVI05 a:hover {heigh: 23px; background-position: 0 -23px;}

#NAVI01s {width: 92px; float: left; background: url(img/navi01.gif) no-repeat 0 -46px; margin: 0 2px 15px 0; display: inline;}
#NAVI02s {width: 92px; float: left; background: url(img/navi02.gif) no-repeat 0 -46px; margin: 0 2px 15px 0; display: inline;}
#NAVI03s {width: 92px; float: left; background: url(img/navi03.gif) no-repeat 0 -46px; margin: 0 2px 15px 0; display: inline;}
#NAVI04s {width: 92px; float: left; background: url(img/navi04.gif) no-repeat 0 -46px; margin: 0 2px 15px 0; display: inline;}
#NAVI05s {width: 92px; float: left; background: url(img/navi05.gif) no-repeat 0 -46px; margin: 0 0 15px 0; display: inline;}

#NAVI01s a {width: 92px; float: left; background: url(img/navi01.gif) no-repeat 0 -46px;}
#NAVI02s a {width: 92px; float: left; background: url(img/navi02.gif) no-repeat 0 -46px;}
#NAVI03s a {width: 92px; float: left; background: url(img/navi03.gif) no-repeat 0 -46px;}
#NAVI04s a {width: 92px; float: left; background: url(img/navi04.gif) no-repeat 0 -46px;}
#NAVI05s a {width: 92px; float: left; background: url(img/navi05.gif) no-repeat 0 -46px;}
/* -------------------------------------------------------------------------------------------------------------------- */

/* CONTENTS CSS ------------------------------------------------------------------------------------------------------- */
#CONTENTS {width: 100%;}

/* サブコンテンツ ------------------------------------------------------------------------------------------- */
#SUBCONTENTS {width: 170px; float: left;}
/* ---------------------------------------------------------------------------------------------------------- */

/* メインコンテンツ ----------------------------------------------------------------------------------------- */
#MAINCONTENTS {width: 610px; float: right; position: relative;}

/* ハグワールドについて --------------------------------------------------------------------------- */
#ABOUT {width: 610px; height: 220px;}
#ABOUT a {
	text-indent: -9999em;
/*\*/
	overflow: hidden;
/**/
}
#ABOUT01,#ABOUT02 {
	width: 610px;
	background: url(img/about_bg.jpg) no-repeat;
}
#ABOUT03 {
	width: 610px;
	background: url(img/about03_bg.jpg) no-repeat;
}
#ABOUT .padding {
	padding: 0 20px;
}
#ABOUT h3 {
	width: 190px;
	height: 21px;
	margin: 0px;
	padding: 0px;
	float: left;
	text-indent: -9999em;
}
.aboutMenu {
	width: 399px;
	height: 21px;
	float: left;
}
.aboutMenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.aboutMenu01, .aboutMenu02, .aboutMenu03,
.aboutMenu01 a, .aboutMenu02 a, .aboutMenu03 a,
.aboutMenu01s, .aboutMenu02s, .aboutMenu03s {
	height: 21px;
	margin: 0px;
	padding: 0px;
	text-indent: -9999em;
}
.aboutMenu01, .aboutMenu01 a {width: 133px; float: left; background: url(img/aboutmenu_01.jpg) no-repeat 0 0;}
.aboutMenu02, .aboutMenu02 a {width: 133px; float: left; background: url(img/aboutmenu_02.jpg) no-repeat 0 0;}
.aboutMenu03, .aboutMenu03 a {width: 133px; float: left; background: url(img/aboutmenu_03.jpg) no-repeat 0 0;}

.aboutMenu01 a:hover, .aboutMenu02 a:hover, .aboutMenu03 a:hover {height: 21px; background-position: 0 -21px;}

.aboutMenu01s {width: 133px; float: left; background: url(img/aboutmenu_01.jpg) no-repeat 0 -42px;}
.aboutMenu02s {width: 133px; float: left; background: url(img/aboutmenu_02.jpg) no-repeat 0 -42px;}
.aboutMenu03s {width: 133px; float: left; background: url(img/aboutmenu_03.jpg) no-repeat 0 -42px;}


/* 01 はじめに */
#ABOUT01 p {padding: 0; text-indent: -9999em;}
#ABOUT01 dl {margin: 0; padding: 0; list-style: none;}
#ABOUT01 dt,#ABOUT01 dd {margin: 0; padding: 0; text-indent: -9999em;}

#ABOUT01T01 {width: 535px; height: 50px; margin: 0 0 14px 0; background: url(img/about01_img01.jpg) no-repeat;}
#ABOUT01T02 {width: 135px; height: 65px; margin: 0; background: url(img/about01_img02.jpg) no-repeat; float: left;}
#ABOUT01T03 {width: 435px; height: 65px; margin: 0 0 15px 0; background: url(img/about01_img03.jpg) no-repeat; float: left;}

#ABOUT01T04 {width: 95px; height: 30px; margin: 15px 5px 15px 0; background: url(img/about01_img04.jpg) no-repeat; float: left; display: inline;}
#ABOUT01T04 a {display: block; width: 95px; height: 30px; background: url(img/about01_img04.jpg) no-repeat;}
#ABOUT01T04 a:hover {background-position: -95px 0;}

#ABOUT01T05 {width: 125px; height: 30px; margin: 15px 180px 15px 0; background: url(img/about01_img05.gif) no-repeat; float: left; display: inline;}
#ABOUT01T05 a {display: block; width: 125px; height: 30px; background: url(img/about01_img05.gif) no-repeat;}
#ABOUT01T05 a:hover {background-position: -125px 0;}

#ABOUT01T06 {width: 165px; height: 30px; margin: 15px 0 15px 0; background: url(img/about01_img06.jpg) no-repeat; float: left; display: inline;}
#ABOUT01T06 a {display: block; width: 165px; height: 30px; background: url(img/about01_img06.jpg) no-repeat;}
#ABOUT01T06 a:hover {background-position: -165px 0;}


/* 02 サービス種別 */
#ABOUT02 .floatBox {width: 180px; float: left; display: inline;}
#ABOUT02 h4,#ABOUT02 p {margin: 0px; padding: 0px; text-indent: -9999em;}

#ABOUT02T01 {width: 180px; height: 44px; background: url(img/about02_1_h.jpg) no-repeat;}
#ABOUT02T02 {width: 180px; height: 22px; background: url(img/about02_1_price.jpg) no-repeat;}
#ABOUT02T03 {width: 180px; height: 55px; background: url(img/about02_1_ex.jpg) no-repeat;}
#ABOUT02T04,#ABOUT02T04 a {display: block; width: 180px; height: 41px; background: url(img/about02_1_link.gif) no-repeat 0 0;}
#ABOUT02T04 a:hover {background-position: -180px 0;}

#ABOUT02T05 {width: 180px; height: 44px; background: url(img/about02_2_h.jpg) no-repeat;}
#ABOUT02T06 {width: 180px; height: 22px; background: url(img/about02_2_price.jpg) no-repeat;}
#ABOUT02T07 {width: 180px; height: 55px; background: url(img/about02_2_ex.jpg) no-repeat;}
#ABOUT02T08,#ABOUT02T08 a {display: block; width: 180px; height: 41px; background: url(img/about02_2_link.gif) no-repeat 0 0;}
#ABOUT02T08 a:hover {background-position: -180px 0;}

#ABOUT02T09 {width: 180px; height: 44px; margin: 0px; padding: 0px; background: url(img/about02_3_h.jpg) no-repeat;}
#ABOUT02T10 {display: block; width: 180px; height: 20px; margin: 0px; padding: 0px; background: url(img/about02_3_ex1.jpg) no-repeat;}
#ABOUT02T11,#ABOUT02T11 a {display: block; width: 54px; height: 19px; background: url(img/about02_3_ex2.jpg) no-repeat; float: left;}
#ABOUT02T12,#ABOUT02T12 a {display: block; width: 57px; height: 19px; background: url(img/about02_3_ex3.jpg) no-repeat; float: left;}
#ABOUT02T13,#ABOUT02T13 a {display: block; width: 69px; height: 19px; background: url(img/about02_3_ex4.jpg) no-repeat; float: left;}
#ABOUT02T14 {display: block; width: 180px; height: 38px; background: url(img/about02_3_ex5.jpg) no-repeat; clear: both;}
#ABOUT02T15,#ABOUT02T15 a {display: block; width: 180px; height: 41px; background: url(img/about02_3_link.gif) no-repeat 0 0;}
#ABOUT02T15 a:hover {background-position: -180px 0;}


/* 導入事例 */
#ABOUT03 h4,#ABOUT03 h5,#ABOUT03 p, #ABOUT03 a {padding: 0px; text-indent: -9999em;}

#ABOUT03 .floatBox1 {width: 320px; float: left; margin-right: 44px; display: inline;}
#ABOUT03T01 {width: 118px; height: 20px; margin: 15px 0 0 0; background: url(img/about03_1_h.jpg) no-repeat;}
#ABOUT03T02 {width: 320px; height: 110px; margin: 0px; background: url(img/about03_1_ex.jpg) no-repeat;}

#ABOUT03T03 {width: 215px; height: 30px; margin: 0 0 19px 105px; background: url(img/about03_1_link.jpg) no-repeat;}
#ABOUT03T03 a {display: block; width: 215px; height: 30px; background: url(img/about03_1_link.jpg) no-repeat;}
#ABOUT03T03 a:hover {background-position: -215px 0;}

#ABOUT03 .floatBox2 {width: 206px; float: left;}
#ABOUT03T04 {width: 206px; height: 20px; margin: 19px 0 0 0; background: url(img/about03_2_h.jpg) no-repeat;}

#jirei1 {width: 94px; float: left; margin: 0 18px 0 0; display: inline;}

#ABOUT03T05 {width: 94px; height: 27px; margin: 0px; background: url(img/about03_2_category1.jpg) no-repeat;}
#ABOUT03T06 {width: 94px; height: 113px; margin: 0px; background: url(img/jirei_01.jpg) no-repeat;}
#ABOUT03T06 a {display: block; width: 94px; height: 113px; background: url(img/jirei_01.jpg) no-repeat;}
#ABOUT03T06 a:hover {background-position: -94px 0;}

#jirei2 {width: 94px; float: left; margin: 0px;}

#ABOUT03T07 {width: 94px; height: 27px; margin: 0px; background: url(img/about03_2_category2.jpg) no-repeat;}
#ABOUT03T08 {width: 94px; height: 113px; margin: 0px; background: url(img/jirei_02.jpg) no-repeat;}
#ABOUT03T08 a {display: block; width: 94px; height: 113px; background: url(img/jirei_02.jpg) no-repeat;}
#ABOUT03T08 a:hover {background-position: -94px 0;}
/* ------------------------------------------------------------------------------------------------ */

/* メインコンテンツ１ ----------------------------------------------------------------------------- */
#MAINCONTENTS1 {width: 450px; float: left;}
#MAINCONTENTS1 .padding {padding: 0 10px 0 0;}

/* お知らせ */
body.newsBody {margin: 0px; padding: 0px; background: url(img/body_bg.gif) repeat-y;}
#news {width: 440px;}
#news h3 {width: 100%; height: 26px; background: url(img/news_heading.gif) no-repeat; text-indent: -9999em;}
#news .contents {width: 100%; background: url(img/news_cnt.gif) repeat-y;}
#news table {width: 420px; margin: 0 auto;}
#news table td {padding: 0.2em;}
#news table td p {font-size: 12px;}
.newsTitle {
	padding-left: 12px;
	background: url(img/news_list.gif) no-repeat left center;
}
.newsDate {}
#news .footer {width: 100%; height: 10px; margin-bottom: 7px; background: url(img/news_footer.gif) no-repeat;}


/* 新着リスト */
#up {width: 440px; position: relative;}
#up .heading {width: 100%; height: 26px; background: url(img/up_heading.gif) no-repeat; text-indent: -9999em;}
#up .contents {width: 100%; height: 560px; background: url(img/up_cnt.gif) repeat-y;}

/* 新着フォト */
.newPhotoBody {margin: 0px; padding: 0px; background: url(img/newphoto_body.gif) repeat-y;}
#newPhoto {width: 213px; margin: 0px; padding: 0px;}
#newPhoto h3 {width: 100%; height: 26px; margin: 0px; padding: 0px; background: url(img/newphoto_heading.gif) no-repeat; text-indent: -9999em;}
#newPhoto .contents {width: 213px; background: url(img/newphoto_cnt.gif) repeat-y;}
#newPhoto table {width: 195px; margin: 0 auto;}
#newPhoto table td.imgData {width: 88px; height: 88px; text-align: center; border: 1px solid #CCCCCC;}
#newPhoto table td.txtData {font-size: 12px; text-align: left;}

#newPhoto .more {display: block; width: 70px; height: 20px; background: url(img/more.gif) no-repeat; background-position: 0 0; margin: 0px; padding: 0px; text-indent: -9999em; position: absolute; top: 0px; right: 5px;}
#newPhoto .more a {display: block; width: 70px; height: 20px; background: url(img/more.gif) no-repeat; background-position: 0 0; margin: 0px; padding: 0px; text-indent: -9999em; position: absolute; top: 0px; right: 0px;
/*\*/
	overflow: hidden;
/**/
}
#newPhoto .more a:hover {background-position: 0 -20px;}
/*#newPhoto .footer {width: 100%; height: 10px; background: url(img/newphoto_footer.gif) no-repeat;}*/

/* 新着ブログ */
.newBlogBody {margin: 0px; padding: 0px; background: url(img/newblog_body.gif) repeat-y;}
#newBlog {width: 213px; margin: 0px; padding: 0px;}
#newBlog h3{width: 213px; height: 26px; margin: 0px; padding: 0px; background: url(img/newblog_heading.gif) no-repeat; text-indent: -9999em;}
#newBlog .contents {width: 100%; background: url(img/newblog_cnt.gif) repeat-y;}
#newBlog table {width: 195px; margin: 0 auto;}
#newBlog td {padding: 0.2em;}
.blogTitle {
	text-align: left;
	font-size: 12px;
	padding-left: 12px;
	background-image: url(img/blog_list.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
.blogContents {text-align: left; font-size: 10px; padding-left: 12px;}
.blogDate {text-align: right; font-size: 10px;}

#newBlog .more {display: block; width: 70px; height: 20px; background: url(img/more.gif) no-repeat; background-position: 0 0; margin: 0px; padding: 0px; text-indent: -9999em; position: absolute; top: 0px; right: 5px;}
#newBlog .more a {display: block; width: 70px; height: 20px; background: url(img/more.gif) no-repeat; background-position: 0 0; margin: 0px; padding: 0px; text-indent: -9999em; position: absolute; top: 0px; right: 0px;
/*\*/
	overflow: hidden;
/**/
}
#newBlog .more a:hover {background-position: 0 -20px;}
/*#newBlog .footer {width: 100%; height: 10px; background: url(img/newblog_footer.gif) no-repeat;}*/

#up .footer {width: 100%; height: 11px; background: url(img/up_footer.gif) no-repeat;}
/* ------------------------------------------------------------------------------------------------ */

/* メインコンテンツ２ ----------------------------------------------------------------------------- */
#MAINCONTENTS2 {width: 160px; float: right;}

/* バナー */
#BANNER2,#BANNER3,#BAMMER4,#BANNER5 {width: 100%; margin-bottom: 5px;}

/* Google */
#GOOGLE {width: 100%; margin: 0px; padding: 0px;}

/* ------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */


/* FOOTR CSS ---------------------------------------------------------------------------------------------------------- */
#FOOTER {width: 100%; text-align: center;}
#FOOTER ul {list-style: none; margin-top: 20px; margin-bottom: 10px;}
#FOOTER ul li {display: inline; margin: 0 10px 0 0;}
#FOOTER p {text-align: center;}
/* -------------------------------------------------------------------------------------------------------------------- */




/* 共通 --------------------------------------------------------------------------------------------------------------- */

/* フロートボックス解除用 */
.clear {
	clear: both;
}

.contentsTxt {font-size: 12px; padding: 3px 0px 3px 0px;}
.contentsTxtSS {font-size: 10px;}

.iframeBody {margin: 0px; padding: 0px; background: #F0F0F0;}
.pageTitle {
	font-size: 14px;
	color: #FFFFFF;
	background-color: #85A6FF;
	font-weight: bold;
	padding: 0px;
}


.odd {background: #FFFFFF;}
.even {background: #E5E5E5;}
