@charset "utf-8";
/* CSS Document */

/* マネージドナビゲーション*/

#fllNavi{width: 960px; height: 50px; background: #0085b2; color:#80c2d9;}
#fllNavi a{ color:#fff;}
#fllNavi a:hover{ color:#80c2d9;}
/*#fllNavi{width: 960px; height: 50px; background: #0085b2; color:#fff;}
#fllNavi a{ color:#80c2d9;}
#fllNavi a:hover{ color:#fff;}*/
#lightNavi{width: 960px; height: 50px; background: #85b200; color:#dfe6ca;}
#lightNavi a{ color:#fff;}
#lightNavi a:hover{ color:#dfe6ca;}
/*#lightNavi{width: 960px; height: 50px; background: #85b200; color:#fff;}
#lightNavi a{ color:#dfe6ca;}
#lightNavi a:hover{ color:#fff;}*/
#selfNavi{width: 960px; height: 50px; background: #dda501; color:#ebdfbd;}
#selfNavi a{ color:#fff;}
#selfNavi a:hover{ color:#ebdfbd;}
/*#selfNavi{width: 960px; height: 50px; background: #dda501; color:#fff;}
#selfNavi a{ color:#ebdfbd;}
#selfNavi a:hover{ color:#fff;}*/

ul.managedNavi{width: 100%; padding-top: 15px;}
.managedNavi li{width: 20%; text-align:center;}

/*.managedNavi li{ background:url(/images/indent/arrow_white12px_un.png) no-repeat 15 5;}
.managedNavi a li{ background:url(/images/indent/arrow_white12px.png) no-repeat 0 5;}*/

.titleArrow{
	width: 335px; height: 55px;
	background: url(/images/other/title_arrowblue.gif) no-repeat;
	color:#fff; text-align:center; font-size: 15px; font-weight: bold;
	padding-top: 20px;}

/* タイトル */

#mainTitle{
	width: 670px; height: 70px; background: #f3f5f7; padding: 15px 20px 0 20px; margin-bottom: 32px;}
#mainTitle h2{ font-size: 23px; font-weight: bold;}
.titleCaption{ font-size: 16px; color: #666; margin-bottom: -4px;}

#sabTitle{ width: 670px; height:15px; background:#8c9dad; color:#fff; padding: 8px 20px 12px 20px; font-size: 14px;}
#pageTitle{width: 670px; height: 100px; background: #f3f5f7; padding: 28px 20px 0 20px;}
#pageTitle h2{ font-size: 21px; font-weight: bold; line-height:140%;}
	
/* サーバー */
#dedicatedTitle,#vpsTitle,#windowsTitle,#cloudTitle{
	width: 650px; height: 130px; padding: 32px 30px 0 30px; margin-bottom: 32px; letter-spacing: 0.1em;}
#dedicatedTitle{ background:url(/images/server/title_dedicated.png) no-repeat;}
#vpsTitle{ background:url(/images/server/title_vps.png) no-repeat;}
#windowsTitle{ background:url(/images/server/title_windows.png) no-repeat;}
#cloudTitle{ background:url(/images/server/title_cloud.png) no-repeat;}

#grayTitle{
	width: 650px; height: 132px;
	padding: 30px 30px 0 30px; letter-spacing: 0.1em; background:
	url(/images/plan/w710title_gray.gif) no-repeat; color:#fff;}
h2.planTitle{font-size: 32px; font-weight: bold; letter-spacing: 0.05em;}
.planCaption{ font-size: 19px; line-height: 140%;
	font-weight: bold; letter-spacing: 0.1em;
	}

h2.serverTitle{font-size: 35px; font-weight: bold;}
h2.serverTitle_w{font-size: 34px; font-weight: bold;}
.serverCaption{ font-size: 167%; line-height: 130%; font-weight: bold;
	margin-bottom:3px;}

/* マネージド */
#fllTitle,#lightTitle,#selfTitle {
	width: 670px; height: 135px; padding: 45px 20px 0 20px; margin-bottom: 32px; }
#fllTitle_s,#lightTitle_s,#selfTitle_s{
	width: 670px; height: 117px; padding: 45px 20px 0 20px; margin-bottom: 32px; }
#fllTitle{ background:url(/images/managed/title_fll.gif) no-repeat;}
#fllTitle_s{ background:url(/images/managed/title_fll_s.gif) no-repeat;}
#lightTitle{ background:url(/images/managed/title_light.gif) no-repeat;}
#lightTitle_s{ background:url(/images/managed/title_light_s.gif) no-repeat;}
#selfTitle{ background:url(/images/managed/title_self.gif) no-repeat;}
#selfTitle_s{ background:url(/images/managed/title_self_s.gif) no-repeat;}

