@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 service.css

+++++++++++++++++++++++++++++++ */

/*
見出し
-----------------------------------*/
header.service {
    margin-bottom: 30px;
    padding: 30px 10px;
    background: url(../../images/bg_main_dot.png) repeat left top, url(../../service/index/bg_header_image.jpg) no-repeat center top;
    background-size: 2px, auto 100%;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px #00263d;
}
header.service .title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: normal;
}

/*
インデックス
-----------------------------------*/

/* タブ */
#tab_service { display: none; }

#service_box {
    width: calc(100% - 5px);
    margin-right: 5px;
    overflow: hidden;
}

#service_box .item { padding: 0 0 0 5px; }
#service_box .name { min-height: 48px; }
#service_box .name:not(.long) { line-height: 30px; }
#service_box .name:not(.long) span {
    line-height: 1.1;
    margin-bottom: -5px;
}
#service_box .desc { min-height: 42px; }

/*
サービス詳細
-----------------------------------*/
.service_detail header {
    margin: 0;
    padding: 80px 0;
}
.service_detail header p.summary {
    margin: 10px 10px 20px;
    font-size: 12px;
    text-align: center;
}
.service_detail header p {
    font-size: 12px;
    font-weight: normal;
    text-align: left;
}

/* === ポイント === */
.service_detail .point {
    padding: 10px 0 20px;
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 100% auto;
}
.service_detail .point .inner {
    margin: 0 auto;
}
.service_detail .box_point {
    margin: 10px;
    padding: 20px;
    background: #fff;
}
.service_detail .box_point .title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.service_detail .box_point p:last-child {
    min-height: 70px;
    margin-bottom: 0;
    font-size: 12px;
}

/* === 一覧 === */
#list_service { margin-top: 30px; }
#list_service .item {
    position: relative;
    background: #f4f4f4;
}
#list_service .item:not(first-child) { margin-top: 20px; }
#list_service .item a {
    display: block;
    border-right: 30px solid #003f65;
    background: #f4f4f4;
}
#list_service .item a:after {
    position: absolute;
    top: calc(50% - 10px);
    right: 10px;
    display: block;
    width: 11px;
    height: 21px;
    background: url(../../images/arrow_r_w.png) no-repeat left top;
    content: " ";
}
#list_service .icon {
    width: 50px;
    margin: 10px auto 0;
    text-align: center;
    vertical-align: middle;
}
#list_service .text {
    margin-bottom: 0;
    padding-bottom: 20px;
}
#list_service .name {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
#list_service .name span {
    display: block;
    font-size: 10px;
    font-weight: normal;
}
#list_service .desc {
    margin: 10px 10px 0;
    font-size: 13px;
}

/* ec */
#service_ec header {
    background: url(../../service/ec_old/bg_header.png) repeat left top, url(../../service/ec_old/bg_header_image.jpg) no-repeat center center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #7e3438;
}
#service_ec .point { background-image: url(../../service/ec_old/bg_point.png); }
#service_ec .box_point { box-shadow: 6px 6px 6px #edbbbf;}
#service_ec .box_point .title,
#service_ec .name { color: #d2545e; }

/* consulting */
#service_consulting header {
    background: url(../../service/consulting/bg_header.png) repeat left top, url(../../service/consulting/bg_header_image.jpg) no-repeat center center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #7e3438;
}
#service_consulting .point { background-image: url(../../service/consulting/bg_point.png); }
#service_consulting .box_point { box-shadow: 6px 6px 6px #f1d0b5;}
#service_consulting .box_point .title,
#service_consulting .name { color: #dd8a46; }

/* si */
#service_si header {
    background: url(../../service/si/bg_header.png) repeat left top, url(../../service/si/bg_header_image.jpg) no-repeat center center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #2b5443;
}
#service_si .point { background-image: url(../../service/si/bg_point.png); }
#service_si .box_point { box-shadow: 6px 6px 6px #b6d1c5;}
#service_si .box_point .title,
#service_si .name { color: #478c6e; }

/* smartphone */
#service_smart header {
    background: url(../../service/smartphone/bg_header.png) repeat left top, url(../../service/smartphone/bg_header_image.jpg) no-repeat center center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #393252;
}
#service_smart .point { background-image: url(../../service/smartphone/bg_point.png); }
#service_smart .box_point { box-shadow: 6px 6px 6px #bfbbd0;}
#service_smart .box_point .title,
#service_smart .name { color: #5f5287; }

/* security */
#service_security header {
    background: url(../../service/security/bg_header.png) repeat left top, url(../../service/security/bg_header_image.jpg) no-repeat center center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #2c465f;
}
#service_security .point { background-image: url(../../service/security/bg_point.png); }
#service_security .box_point { box-shadow: 6px 6px 6px #b6c8d8;}
#service_security .box_point .title,
#service_security .name { color: #48749e; }

/* game */
#service_game header {
    background: url(../../service/game/bg_header.png) repeat left top, url(../../service/game/bg_header_image.jpg) no-repeat 90% center;
    background-size: auto, auto 100%;
    text-shadow: 1px 1px #506432;
}
#service_game .point {
    margin-bottom: 20px;
    padding: 10px 0 5px 5px;
    background-image: url(../../service/game/bg_point.png);
    text-align: center;
}


/*
個別サービス　共通
-----------------------------------*/
/* ヘッダ */
.service_detail header.service {
    margin: 0;
    padding: 20px 0;
}
.service_detail .title_service {
    margin: 0 0 20px;
    font-size: 20px;
}
.service_detail .title_service span { font-size: 12px; }

/* ナビゲーション */
.service_detail .anchor_nav {
    background: rgba(255,255,255, .85);
}
.service_detail .anchor_nav li {
    display: inline-block;
    margin: 0 15px;
}
.service_detail .anchor_nav li a {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    text-shadow: none;
}

/* リード */
#service_lead {
    margin: 30px auto 0;
    padding: 15px;
    text-align: left;
}
#service_lead .title {
    margin: 0 0 15px;
    font-size: 16px;
}

#service_consulting #service_lead { background: rgba(211,138,70, .65); }

/* 関連サービス */
#relatied_service .heading03 { margin-bottom: 10px; }