@charset "utf-8";
/* ===================================================================
CSS information

 file name  :function-top.css
 author     :Sky Co., LTD.
 style info :【機能トップ 用】

=================================================================== */


/* 各コンテンツTOPページ */
h1 img {
	margin-bottom: 10px;
}
.contents--2col__main a .fun-tit {
	display: inline-block;
	padding: 3px 0 0px;
	margin-bottom: 9px;
	font-size: 0.9em;
	color: #666;
	font-weight: normal;
	border-bottom: 1px dotted #B7B7B7;
	line-height: 1.8em;
}
.edition a .fun-tit {
	color: #063!important;
}
.contents--2col__main a .fun-txt {
	color: #333333;
	font-size: 15px;
	line-height: 140%;
	width: 100%;
	display: inline-block;
}

/* 機能紹介左右レイアウト */
.contents--2col__main #loop {
	padding: 0;
	overflow: hidden;
	width: 705px;
}
.contents--2col__main #loop ul {
	font-size: 107%;
	overflow: hidden;
	clear: both;
	width: 105%;
}
.contents--2col__main #loop ul li {
	padding: 0;
	margin: 6px;
	background: none;
	margin-left: 0;
	margin-top: 0;
}
.contents--2col__main #loop .l, .contents--2col__main #loop .r {
	width: 347px;
	float: left;
	list-style: none;
	position: relative;
}
.contents--2col__main #loop a {
	border: 1px solid #dadada;
	border-radius: 3px;
}
.contents--2col__main #loop .l a, .contents--2col__main #loop .r a {
	display: block;
	padding: 15px 15px 0 35px;
	text-decoration: none;
	border-bottom: 1px solid #dadada;
	background-color: #FFF;
	zoom: 1;
	background: url(../image/bt-bg_h.gif) center left no-repeat;
}
.contents--2col__main #loop .edition.l a, .contents--2col__main #loop .edition.r a {
	background: url(../image/bt-bg-edition_h.gif) center left no-repeat;
}
.contents--2col__main #loop .l a:hover, .contents--2col__main #loop .r a:hover {
	background: url(../image/bt-bg.gif) center left no-repeat;
}
.contents--2col__main #loop .edition.l a:hover, .contents--2col__main #loop .edition.r a:hover {
	background: url(../image/bt-bg-edition.gif) center left no-repeat;
}

/* 映像 */
.movie__item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	align-items: center;
}
.movie__ttl {
	text-align: left;
	flex:1 1 70%;
	margin-left: 20px;
}
.movie__ttl h2 {
	color:#00A040;
	font-size:185%;
	line-height: 1.3;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.movie__ttl h2 span {
	background-color: #ff9933;
	color: #FFF;
	font-weight: normal;
	font-size:50%;
	margin-left: 10px;
	padding: 7px 20px;
	vertical-align: middle;
}
.movie__ttl p{
	margin: 0;
}

/* 機能一覧表 */

.function__index {
	display: table;
}
.function__empty {
	display: table-cell;
	width: 10px;
	border-left: 1px solid #fff;
}
.function__empty--lv1 {	background-color: #00A040;}
.function__empty--lv2 {	background-color: #8EC43E;}
.function__empty--lv3 {	background-color: #00AFEC;}
.function__ttl{
	color: #009913;
	font-size: 24px;
	margin-bottom: 1em;
}
.function__ttl span{
	font-size: 16px;
	display: block;
}
.function__header {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
	color: #333;
	border-top: 1px solid #fff;
	font-size: 18px;
	font-weight: normal;
	padding-left: 10px;
}
.function__header--lv1 {
	width: 270px;
	background-color: #c3e2c7;
}
.function__header--lv2 {
	width: 260px;
	background-color: #dfedc8;
}
.function__header--lv3 {
	width: 250px;
	background-color: #e3f3fd;
}
.function__header--other {
	width: 270px;
	background-color: #0288d1;
	border-bottom: 1px solid #0288d1;
	border-top: 1px solid #FFF;
}
.function__header span {
	display: block;
	font-size: 14px;
}
.function__header--lv1 span { color: #00A040;}
.function__header--lv2 span { color: #8EC43E;}
.function__header--lv3 span { color: #00AFEC;}
.function__header--other span { color: #FFF; font-size: 16px; padding-left: 10px;}
.function__header span.function__edition {
	display: block;
	width: 45px;
	margin: 0;
	padding: 4px 2px;
	text-align: center;
	border: 1px solid #fff;
	font-size: 13px;
	line-height: 1.3;
	color: #FFF;
}
.function__edition--lt { background-color: #00AFEC;}
.function__edition--st { background-color: #8EC43E;}
.function__edition--sr { background-color: #00A040;}
.table__ttl {
	position: relative;
}
.table__ttl::before {
	position: absolute;
	display: block;
	width: 100%;
	color: #FFF;
	text-align: center;
	top:-20px;
}
.table__ttl--lt::before { content: "LT";	background-color: #00AFEC;}
.table__ttl--st::before { content: "ST";	background-color: #8EC43E;}
.table__ttl--sr::before { content: "SR";	background-color: #00A040;}
.table__edition {
	text-align: center;
	border-right: 1px solid #FFF;
	border-top: 1px solid #FFF;
}
.table__nav {
	width: 400px;
	margin: 0;
	padding: 0;
	border-collapse: separate;
}
.table__nav td a {
	display: block;
	padding: 10px;
	color: #333;
	border: 1px solid #FFF;
	margin: 0 0 -1px 0;
	background: url(../image/fun_index_arrow.png) center right 10px no-repeat;
}

.table__nav--lt td a { background-color: #f2f9fc;}
.table__nav--st td a { background-color: #edf4e1;}
.table__nav--sr td a { background-color: #e2f2e4;}
.table__nav--other td a { background-color: #e2ecf2;}

.table__nav td a:hover {
	text-decoration: none;
	background-color: #f4f4f4;
}

.function__btn {
	display: block;
	padding: 10px;
	color: #333;
	margin: 0 0 -1px 0;
	padding: 20px;
	border: 1px solid #ccc;
	font-size: 1.2em;
	background: url(../image/fun_index_arrow.png) center right 10px no-repeat;
}

.function__btn:hover {
	text-decoration: none;
	background-color: #f4f4f4;
}

.new {
	vertical-align: middle;
	margin: 0 10px;
}