@charset "utf-8";
/*---- heading ----*/
.heading { height: 260px; text-align: center; }
@media screen and (max-width: 740px) {
	.heading { height: 210px; }
}

/* メインロゴ */
p.main img {
	width: 100px;
}

/*---- heading type_02 ----*/
.new_release {
	width: 80px;
	margin: 0 auto;
	color: #ff6060;
	border: 1px solid #ff6060;
	font-size: 87.5%;
	padding: 5px 0;
	text-align: center;
}

/*---- table ----*/
table { background: #FFF; }
table thead tr { font-size: 18px; font-size: 1.8rem; }
table th { padding: 20px 0.7em !important; }
@media screen and (max-width:739px){
	table thead tr { font-size: 12px; font-size: 1.2rem; }
}
@media screen and (max-width: 740px) { 
	.block-step3 .inner .Box { padding: 20px; }
}

/*---- ttl ----*/
.orange_ttl { width: 220px;	margin: 0 auto 20px; padding: 5px 0; background: #ff9600; }
.new_mark { color: #ff2e2e;	margin-left: 8px; }

/*---- ご利用例 ----*/
@media screen and (max-width:739px){
	.use_ex .layout-frame .layout-unit:first-child{ margin-bottom: 10px; }
}

/*---- price_ex ----*/
.price_ex { margin: 0 auto; padding: 20px; border: 2px solid #FF9B01;	background: #fff; }

/*---- block-step4 ----*/
.block-step4{ padding: 50px 0 40px; }
.block-step4 .inner .Box{
	width: 18%;
	max-width: 200px;
	padding: 3% 2%;
	float: left;
	text-align: center;
	background: #fff; }
.block-step4 .inner .arrowBox{
	width: 3.5%;
	height: 174px;
	float: left;
	background-image: url(/sevice_shared/img/cloud/top/ico_arrow002.png);
	background-repeat: no-repeat;
	background-position: center 50%; }
.block-step4 .inner .Box p.name{
	margin: 15px 0 0 0;
	font-weight: bold;
	font-size: 1.5rem; }
.block-step4 .inner .Box p.message{ font-size: 1.8rem; }
.block-step4 .inner .Box img { width: 140px; }
.block-step4 a { color: #4D9FEB; }
@media screen and (max-width: 740px) {
	.block-step4{ padding: 40px 0; }
	.block-step4 .inner .Box{
		width: auto;
		max-width: none;
		padding: 20px 20px 20px 20px; 
		float: none;
		text-align: center;
		background: #fff; }
	.block-step4 .inner .arrowBox{
		width: 100%;
		padding: 3% 0;
		float: none;
		height:	auto;
		background-image: url(/sevice_shared/img/cloud/top/ico_arrow003.png);
		background-repeat: no-repeat;
		background-position: center 50%; }
	.block-step4 .inner .Box p.message{ font-size: 1.4rem; }
}

.layout-unit.layout-4col, .layout-unit-fix.layout-4col { width: 23%; margin-left: 2.5%; } 
@media screen and (max-width: 739px) {
  .layout-unit.layout-4col { width: 100%; }
}


/*-------------------------------
	DNS
-------------------------------*/
.dns .heading { background:url(/sevice_shared/img/cloud/dns/bg_main.png) no-repeat right 0;}
.dns section.scene p{padding:30px 20px; }
.dns section.scene .arrow{padding:0; }
.dns section.scene .before{border:#439bf1 solid 3px; }
.dns section.scene .after{border:#ff9800 solid 3px; }
@media screen and (min-width:740px){
	.dns section.scene p{　max-width: 264px; }
}
@media screen and (max-width:739px){
	.dns section.scene .after { margin-bottom: 10%; }
}

/*-------------------------------
	GSLB
-------------------------------*/
.gslb .heading { background: url(/sevice_shared/img/cloud/dns/bg_gslb.png) no-repeat right 0; }
.galb .top_pala { border-top: 1px solid #e4e4e4; }
/* floatの順序入れ替え */
@media screen and (min-width:740px){
	.gslb .top_pala .layout-unit.layout-2col { float: right; margin: 0 2% 0 0; }
}

.gslb .gslb table thead tr{ line-height: 1; }
.gslb .service_list ul li:before { content: "・"; margin-right: 5px; }	
/* モウダルウィンドウ */
.parent-container li img {
	box-shadow: 0 2px 6px -1px #525252;
	-moz-box-shadow: 0 2px 6px -1px #525252;
	-webkit-box-shadow: 0 2px 6px -1px #525252; }
.parent-container li {
	float: left;
	width: 27%;
	margin-right: 1%; }
.parent-container li:last-child { margin-right: none; }
@media screen and (max-width:739px){
	.parent-container {	margin-bottom: 20px; }
	.parent-container li{
		width:30%;
		margin-right: 5%; }
	.parent-container li:last-child { margin-right: 0; }
}

/*-------------------------------
	aos
-------------------------------*/
/*-- heading --*/
.aos .heading {background: url(/sevice_shared/img/solution/aos/bg_main.png) no-repeat right 0; }

.aos .monitoring .layout-unit.layout-2col { box-sizing: border-box; padding: 10px 20px; }
@media screen and (max-width:739px){
	.aos .monitoring .layout-unit.layout-2col { display: block; }
}
.bgc_aos{ background: rgba(0, 139, 139, 0.75) !important; }
.bgc_lightaos{ background: rgba(64, 168, 168, 0.25)!important; }


/*-------------------------------
	security
-------------------------------*/
.security .heading { background: url(/sevice_shared/img/cloud/security/bg_01.png) no-repeat right 0; }
.security .security-service a { color: #333; }
.security .security-service a:hover { text-decoration: none; }
.security .link_anchor li { display: inline-block; width: 29%; }
.security .tab li {
	font-size: 18px; 
	font-size: 1.8rem; }
.security .tab li.on { padding: 20px 2px; box-shadow: 0px 3px #4d9feb; }
.tab li a { padding: 20px 2px; }
.tab li a:hover {
    background: #4d9feb;
    box-shadow: 0px 3px #4d9feb;
}
@media screen and (max-width:959px){
    .security .tab li {
        font-size: 14px; 
        font-size: 1.4rem; }
}
@media screen and (max-width: 739px){
	.security .link_anchor li { width: 100%; }
    .security .tabArea { border-bottom: none; }
    .security .tabMenu { 
        pointer-events: all;
        display: block;
        padding: 20px;
        background: url("/sevice_shared/img/cloud/security/ico_01.png") no-repeat center right 30px;
    }
    .security .tabMenu.active { background: url("/sevice_shared/img/cloud/security/ico_02.png") no-repeat center right 30px; }
    .security .tab { 
        display: none;
        padding: 0 30px 40px;
    }
    .security .tab-5col .tab li { 
        width: 100%;
        border-left: none;
        border-bottom: 1px solid #DDD;
        text-align: left;
        font-weight: normal;
        font-size: 15px;
        font-size: 1.5rem;
    }
    .security .tab-5col .tab li:last-child { border-right: none; }
    .security .tab li.on { padding: 12px 24px 10px; box-shadow: none; font-weight: bold; }
    .security .tab-5col .tab li a { padding: 12px 24px 10px; font-weight: normal !important; } 
    .security .tab-5col .tab li a:hover { 
        color: #333;
        box-shadow: none;
        background: none; } 
}

.flex {
    max-width: 980px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
}