@charset "utf-8";
/*
Theme Name: HISS
Theme URI: 自分のURL
Description: COMPANY official theme
*/

/* ===================================================================
CSS information
 file name  :  default.css
 style info :  リセット及びbody初期設定 (このスタイルシートは基本的に変更しない)
=================================================================== */
/*--- reset */
html {
	overflow-y: scroll;
}
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
}
q:before,q:after {
	content: '';
}
object,
embed {
	vertical-align: top;
}
legend {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}
img,abbr,acronym,fieldset {
	border: 0;
}
li {
	list-style-type: none;
}

/*--- default */
body {
	background: #FFF;
	color: #333;
	font-size:small;
	line-height: 1.5;
}
* html body {	/* for IF6 */
	font-size:x-small;
}

img {
	vertical-align: bottom;
}

ul#ul_default {
	margin: 10px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
}
ul#ul_default li {
	list-style-type: circle;
}


/* ===================================================================
 style info : ヘッダーやフッターなどサイト内共通
=================================================================== */

/*----------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------*/
a:link {
	/*color:#414040;*/
	color:#2fa0ec;
	text-decoration: underline;
}
a:visited {
	color:#2fa0ec;
	text-decoration: underline;
}
a:hover {
	color:#61bbf7;
	text-decoration: none;
}

.blue {
	color: #2fa0ec;
}
.red{
	color:#F00;
}
.grey5{
	color:#555;
}

.strong {
	font-weight: bolder;
}
.textsizeB {
	font-size: 120%;
}
.textsizeBB {
	font-size: 140%;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: bolder;
}
.textsizeS {
	font-size: 85%;
}

/*----------------------------------------------------
	見出し
----------------------------------------------------*/
h2 {
	font-size: 220%;
	font-weight: bolder;
	background-image: url(img/h2_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 75px;
	padding-left: 50px;
	line-height: 75px;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/*----------------------------------------------------
	header#globalHeader
----------------------------------------------------*/
header#globalHeader {
	height: 91px;
	position: relative;
}

#logo {
	position: absolute;
	left: 0px;
	top: 8px;
}
#logo h1 p {
	font-size: 11px;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#headerRight {
	background: #fff;
	position: absolute;
	top: 0px;
	right: 0px;
}
ul#login li {
	float: left;
}
.header_tel {
	margin-top: 9px;
}


.mainslide {
	height: 570px;
}

/* グローバルナビゲーション
----------------------------------------------------*/
/*Gnav*/
ul#menu-nav {
	margin-top: 10px;
	width: 960px;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.menu-item {
    height: 50px;
    float: left;
    text-align: center;
}
.menu-item.menu_1 a {
    width: 60px;
}
.menu-item.menu_2 a,.menu-item.menu_3 a,.menu-item.menu_4 a,.menu-item.menu_5 a {
    width: 225px;
}

.menu-item a {
    background-image: url(img/gnav.gif);
    display: block;
    position: relative;
    line-height: 50px;
    color: white;
    text-decoration: none;
    text-indent: -9999px;
}

/*　リンクなし対応　*/
.menu_4 { 
    width: 225px;
	background-position: -510px 0; 
	background-image: url(img/gnav.gif);
    display: block;
    position: relative;
    line-height: 50px;
    color: white;
    text-decoration: none;
    text-indent: -9999px;
}
 
.menu_1 a { background-position: 0 0; }
.menu_2 a { background-position: -60px 0; }
.menu_3 a { background-position: -285px 0; }
.menu_4 a { background-position: -510px 0; }
.menu_5 a { background-position: -735px 0; }


.menu_1 a:hover { background-position: 0 -50px; }
.menu_2 a:hover { background-position: -60px -50px; }
.menu_3 a:hover{ background-position: -285px -50px; }
.menu_4 a:hover { background-position: -510px -50px; }
.menu_5 a:hover { background-position: -735px -50px; }


 
.home .menu_1 a { background-position: 0 -50px; }
.page-id-17 .menu_2 a { background-position: -60px -50px; }
.parent-pageid-33 .menu_3 a { background-position: -285px -50px; }
.post-type-archive-case .menu_4 a,.tax-casecat .menu_4 a,.single-case .menu_4 a { background-position: -510px -50px; }
.page-id-22 .menu_5 a { background-position: -735px -50px; }





/*----------------------------------------------------
	footer#globalFooter
----------------------------------------------------*/
footer#globalFooter {
	clear: both;
	background: #2fa0ec;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 40px;
}
footer#globalFooter .footer {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.foot_otoiawase {
	height: 137px;
	width: 616px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(img/footer_otoiawase_bg.jpg);
	background-repeat: no-repeat;
	position: relative;
	margin-top: 60px;
}
.foot_otoiawase ul {
	position: absolute;
	left: 17px;
	top: 46px;
}
.foot_otoiawase ul li {
	margin-bottom: 10px;
}