h2.managedTitle{font-size: 30px; font-weight: bold; color: #fff; margin-bottom: 10px;}
.managedCaption{ font-size: 19px; line-height: 150%; color: #fff;
	font-weight: bold; letter-spacing: 0.1em;}

/* その他 */
#headingTitle{ width: 670px; height:20px;
	background:#8c9dad; color:#fff; padding: 10px 20px;}

#caseTitle,#newTitle{  position: relative;
	width: 670px; height: 100px; background: #f3f5f7; padding: 23px 20px 0 20px;}
#caseTitle h2{ font-size: 21px; font-weight: bold; line-height:140%;}
#caseTitle .type{position: absolute; bottom: 16px; left: 20px;}

#newTitle h2{ font-size: 18px; font-weight: bold; line-height:140%;}

.tag li{float:left; padding-right: 3px;}

.grayTitle_h40{
	width: 670px; height: 50px;
	padding: 0 20px 0 20px;
	color: #dfe3e7; letter-spacing: 0.05em;
	background: #5e7185;
	line-height: 130%;	
	}
	
.grayTitle_h80{
	width: 670px; height: 70px;
	padding: 10px 20px 0 20px;
	color: #dfe3e7; letter-spacing: 0.05em;
	background: #5e7185;
	line-height: 175%;	
	}
	
.grayTitle{
	width: 680px; height: 40px;
	padding: 10px 15px 0 15px;
	color: #fff; font-size: 19px; font-weight: bold; letter-spacing: 0.05em;
	background: #444d54;
	line-height: 175%;	
	}
	
.gray_variableTitle{
	width: auto; height: 38px;
	padding: 12px 15px 0 15px;
	color: #fff; font-size: 17px; font-weight: bold; letter-spacing: 0.05em;
	background: #444d54;	
	}
	
.gray_w220Title{
	width: 200px; height: 24px;
	padding: 6px 10px 0 10px;
	color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.05em;
	background: #8c9dad;
	text-align: center;
}

.gray_w230Title{
	width: 210px; height: 24px;
	padding: 6px 10px 0 10px;
	color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.05em;
	background: #7d7c77;
	text-align: center;
}

.case_w230Title{
	width: 210px; height: 24px;
	padding: 7px 10px 0 10px;
	color: #fff; font-size: 12px; font-weight: bold; letter-spacing: 0.05em;
	background: #8c9dad;
}

.indentOraTitle{
	width: auto; height: 20px;
	padding: 0 0 10px 35px;
	color: #fe5803; font-size: 18px; font-weight: bold; letter-spacing: 0.08em;
	line-height: 120%;
	background: url(/images/indent/indent_20pxora.png) no-repeat 5px 0;
	border-bottom: 1px #ccc solid;
}

.indentBlueTitle{
	width: auto; height: 20px;
	padding: 0 0 10px 35px;
	color: #0085b2; font-size: 18px; font-weight: bold; letter-spacing: 0.08em;
	line-height: 120%;
	background: url(/images/indent/indent_20pxblue.png) no-repeat 5px 0;
	border-bottom: 1px #ccc solid;
}

@media only screen and (max-width: 768px) {
    
    #mainTitle {
        width: 100%;
        height: auto;
        background: #f3f5f7;
        padding: 15px 20px 15px 20px;
        margin-bottom: 32px;
    }
    #sabTitle {
        width: 100%;
        height: auto;
        background: #8c9dad;
        color: #fff;
        padding: 2px 10px 2px 10px;
        font-size: 14px;
    }
    
    #headingTitle {
        width: 100%;
        height: auto;
        background: #8c9dad;
        color: #fff;
        padding: 2px 10px 2px 10px;
        font-size: 14px;
        overflow: auto;
    }
    #pageTitle {
        width: 100%;
        height: auto;
        background: #f3f5f7;
        padding: 25px 20px 25px 20px;
        align-items:flex-start;
        display: flex;
        justify-content:center;
        flex-direction:column;
    }
    #pageTitle h2 {
        font-size: 19px;
        line-height: 140%;
        margin: 0;
        padding: 0;
    }
    #pageTitle h2 + ul{
        margin-top: 10px;   
    }
    #caseTitle,
    #newTitle {
        position: relative;
        width: 100%;
        height: auto;
        background: #f3f5f7;
        padding: 25px 20px 25px 20px;
        display: flex;
        align-items:center;
    }
    #caseTitle h2,
    #newTitle h2{
        margin-top: 0;
    }
    
    #dedicatedTitle, 
    #vpsTitle, 
    #windowsTitle, 
    #cloudTitle,
    #grayTitle{
        width: 100%;
        height: auto;
        padding: 10px 10px 10px 10px;
        letter-spacing: 0.1em;
    }
    #dedicatedTitle{
        background: #ffd24d;
        border:solid 5px #ffdb71;
    }
    #vpsTitle {
        background: #a4d939;
        border:solid 5px #b6e14e;
    }
    #vpsTitle h2{
        line-height: 1;
        margin-top: 20px;
    }
    #windowsTitle {
        background: #40b5dd;
        border:solid 5px #63c4e3;
    }
    #windowsTitle h2{
        line-height: 1;
        margin-top: 20px;
    }
    #cloudTitle {
        background: #58d2fc;
        border:solid 5px #78dbfc;
    }
    #cloudTitle h2{
        line-height: 1;
        margin-top: 20px;
    }
    #grayTitle {
        background: #565e64;
        border:solid 5px #787e83;
    }
    #grayTitle h2{
        line-height: 1.2;
        margin-top: 16px;
    }
    .planCaption {
        font-size: 14px;
        line-height: 140%;
        font-weight: bold;
        letter-spacing: 0.1em;
        margin-bottom: 16px;
    }
    h2.planTitle {
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1.2;
    }
    h2.serverTitle {
        font-size: 32px;
        font-weight: bold;
    }
    .serverCaption{
        font-size: 140%;
        line-height: 130%;
        font-weight: bold;
        margin-bottom: 3px;
    }
    .grayTitle {
        width: 100%;
        height: auto;
        padding: 10px 15px 10px 15px;
        color: #fff;
        letter-spacing: 0.05em;
        background: #444d54;
        line-height: 1.4;
    }
    .grayTitle_h40 {
        width: 100%;
        height: auto;
        padding: 5px 20px 5px 20px;
        color: #dfe3e7;
        letter-spacing: 0.05em;
        background: #5e7185;
        line-height: 130%;
    }
    .gray_variableTitle {
        width: 100%;
        height: auto;
        padding: 12px 15px 12px 15px;
        color: #fff;
        font-size: 17px;
        font-weight: bold;
        letter-spacing: 0.05em;
        background: #444d54;
    }
    .indentOraTitle{
        padding: 0 0 30px 35px;
    }
    .indentBlueTitle{
        height: auto;
    }
    
    .box-blue{
         border:3px solid #4da9c9;
         border-radius: 5px;
         background: #f6fbfe;
         padding:10px 10px;
    }
    
    #fllTitle,#lightTitle,#selfTitle {
        width: 100%; height: auto; padding: 15px; margin-bottom: 32px; }
    #fllTitle{ 
        background-color:#1a84af;
        background-image: url(/images/managed/title_fll_sp.png);
        background-position: top 22px right 15px;
        background-size: auto 28px;
    }
    #lightTitle{ 
        background-color:#86b22d;
        background-image: url(/images/managed/title_light_sp.png);
        background-position: top 22px right 15px;
        background-size: auto 28px;
    }
    #selfTitle{ 
        background-color:#dba52f;
        background-image: url(/images/managed/title_self_sp.png);
        background-position: top 22px right 13px;
        background-size: auto 26px;
    }

    h2.managedTitle{font-size: 26px; font-weight: bold; color: #fff; margin-bottom: 5px;}
    .managedCaption{ font-size: 14px; line-height: 150%; color: #fff;
        font-weight: bold; letter-spacing: 0.1em;}
    
    #caseTitle,
    #newTitle {
        position: relative;
        width: 100%;
        height: auto;
        background: #f3f5f7;
        padding: 25px 20px 25px 20px;
        display: flex;
        align-items:flex-start;
        justify-content:center;
        flex-direction:column;
    }
}


	
/* ライン */
.line2pxGray{width: auto; height: 2px; background: #e7ebef;}
.line1pxGray{width: auto; height: 1px; background: #e7ebef;}
.under_2pxgray{width: auto; height: 2px;
	background:url(/images/common/under_2px_gray.gif) repeat-x;}
.img1pxGray{ border:#e7ebef solid 1px;}
	
/* 角丸枠 */

.r_w502top{
	width: 502px; height: 10px;
	background:url(/images/other/R_w502_top.gif) no-repeat;
	display: block;
	}
 
.r_w502cnt{
	width: 500px; height: auto;
	padding: 15px 0 22px 0;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
	background: #f7f8f9;
	}
 
.r_w502btm{
	width: 502px; height: 10px;
	background:url(/images/other/R_w502_btm.gif) no-repeat;
	display: block;
	}
	
.r_w690top{
	width: 690px; height: 8px;
	background:url(/images/other/R_w690_blue_top.gif) no-repeat;
	display: block;
	}
 
.r_w690cnt{
	width: 684px; height: auto;
	padding: 13px 0 10px 0;
	border-left: 3px solid #4da9c9;
	border-right: 3px solid #4da9c9;
	background: #f6fbfe;
	}
 
.r_w690btm{
	width: 690px; height: 8px;
	background:url(/images/other/R_w690_blue_btm.gif) no-repeat;
	display: block;
	}
	
.r_w700top_2box{
	width: 700px; height: 8px;
	background:url(/images/bg/w700_2box_top.gif) no-repeat;
	display: block;
	}
 
.r_w700cnt_2box{
	width: 687px; height: auto;
	padding: 8px 0 6px 13px;
	background:url(/images/bg/w700_2box_cnt.gif) repeat-y;
	line-height: 160%;
	}
 
.r_w700btm_2box{
	width: 700px; height: 8px;
	background:url(/images/bg/w700_2box_btm.gif) no-repeat;
	display: block;
	}
	
.r_w700top_3box{
	width: 700px; height: 8px;
	background:url(/images/bg/w700_3box_top.gif) no-repeat;
	display: block;
	}
 
.r_w700cnt_3box{
	width: 687px; height: auto;
	padding: 8px 0 6px 13px;
	background:url(/images/bg/w700_3box_cnt.gif) repeat-y;
	line-height: 160%;
	}
 
.r_w700btm_3box{
	width: 700px; height: 8px;
	background:url(/images/bg/w700_3box_btm.gif) no-repeat;
	display: block;
	}
	
/* 共通枠 */

.m10pxBox{ margin: 0 10px;}

.pd3pxBox{ padding: 0 3px;}
.pd5pxBox{ padding: 0 5px;}
.pd10pxBox{ padding: 0 10px;}
.pd12pxBox{ padding: 0 12px;}
.pd15pxBox{ padding: 0 15px;}
.pd20pxBox{ padding: 0 20px;}
.pd25pxBox{ padding: 0 25px;}
.pd30pxBox{ padding: 0 30px;}
.pd40pxBox{ padding: 0 40px;}
.pd60pxBox{ padding: 0 60px;}

.pd104pxBox{ padding: 0 104px;}

.width125{ width: 125px;}
.width184{ width: 184px;}
.width203{ width: 204px;}
.width200{ width: 200px;}
.width220{ width: 220px;}
.width230{ width: 230px;}
.width300{ width: 300px;}
.width322{ width: 322px;}
.width340{ width: 340px;}
.width345{ width: 345px;}
.width350{ width: 350px;}
.width400{ width: 400px;}
.width450{ width: 450px;}
.width490{ width: 490px;}
.width530{ width: 530px;}
.width764{ width: 764px;}

.width_all{ width: 100%;}

.contw335{ width: 335px;}

.iconTitle100{
    display: flex;
    align-items:center;
    line-height: 1.4;
}
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}

/* list-50% */
@media only screen and (max-width: 768px) {
    .sp-list-50p{
        display: flex;
        flex-wrap:wrap;
    }
    .sp-list-50p li{
        width:50%;
        margin-right: 0 !important;
        text-align: center;
        margin-top: 20px !important;
    }
    
    /*　width %指定
    ---------------------------------------------*/
    .sp-w10p{width:10% !important;}
    .sp-w20p{width:20% !important;}
    .sp-w25p{width:25% !important;}
    .sp-w30p{width:30% !important;}
    .sp-w40p{width:40% !important;}
    .sp-w50p{width:50% !important;}
    .sp-w60p{width:60% !important;}
    .sp-w70p{width:70% !important;}
    .sp-w80p{width:80% !important;}
    .sp-w90p{width:90% !important;}
    .sp-w95p{width:95% !important;}
    .sp-w100p{width:100% !important;}
}

/* 共通ケイ線BOX　*/

.bd1pxgrayBox{
	border: 1px solid #e7eaef;
	padding: 15px;
	}
	
.bd1pxblueBox{
	border: 1px solid #00a3d9;
	padding: 15px 20px 13px 20px;
	}

.bd2pxgrayBox{
	border: 2px solid #e7eaef;
	padding: 15px 20px 13px 20px;
	}
	
.bd2pxgrayBox02{
	border: 2px solid #e7eaef;
	padding: 25px 25px 15px 20px;
	}
	
.bd2pxblueBox{
	border: 2px solid #00a3d9;
	padding: 20px;
	}
	
.bd2pxoraBox{
	border: 2px solid #e95d2d;
	padding: 20px;
	}
	
	
/* 共通BOX カラー　*/

.bdgrayBox{ background: #f4f5f9; padding: 20px;}
.bdgrayL_Box{ background: #edfaff; padding: 20px;}	
.bgblueBox{ color: #fff; background:#4dd2ff; padding: 20px;}
.bgbeigeBox{ background:#faf8ef; padding: 20px;}
.bgbeigeRoundedBox{background: #fff8ec;padding: 20px;border: solid 2px #ffcbba;border-radius: 8px;}
	
/* 可変BOX*/

.inlineBox {
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	padding-right: 6px;
}

@media only screen and (max-width: 768px) {
    /* 共通枠 */
    .sp-m10pxBox{ margin: 0 10px !important;}
    .sp-pd0pxBox{ padding: 0 !important;}
    .sp-pd3pxBox{ padding: 0 3px !important;}
    .sp-pd5pxBox{ padding: 0 5px !important;}
    .sp-pd10pxBox{ padding: 0 10px !important;}
    .sp-pd12pxBox{ padding: 0 12px !important;}
    .sp-pd15pxBox{ padding: 0 15px !important;}
    .sp-pd20pxBox{ padding: 0 20px !important;}
    .sp-pd25pxBox{ padding: 0 25px !important;}
    .sp-pd30pxBox{ padding: 0 30px !important;}
    .sp-pd40pxBox{ padding: 0 40px !important;}
    .sp-sp-pd60pxBox{ padding: 0 60px;}
    
    .sp-of-x{
        overflow-x: auto;
    }
    
    /* 共通ケイ線BOX　*/
    .bd2pxgrayBox02{
        border: 2px solid #e7eaef;
        padding: 10px 10px 10px 10px;
    }
}


/*青枠*/
.box-blue{
     border:3px solid #4da9c9;
     border-radius: 5px;
     background: #f6fbfe;
     padding:6px 10px;
}
.box-blue-pad10_8{
     padding: 10px 8px;
}

/* お問い合わせボタン */
	
.inqBtnarea{
	text-align: center;
	}

.inqBtnarea h4{ 
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
	}
	
/* お見積りフォームボタン */

.estimateBtn a{
	width: 230px; height: 39px;
	text-align: center;
	padding-top: 21px;
	background: url(../images/common/side_inq_btn.png) no-repeat 0 -10px;
	display:block;
	color: #fff;
	margin-bottom: 2px;
	font-size: 14px;
	/*font-weight: bold;*/
	}

.estimateBtn a:hover{
	width: 230px; height: 39px;
	text-align: center;
	padding-top: 21px;
	background: url(../images/common/side_inq_btn_on.png) no-repeat 0 -10px;
	display:block;
	text-decoration: none;
	color: #fff;
	margin-bottom: 2px;
	font-size: 14px;
	/*font-weight: bold;*/
	}
	
.w230BtnCnt{width: 230px; height: auto; margin: 0 auto;}

/* 青ボタン w335 */

.blueBtn a,.blueBtn li a{
	width: 280px; height: 44px;
	padding: 26px 15px 0 40px;
	display:block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 130%;
	background: url(/images/other/w335blue_btn.gif) no-repeat;
	vertical-align: middle;
}

.blueBtn a:hover,.blueBtn li a:hover{
	width: 280px; height: 44px;
	padding: 26px 15px 0 40px;
	display:block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 130%;
	background: url(/images/other/w335blue_btn_o.gif) no-repeat;
	text-decoration: none;
}

.blueBtn02 a,.blueBtn02 li a{
	width: 280px; height: 52px;
	padding: 18px 15px 0 40px;
	display:block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 120%;
	background: url(/images/other/w335blue_btn.gif) no-repeat;
	vertical-align: top;
}

.blueBtn02 a:hover,.blueBtn02 li a:hover{
	width: 280px; height: 52px;
	padding: 18px 15px 0 40px;
	display:block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 120%;
	background: url(/images/other/w335blue_btn_o.gif) no-repeat;
	text-decoration: none;
}

.blueBtn_btm a{
    width: 100%;
    min-width: 325px;
    height: auto;
    padding: 30px 0 30px 0;
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 130%;
    background: #22a2d5;
    vertical-align: middle;
    float: inherit;
    position: relative;
    text-align: center;
    transition: background .5s;
}
.blueBtn_btm a:hover{
    background: #40b5de;
    text-decoration: none;
    cursor: pointer;
}
.orangeBtn_btm a{
    width: 100%;
    min-width: 325px;
    height: auto;
    padding: 30px 0 30px 0;
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 130%;
    background: #e65e38;
    vertical-align: middle;
    float: inherit;
    position: relative;
    text-align: center;
    transition: background .5s;
}
.orangeBtn_btm a:hover{
    background: #ea7d5d;
    text-decoration: none;
    cursor: pointer;
}
.blueBtn_btm a::after,
.orangeBtn_btm a::after{
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    bottom:10px;
    left:50%;
}

@media only screen and (max-width: 768px) {
    .blueBtn_btm a{
        min-width: 100%;
     }
    .orangeBtn_btm a{
        min-width: 100%;
    }
    .blueBtn,
    .blueBtn02{
        float: inherit;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .blueBtn a,
    .blueBtn02 a,
    .blueBtn li a {
        width: 100%;
        height: auto;
        padding: 26px 15px 26px 40px;
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        line-height: 130%;
        background: #22a2d5;
        vertical-align: middle;
        float: inherit;
        position: relative;
    }
    .blueBtn a::before,
    .blueBtn02 a::before,
    .blueBtn li a::before{
        position: absolute;
        left:12px;
        top:calc(50% - 9px);
        content:"";
        display: inline-block;
        width:16px;
        height: 16px;
        background: #fff;
        border-radius: 8px;
    }
    .blueBtn a::after,
    .blueBtn02 a::after,
    .blueBtn li a::after{
        position:absolute;
        left:18px;
        top:calc(50% - 5px);
        content:"";
        height:0;
        width:0;
        border-style: solid;
        border-width: 4px 0 4px 6px;
        border-color: transparent transparent transparent #2ea3d9;
    }
    
    .blueBtn a:hover,
    .blueBtn a:focus,
    .blueBtn02 a:hover,
    .blueBtn02 a:focus,
    .blueBtn li a:hover,
    .blueBtn li a:focus{
        width: 100%;
        height: auto;
        padding: 26px 15px 26px 40px;
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        line-height: 130%;
        background: #55bde1;
        vertical-align: middle;
        float: inherit;
        position: relative;
    }
}

/* div 中央縦 テキスト */

div.outer {  
    display: table;  /* IE7除く */  
    height: 100px;  
    width: 100%;   
    }  

* html div.outer {  
    position: relative; /* IE */  
    }  

*+html div.outer {  
     position: relative; /* IE7 */  
    }  
	
div.verticalM {  
    display: table-cell;   
    vertical-align: middle;
    }  

* html div.verticalM {  
    position: absolute; /* IE */  
    top: 50%;           /* IE */  
    }  

*+html div.verticalM {  
   position: absolute; /* IE7 */  
   top: 50%;           /* IE7 */  
	}  

div.verticalM p.inner {  
    margin: 0;  
    }  

* html div.verticalM p.inner {  
    position: relative; /* IE */  
    top: -50%;          /* IE */  
    }  

*+html div.verticalM p.inner {  
    position: relative; /* IE7 */  
    top: -50%;          /* IE7 */  
    }  

/* ニュースリリース */
.newsTxtarea {
    width: 690px;
    min-height: 400px;
    font-size: 14px;
    line-height: 180%;
    padding: 0 10px;
    margin-bottom: 35px;
    }

.newsTitle{
	width: 580px; height: auto;
	font-size: 18px;
	color: #333;
	font-weight: bold;
	margin-bottom: 10px;
	}

.newsDay{
	font-size: 14px;
	color: #999;
	font-weight:bold;
	position: absolute;
	right: 0;
	bottom: 0;
	}

.newsTxtarea{
	width: 690px; min-height: 400px;
	font-size: 13px;
	line-height: 200%;
	padding: 0 10px;
	margin-bottom: 35px;
	}
	
/* ニュースリリースリスト */

.newsListarea{
	width: 100%;
	}
	
.newsListarea dl{
	line-height: 230%;	
	}
	
.newsListarea dt{
	width: 16%;
    float: left;
    color: #999;
    font-weight: bold;
    font-size: 14px;
    /* padding-top: 1px; */
    clear: both;
}

.newsListarea dd{
	width: 87%;
	float: right;
	letter-spacing: 0.03em;
    font-size:14px;
    width: 84%;
	}
	
.attention{color: #d80000; padding-right: 0.8em; }

@media only screen and (max-width: 768px) {
    .newsTxtarea {
        width: 100%;
        min-height: auto;
        font-size: 13px;
        line-height: 200%;
        padding: 0;
        margin-bottom: 35px;
    }
    .newsListarea dt {
        width: 100%;
        float: inherit;
        color: #999;
        font-weight: bold;
        font-size: 12px;
        margin-top: 10px;
        
    }
    .newsListarea dd {
        width: 100%;
        float: inherit;
        letter-spacing: 0.03em;
        font-size: 12px !important;
        line-height: 1.4;
    }
    .newsListarea > dl + br{
        display: none;
    }
    .newsListarea dt,
    .newsListarea dd{
        width:100%;
    }
}

/* オプション・その他 */

.w335Listtxt{
	width: 315px; height: auto;
	padding: 0 10px;
	font-size: 12px;
	line-height: 150%;
}

.w220Listtxt{ /* 3box */
	width: 200px; height: auto;
	padding: 0 10px;
}

.w230Constitution{ /* 3box　構成事例 */
	width: 210px; min-height: 205px;
	padding: 15px 10px;
	background:#faf8ef;
	font-size: 11px;
}

.w230Constitution:hover{
	background:#f9f6e8;
}

.w230Casetxt { /* 3box webドクター事例 */
	width: 210px; height:145px;
	padding: 15px 10px 10px 10px;
	background: #f3f5f7;
	line-height: 150%;	
}

.w230Casetxt:hover{
	background: #ebf0f4;
	}

.w155Listtxt{ /* 4box */
	width: 155px; height: auto;
}

.w185Listtxt{ /* 3box */
	width: 190px; height: auto;
}

/* サーバー構成事例　解決したい問題枠 */
/*
#solved_problem{
	width:680px; height: 55px;
	padding: 15px 10px 0 0;
	background:url(/images/case/constitution/agendaBox.gif) no-repeat;
	display:block;
}
*/
#solved_problem{
    display: flex;
    width:100%;
    height: auto;
    padding: 0;
    background: none;
}

#solved_problem th{
	width: 185px; text-align:center; color:#fff; font-weight:bold; font-size: 16px;}
#solved_problem td{
	padding: 2px 15px 0 10px; color:#0085b2;}

#solved_problem h4{
    width:185px;
    height: 70px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 64px;
    background: #1a83ae;
    border-top:solid 3px #1a83ae;
    border-left:solid 3px #1a83ae;
    border-bottom:solid 3px #1a83ae;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
}
#solved_problem ul{
    width:calc(100% - 185px);
    height: 70px;
    border-top: solid 3px #54a9c7;
    border-right: solid 3px #54a9c7;
    border-bottom: solid 3px #54a9c7;
    background: #f6fbfe;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding:11px 0 0 10px;
    box-sizing: border-box;
    line-height: 1.8;
    color: #0085b2;
}
 #solved_problem ul li{
     text-indent: -1em;
     padding-left: 1em;
 }
 #solved_problem ul li::before{
     content:"・"
 }

@media only screen and (max-width: 768px) {
    
    #solved_problem {
        display: flex;
        flex-direction:column;
    }

    #solved_problem h4{
        width:100%;
        height: 50px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        background: #1a83ae;
        border-top:solid 3px #1a83ae;
        border-left:solid 3px #1a83ae;
        border-radius:solid 3px #1a83ae;
        border-bottom:solid 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 0;
        box-sizing: border-box;
    }
    #solved_problem ul{
        width:100%;
        height: auto;
        border-top: none;
        border-left: solid 3px #54a9c7;
        border-right: solid 3px #54a9c7;
        border-bottom: solid 3px #54a9c7;
        background: #f6fbfe;
        border-top-right-radius: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding:10px 10px 10px 10px;
        box-sizing: border-box;
        line-height: 1.8;
        color: #0085b2;
    }
}

/* サーバー構成事例　3box 不要かも211116*/

/*#example_img01{
	width: 214px; height: 291px; display:block; padding: 8px 15px; float:left;
	background:url(/images/case/constitution/example_img01.png) no-repeat;}
#example_img01 a:hover{
	width: 214px; height: 291px; display:block; padding: 8px 15px; float:left;
	background:url(/images/case/constitution/example_img01_o.png) no-repeat;}
	
#example_img01 h4,#example_img02 h4,#example_img03 h4 {
	color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.05em;
	text-align: center; margin-bottom: 29px;}
	
#example_img02 a{background:url(/images/case/constitution/example_img02.png) no-repeat;}
#example_img02 a:hover{background:url(/images/case/constitution/example_img02_o.png) no-repeat;}
#example_img03 a{background:url(/images/case/constitution/example_img03.png) no-repeat;}
#example_img03 a:hover{background:url(/images/case/constitution/example_img03_o.png) no-repeat;}*/

/* サービス一覧 */

/* 4Box pdw20 */
.w147box{width: 147px; height:auto;}

/* 3Box pdw27 */
.w198box{width: 198px; height:auto;}

/* 2Box */
.w229box{width: 229px; height:auto; letter-spacing: -0.01em;}
.w320box{width: 320px; height:auto;}
.w175box{width: 175px; height:auto;}

/*マネージドサポート詳細*/
.frow_user p,.frow_support p{ font-size: 14px;}
.frow_user{
	width: 461px; height: 87px;
	background:url(/images/managed/support/frow01.gif) no-repeat; display:block;
	padding: 27px 30px 0 130px; margin-bottom: 8px; margin-left: 15px; }
.frow_support{
	width: 451px; height: 87px;
	background:url(/images/managed/support/frow02.gif) no-repeat; display:block;
	padding: 27px 140px 0 30px; margin-bottom: 16px; margin-left: 15px; }

/* 会社概要 企業リスト */
.list2L_pad{padding: 3px 0 5px 0;}


/* box-gray */
.box-gray-w502{
     width:502px;
    border:1px solid #dcdcdc;
    border-radius: 5px;
    background: #f7f8f9;
    margin:10px auto;
    padding:25px 30px;
    box-sizing: border-box;
 }

@media only screen and (max-width: 768px) {
    .box-gray-w502{
        width:100%;
        border:1px solid #dcdcdc;
        border-radius: 5px;
        background: #f7f8f9;
        margin:10px auto;
        padding:15px 30px;
    }
}

/*icon title*/
.iconTitle100 > span:first-child{
    display: flex;
    align-items:center;
    width:90px;
}
.iconTitle100 > span img{
    margin: 0;
    padding: 0 5px 0 0;
}
.iconTitle100 > span:last-child{
    display: block;
    width: calc(100% - 90px);   
    padding-left: 5px;
}
.iconTitle50{
    display: flex;
    align-items:center;
    line-height: 1.4;
}
.iconTitle50 > span:first-child{
    display: flex;
    align-items:center;
    width:50px;
}
.iconTitle50 > span img{
    margin: 0;
    padding: 0 5px 0 0;
}
.iconTitle50 > span:last-child{
    display: block;
    width: calc(100% - 50px);   
    padding-left: 5px;
}

@media only screen and (max-width: 768px) {
    
    .iconTitle100{
        display: flex;
        align-items:flex-start;
    }
    .iconTitle100 > span:first-child{
        position: relative;
        top:-3px;
    }
    .iconTitle100 > span:last-child{
        padding-left: 0;
    }
    .iconTitle50{
        display: flex;
        align-items:flex-start;
    }
    .iconTitle50 > span:first-child{
        position: relative;
        top:-3px;
    }
    .iconTitle50 > span:last-child{
        padding-left: 0;
    }
}

/*flow user*/
.frow_user{
    width: 461px; 
    height: 114px;
    background: url(/images/managed/support/frow_user.png) no-repeat;
    display: block;
    padding: 0px 30px 0 105px;
    margin-bottom: 16px;
    margin-left: 15px;
}
.frow_user > div{
    display: flex;
    align-items:center;
    border:solid 3px #ced2e4;
    border-radius: 5px;
    height: 104px;
    width:525px;
    position: relative;
    top:5px;
    padding:0 25px;
    box-sizing: border-box;
    position: relative;
}
.frow_user > div::before{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 40px;
    border-color: transparent transparent #ced2e4 transparent;
    position: absolute;
    left:-40px;
    top:45px;
}
.frow_user > div::after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 40px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    left:-30px;
    top:42px;
}
.frow_support {
    width: 521px;
    height: 114px;
    background: url(/images/managed/support/frow_support.png) no-repeat;
    background-position: right;
    display: block;
    padding: 0 105px 0 0;
    margin-bottom: 16px;
    margin-left: 15px;
}
.frow_support > div{
    display: flex;
    align-items:center;
    flex-wrap:wrap;
    border:solid 3px #ced2e4;
    border-radius: 5px;
    height: 104px;
    width:510px;
    position: relative;
    top:5px;
    padding:0 30px;
    box-sizing: border-box;
    position: relative;
}
.frow_support > div::before{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 40px 0 0;
    border-color: #ced2e4 transparent transparent transparent;
    position: absolute;
    right:-40px;
    top:30px;
}
.frow_support > div::after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 40px 0 0;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    right:-30px;
    top:33px;
}

