@charset "UTF-8";

/* reset
------------------------------------- */
#cloud_header{
	line-height: 1.2;
	font-family:Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Noto Sans JP", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	}
#cloud_header ul,
#cloud_header li{
	margin: 0;
	list-style: none;
	}
#cloud_header a{
	text-decoration:none;
	background: none;
	overflow: visible;
	}
/* アカデミー用 */
#cloud_header *{
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	}
/* プライベートC・ハウジング用 */
#cloud_header .logo{
	width:auto;
	float: none !important;
	}
/* レンタルサーバー内の背景色調整用 */
#cloud_header .float-lists-area{
	display: block;
    content: '';
    width: 100%;
    float: left;
}

/* 全体
------------------------------------- */
#cloud_header{
	display: block !important;
	position:relative;
	width:100%;
	height: 32px;
	/* min-width:1000px; */
	background:#303030 !important;
	border-bottom:2px solid #e0e0e0;
	z-index: 10003;
	}
.cloudh_show_for_small{display:none;}

/* 大メニュー（黒背景・白文字）
------------------------------------- */
#cloud_header > ul{
	/*
	overflow:hidden;
	*/
	height:29px;
	padding-top:3px;
	text-align:center;
	letter-spacing: -.3em; /* inline-blockの余白調整用 */
	}
	#cloud_header > ul > li{
		display:inline-block;
		letter-spacing: normal;
		}
		#cloud_header > ul > li > a{
			display:block;
			position:relative;
			z-index:10002;
			height:29px;
			line-height:27px;
			font-size:11px;
			padding:0 13px;
			color: #fff;
			}
		/* ホバーした時はグレーに変更 */
		#cloud_header > ul > li > a:hover,
		#cloud_header > ul > li.active > a{
			background-color: #eee;
			color:#282828 !important;
			}
		/* サブメニューの▼の指定 */
		#cloud_header > ul > .cloud_header_sub > a{
			padding-right: 30px;
			background-image: url(//www.gmocloud.com/cloud_header/images/ico_nav.png);
			background-repeat: no-repeat;
			background-position: 100% -9px;
			}
		#cloud_header > ul > .cloud_header_sub > a:hover,
		#cloud_header > ul > .cloud_header_sub.active > a{
			background-position: 100% 11px;
			}
		/* サーバー管理とGMOクラウドの間の破線 */
		#cloud_header .cloud_line{
			padding-left: 2px;
			background: url(//www.gmocloud.com/cloud_header/images/bg_dotline.png) no-repeat 0 50%;
			}
		#cloud_header .cloud_line .cloud_header_sub > a{
			letter-spacing: -0.8px;
		}

/* サブナビ（サムネイルあり）
------------------------------------- */
.cloud_header_sub > div{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top:70px;
	left: 0;
	background: rgba(3,3,3,0.5);
	}
