@charset "UTF-8";
@import url("fa.min.css");


/* ---------- main-header ---------- */



.kakoi{
    background:#fffdd8;
    padding:15px 5px 1px 5px;
    margin: 15px 8px 10px 5px;
}
.kakoi li{
    margin: 5px 10px 15px 2em;
    list-style-type:circle;
    font-size:15px;
}
.kakoi h3{
    margin: 2px 10px 15px 10px;
    font-size:18px;
    font-weight:bold;
}
small.right{
    margin: 2px 10px 35px 10px;
    font-size:12px;
    text-align:right;
    display:block;
}

.text-right {
	text-align: right;
}

.pad-20{padding:0 20px;}
.ma-t-20 {
	margin-top:20px;
}
.ma-l-30{margin-left:30px;}
.ma-r-30{margin-right:30px;}
.ma-b-10 {
	margin-bottom:10px;
}

.ma-b-20 {
	margin-bottom:20px;
}

/* ---------- service.php start---------- */

#back_01 {
	background-image:url(../../images/point/1_back.jpg);
	background-repeat:no-repeat;
	height:954px;
	padding:20px 0 0 220px;
	margin-bottom:0;
}

#back_01 span {
	color: #006600;
	font-weight: bold;
}
.sec-h2-tit {font-size: 180%;margin: 0 0 30px 0;}
.wrap-inner {margin: 0 auto;}
.sec-mv {
    background: #f5f5f2;
    padding: 84px 0 80px;
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
    text-align: center;
}
.sec-mv img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}
.sec-mv-catch{
    color: #194061;
    text-align: center;
    font-size: 220%;
    font-weight: bold;}
.sec-choice {
        padding: 120px 0 100px;
        background-color: #e3e3dc;
        font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
        text-align: center;
    }
.sec-choice-inner {padding:0 20px;}
.sec-f-comparison{
    padding: 120px 0 100px;
    background-color: #f5f5f2;
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
    text-align: center;
}
.sec-f-comparison-inner {padding:0 20px;}
.table_compare {
    width: 80%;
    border-collapse: collapse;
    margin: 0 auto;
}
.table_compare-head {background-color: #464744;color: #fff;font-size: 90%;}
.table_compare-head th{border: 1px solid #ccc;padding: 30px 0;}
.table_compare tbody td{border:1px solid #ccc;padding:10px;font-size: 90%;line-height: 1.75rem;}
.sec-p-comparison{
    padding: 120px 0 100px;
    background-color: #ededec;
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
    text-align: center;
}
.sec-p-comparison-inner {padding:0 20px;}
.sec-service{
    padding: 120px 0 100px;
    background-color: #e3e3dc;
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
    text-align: center;
}
.sec-service-inner {padding:0 20px;}
.service-wrap {
    background: #d1d3d5;
    border-radius: 1rem;
    padding: 20px;
    margin: 20px 0;
}
.service-wrap h3{
    background: #fff;
    font-size: 130%;
    padding: 20px 0;
    border-radius: 1rem;
    margin: 0 0 30px 0;
    color: #4d6f93;
}
.service-wrap h4{
    color: #4d6f93;
    font-size: 120%;
    margin: 10px auto;
    border-bottom: 2px dotted #4d6f93;
    width: 33%;
    text-align: center;
    padding-bottom: 15px;
}
.sec-needs{
    padding: 120px 0 100px;
    background-color: #ededec;
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
    text-align: center;
}
.sec-needs-inner {padding:0 20px;}

div.hikaku {
    margin:40px 30px 50px 10px;
}
div.hikaku a{
    background:#50a815 url("../../images/common/shadow.png") repeat-x;
    border:2px solid #fff;
    padding:10px 20px;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    border-radius:5px;
	text-shadow: 2px 2px 2px #484; /*CSS3*/
	-moz-text-shadow: 2px 2px 2px #484; /* Firefox用*/
	-webkit-text-shadow: 2px 2px 2px #484; /* Google Chrome, Safari用*/
	box-shadow: 2px 2px 2px #aaa; /*CSS3*/
	-moz-box-shadow: 2px 2px 2px #aaa; /* Firefox用*/
	-webkit-box-shadow: 2px 2px 2px #aaa; /* Google Chrome, Safari用*/
}
div.hikaku a:hover{
    background-color:#308800;
    text-decoration:none;
}
/* 2014-05-21 */
#right h2{
    background:#588914;
    color:#FFF;
    padding:7px 5px 8px 15px;
    font-weight:bold;
    font-size:24px;
    margin:20px 8px 15px 5px;
}
.p01-left{
    width:420px;
    float:left;
}
.p01-left p{
    margin:20px 0 20px 10px;
    line-height:1.5em;
}

.p01-right{
    width:220px;
    float:right;
    border:1px solid #AAA;
    min-height:200px;
    margin:20px 9px 0 0;
    padding:5px 0 5px 0;
}
.p01-right h3{
    text-align:center;
    font-size:15px;
    font-weight:bold;
    border-bottom:2px #175370 solid;
    padding:0 0 4px 0;
}
.p01-right h4{
    font-size:14px;
    font-weight:bold;
    margin:20px 15px 0 8px;
    color:#215000;
}
#right .right-inner .p01-right p{
    font-size:13px;
    margin:5px 10px 5px 12px;
}
.p01-right a{
    background:url("/images/service/arrow.png") no-repeat right center, #239CD1;
    background:url("/images/service/arrow.png") no-repeat right center, linear-gradient(to right, #239CD1, #175370);
    font-size:15px;
    font-weight:bold;
    color:#fff;
    border-radius:7px;
    padding:15px 10px 15px 0;
    display:block;
    margin:13px 10px 13px 10px;
    text-align:center;
    border:1px solid #FFF;
    box-shadow:1px 1px 1px rgba(0,0,0,0.3);
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
    line-height:1.4em;
    text-decoration:none;
}
.p01-right a:last-child{
    padding:6px 10px 5px 0;
}
.p01-right a:hover{
    background:url("/images/service/arrow.png") no-repeat right center, #037CB1;
    background:url("/images/service/arrow.png") no-repeat right center, linear-gradient(to right, #037CB1, #003350);
    text-decoration:none;
}
h3.green small,h4 small {
border: 2px solid #f00;
    background:#f00;
color: #fff;
padding: 2px 9px 1px 9px;
margin-left: 10px;
font-size: 15px;
font-weight:normal;
display: inline-block;
}

#right h4{
    font-size:17px;
    color:#470;
    border-radius:4px;
    border:1px solid #470;
    padding:2px 10px 2px 10px;
    margin-left:20px;
    margin-right:20px;
}
#right h4.mds1 {
    border:1px solid #167383;
    color:#167383;
}
#right h4.mds2 {
    border:1px solid #8e8100;
    color:#8e8100;
}
#right h4.mds1 span{
    color:#167383;
}