@media only screen and (max-width: 768px) {
    
    .frow_user{
        width:100%;    
        height: auto;
        background: url(/images/managed/support/frow_user.png) no-repeat;
        background-size: 40px;
        background-position: left center;
        display: block;
        padding: 0 0 0 70px;
        margin-bottom: 16px;
        margin-left: 0;
    }
    .frow_user > div{
        display: flex;
        align-items:center;
        border:solid 3px #ced2e4;
        border-radius: 5px;
        height: auto;
        width: 100%;
        position: relative;
        top:5px;
        box-sizing: border-box;
        position: relative;
        
        padding:15px 10px;
    }
    .frow_user > div::before{
        content:"";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 12px 20px;
        border-color: transparent transparent #ced2e4 transparent;
        position: absolute;
        left:-20px;
        top: 50%;
    }
    .frow_user > div::after{
        content:"";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 12px 20px;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        left:-10px;
        top: calc(50% - 3px);
    }
    .frow_support {
        width:100%;
        height: auto;
        background: url(/images/managed/support/frow_support.png) no-repeat;
        background-size: 50px;
        background-position: right center;
        display: block;
        padding: 0 70px 0 0px;
        margin-bottom: 16px;
        margin-left: 0;
    }
    .frow_support > div{
        display: flex;
        align-items:center;
        flex-wrap:wrap;
        border:solid 3px #ced2e4;
        border-radius: 5px;
        height: auto;
        width:100%;
        position: relative;
        top:5px;
        padding:15px 10px;
        box-sizing: border-box;
        position: relative;
    }
    .frow_support > div::before{
        content:"";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 20px 0 0;
        border-color: #ced2e4 transparent transparent transparent;
        position: absolute;
        right:-20px;
        top: 50%;
    }
    .frow_support > div::after{
        content:"";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 20px 0 0;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        right:-10px;
        top: calc(50% + 3px);
    }
}

