/*======共通========*/
.works_main{
    width: 100%;
}
.works_large{
    width: 100%;
    float: left;
    padding: 40px 0;
    border-bottom: 1px solid #CCC;
}
.works_large .left{
    width: 60%;
    padding-right: 30px;
    float: left;
}
.works_large .right{
    width: 40%;
    float: right;
}
.works_large .left p.detail{
    margin-bottom: 20px;
}
.works_list{
    float: left;
    margin-top: 10px;
    width: 100%;
}
.works_large .left h3{
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.works_list ul{
    width:100%;
    margin:0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.works_list ul li{
    width: 25%;
    /* max-width: 25%; */
    float: left;
    padding: 8px;
}
.works_list ul li img{
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
}
.works_list p{
    line-height: 18px;
    font-size: 14px;
}
/*********************************
RESPONSIVE
**********************************/
/*SP*/
@media screen and (max-width:767px) {
.works_list ul li{
    width: 50%;
}
.works_large .left{
    width: 100%;
    padding-right: 0;
}
.works_large .right{
    width: 100%;
    margin-bottom: 20px;
}
}
/*======共通========*/
.header-p2{
    background: #F6AD3C;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
}
.header-p3{
    background: #8FC31F;
    color: #FFF;
}
.header-p5{
    color: #FFF;
    background: #0068B7;
}
.p2.dark{
    background: #f6ad3c7a;
}
.p2.light{
    background: #FFF2E6;
}
.p3.dark{
    background: #8fc31f91;
}
.p3.light{
    background: #E6FFE6;
}
.p5.dark{
    background: #0068b787;
}
.p5.light{
    background: #e6f1ff;
}
table.table-line{
	border-collapse: collapse;
	text-align: center;
	line-height: 1.5;
}
table.table-line th{
	padding: 15px;
	font-weight: bold;
	vertical-align: middle;
    letter-spacing: 2px;
	border: 1px solid #ccc;
}
table.table-line td{
	padding: 10px;
	vertical-align: middle;
	border: 1px solid #ccc;
}
.service_main{
    width: 75%;
    float: left;
}
.service_main_nav ul{
    width: 100%;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    width: 100%;
    margin-bottom: 30px;
}
.service_main_nav ul li{
    float: left;
    width: 23.5%;
    margin-left: 2%;
    margin-bottom: 10px;
}
.service_main_nav ul li:nth-child(4n+1){
    margin-left: 0;
}
.service_main_nav ul li a{
    width: 100%;
    height: 100%;
    display: block;
    padding: 15px 10px;
    background-color: #FFF;
    text-align: center;
    border: 1px solid #CCC;
    font-size: 1.4rem;
    font-weight: bold;
}
.service_main_nav ul li a:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-right: 3px solid #40B0BD;
    border-bottom: 3px solid #40B0BD;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.service_main{
    width: 78%;
    float: left;
}
.service_nav{
    width: 22%;
    float: right;
}
.service_main h2{
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    color: #000;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
    padding-left: 10px;
}
.service_main h2:first-letter {
  color: #40B0BD;
  font-size: 35px;
}
.service_main h3{
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #000;
    position: relative;
    padding: 0.25em 1em;
    display: inline-block;
}

.service_main h3:before,.service_main h3:after{
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.service_main h3:before{
    border-left: solid 2px #CCC;
    border-top: solid 2px #CCC;
    top:0;
    left: 0;
}

.service_main h3:after{
    border-right: solid 2px #CCC;
    border-bottom: solid 2px #CCC;
    bottom:0;
    right: 0;
}

/*.service_main table{
    margin: 20px 0;
}
.service_main table th,
.service_main table td{
    width: 25%;
    padding: 5px 10px;
}*/
/* サービス一覧サイドナビ */
.service_nav h2{
    font-size: 2.2rem;
}
.service_nav nav h3{
    color: #888;
    font-size: 1.8rem;
}
.service_nav nav > ul > li{
    margin-bottom: 30px;
}
.service_nav nav ul li > ul li{
    margin-left: 20px;
    list-style: disc;
    margin-bottom: 5px;
}
.service-base{
    width: 100%;
    float: left;
    padding-right: 40px;
    margin-bottom: 50px;
}
.service-content{
    width: 100%;
    float: left;
    border-bottom: 1px solid #CCC;
    padding-bottom: 50px;
    margin-bottom: 50px;
}
.service-content:last-of-type{
    margin-bottom: 0;
    border-bottom: 0;
}
.service-content img{
    width: 100% !important;
    height: auto;
}
.service-content .block{
    margin-bottom: 50px;
}
.service_main .left{
    width: 70%;
    float: left;
    padding-right: 30px;
}
.service_main .right{
    width: 30%;
    float: right;
}
/*============== service ==============*/
.service_top{
    width: 100%;
}
.service_top_content{
    width: 100%;
    float: left;
    padding-top: 40px;
}
.service_list{
	width:100%;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.list-boxs{
    width: 48%;
    max-width: 48%;
    float: left;
    padding: 30px;
    margin: 1%;

}
.list-boxs:first-child{
    border-right: 1px solid #AAA;
}
.list-boxs:nth-child(2){
    border-bottom: 1px solid #AAA;
}
.list-boxs:nth-child(3){
    border-top: 1px solid #AAA;
}
.list-boxs:last-child{
    border-left: 1px solid #AAA;
}

.list-boxs h2{
    color: #40B0BD;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
    font-size: 2.0rem;
}
.list-boxs h2::before{
    content: "\f14a";
    font-family: FontAwesome;
    margin-right: 10px;
    padding-left: 3px;
}
.box{
    width: 100%;
    background: #40B0BD;
    padding: 30px;
    float: left;
    margin-bottom: 10px;
}
.box h3{
    margin-bottom: 10px;
        color: #FFF;
}
.service_main .price{
    font-size: 2.2rem;
    font-weight: bold;
    color: #40B0BD;
}
/*======サービス中継点=======*/
.relay_content{
    width: 100%;
    float: left;
    margin: 30px 0;
}
.relay_box{
    width: 80%;
    height: 450px;
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.relay_box a{
    display: block;
    height: 450px;
}
.relay_box h2{
    top: 40px;
    left: 40px;
    font-size: 3.5rem;
    position: absolute;
}
.relay_box p{
    width: 60%;
    bottom: 40px;
    right: 40px;
    padding: 20px;
    background: rgba(19, 25, 98, 0.8);
    color: #FFF;
    position: absolute;
}
.relay_box.item0101{
    background: url("../images/service/relay/cre01.jpg");
}
.relay_box.item0102{
    background: url("../images/service/relay/cre02.jpg");
}
.relay_box.item0201{
    background: url("../images/service/relay/mod01.jpg");
}
.relay_box.item0202{
    background: url("../images/service/relay/mod02.jpg");
}
.relay_box.item0301{
    background: url("../images/service/relay/ope01.jpg");
}
.relay_box.item0302{
    background: url("../images/service/relay/ope02.jpg");
}
.relay_box.item0303{
    background: url("../images/service/relay/ope03.jpg");
}
.relay_box.item0401{
    background: url("../images/service/relay/oth01.jpg");
}
.relay_box.item0402{
    background: url("../images/service/relay/oth02.jpg");
}
.relay_box.item0403{
    background: url("../images/service/relay/oth03.jpg");
}

/*======ホスティング=======*/
#hosting .point{
    width: 100%;
    float: left;
    background: #F1F1F1;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 15px;
}
#hosting .point .left{
    width: 25%;
    float: left;
}
#hosting .point .right{
    width: 70%;
    float: right;
}
#hosting .point .right p{
    padding-top: 20px;
}
#hosting .service-plan table{
    font-size: 2.0rem;
    text-align: center;
}
#hosting .service-plan table .item{
    background: #FFF;
}

