@charset "UTF-8";

/* ---------------
 wrapper
--------------- */
.wrap_01{margin-left: auto; margin-right: auto; width: 1000px;}
.wrap_100per01{background: #efefef; padding: 40px 0px 40px 0px;}

/* ---------------
 navi
--------------- */
#snavi_bg{background: rgba(255,255,255,0.4);}
#snavi_link li          {float: left;}
#snavi_link a           {font-size: 14px; color: #fff; text-decoration: underline; display: block; text-align: center; padding: 24px 12px;}
#snavi_link a:hover     {text-decoration: none; background: rgba(255,255,255,0.2);}
#snavi_link li .selected{background: rgba(255,255,255,0.2); text-decoration: none;}
.snavi_fix{
	position: fixed; top:0px; z-index: 9999; background: rgba(51,51,51,0.4);
	width: 100%;
}

/* ---------------
 heaer
--------------- */
#hd_logo{float: left; display: block; margin: 18px 52px 0px 0px;}
#hd_bg{background: url(../img/hd_bg.png) center top repeat-x; height: 429px;}
#hd_main01{position: relative;}
#hd_main02{position: absolute; left: 386px; top: 48px;}
#hd_main03{color: #fff; font-weight: bold; font-size: 17px; line-height: 1.8; padding-top: 7px; padding-bottom: 30px;}
/*#hd_btn{margin-left: 128px;}*/
#hd_btn ul{width:616px;}
#hd_btn ul li{display: inline;}
#hd_btn ul li.tright{float: right;}

/* ---------------
 ご利用事例
--------------- */
#goriyou{padding: 40px 0px 40px 0px;}
#goriyou .t01{font-size: 48px; padding-bottom: 30px;}

/*01*/
#goriyou .c01a{float: left; width: 450px; background: #efefef; padding: 20px; min-height: 200px;}
#goriyou .c01b{
	background: url(../img/goriyou_01.jpg) left center no-repeat; padding: 10px 0px 10px 100px;
	font-size: 30px; font-weight: bold; line-height: 1.2;
	margin-bottom: 21px;
}
#goriyou .c01c li{background: url(../img/icon_01.gif) left 9px no-repeat; padding-left: 10px; font-size: 14px;}
#goriyou .c01d{padding-bottom: 20px;}
#goriyou .c01e{padding-bottom: 7px;}

/*02*/
#goriyou .c02a{float: right; width: 450px; background: #efefef; padding: 20px; min-height: 200px;}
#goriyou .c02b{
	background: url(../img/goriyou_02.jpg) left center no-repeat; padding: 10px 0px 10px 100px;
	font-size: 30px; font-weight: bold; line-height: 1.2;
	margin-bottom: 21px;
}
#goriyou .c02c li{background: url(../img/icon_01.gif) left 9px no-repeat; padding-left: 10px; font-size: 14px;}
#goriyou .c02d{padding-bottom: 20px;}
#goriyou .c02e{padding-bottom: 7px;}

/*03*/
#goriyou .c03a{width: 960px; background: #efefef; padding: 20px; margin:20px 0 0 0; min-height: 180px;}
#goriyou .c03g{float: left; width: 660px;}
#goriyou .c03g h3{font-size:20px;padding-bottom: 15px;}
#goriyou .c03b{
	background: url(../img/goriyou_03.jpg) left center no-repeat; padding: 10px 0px 10px 100px;
	font-size: 30px; font-weight: bold; line-height: 1.2;
	margin-bottom: 21px;
}
#goriyou .c03c li{background: url(../img/icon_01.gif) left 9px no-repeat; padding: 0px 0px 20px 10px; font-size: 14px;}
#goriyou .c03d{padding-bottom: 0;}
#goriyou .c03e{padding-bottom: 7px;}
#goriyou .c03f {float: right; width: 250px; margin-top: 50px;}
#goriyou .c03f li{padding: 0px 0px 20px 10px;}
#goriyou .c03f li.api{padding: 0px 0px 70px 10px;}
#goriyou .c03f li.use{margin-bottom: 20px;}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* ---------------
 特長