/* VPN */
@media only screen and (max-width: 768px) {
    .vpn_price {
        width: 100% !important;
        min-height: 50px;
        margin: auto !important;
        padding: 12px 20px 10px 20px;
        background-color: #115697;
    }
    .vpn_price dt,
    .vpn_price dd,
    .vpn_price span{
        font-size: 13px !important;
    }
    .vpn_price dt{
        width:68px;
    }
    .vpn_price dd{
        width:calc(100% - 68px);   
    }
}

/* copyright */
@media only screen and (max-width: 768px) {
    #copyright{
        display: block;
        width:100%;
        height:30px;
        background: gray;
        color:#fff;
        text-align: center;
        position: absolute;
        bottom: 0;
        left:0;
        line-height: 30px;
    }
}

/* list-serverType */
.list-serverType{
     display: flex;
     flex-wrap:wrap;
     justify-content:space-between;
}
 .list-serverType li{
     width: 147px;
     margin-right: 27px;
     display: block;
     margin-right: 0;
 }
 .list-serverType li:nth-child(4n){
     margin-right: 0;
 }

 @media only screen and (max-width: 768px) {
     .list-serverType{
        padding-left: 0px;
     }
      .list-serverType li{
        width:50%;
        margin-right: 0;
     }
     .list-serverType li:nth-child(2n){
         margin-right: 0;
     }
     .list-serverType li:nth-child(odd){
         padding-right: 5px;
     }
     .list-serverType li:nth-child(even){
         padding-left: 5px;
     }
     .list-serverType li > a img{
         width: 100%;
         height: auto;
     }
 }