.service-domain table{
    background: #FFF;
    font-size: 2.0rem;
}
.service-domain table th{
    padding: 10px 0;
    letter-spacing: 2px;
}
.bg-green{
    background: #6BCC0A;
}
#hosting03 ul li{
    float: left;
    width: 32%;
    margin-left: 2%;
}
#hosting03 ul li:first-child{
    margin-left: 0;
}

/*========クラウド==========*/
.cloud_chara_item{
    width: 32%;
    margin-left: 2%;
    float: left;
}
.cloud_chara_item:first-of-type{
    margin-left: 0;
}
.cloud_chara_item img{
    margin-bottom: 10px;
}
.cloud_plan_list li{
    width: 32%;
    height:100px;
    background: #40B0BD;
    margin-left: 2%;
    margin-bottom: 20px;
    float: left;
    color: #FFF;
    text-align: center;
    padding: 20px;
}
.cloud_plan_list li:nth-of-type(3n+1){
    margin-left: 0;
}
.cloud_plan_list li p{
    font-size: 2.2rem;
    margin-top: 10px;
    font-weight: bold;
}
.cloud_case{
    width: 40% !important;
    padding: 0 !important;
}
#cloud04 .full{
    background: url("../images/service/cloud/cloud-arrow-right.png") no-repeat center center;
    background-size: 15%;
}
.case-arrow{
    text-align: center;
}
.case-arrow img{
    width: 100px !important;
    margin: 10px 0;
}
.c-red{
    color: #CC0A0A;
}
/*========ホームページ制作========*/
#creation02 table{
    margin: 30px 0;
}
#creation02 table td,
#creation02 table th{
    padding: 3px 20px;
}
.opdca_img{
    width: 45%;
    float: left;
    position: relative;
    margin-top: 10%;
}
.pdca_btn{
    position: absolute;
    width: 32%;
    height: 18%;
    background: #000;
    opacity: 0.7;
    cursor: pointer;
    border-radius: 10px;
}
.pdca_btn.selected,
.pdca_btn:hover{
    opacity: 0;
}