#right h4 small {
    text-shadow:none;
border: 1px solid #f00;
padding: 2px 6px 1px 6px;
margin:0 0 0 20px;
background:#FFF;
color:#F00;
font-size: 12px;
    vertical-align:top;
}
#right h4 span {
    color:#470;
font-size: 14px;
    margin-left:10px;
}




.rbtn{
    font-weight:bold;
}
.rbtn span{
    background:#069;
    color:#FFF;
    border-radius:50px;
    font-size:11px;
    padding:3px 1px 1px 2px;
    margin-right:5px;
}


.scs{
    margin:20px 20px 0 20px;
}
.scs img{
    float:left;
    margin-bottom:15px;
}
.scs span{
    margin:0 0 15px 10px;
    width:390px;
    float:right;
    display:block;
    border:1px solid #8e8100;
}
.scs span.mini{
    width:375px;
}
.scs h5{
    font-size:18px;
    font-weight:bold;
    background:#cb5;
    color:#fff;
    padding:2px 9px;
}
.scs span.gr{
    border:1px solid #b1c049;
}
.scs span.gr h5{
    background:#b1c049;
}
.scs li{
    font-size:14px;
    margin:10px 10px 10px 20px;
    line-height:1.5em;
    list-style-position: outside;
}
.scs p{
    border:1px dashed #777;
    margin:10px 10px;
    padding:5px;
    color:#777;
}


