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

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

=================================================================== */
.function-table{
	width: 100%;
	margin-bottom: 10px;
}

.function-table colgroup {
	display: none;
}

@media screen and (min-width: 48em) {
	.function-table colgroup {
		display: table-column-group;		
	}
}

.function-table a{
	display: block;
	position: relative;
	background-color: #f5f5f5;
	color: #444;
	padding: .5em 1.5em .5em .8em;
}

.function-table a::after {
	position: absolute;
	top: 0;
	left: auto;
	bottom: 0;
	right: .8em;
	width: .4em;
	height: .4em;
	margin: auto;
	content: '';
	transform: rotate(45deg);
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #dfb23a;
}
.function-table th,
.function-table td{
	display: block;
	font-size: .938em;
	border-bottom: 1px solid #FFF;
}
.function-table th {
	padding: 1.0em 1.5em 1.0em 5em;
}
.function-table th.funTtl{
	padding-left: 20px;
}
.function-table th.funTtl--01::before{
	background-image: url(/function/image/function-title--icon01.png);
	display: inline-block;
	content: "";
	width: 40px;
	height: 40px;
	margin-right: 20px;
	background-size: cover;
	vertical-align: middle;
}
.function-table th.funTtl--02::before{
	background-image: url(/function/image/function-title--icon02.png);
	display: inline-block;
	content: "";
	width: 40px;
	height: 40px;
	margin-right: 20px;
	background-size: cover;
	vertical-align: middle;
}
.function-table th.funTtl--03::before{
	background-image: url(/function/image/function-title--icon03.png);
	display: inline-block;
	content: "";
	width: 40px;
	height: 40px;
	margin-right: 20px;
	background-size: cover;
	vertical-align: middle;
}
.function-table th.funTtl--04::before{
	background-image: url(/function/image/function-title--icon04.png);
	display: inline-block;
	content: "";
	width: 40px;
	height: 40px;
	margin-right: 20px;
	background-size: cover;
	vertical-align: middle;
}
.function-table th.funTtl--01{
	background-position: .5em center;
	background-repeat: no-repeat;
	background-color: #dff2fc;
	color: #008cd6;
}
.function-table th.funTtl--02{
	background-position: .5em center;
	background-repeat: no-repeat;
	background-color: #fef5f9;
	color: #e85298;
}
.function-table th.funTtl--03{
	background-position: .5em center;
	background-repeat: no-repeat;
	background-color: #fff9eb;
	color: #f08300;
}
.function-table th.funTtl--04{
	background-position: .5em center;
	background-repeat: no-repeat;
	background-color: #f5f9e5;
	color: #5cb531;
}
.function-table th.funTtl--05{
	background-color: #dff2fc;
	color: #005293;
	padding: .5em 1.0em;
}
.function-table td.funTableBg {
	height: .5em;
}
.function-table td.funTableBg--01{
	background-color: #00afec;
}
.function-table td.funTableBg--02{
	background-color: #ee87b4;
}
.function-table td.funTableBg--03{
	background-color: #f8b500;
}
.function-table td.funTableBg--04{
	background-color: #b7d31b;
}
.function-table td.funTableBg--05{
	background-color: #0070b2;
}

@media screen and (min-width: 48em) {
	.function-table a{
		border: 1px solid #DDD;
		background-color: #FFF;
		transition: all .2s ease;
	}
	.function-table a:hover {
		background-color: #F2EFE8;
	}
	.function-table th,
	.function-table td{
		display: table-cell;
		border: 3px solid #FFF;
	}
	.function-table th.funTtl--01::before,
	.function-table th.funTtl--02::before,
	.function-table th.funTtl--03::before,
	.function-table th.funTtl--04::before{
		width: 60px;
		height: 60px;
		background-size: cover;
	}
	.function-table th.funTtl--01{
		background-color: #dff2fc;
		color: #008cd6;
	}
	.function-table th.funTtl--02{
		background-color: #fef5f9;
		color: #e85298;
	}
	.function-table th.funTtl--03{
		background-color: #fff9eb;
		color: #f08300;
	}
	.function-table th.funTtl--04{
		background-color: #f5f9e5;
		color: #5cb531;
	}
	.function-table th.funTtl--05{
		background-color: #dff2fc;
		color: #005293;
	}
	.function-table td.funTableBg{
		height: inherit;
	}
}

.youtubeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtubeWrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}