.cloud_header_sub.active > div{
	display: block;
	}
	.cloud_header_sub .type-logo,
	.cloud_header_sub .type-icon,
	.cloud_header_sub .type-list,
	.cloud_header_sub .type-solution{
		background:#eee;
		border-bottom: 1px solid #c8c8c8;
		box-shadow: 0 0 10px rgba(0,0,0,1);
		}
	.cloud_header_sub .type-icon > ul{
		max-width: 820px;
		min-height: 161px;
		overflow: hidden;
		position: relative;
		margin: 0 auto !important;
		padding: 30px 190px 10px 0;
		}
	.cloud_header_sub .type-icon > ul.saas{
		max-width: 820px;
		min-height: 161px;
		overflow: hidden;
		position: relative;
		margin: 0 auto !important;
		padding: 30px 190px 10px 0;
		}
	.cloud_header_sub .type-logo > ul > li{
		display: inline-block;
		margin:0 5px 0 6px !important;
		}
	.cloud_header_sub .type-list > ul{
		display: table;
		margin: 0 auto !important;
		padding: 30px 0;
		}
	.cloud_header_sub .type-list  ul.column2-lists{
		width: 450px;
		float:left;
		padding: 0 0 0 30px;
		margin:30px auto !important;
	}
	.cloud_header_sub .type-list  ul.column2-lists:first-of-type{
		margin-left:calc((100% - 960px) / 2) !important;
	}
	.cloud_header_sub .type-list  ul.column2-lists:not(:first-of-type){
		border-left: 1px solid #ccc;
	}
	.cloud_header_sub .type-list > ul > li{
		display: table-cell;
		text-align: left;
		vertical-align: top;
		}
	.cloud_header_sub .type-list > ul > li:nth-child(1),
	.cloud_header_sub .type-list > ul > li:nth-child(3),
	.cloud_header_sub .type-list > ul > li:nth-child(4){
		width: 188px;
		}
	.cloud_header_sub .type-list > ul > li:nth-child(2){
		width: 300px;
		}
	.cloud_header_sub .type-list > ul > li.narrow-arrow{
		width: 150px;
		}
	.cloud_header_sub .type-list > ul > li.narrow-arrow ~ li{
		padding-left:40px;
		width: 223px;
		}
	.cloud_header_sub .type-solution > div > ul:nth-child(2),
	.cloud_header_sub .type-solution > div > ul:nth-child(3){
		border-left:1px solid #ccc;
		}
	.cloud_header_sub .type-list > ul > li:nth-child(3),
	.cloud_header_sub .type-list > ul > li:nth-child(4){
		padding: 0 20px;
		border-left:1px solid #ccc;
		}
	.cloud_header_sub .type-list > ul > li:nth-child(1) > a{
		margin: 0 20px;
		float: left;
		}
	.cloud_header_sub .type-icon > ul > li{
		display: block;
		float: left;
		width: 205px;
		min-height: 60px;
		}
	.cloud_header_sub .type-icon > ul.saas > li{
		display: block;
		float: left;
		width: 220px;
		min-height: 60px;
		}
	.cloud_header_sub .type-icon > ul > li:first-child{
		position: absolute;
		top:30px;
		/*right:  0;*/
		right: 140px;
		}
	.cloud_header_sub .type-solution > div{
		display: table;
		margin: 0 auto;
		padding: 20px 0;
		max-width:820px;
		}
		.cloud_header_sub .type-solution > div > div.table-cell{
			display: table-cell;
			width: 25%;
			max-width:205px;
			padding: 0 15px;
		}
		.cloud_header_sub .type-solution > div > div.table-cell:not(:first-of-type){
			border-left:1px solid #ccc;
		}
		.cloud_header_sub .type-solution p{
			text-align: left;
			padding-top: 0;
			font-weight: bold;
			font-size: 16px;
		}
		/*.cloud_header_sub .type-solution >  div > div.table-cell > ul{
			display: flex;
			display: -webkit-flex;
			display: -moz-flex;
			justify-content: space-between;
			justify-content: -webkit-space-between;
			justify-content: -moz-space-between;
			align-content: flex-start;
			align-content: -webkit-flex-start;
			align-content: -moz-flex-start;
			flex-flow: wrap row;
			text-align: left;
			}*/
		/*.cloud_header_sub .type-solution > div > ul:nth-child(2),
		.cloud_header_sub .type-solution > div > ul:nth-child(3){
			border-left:1px solid #ccc;
			}*/
		.cloud_header_sub .type-solution li{
			/*flex:0 0 45%;*/
			padding-top: 15px;
			}
		.cloud_header_sub .type-solution li > a{
			display: block;
			}
		.cloud_header_sub a{
			text-align: left;
			color: #282828;
			}
		.cloud_header_sub .type-logo > ul > li > a{
			display: inline-block;
			margin:22px 0 28px;
			font-size: 14px;
			}
		/*.cloud_header_sub .type-logo > ul > li > a:hover{ text-decoration: underline !important;}*/
		.cloud_header_sub .type-logo  > ul > li > a span{
				display: block;
				font-size: 14px;
		}
		.cloud_header_sub .type-logo > ul.cloud > li:not(.arrowlink-lists),
		.cloud_header_sub .type-logo > ul.iot > li{
			max-width: 184px;
			vertical-align: top;
		}
		.cloud_header_sub .type-logo > ul.cloud > li.arrowlink-lists,
		.cloud_header_sub .type-logo > ul.managed > li.arrowlink-lists,
		.cloud_header_sub .type-logo > ul.partner > li.arrowlink-lists{
			padding-top: 22px;
		}
		.cloud_header_sub .type-logo > ul.managed > li{
			margin: 0 5px 0 6px !important;
		}
		.cloud_header_sub .type-logo > ul.cloud > li> a,
		.cloud_header_sub .type-logo > ul.iot > li > a,
		.cloud_header_sub .type-logo > ul.managed > li > a{
			font-size:11px;
			line-height: 1.5;
		}
		.cloud_header_sub .type-logo > ul.iot > li.small-bn-area > a:hover{
			text-decoration: underline;
		}
		.cloud_header_sub .type-logo > ul.iot > li.small-bn-area{
			margin:37px 0 30px 20px !important;
			padding:0 20px;
		    border-left: 1px solid #ccc;
		}
		.cloud_header_sub .type-logo > ul.cloud > li.small-bn-area,
		.cloud_header_sub .type-logo > ul.managed > li.small-bn-area{
			margin:22px 0 30px 10px !important;
			padding:0 10px 60px;
		    border-left: 1px solid #ccc;
		}
		.cloud_header_sub .type-logo > ul.cloud > li.small-bn-area > a,
		.cloud_header_sub .type-logo > ul.managed > li.small-bn-area > a{
			margin-top: 0px;}
		.cloud_header_sub .type-logo > ul.iot > li.small-bn-area > a{
			display: block;
			margin:0;
			font-size:11px;
			max-width: 188px;
			}
		.cloud_header_sub .type-list a{
			display: block;
			font-size: 11px;
			line-height: 1.5;
			}
			.cloud_header_sub .type-list a span{
				display: block;
				font-size: 14px;
				}
		.cloud_header_sub .type-icon > ul > li > a{
			display: block;
			margin: 0;
			font-size: 11px;
			line-height: 1.5;
			}
		.cloud_header_sub .type-icon > ul > li > a:hover{
			text-decoration: underline !important;
			}
			.cloud_header_sub .type-icon > ul > li > a > span{
				display: block;
				font-size: 14px;
				}