.app-nav{
    padding: 30px 0 0 15px;
}
.app-nav a{
    background: #FF720C;
    background: linear-gradient(to bottom,#FF8D28, #FF720C);
    border-radius: 5px;
    padding: 7px 10px 0 10px;
    height: 21px;
    width:270px;
    border: 1px solid #FFF;
    box-shadow:1px 1px 1px rgba(0,0,0,0.3);
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
    color: #FFF;
    font-weight: bold;
    margin: 10px 0 2px 15px;
    font-size: 16px;
    vertical-align: top;
    float: left;
    line-height: 1em;
    text-align:center;
}
.app-nav a:hover{
    text-decoration:none;
    background: linear-gradient(to bottom,#DF5200, #DF6D08);
    color:#dcb;
}
.s-btn {
margin-top: 20px;
}


.spec {
	background-image:url(../../images/index/speck-bg.jpg);
	background-repeat:no-repeat;
    background:#fafafa;
    border:1px solid #ddd;
	font-size:12px;
	line-height:20px;
	padding:20px 0 20px 40px;
    margin:0 8px 0 5px;
    
	padding:5px 10px 20px 20px;
    margin:0 8px 0 10px;
}
.spec ul{
	padding-left:10px;
}
.spec h2{
	font-size:18px;
    margin-bottom:5px;
    font-weight:bold;
    color:#333;
    background:none;
    margin:0;
    padding:0 0 5px 0;
}

ul.pillars{
    background:url("/images/service/nav_bg.png") no-repeat;
    padding:60px 0 11px 0;
    width:642px;
    margin:25px 0 15px 5px;
}
ul.pillars li{
    float:left;
    margin:0 0 0 10px;
}
.ma-l-5{
    margin-left:5px;
}

  .tool-chart {
            max-width:700px;
            margin:32px auto 24px;
            font-size:1rem;
            background: #fafbfd;
            border-radius: 10px;
            border: 1px solid #e2e9f3;
            padding: 24px;
          }
          .tool-chart ul {
            list-style: none;
            padding-left: 0;
          }
          .tool-chart li {
            margin-bottom: 14px;
            vertical-align: middle;
            line-height: 1.25rem;
            font-size: 110%;
            text-align: left;
          }
          .tool-arrow {
            font-size: 1.4em;
            margin: 0 12px;
            vertical-align: middle;
            color: #bbb;
          }
          .tool-badge {
            display: inline-block;
            font-size: 0.98em;
            background: #3bb2cf;
            color: #fff;
            padding: 6px;
            border-radius: 5px;
            margin-left: 6px;
          }

          .sec-other-link {
            margin-top: 55px;
            text-align: center;
            display: block;
        }
        .sec-other-link .btn {
            max-width: 430px;
            height: 78px;
            margin: 20px 22px 0;
            display: inline-block;
        }
        .sec-other-link .btn a {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            background-color: #575957;
            border: 2px solid #fff;
            border-radius: 9999px;
            -webkit-transition: .3s;
            transition: .3s;
        }
        .sec-other-link .btn a:link{text-decoration: none;color: #fff;}
        .sec-other-link .btn a:visited{text-decoration: none;color: #fff;}
        .sec-other-link .btn a:hover{text-decoration: none;color: #b5a5a5;}
        .sec-other-link .btn__en {
            display: inline-block;
            font-family: "Roboto Slab", serif;
            font-size: 20px;
            font-weight: 700;
        }
        .sec-other-link .btn__ja {
            display: inline-block;
            margin-left: 23px;
            font-size: 14px;
            font-weight: 700;
        }
          @media only screen and (max-width: 767px) {
            .sec-mv {
                background: #f5f5f2;
                padding: 64px 0 80px;
                font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
                text-align: center;
                width: 100%;
            }
            .sec-mv img {}
            .sec-mv-catch {
                color: #194061;
                text-align: center;
                font-size: 180%;
                font-weight: bold;
                padding: 0 25px;
            }
            .table_compare {
                width: 100%;
                border-collapse: collapse;
                margin: 0 auto;
            }
            .service-wrap h4 {
                color: #4d6f93;
                font-size: 110%;
                margin: 10px auto;
                border-bottom: 2px dotted #4d6f93;
                width: 86%;
                text-align: center;
                padding-bottom: 15px;
            }
            .tool-chart li {
                margin-bottom: 14px;
                vertical-align: middle;
                line-height: 1.25rem;
                font-size: 96%;
                text-align: center;
            }
            .sec-other-link .btn__en {
                display: inline-block;
                font-family: "Roboto Slab", serif;
                font-size: 16px;
                font-weight: 700;
            }
            .sec-other-link .btn__ja {
                display: inline-block;
                margin-left: 23px;
                font-size: 12px;
                font-weight: 700;
            }
        }