footer#globalFooter ul {
	list-style: none;
	color: #FFF;
	float: left;
	width: 231px;
}
footer#globalFooter ul li {
	margin-bottom: 5px;
}

footer#globalFooter ul li a {
	color: #FFF;
	text-decoration: none;
}
footer#globalFooter ul li a:hover {
	text-decoration: underline;
}
.footlinkTTL {
	font-size: 120%;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: bolder;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #8eccf5;
	color: #FFF;
	margin-bottom: 10px;
	padding-bottom: 5px;
}
.footlinkTTL a {
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
	font-size: 13px;
	font-family: none;
}
.footlinkTTL a:hover {
	text-decoration: underline;
}
footer#globalFooter ul li.arrow01 {
	background-image: url(img/arrow_w.png);
	background-position: left 6px;
	background-repeat: no-repeat;
	padding-left: 10px;
}


#foot_after {
	background-color: #3a3f4d;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
}
.foot_after_inner {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
.foot_after_inner ul li {
	float: left;
}
.foot_after_inner ul li a {
	float: left;
	color: #FFF;
	margin-right: 20px;
	padding-right: 20px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	text-decoration: none;
}
.foot_after_inner ul li a:hover {
	text-decoration: underline;
}


/* copyright
----------------------------------------------------*/
#cp {
	background-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
p.copyright {
	text-align: center;
}

/*----------------------------------------------------
	汎用class
----------------------------------------------------*/

.block {
	padding-top: 50px;
}
.block2 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.blank {
	background-image: url(img/blank.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 15px;
}

/* float */
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}

/* clearfix */
#hoge:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
.clear{
	clear:both;
}
.clearfix {zoom:1;}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
}


/* indent */
.indent {
	padding-left: 10px;
}
.indent2 {
	padding-left: 20px;
}

/*----------------------------------------------------
	マージン関連
----------------------------------------------------*/
.mgb10{
	margin-bottom:10px;
}
.mgb20{
	margin-bottom:20px;
}
.mgb30{
	margin-bottom:30px;
}
.mgb40{
	margin-bottom:40px;
}
.mgb50{
	margin-bottom:50px;
}
.mgb60{
	margin-bottom:60px;
}
.mgt10{
	margin-top:10px;
}
.mgt20{
	margin-top:20px;
}
.mgt30{
	margin-top:30px;
}
.mgt40{
	margin-top:40px;
}
.mgt50{
	margin-top:50px;
}
.mgl10{
	margin-left:10px;
}
.mgl20{
	margin-left:20px;
}
.mgl30{
	margin-left:30px;
}
.mgl243{
	margin-left:243px;
}
.mgr10{
	margin-right:10px;
}
.mgr12{
	margin-right:12px;
}
.mgr20{
	margin-right:20px;
}
.mgr30{
	margin-right:30px;
}


/*----------------------------------------------------
	行ぞろえ
----------------------------------------------------*/
.alignCenter{
	text-align: center;	
}
.alignLeft{
	text-align: left;	
}
.alignRight{
	text-align: right;	
}


/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}


/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;
}

/* 汎用
----------------------------------------------------*/

.imgR {
	float: right;
	margin: 0 0 10px 10px;
}

.imgL {
	float: left;
	margin: 0 10px 10px 0;
}

.tC,
.btn {
	text-align: center;
}

.tR,
.sign {
	text-align: right;
}


/*----------------------------------------------------
	#page（ページ全体）
----------------------------------------------------*/
#page {
	width: 960px;
	margin: 0 auto;
	font-size: 100%;
}


/*----------------------------------------------------
	#contents（メインとサイド）
----------------------------------------------------*/
#contents {
	/zoom: 1;
	margin-bottom: 10px;
}


/*----------------------------------------------------
	#main（メインコンテンツ）
----------------------------------------------------*/
#main {
	float: left;
	width: 656px;
}

#main table,
#main ol,
#main ul,
#main dl,
#main blockquote,
#main pre,
#main p {
	margin-bottom: 10px;
}


/*----------------------------------------------------
	#side（サイドバー）
----------------------------------------------------*/
#side {
	float: right;
	width: 255px;
}
ul.bnr li {
	margin-bottom: 10px;
}