/* 矢印ありのリンク
------------------------------------- */
.cloud_header_sub .arrow li{
	margin-bottom:.4em !important;
	text-align: left !important;
	}
.cloud_header_sub .arrow li.short{
	width: 50%;
	float: left;
	}
.cloud_header_sub .arrow a{
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
	font-size:14px;
	}
.cloud_header_sub .arrow a::before{
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 6px 0 0;
	vertical-align: 2px;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	content: '';
	}
.cloud_header_sub .arrow a:hover{
	text-decoration: underline !important;
	}
.cloud_header_sub .cloud .arrow a::before{
	border-top: .15em solid #005bac;
	border-right: .15em solid #005bac;
	}
.cloud_header_sub .arrow a.notarrow::before{
	border-top: none;
	border-right: none;
}
.cloud_header_sub .arrow a.notarrow.slash{
	padding-left:0;
	}
/*.cloud_header_sub .arrow a.notarrow.slash::before{
	display:inline;
	width: 12px;
	height: 12px;
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	margin: 0 3px 0 3px;
	content: '/';
	color: #c5c4c4;
	padding:0 3px;
	vertical-align: middle;
}*/
	/*.cloud_header_sub .cloud .arrow li:nth-child(4),
	.cloud_header_sub .cloud .arrow li:nth-child(5),*/
	.cloud_header_sub .cloud .arrow li:nth-child(6),
	.cloud_header_sub .cloud .arrow li:nth-child(7),
	.cloud_header_sub .cloud .arrow li:nth-child(8),
	.cloud_header_sub .cloud .arrow li:nth-child(9){
		text-indent: .6em;
		}
.cloud_header_sub .vps .arrow a::before{
	border-top: .15em solid #37a602;
	border-right: .15em solid #37a602;
	}
.cloud_header_sub .shared .arrow a::before{
	border-top: .15em solid #f90;
	border-right: .15em solid #f90;
	}
.cloud_header_sub .iot .arrow a::before{
	border-top: .15em solid #ed6d34;
	border-right: .15em solid #ed6d34;
	}
.cloud_header_sub .wadax-shared .arrow a::before{
	border-top: .15em solid #0e3192;
	border-right: .15em solid #0e3192;
	}
.cloud_header_sub .managed .arrow a::before {
    border-top: .15em solid #7ab0bf;
    border-right: .15em solid #7ab0bf;
}
.cloud_header_sub .partner .arrow a::before {
    border-top: .15em solid #428bca;
    border-right: .15em solid #428bca;
}
.cloud_header_sub .managed .arrow a.notarrow::before {display:none;}
.cloud_header_sub .managed .arrow a.notarrow{text-indent: .6em;}

/* 画像の設定
------------------------------------- */
/* 写真やロゴの表示設定 */
.cloud_header_sub a.logo::before,
.cloud_header_sub a.photo::before,
.cloud_header_sub a.bnr::before,
.cloud_header_sub a.campaign::before,
.cloud_header_sub a.ir::before{
	display: block;
	margin-bottom:10px;
	background-repeat: no-repeat;
	/*border: 2px solid #fff;*/
	box-shadow:0 0 0 2px #fff inset;
	border-radius:4px;
	content: '';
	}