/* list-option */
.list-option{
     display: flex;
     flex-wrap:wrap;
 }
 .list-option li{
     margin-right: 50px;
     width:320px;
 }
 .list-option li:nth-child(2n){
     margin-right: 0;
 }
 .list-option li img{
     width:120px;
     height: 120px;
 }
 .list-option li a{
     display: flex;
 }
 .list-option li a > div{
     width:175px;
     padding-left: 25px;
     position: relative;
     display: flex;
     flex-direction:column;
     justify-content:space-between;
 }
 .list-option li a > div{

 }
 @media only screen and (max-width: 768px) {

     .list-option li{
         margin-right: 0;
         width:100%;
     }
      .list-option li img{
         width:100px;
         height: 100px;
     }
     .list-option li a > div{
         width:calc(100% - 100px);
         padding-left: 15px;
     }
 }

/* list-case */
.list-case{
     display: flex;
     flex-wrap:wrap;
 }
 .list-case li{
     padding-right: 10px;
 }
 .list-case li:nth-child(3n){
     padding-right: 0;
 }

 @media only screen and (max-width: 768px) {
     .list-case li > p,
     .list-case li a > div{
         width:100%;
     }
     .list-case li a{
     }
     .list-case li{
         width:100%;
         padding-right: 0;
     }
     .case_w230Title {
        width:100%;
        height: auto;
        padding: 7px 10px 7px 10px;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.05em;
        background: #8c9dad;
    }
     .list-case li a > div{
        height: 100%;
         overflow: auto;
     }
 }