/*----------------------------------------------------
	トップページ
----------------------------------------------------*/
#rikuden {
	background-color: #f3f3f3;
	height: 155px;
	width: 100%;
}
.rikuden_inner {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
.rikuden_logo {
	float: left;
	width: 310px;
}
.rikuden_logo p {
	margin-top: 50px;
	margin-left: 26px;
}
.rikudenRight {
	float: right;
	width: 600px;
}
.rikudenText {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ccc;
	margin-top: 34px;
	padding-left: 10px;
}
.rikudenRight p {
	font-size: 110%;
	font-weight: bolder;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.rikudenRight p.rd_tit {
	font-size: 150%;
	font-weight: bolder;
	letter-spacing: 0.2em;
}


/* 見出し
----------------------------------------------------*/
.subTTL {
	position: relative;
}

.link01 a {
	font-size: 95%;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: bolder;
	position: absolute;
	top: 18px;
	right: 0px;
	color: #FFF;
	text-decoration: none;
	background-color: #3a3f4d;
	background-image: url(img/more.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	letter-spacing: 0.1em;
}
.link01 a:hover {
	background-color: #5e6372;
}

/* ニュース
----------------------------------------------------*/

dl.news dt {
  clear: left;
  float: left;
  margin: 0 0 2em;
  width: 7.5em;
  padding-left: 5px;
  color: #000;
}
dl.news dd {
  margin-bottom: 2em;
  margin-left: 7.5em;
}
dl.news dd span {
	color: #FFF;
	background-color: #2fa0ec;
	margin-right: 10px;
	padding-top: 2px;
	padding-right: 7px;
	padding-bottom: 2px;
	padding-left: 7px;
}

/* 4つの理由
----------------------------------------------------*/
#reason {
	background-color: #eeeeee;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 30px;
	margin-top: 50px;
}
#reason h3 {
	font-size: 210%;
	font-weight: bolder;
	margin-bottom: 40px;
}
#reason h4 {
	font-size: 150%;
	font-weight: bolder;
	margin-bottom: 10px;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#reason h5 {
	font-size: 110%;
	font-weight: bolder;
	color: #2fa0ec;
	margin-bottom: 10px;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#reason p {
	color: #666;
}
.reason_inner {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
.grid4 {
	float: left;
	width: 220px;
	margin-right: 10px;
	margin-left: 10px;
	position: relative;
	height: 460px;
}
.more a {
	font-size: 95%;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: bolder;
	color: #FFF;
	text-decoration: none;
	background-color: #3a3f4d;
	background-image: url(img/more.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-top: 5px;
	padding-right: 40px;
	padding-bottom: 5px;
	padding-left: 40px;
	letter-spacing: 0.1em;
	line-height: 2.5em;
	position: absolute;
	left: 50px;
	bottom: 10px;
}
.more a:hover {
	background-color: #5e6372;
}

/* SERVICES OVERVIEW
----------------------------------------------------*/
.box4 {
	float: left;
	width: 231px;
	background-color: #ebebeb;
	height: 430px;
	position: relative;
}
.box4 h4 {
	font-size: 120%;
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
}
.box4 p {
	padding: 15px;
	color: #555555;
}

/* 導入事例
----------------------------------------------------*/
.number:after {
    background: url(img/arr.gif) 0 0 no-repeat;
    content: "";
    height: 15px;
    position: absolute;
    right: -12px;
    top: 14px;
    width: 12px;
}
.number {
	background: #2fa0ec;
	color: #fff;
	display: block;
	font: 300 40px/40px 'Open Sans';
	letter-spacing: -3px;
	position: relative;
	text-align: center;
	text-indent: -6px;
	width: 63px;
	float: left;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 12px;
	padding-left: 0;
	height: 90px;
}

.pl {
	float: left;
	width: 64%;
	text-align: left;
	margin-left: 15px;
}
.pl h5 { 
    font-size: 110%;
    line-height: 24px;
    letter-spacing: -.6px;
    color: #3a3f4d;
}

    #owl-demo .item{
        padding: 0px 0px;
        margin: 10px 10px 10px 0px;
        text-align: center;
    }
    .customNavigation{
	text-align: center;
	margin-top: 10px;
    }
    .customNavigation a{
	color: #FFF;
	background-color: #3a3f4d;
	cursor:pointer;
	padding-top: 2px;
	padding-right: 20px;
	padding-bottom: 2px;
	padding-left: 20px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
    }
	.customNavigation a:hover{
	background-color: #5e6372;
    }
	
/* データセンターとは
----------------------------------------------------*/
.blockTTL {
	font-weight: bold;
	font-size: 130%;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	border-left-width: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-left-color: #2fa0ec;
	color: #333;
	background-color: #FFF;
	margin-top: 30px;
	margin-bottom: 15px;
	padding-left: 12px;
}


/* ページトップ
----------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}



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