@charset "utf-8";

/*-----------------------------------------
pageTitle
-----------------------------------------*/
#pageTitle .icon {
	background: url(../images/bg_pagetitle.png) no-repeat 10px 50%;
	background-size: 30px auto;
}

/*-----------------------------------------
function
-----------------------------------------*/
#contents main {
	width: 1000px;
	margin: 0 auto;
	padding-top: 50px;
}

#contents main .license {
	background: #EEE;
	padding: 20px;
	margin-top: 2em;
	line-height: 160%;
	font-size: 14px;
}

#contents main table {
	width: 100%;
	border-collapse: separate;
}

#contents main table th,
#contents main table td {
	vertical-align: middle;
	line-height: 140%;
	border-left: 2px solid #FFF;
}

#contents main table td p {
	line-height: 140%;
}

#contents main table td dl,
#contents main table td dt,
#contents main table td dd {
	line-height: 140%;
}

/* thead
-----------------------------------------*/
#contents main table thead tr th {
	padding: 30px 0 25px 0;
	font-size: 16px;
	text-align: center;
	color: #FFF;
}

#contents main table thead tr th .icon {
	display: block;
	font-weight: 700;
	padding-top: 50px;
}

#contents main table thead tr th.cloud .icon {
	background: url(../../common2/images/icon_cloud_white.png) no-repeat 50% 0;
	background-size: 44px auto;
}

#contents main table thead tr th.install .icon {
	background: url(../../common2/images/icon_install_white.png) no-repeat 50% 0;
	background-size: 30px auto;
}

#contents main table thead tr th.cloud {
	background: #2F95CC;
	width: 310px;
}

#contents main table thead tr th.install {
	background: #D14040;
	width: 310px;
}

/* tbody
-----------------------------------------*/
#contents main table tbody tr th.th01 {
	background: #4F4428;
	border-left: none;
	border-top: 2px solid #958F7E;
	padding: 20px;
	line-height: 1;
	word-break: break-all;
	width: 1em;
	font-size: 24px;
	font-weight: normal;
	text-align: center;
	color: #FFF;
}

#contents main table tbody tr:first-child th.th01 {
	border-top: none;
}

#contents main table tbody tr th.th01 span {
	display: block;
	display: inline-block\9; /* IE9, 10 */
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	-webkit-writing-mode: vertical-lr;
	word-break: break-all;
	width: 1em;
	min-height: 5em;
	text-align: center;
}

/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
	#contents main table tbody tr th.th01 span {
		display: inline-block;
	}
}

#contents main table tbody tr th.th02 {
	background: #FFFAEA;
	padding: 15px;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	color: #3F2C25;
}

#contents main table tbody tr:nth-child(odd) th.th02 {
	background: #F2EDDE;
}

#contents main table tbody tr td {
	padding: 10px;
	text-align: center;
}

#contents main table tbody tr td.cloud {
	background: #F8FCFD;
	color: #2F95CC;
}

#contents main table tbody tr:nth-child(odd) td.cloud {
	background: #E4F1F8;
}

#contents main table tbody tr td.install {
	background: #FFFBFB;
	color: #D14040;
}

#contents main table tbody tr:nth-child(odd) td.install {
	background: #FBEAEA;
}

#contents main table tbody tr td .icon {
	margin: 0.5em 0;
}

#contents main table tbody tr td .icon img {
	width: 26px;
}

#contents main table tbody tr td .text {
	font-size: 15px;
	font-weight: 700;
}

#contents main table tbody tr td p.note {
	font-size: 13px;
	font-weight: 700;
}

#contents main dl.note {
	margin-top: 1em;
	font-size: 14px;
}

#contents main dl.note dd {
	margin-left: 2em;
}

@media all and (max-width: 599px){
	/*-----------------------------------------
	pageTitle
	-----------------------------------------*/
	#pageTitle .icon {
		background-position: 5px 50%;
		background-size: 23px auto;
	}

	#contents main {
		width: auto;
		margin: 0 10px;
		padding-top: 20px;
	}

	#contents main .license {
		padding: 10px;
		font-size: 13px;
	}

	#contents main table th,
	#contents main table td {
		border-left: 1px solid #FFF;
	}

	/* thead
	-----------------------------------------*/
	#contents main table thead tr th {
		padding: 10px 5px 10px 5px;
		font-size: 12px;
	}

	#contents main table thead tr th .icon {
		padding-top: 25px;
		font-weight: normal;
	}

	#contents main table thead tr th.cloud .icon {
		background: url(../../common2/images/icon_cloud_white.png) no-repeat 50% 0;
		background-size: 32px auto;
	}

	#contents main table thead tr th.install .icon {
		background: url(../../common2/images/icon_install_white.png) no-repeat 50% 0;
		background-size: 20px auto;
	}

	#contents main table thead tr th.cloud {
		width: auto;
	}

	#contents main table thead tr th.install {
		width: auto;
	}

	/* tbody
	-----------------------------------------*/
	#contents main table tbody tr th.th01 {
		padding: 5px;
		border-top: 1px solid #958F7E;
		font-size: 12px;
	}

	#contents main table tbody tr th.th02 {
		padding: 5px;
		text-align: left;
		font-weight: normal;
		font-size: 12px;
	}

	#contents main table tbody tr td {
		padding: 5px;
	}

	#contents main table tbody tr td .icon img {
		width: 16px;
	}

	#contents main table tbody tr td .text {
		font-size: 12px;
		font-weight: normal;
	}

	#contents main table tbody tr td p.note {
		font-size: 12px;
		font-weight: normal;
	}

	#contents main dl.note {
		font-size: 13px;
	}

}