.cloud_header_sub a.logo::before,
.cloud_header_sub a.photo::before,
.cloud_header_sub a.campaign::before{
	width: 184px;
	height: 106px;
	}
.cloud_header_sub a.bnr::before{
	width: 184px;
	height: 50px;
	}
.cloud_header_sub a.logo:hover::before,
.cloud_header_sub a.photo:hover::before,
.cloud_header_sub a.bnr:hover::before,
.cloud_header_sub a.campaign:hover::before,
.cloud_header_sub a.ir:hover::before{
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	}

/* saas用の設定 */
.cloud_header_sub a.icon::before,
.cloud_header_sub a.banner::before{
	display: block;
	background-repeat: no-repeat;
	content: '';
	}
.cloud_header_sub a.icon::before{
	float: left;
	width: 30px;
	height: 30px;
	margin-right:5px;
	}
.cloud_header_sub a.banner::before{
	width: 189px;
	height: 55px;
	margin-bottom:10px;
	background-position: 0 0;
	box-shadow:0 0 0 2px #fff inset;
	/*display: none;*/
	/*background:none;*/
	}
.cloud_header_sub a.banner:hover::before{
	height: 54px;
	margin-bottom:11px;
	box-shadow:0 5px 15px rgba(0,0,0,0.5);
	}
/* IRのソリューション用の設定 */
.cloud_header_sub a.ir::before{
	width: 184px;
	height: 50px;
	background-image: url(//www.gmocloud.com/cloud_header/images/bnr_ir_min.png?20171122);
	background-repeat: no-repeat;
	}
a.photo::before,
a.logo::before,
a.bnr::before,
a.icon::before{
	background-size: cover;
	background-position: center;
}
a.ch_pf::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_altus.png);
	}
a.ch_privatec::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_private-c.png);
	}
a.ch_hybrid::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_hybrid.png);
	}
a.ch_vps::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_vps.png);
	}
a.ch_wadax::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_wadax.png);
	}
a.ch_shared::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_iclusta.png);
	}
a.ch_private::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_private.png);
	}
a.ch_housing::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_housing.png);
	}
a.ch_managed::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_croudcrew.png);
	}
a.ch_partner::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_partner.png);
	}
a.ch_domain::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_domain.png);
	}
a.ch_ir::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_corprate.png);
	}
a.ch_academy::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_academy.png);
	}
a.ch_vmc::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_vmc.png);
	}
a.ch_saas::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/img_saas.png);
	}
a.ch_sitelock::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/ico_sitelock.svg);
	}
a.ch_torocca::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/ico_torocca.svg);
	}
a.ch_mailsec::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/ico_mailsec.svg);
	}