.o-tab{
    top: 7px;
    left: 134px;
}
.p-tab{
    top: 127px;
    right: 9px;
}
.d-tab{
    bottom: 21px;
    right: 70px;
}
.c-tab{
    bottom: 21px;
    left: 62px;
}
.a-tab{
    top: 127px;
    left: 1px;
}
@media screen and (max-width: 1300px){
    .o-tab{
        top: 6px;
        left: 111px;
    }
    .p-tab{
        top: 87px;
        right: 5px;
    }
    .d-tab{
        bottom: 17px;
        right: 47px;
    }
    .c-tab{
        bottom: 17px;
        left: 43px;
    }
    .a-tab{
        top: 87px;
        left: 1px;
    }
}
@media screen and (max-width: 1100px){
    .pdca_btn{
        border-radius: 6px;
    }
    .o-tab{
        top: 4px;
        left: 87px;
    }
    .p-tab{
        top: 69px;
        right: 4px;
    }
    .d-tab{
        bottom: 15px;
        right: 37px;
    }
    .c-tab{
        bottom: 15px;
        left: 34px;
    }
    .a-tab{
        top: 69px;
        left: 1px;
    }
}
@media screen and (max-width:880px) {
    .pdca_btn{
        border-radius: 10px;
    }
    .o-tab{
        top: 2%;
        left: 33.3%;
    }
    .p-tab{
        top: 31%;
        right: 1.8%;
    }
    .d-tab{
        bottom: 6%;
        right: 14.4%;
    }
    .c-tab{
        bottom: 6%;
        left: 12.8%;
    }
    .a-tab{
        top: 31%;
        left: 0.4%;
    }
}
.opdca_base{
    width: 50%;
    margin-left: 5%;
    float: left;
}
.opdca_item{
    display: none;
}
.opdca_item.active{
    display: block;
}
.opdca_item p{
    margin: 20px 0;
}
.item{
    /*margin-bottom: 50px;*/
    margin-bottom: 70px;
}
.item02{
    margin-bottom: 90px;
}
.item ul{
	padding-left: 20px;
	list-style: disc;
}
/*========ホームページ修正========*/
#question p.strong{
    text-align: center;
    margin: 40px 0 20px;
    float: left;
    width: 100%;
}
#question p.strong strong{
    font-size: 3.4rem;
    color: #F29018;
    letter-spacing: 2px;
}
.modification_list{
    border: 2px solid #CCC;
    padding: 15px 20px;
    width: 70%;
    float: left;
}
#modification03 .modification_list{
    width: 40%;
}
#modification01 .image{
    width: 30%;
    float: left;
    padding-right: 5%;
}
.modification_list li{
    padding: 3px 0;
    border-bottom: 1px dashed #CCC;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
}
.modification_list li:last-child{
    border-bottom: 0;
}
#modification01 .modification_list li::before{
    content: "\f06a";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #F3D924;
}
#modification03 .modification_list li::before{
    content: "\f0a9";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #40B0BD;
}
#modification03 table ul li{
    text-align: left;
    font-size: 1.8rem;
    line-height: 2.0;
}
p.w30{
    width: 30%;
    float: left;
}
p.w30 img{
    width: 70% !important;
}

.modification_plan_img img{
    height: 160px;
    width: auto !important;
    margin-left: 20px;
}
.modification #plan table .w20{
    width: 10%;
}
.modification #plan table td ul li{
    text-align: left;
    padding: 10px 0;
}
.service_list_illust li{
    float: left;
    width: 48%;
    margin-left: 4%;
    margin-bottom: 40px;
}
.service_list_illust li:nth-child(3),
.service_list_illust li:nth-child(4){
    margin-bottom: 0;
}
.service_list_illust li:nth-child(odd){
    margin-left: 0;
}
.box .item{
    width: 90%;
    float: left;
    padding: 10px 0;
    border-bottom: 2px dashed #CCC;
}
.box .item:last-of-type{
    border-bottom: 0;
}
.plan_table_service{
    padding: 50px 15px !important;
}
table th.plan_table_head{
    border: 1px solid #CCC;
    width: 20% !important;
}
table th.plan_table_r2{
    width: 40% !important;
}
table th.plan_table_r3{
    width: 40% !important;
}

