*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ol, ul, li, p {
	margin: 0;
	padding: 0;
}

body {
	color: #2c3e40;
	background-color: #eaebec;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

header.site-header {
	padding: 16px 24px;
	background-color: #0277BD;
	box-shadow: 0 2px 2px #999;
}

header.site-header h1 {
	color: #ffffff;
	font-size: 1.2rem;
}

header.site-header h1 a {
	color: #ffffff;
	text-decoration: none;
}

header.site-header h1 a:hover {
	text-decoration: underline;
}

footer.site-footer {
	padding: 24px 0;
	text-align: center;
}

.centering {
	margin: 16px auto;
	text-align: center;
}

.wrap {
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*flex-direction: row;*/
	width: 1200px;
	margin: 0 auto;
	/*padding: 40px 0;*/
}

.side-area {
	flex-basis: 300px;
	margin-right: 24px;
	font-size: 0.9rem;
}

.side-box {
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 0 2px 2px #ccc;
	padding: 24px;
	margin-bottom: 24px;
}

.side-box ul {
	list-style-type: none;
	margin-bottom: 24px;
}

.side-box li {
	padding: 4px 16px;
}

.side-box li a {
	color: #555555;
	text-decoration: none;
}

.side-box li a:hover {
	text-decoration: underline;
}

p.side-title {
	font-weight: 700;
	font-size: 1.1rem;
}

.main-area {
	flex: 1;
	padding: 24px;
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 0 2px 2px #ccc;
	letter-spacing: 0.05em;
}

article a {
	color: #0277BD;
}

article p {
	margin-bottom: 40px;
	line-height: 1.6;
}

article h1 {
	font-size: 1.8rem;
	line-height: 1.8;
	margin-bottom: 24px;
}

article h2 {
	font-size: 1.5rem;
	line-height: 1.4;
	margin-bottom: 24px;
	border-bottom: 1px solid #cccccc;
}

article h3 {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

ol.breadcrumb {
	list-style-type: none;
	padding-bottom: 8px;
	margin-bottom: 24px;
	border-bottom: 1px solid #cccccc;
}

ol.breadcrumb li {
	display: inline;
}

ol.breadcrumb li:after {/* >を表示*/
	content: '>';
	padding: 0 3px;
	color: #555555;
}

ol.breadcrumb li:last-child:after {
	content: '';
}

ol.breadcrumb li a {
	text-decoration: none;
	color: #0277BD;
}

ol.breadcrumb li a:hover {
	text-decoration: underline;
}

pre.line-numbers + p {
	margin-top: 32px;
}

ul.note-list {
	margin: 16px 0 40px 0;
}

ul.note-list li {
	margin-left: 24px;
	margin-bottom: 16px;
}

ul.section-list {
	margin: 16px 0 40px 0;
}

ul.section-list li {
	margin-left: 32px;
}

.footer-ads {
	margin: 64px auto 24px auto;
	text-align: center;
}

ul.contents-list {
	margin: 16px 0 40px 0;
	padding: 16px 40px;
	border: 1px solid #aaaaaa;
	background-color: #fafbfc;
	border-radius: 2px;
}

ul.contents-list li {
	padding: 2px 0;
}

ul.contents-child-list {
	padding-left: 32px;
}

ul.contents-list li {
	padding: 2px 0;
}

ul.bottom-contents-list {
	margin: 56px 0;
	padding: 16px 40px;
	border: 1px solid #B0BEC5;
	background-color: #F2F4F6;
	border-radius: 2px;
	list-style-type: circle;
}

ul.bottom-contents-list li {
	padding: 2px 0;
}

a.function-link {
	font-weight: 700;
}

.info-box {
	margin: 24px 0;
	padding: 16px;
	border: 2px solid #FF9800;
	background-color: #FFF3E0;
	border-radius: 4px;
	color: #E65100;
	font-weight: 700;
}

.alert-box {
	margin: 24px 0;
	padding: 16px;
	border: 2px solid #D32F2F;
	background-color: #FFEBEE;
	border-radius: 4px;
	color: #B71C1C;
	font-weight: 700;
}

.ok-box {
	margin: 24px 0;
	padding: 16px;
	border: 2px solid #2196F3;
	background-color: #E3F2FD;
	border-radius: 4px;
	color: #0D47A1;
	font-weight: 700;
}

.command-box {
	margin: 24px 0;
	padding: 16px;
	border: 2px solid #999999;
	background-color: #000000;
	border-radius: 4px;
	color: #ffffff;
}

.info-box p, .alert-box p ,.ok-box p ,.command-box p {
	margin: 0;
}

table.normal-table {
	margin: 24px auto;
	border-collapse: collapse;
}

table.normal-table th, table.normal-table td {
	padding: 8px 16px;
	border: 1px solid #aaa;
}

table.normal-table th {
	background-color: #eee;
	font-weight: bold;
	text-align: center;
}

h3.function-caption {
	background-color: #0277BD;
	color: #ffffff;
	padding: 8px 16px;
	margin-bottom: 16px;
	border-radius: 4px;
}

.conf-table {
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: 0.9rem;
	font-weight: bold;
}

.conf-table td {
	border: 1px solid #333333;
	padding: 8px;
}

.conf-caption {
	width: 130px;
	background-color: #D7CCC8;
}

.conf-data {
	width: 190px;
}

ul.release-note-list {
	margin: 16px 0 40px 0;
	padding-left: 40px;
}

ul.release-note-list li {
	padding-bottom: 4px;
}

table.document-table {
	margin: 24px 0;
	border-collapse: collapse;
}

table.document-table th, table.document-table td {
	padding: 8px 16px;
	border: 1px solid #ccc;
}

table.document-table th {
	background-color: #eee;
	font-weight: bold;
	text-align: center;
}

.function-box {
	background-color: #faf9f8;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 32px;
	margin-bottom: 32px;
}

.ver-table {
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: 0.9rem;
	font-weight: bold;
}

.ver-table td {
	border: 1px solid #333333;
	padding: 8px;
}

.ver-add-caption {
	width: 130px;
	background-color: #B3E5FC;
}

.ver-remove-caption {
	width: 130px;
	background-color: #FFCDD2;
}

.ver-data {
	width: 100px;
}

.function-table {
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: 0.9rem;
}

.function-table td, .function-table th {
	border: 1px solid #333333;
	padding: 8px;
}

.function-table th {
	background-color: #eeeeee;
}

.function-name-column {
	width: 120px;
}

.function-type-column {
	width: 120px;
}

.function-text-column {
	width: 280px;
}

.function-default-column {
	width: 120px;
}

.function-name-cell {
	font-weight: bold;
}

.function-type-cell {
	font-weight: bold;
	color: #00838F;
}

.top-item {
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	padding: 24px;
}

.top-item-image {
	flex-basis: 220px;
}

.top-item-text {
	flex: 1;
}

p.top-item-title {
	margin-bottom: 24px;
	font-weight: 700;
}
/*.ver-add-caption {
	width: 130px;
	background-color: #B3E5FC;
}

.ver-remove-caption {
	width: 130px;
	background-color: #FFCDD2;
}

.ver-data {
	width: 100px;
}
*/

.default-table {
	border-collapse: collapse;
	margin: 0 auto 24px auto;
	font-size: 0.9rem;
}

.default-table td, .default-table th {
	border: 1px solid #333333;
	padding: 8px;
}

.default-table th {
	background-color: #eeeeee;
}

.default-name-column {
	width: 120px;
}

.default-comment-column {
	width: 400px;
}

.responsive-image {
	max-width: 100%;
	height: auto;
}


@media screen and (max-width: 479px) { 
	.wrap {
		flex-direction: column-reverse;
		width: 100%;
		/*padding: 40px 20px;*/
	}

	.side-area {
		border-top: 1px solid #999999;
		border-bottom: 1px solid #999999;
		background-color: #f6f7f8;
		margin-right: 0;
		padding: 20px;
	}

	.main-area {
		flex: 1;
		padding: 40px 20px;
	}

	.side-area ul {
		border: 1px solid #aaaaaa;
		border-radius: 4px;
		overflow: hidden;
	}

	.side-area li {
		border-bottom: 1px solid #aaaaaa;
		background-color: #ffffff;
	}

	.side-area li:last-child {
		border-bottom: none;
	}

	.side-area li a {
		display: block;
		padding: 16px 0;
	}

	.top-item {
		flex-direction: column;
	}
	
	.top-item-image {
		text-align: center;
	}

	.no-pc {
		display: none;
	}

	table.document-table td {
		display: block;
		border-bottom: none;
	}

	table.document-table td:first-child {
		background-color: #eee;
	}

	table.document-table tr:last-child td:last-child {
		border-bottom: 1px solid #ccc;
	}

	table.document-table thead {
		display: none;
	}
}

@media screen and (min-width: 480px) and (max-width: 1199px) {
	.wrap {
		flex-direction: row;
		width: 100%;
		padding: 40px 20px;
	}

	.top-item {
		flex-direction: row;
	}

	.top-item-image {
		flex-basis: 220px;
	}

	.no-pc {
		display: inline;
	}
}

@media screen and (min-width: 1200px) {
	.wrap {
		flex-direction: row;
		width: 1200px;
		padding: 40px 0;
	}
}