--------------- */
#tokuchou{padding: 0px 0px 0px 0px;}
#tokuchou .t01{font-size: 48px; padding-bottom: 30px;}

/*01*/
#tokuchou .c01a{float: left; width: 504px; background: #fff; min-height: 400px; margin-right: 20px;}
#tokuchou .c01b{padding: 20px;}
#tokuchou .c01c{font-size: 30px; padding-bottom: 15px;}
#tokuchou .c01d{font-size: 14px; padding-bottom: 25px;}
#tokuchou .c01e{font-size: 14px;}

/*02*/
#tokuchou .c02a{float: left; width: 225px; background: #fff; min-height: 400px;}
#tokuchou .c02b{padding: 20px;}
#tokuchou .c02c{font-size: 20px; line-height: 1.3; padding-bottom: 15px;}
#tokuchou .c02d{font-size: 14px; padding-bottom: 10px;}
#tokuchou .c02e{font-size: 14px;}

/*03*/
#tokuchou .c03a{float: right; width: 225px; background: #fff; min-height: 400px;}
#tokuchou .c03b{padding: 20px;}
#tokuchou .c03c{font-size: 20px; line-height: 1.3; padding-bottom: 15px;}
#tokuchou .c03d{font-size: 14px; padding-bottom: 10px;}
#tokuchou .c03e{font-size: 14px;}

 /* ---------------
 機能一覧
--------------- */
#kinou{padding: 40px 0px 40px 0px;}
#kinou .t01{font-size: 48px; padding-bottom: 30px;}

#kinou .c01a{width: 100%; font-size: 14px;}
#kinou .c01a tr:not(:last-child){border-bottom: 3px solid #e6e6e6; vertical-align: top;}
#kinou .c01a td{padding-top: 14px; padding-bottom: 14px;}
#kinou .c01b{width: 616px;}

/* ---------------
 コントロールパネル
--------------- */
#control{padding: 0px 0px 0px 0px;}
#control .t01{font-size: 48px; padding-bottom: 30px;}

 /* ---------------
 機能一覧
--------------- */
#nagare{padding: 40px 0px 40px 0px;}
#nagare .t01{font-size: 48px; padding-bottom: 30px;}

#nagare .c01a{font-size: 14px; padding-bottom: 10px;}
#nagare .kaisetsu{text-align: center; padding-top: 60px;}
#nagare dl{padding: 10px; background-color: #ffc5c5; margin-bottom: 30px;}
#nagare dl dt{font-weight: bold; font-size: 120%;}

/* ---------------
 BOX
--------------- */
#content01{display: none;}
.contents{width: 760px; background: #ececec; padding: 20px; border: none;}

/* ---------------
 footer
--------------- */
footer{background: #ffffff; padding: 50px 0px; text-align: center;}
footer #logo_wrap{position: relative;}
footer #logo {
	float: left;
	position: relative;
	left: 50%;
	padding-bottom: 20px;
}
footer #logo li{
	float: left;
	position: relative;
	left: -50%
}
footer #logo li:not(:last-child){padding-right: 20px;}

/* ---------------
 scroll
--------------- */
#page-top{
    position: fixed;
    bottom:   20px;
    right:    20px;
    display:  table;
}
#page-top a{
	font-size:       80%;
	background:      rgba(102, 102, 102, 0.3);
    text-decoration: none;
    color:           #fff;
    display:         table-cell;
	width:           70px;
	height:          70px;
    text-align:      center;
	vertical-align:  middle;
    border-radius:   120px;
}
#page-top a:hover{
    text-decoration: none;
	background:      rgba(153, 153, 153, 0.7);
}

/* ---------------
 info - end
--------------- */
#info_end .a01{background:#FFF; padding:9px 14px; font-size:14px;}
#info_end .a02{text-align:right; margin-top:12px;}
#info_end {padding-top:16px;}

/* ---------------
 other
--------------- */
#other{text-align:right; padding-top:20px;}