/* list-flow */
.list-flow{
    display: flex;
    justify-content:space-around;
    padding:0 10px;
    margin-bottom: 50px;
}
.list-flow li{
    width:25%;
    text-align: left;
    position: relative;
}
.list-flow li img{
    position: relative;
    left:25px;
    margin: 0 0 30px 0;
}
.list-flow li h4{
    white-space: nowrap;
}
.list-flow li p{
    padding-right: 20px;
}
.list-flow li:last-child p{
}
.list-flow li::after{
    content:"";
    display: inline-block;
    width:30px;
    height: 33px;
    background: url(../images/content/beginner/service_flow_arrow.png);
    background-size: contain;
    position: absolute;
    right:-15px;
    top: 43px;
}
.list-flow li:last-child::after{
    background: none;
}

@media only screen and (max-width: 768px) {

    .list-flow{
        display: flex;
        flex-direction:column;
        justify-content:space-between;
        padding:0;
        margin-bottom: 20px;
    }
    .list-flow li{
        display: flex;
        margin-bottom: 20px;
        width: auto;
        min-height: 110px;
    }
    .list-flow li img{
        position: relative;
        left:0px;
        margin: 0;
        width:80px;
        height: 80px !important;
    }
    .list-flow li div{
        padding-left: 20px;
    }
    .list-flow li::after{
        content:"";
        display: inline-block;
        width:25px;
        height: 27.5px;
        background: url(../images/content/beginner/service_flow_arrow.png);
        background-size: contain;
        position: absolute;
        right: auto;
        left:28px;
        top:calc(50% + 35px);
        transform: rotate(90deg);
    }
}

/*column-managed*/
@media only screen and (max-width: 768px) {
    .column-managed{
        display: flex;
        justify-content:space-between;
        padding:0;
        margin-top: 30px;
    }
    .column-managed > div{
        width:calc(100% / 3 - 3px) !important;
        padding:0;
        padding-right: 0;
        display: flex;
        flex-direction:column;
        justify-content:space-between;
    }
    .column-managed > div h4{
        font-size: 11px;
        display: flex;
        flex-direction:column;
        justify-content:space-between;
        height: 100%;
    }
    .column-managed > div h4 span{
        display: flex;
        align-items:center;
        justify-content:center;
        font-size: 12px;
        height: 40px;
    }
    .column-managed > div.column-managed-fin{
        margin-right: 0;
    }
    column-managed2{
        width:100%;
        padding: 0;
    }
    .column-managed2 > div{
        width: 100%;
    }
    .column-managed2 > div img{
        width:100%;
    }
}