a.ch_waf::before{
	background-image: url(//www.gmocloud.com/cloud_header/images/ico_kougeki.svg);
	}

/* キャンペーン系 */
.cloud_header_sub a.ch_pf_cam::before{background-image: url(//www.gmocloud.com/cloud_header/images/campaign_altus.png?20170301);}
.cloud_header_sub a.ch_pf_cam2::before{background-image: url(//www.gmocloud.com/cloud_header/images/campaign_altus2.png?20170301);}
.cloud_header_sub a.ch_vps_cam::before{background-image: url(//www.gmocloud.com/cloud_header/images/campaign_vps.png?20161101);}

/* アイコンの設定
------------------------------------- */
#cloud_header .ico_new::before,
#cloud_header .ico_coming::before{
	margin-left: 2px;
	vertical-align: middle;
	}
#cloud_header .ico_cloud_header_blank::before{
	margin-left: 3px;
	vertical-align: middle;
	}
#cloud_header .ico_new::before{
	content: url(//www.gmocloud.com/cloud_header/images/new.png);
	}
#cloud_header .ico_coming::before{
	content: url(//www.gmocloud.com/cloud_header/images/coming.png);
	}
#cloud_header .ico_cloud_header_blank::after{
    display: inline-block;
	transform: scale(0.7);
	content: url(//www.gmocloud.com/cloud_header/images/ico_blank.png);
	}



/* レスポンシブ
------------------------------------- */
@media screen and (max-width: 1070px) {
	#cloud_header > ul > .cloud_header_sub > a{
		padding-right:10px;
		background:none;
	}
}
@media screen and (max-width: 1036px) {
	/*役立つサービス内のバナーが５つの時のスタイル*/
	.cloudh_show_for_small{display: block;}/*バナー下のテキストが長い時のbrタグのスタイル*/
	/*.cloud_header_sub ul.useful{
		display:flex;
		justify-content:center;
		margin:0 auto;
	}*/
	/*.cloud_header_sub ul.useful a.logo{font-size: 80%;}
	.cloud_header_sub ul.useful a.logo::before,
	.cloud_header_sub ul.useful a.photo::before{
		width: 152px;
		height: 106px;
	}
	a.ch_shopapp::before{background-position: -16px -212px;}
	a.ch_shopappmg::before{background-position: -16px -318px;}
	a.ch_dns::before{background-position: -16px -1484px;}
	a.ch_shop::before{background-position: -16px -1272px;}
	a.ch_domain::before{background-position: -16px -1260px;}
	.cloud_header_sub .type-logo > ul.useful > li {
	    margin: 0 !important;
	    margin: 0 2px 0 3px !important;
	}*/
}
@media screen and (max-width: 1050px) {
	.cloud_header_sub .type-logo > ul.iot > li {
		margin: 0 5px !important;
		max-width: 170px;
		max-width: 144px;
	}
	.cloud_header_sub .type-logo > ul.iot > li a.logo{
		display: block;
	}
	.cloud_header_sub .type-logo > ul.iot > li a.logo::before{
	    transform: scale(0.8);
	    margin-left: -23px;
	    margin-top: -20px;
	}
	.cloud_header_sub .type-logo > ul.iot > .small-bn-area a.bnr::before {
	    transform: scale(0.9);
	    margin-left: -10px;
	}
}
@media screen and (max-width: 1020px) {
	#cloud_header > ul > li > a{
		padding: 0 13px;
		}
}
@media screen and (max-width: 965px) {
	#cloud_header > ul > li > a{
		padding: 0 10px;
		}
	.cloud_header_sub .type-list > ul > li.narrow-arrow{
		width: 200px;
		}
	.cloud_header_sub .type-list > ul > li.narrow-arrow ~ li{
		padding-left:20px;
		width: 203px;
		}
	.cloud_header_sub .type-list  ul.column2-lists{
		width: 350px;
		padding: 0 10px;
	}
	.cloud_header_sub .type-list  ul.column2-lists:first-of-type{
		margin-left:calc((100% - 760px) / 2) !important;
	}
	.cloud_header_sub .type-icon > ul.saas > li{
		width: 180px;
		min-height: 60px;
		}
	.cloud_header_sub .type-icon > ul > li:first-child{
		/*right: 90px;*/
		right: 30px;
	}
	.cloud_header_sub .type-logo > ul.iot > li.small-bn-area {
	    margin: 30px 0 30px 10px !important;
	    padding: 0 10px;
	}
}
@media screen and (max-width: 940px) {
	.cloud_header_sub .type-logo > ul.cloud > li:not(.arrowlink-lists){
			max-width: 165px;
		}
	/*.cloud_header_sub .type-logo > ul.cloud > li {
		margin: 0 6px !important;
		max-width: 160px;
	}*/
	.cloud_header_sub .type-logo > ul.cloud > li a.photo::before,
	.cloud_header_sub .type-logo > ul.cloud > li a.bnr::before,
	.cloud_header_sub .type-logo > ul.cloud > li a.logo::before{
	    transform:scale(0.9);
	    margin-left:-4px;
	    margin-top:-10px;
	}
}
@media screen and (max-width: 860px) {
	.cloud_header_sub .type-logo > ul.cloud > li a.photo::before,
	.cloud_header_sub .type-logo > ul.cloud > li a.bnr::before,
	.cloud_header_sub .type-logo > ul.cloud > li a.logo::before{
	    margin-left:-10px;}
	.cloud_header_sub .type-logo > ul.cloud > li.arrowlink-lists{
		display:block;
		position: absolute;
		top:170px;
		left:calc((100% - (175px * 3 + 196px))/ 2);
	}
	.cloud_header_sub .type-logo > ul.cloud >  li.small-bn-area{padding: 0px 10px 220px;}
	.cloud_header_sub .type-icon > ul.saas {padding: 30px 190px 10px  20px;}
	.cloud_header_sub .type-icon > ul > li:first-child {
		right: 20px;
	}
	.cloud_header_sub .type-icon > ul.saas > li:not(:first-child ){width: 185px;}
}
@media screen and (max-width: 850px) {
	#cloud_header > ul > .cloud_header_sub > a{
		padding: 0 6px;
		}

}
@media screen and (max-width: 767px) {
	#cloud_header{
		display:none !important;
		}
}

/* 印刷時に非表示に
------------------------------------- */
@media print{
	#cloud_header{
		display: none !important;
		}
}