/*========コンテンツ運用代行========*/
#operation02,
#operation03{
    position: relative;
}
#operation02 .left,
#operation03 .left{
    width: calc(100% - 280px);
    width : -webkit-calc(100% - 280px);
}
#operation02 img,
#operation03 img{
    width: 280px !important;
    height: 196px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
/*========広告運用代行========*/
#analytics01 div{
    width: 100%;
    float: left;
}
#analytics01 ul{
    width: 100%;
    float: left;
    list-style: square;
    margin: 20px 0 20px 30px;
    font-size: 2.0rem;
    color: #2954BA;
}
/*========広告運用代行========*/
#advertisement03 table{
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
}

#advertisement03 table .field{
    width: 38%;
    background: #FFF2E6;
    text-align: center;
}


/*========WEBコンサルティング========*/
#consulting01 ul{
    list-style: circle;
    font-size: 1.8rem;
    margin: 20px 0 20px 40px;
    font-weight: bold;
}
#consulting01 p{
    margin-bottom: 10px;
}
#consulting01 p:last-child{
    margin-bottom: 0;
}
#consulting03 div,
#consulting04 div{
    float: left;
    width: 50%;
    padding: 0 20px;
}

#consulting03 p,
#consulting04 p{
    margin-bottom: 20px;
}
#consulting03 ul,
#consulting04 ul{
    margin-left: 1.8rem;
}
#consulting03 ul li,
#consulting04 ul li{
    list-style-type: square;
    font-weight: bold;
    font-size: 18px;
}
#consulting03 ul li > ul li,
#consulting04 ul li > ul li{
    list-style-type: disc;
    font-weight: normal;
}

/*********************************
RESPONSIVE
**********************************/
/*SP*/
@media screen and (max-width:767px) {
    .list-boxs{
        width: 100%;
        max-width: 100%;
        border: 0px !important;
    }
    .list-boxs .box h3{
        font-size: 2.0rem;
    }
    .service_main,
    .service_nav,
    .opdca_img,
    .opdca_base{
        width: 100%;
    }
    .service_main h2{
        font-size: 2.0rem;
    }
    .service_main h2:first-letter {
      color: #2252C1;
      font-size: 25px;
    }
    .service_main .left{
        width: 100% !important;
        padding-right: 0;
        margin-bottom: 60px;
    }
    .service_main .right{
        width: 100% !important;
        margin-top: 65px;
    }

    #operation02 img,
    #operation03 img{
        position: relative;
        margin: 0 auto;
    }
    #cloud04 .full{
        background: url("../images/service/cloud/cloud-arrow-down.png") no-repeat center center;
        background-size: 55%;
    }
    /*==サービスメニュー==*/
    .service_nav{
        border-top: 1px solid #000;
        padding-top: 10px;
    }
    .service_main_nav ul li{
        width: 48%;
        margin-left: 4%;
    }
    .service_main_nav ul li:nth-child(4n+1){
        margin-left: 0;
    }
    .service_main_nav ul li:nth-child(odd){
        margin-left: 0;
    }
    /*==ホームページ制作==*/
    #creation01 .w50{
        width: 100%;
    }
    .opdca_base{
        margin-top: 20px;
        margin-left: 0;
    }
    .service-base{
        padding: 0;
        margin-bottom: 0;
    }
    /*==コンサルティング==*/
    #consulting03 div, #consulting04 div{
        width: 100%;
        padding: 0;
    }
    #consulting03 div ul,
    #consulting04 div ul{
        margin-left: 20px;
    }
    #consulting03 div:first-of-type,
    #consulting04 div:first-of-type{
        margin-bottom: 40px;
    }
    /*==ホームページ修正==*/
    #modification01 .image{
        width: 100%;
        padding: 0;
    }
    .modification_list{
        width: 100% !important;
    }
    .modification_plan_img img{
        width: 50% !important;
        padding: 2%;
        margin: 0;
        height: auto;
    }
    /*==ホスティング==*/
    #hosting .point .left{
        width: 100%;
        text-align: center;
    }
    #hosting .point .right{
        width: 100%;
    }
    #hosting .point .left img{
        width: 60%;
    }#hosting .point .right p{
        padding-top: 0;
    }
    #hosting .service-plan table{
        font-size: 1.8rem;
    }
    .cloud_chara_item{
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .cloud_chara_item:last-child{
        margin-bottom: 0;
    }
    .cloud_plan_list li {
        padding: 13px 10px;
    }
    .cloud_plan_list li p{
        font-size: 1.6rem;
    }
}