@charset "utf-8";

/*↓SP：スクロールバー非表示↓*/
@media screen and (max-width:959px) {
	.akashic--document pre::-webkit-scrollbar,
	.akashic--document table::-webkit-scrollbar {
		display: none;
	}
}
/*↑SP：スクロールバー非表示↑*/
/*↓大枠↓*/
.akashic--document {
	width: 100vw;
	background: #FFF;
}
.akashic--document .inner {
	color: #334353;
	font-size: 15px;
	line-height: 1.6;
	padding: 48px 16px;
	margin-top: 30px;
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document {
		font-size: 12px;
	}
	.akashic--document .inner {
		padding: 24px 16px;
	}
}
/*↑大枠↑*/
/*↓文中で<code>を使用↓*/
.akashic--document code {
	font-family: "Courier New", Consolas, monospace;
}
.akashic--document code:not(.hljs):not(.language-plaintext) {
	background: #FFE8E8;
	color: #B44;
	padding: 1px 3px;
	margin: 0 2px;
	border-radius: 2px;
}
/*↑文中で<code>を使用↑*/
/*↓見出し系↓*/
.akashic--document h1,
.akashic--document h2,
.akashic--document h3,
.akashic--document h4,
.akashic--document label.accordion-label {
	line-height: 1.2;
}
.akashic--document h1 {
	color: #9CC;
	font-size: 28px;
	margin: 20px 0 40px 0;
}
.akashic--document h2 {
	color: #C00;
	font-size: 24px;
	margin: 60px 0 24px 0;
}
.akashic--document h3 {
	color: #69C;
	font-size: 20px;
	margin: 36px 0 16px 0;
}
.akashic--document h4 {
	color: #699;
	font-size: 16px;
	margin: 32px 0 16px 0;
}
.akashic--document .navi-center {
	text-align: center;
	margin: 32px 0;
}
.akashic--document label.accordion-label {
	display: block;
	color: #699;
	font-size: 16px;
	margin: 10px 0;
}

.akashic-document h1 a.anchor,
.akashic-document h2 a.anchor,
.akashic-document h3 a.anchor,
.akashic-document h4 a.anchor,
.akashic-document h5 a.anchor,
.akashic-document h6 a.anchor {
	text-decoration: none;
}
.header-link {
	float: left;
	padding-right: 4px;
	margin-left: -20px;
	visibility: hidden;
	color: silver;
}
.header-link:hover {
	color: #999;
}
.akashic--document h1:hover .header-link,
.akashic--document h2:hover .header-link,
.akashic--document h3:hover .header-link,
.akashic--document h4:hover .header-link,
.akashic--document h5:hover .header-link,
.akashic--document h6:hover .header-link {
	visibility: visible;
}

@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document h1 {
		font-size: 24px;
	}
	.akashic--document h2 {
		font-size: 20px;
	}
	.akashic--document h3 {
		font-size: 16px;
	}
	.akashic--document h4 {
		font-size: 15px;
	}
	.akashic--document label.accordion-label {
		font-size: 15px;
	}
}
/*↑見出し系↑*/
/*↓文章・リスト・引用・画像↓*/
.akashic--document p a,
.akashic--document li a,
.akashic--document .navi-center a {
	color: #C00;
	margin: 0 4px;
}
.akashic--document li p {
	margin: 0;
}
.akashic--document p {
	color: #244;
	margin-left: 6px;
}
.akashic--document p + p {
	margin-top: 16px;
}
.akashic--document .warn-info,
.akashic--document .source-info {
	color: #A8A0A0;
	border: 1px solid #D0C0C0;
	padding: 10px;
	border-radius: 3px;
	background: #FCF8F8;
}
.akashic--document .warn-info a,
.akashic--document .source-info a {
	color: #E06060;
}
.akashic--document .warn-info p,
.akashic--document .source-info p {
	color: inherit;
}

.akashic--document .strong-warn-info {
	color: #202020;
	margin: 40px 0;
	padding: 20px;
	border-radius: 6px;
	border: 1px solid #b99e9e;
	background: #ffe7e7;
}
.akashic--document .strong-warn-info a {
	color: #aa1e1e;
}
.akashic--document .strong-warn-info p {
	color: inherit;
}
.akashic--document .strong-warn-info h3 {
	margin: 0 0 16px 0;
	color: #C00;
}

.akashic--document li {
	color: #466;
	line-height: 1.5;
}
.akashic--document li li {
	color: #688;
}
.akashic--document li li li {
	color: #8AA;
}
.akashic--document li li:last-child,
/* 2層，3層の最後1個は下部に余白 */
.akashic--document li li li:last-child {
	margin-bottom: 8px;
}
.akashic--document ul {
	list-style-type: disc;
	margin: 20px 0 20px 32px;
}
.akashic--document ul:last-child {
	margin-bottom: 0;
}
.akashic--document ol {
	margin: 20px 0 20px 32px;
}

.akashic--document ul ul {
	list-style-type: circle;
	margin: 6px 0 8px 32px;
}
.akashic--document ul ul ul {
	list-style-type: square;
	margin: 4px 0 6px 32px;
}
/* 引用 */
.akashic--document blockquote {
	position: relative;
	display: block;
	background: #E6EFEF;
	border-left: solid 2px #C00;
	padding: 16px;
	margin: 20px 0 20px 6px;
}
.akashic--document blockquote p {
	color: #688;
}
.akashic--document blockquote code:not(.hljs):not(.language-plaintext) {
	background: #CEDCDA;
	color: #12842B;
}
.akashic--document img,
.akashic--document iframe {
	display: block;
	max-width: 100%;
	margin: 30px auto;
	box-shadow: 0 0 6px gray;
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document p,
	.akashic--document blockquote {
		margin-left: 0;
	}
	.akashic--document ul {
		margin-left: 16px;
	}
}
/*↑文章・リスト・引用・画像系↑*/
/*↓テーブル系↓*/
.akashic--document table {
	color: #366;
	line-height: 1.2;
	text-align: center;
	margin: 24px auto;
}
.akashic--document table th {
	background: #EED;
	border-bottom: solid 2px #C00;
	padding: 12px;
	white-space: nowrap;
}
.akashic--document table td {
	border-bottom: solid 1px #CCB;
	border-left: dotted 1px #DDC;
	padding: 16px;
}
.akashic--document table td:first-child {
	border-left: 0;
}
.akashic--document table td img {
	margin: 15px auto;
}
/* 横スクロール用 */
.akashic--document .table--scroll {
	display: block;
	overflow-x: auto;
}
.akashic--document blockquote table {
	border: solid 1px #CCB;
	background: #FEFEFE;
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document table th,
	.akashic--document table td {
		padding: 8px;
	}
}
/*↑テーブル系↑*/
/*↓コード系↓*/
.akashic--document pre {
	overflow-x: auto;
	background: #232323;
	/* highlight.js */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	color: #FFF;
	font-size: 15px;
	padding: 18px;
	margin: 20px 0 20px 6px;
	border-radius: 3px;
}
.akashic--document pre code {
	display: inline-block;
	white-space: pre;
	line-height: 1.3;
}
.akashic--document pre code:after {
	display: block;
	width: 100%;
	height: 0;
	content: '';
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document pre {
		overflow-x: scroll;
		border-width: 8px;
		overflow-scrolling: touch;
		-webkit-overflow-scrolling: touch;
	}
}
/*↑コード系↑*/
/*↓2カラム用↓*/
.akashic--document .twocol {
	display: flex;
}
.akashic--document .twocol-side {
	box-sizing: border-box;
	position: fixed;
	width: 260px;
	height: calc(100% - 47px);
	overflow-y: auto;
	padding: 0 20px 180px;
}
.akashic--document .twocol-main {
	box-sizing: border-box;
	margin-left: 260px;
	padding: 0 10px;
	border-left: 1px dashed #c0c0c0;
	min-height: 95vh;
	/* .twocol-side に footer がかぶさるのを防ぐために最低限の高さをつけておく */
}
@media screen and (max-width:959px) {
	.akashic--document .twocol-side {
		display: none;
	}
	.akashic--document .twocol-main {
		margin-left: 0;
	}
}
.akashic--document .responsive--width--twocol {
	width: 928px;
	margin: 0 auto;
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document .responsive--width--twocol {
		width: 100%;
	}
}
.akashic--document .twocol-side h3 {
	color: #c00;
}
.akashic--document .twocol-side ul {
	margin: 15px 0 20px 22px;
	font-size: 15px;
}
.akashic--document .twocol-side li {
	list-style: circle;
}
.akashic--document .twocol-side li > a:only-child {
	margin: 0;
}
.akashic--document .twocol-side li + li {
	margin-bottom: 2px;
}
.akashic--document .twocol-side a {
	color: #244;
	text-decoration: none;
}
.akashic--document .twocol-side a:hover,
.akashic--document .twocol-side a:active {
	text-decoration: underline;
}
/*↑2カラム用↑*/
/*↓コンテンツ用↓*/
.akashic--document div.w640h360 {
	overflow: hidden;
	width: 640px;
	height: 360px;
	margin: 0 auto;
}
@media screen and (max-width:calc(959px + 260px)) {
	.akashic--document div.w640h360 {
		width: 320px;
		height: 180px;
		margin: 0 auto;
	}
}
/*↑コンテンツ用↑*/

/* アコーディオンメニュー用 */
/* input.accordion-state の直後に表示を切り替えたい要素が来る前提。詳細は src/common/menu.ejs を参照 */
input.accordion-state {
	display: inline;
	position: absolute;
	visibility: hidden;
}
input.accordion-state:checked + * {
	display: none !important;
}
/* ↑アコーディオンメニュー用 */

/* ページ内リンクの遷移先の位置調整 */
.akashic--document a.anchor {
	outline: transparent;
	padding-top: 70px;
	margin-top: -70px;
}

/* サンプルデモページ */
.demo .akashic--document {
    margin-top: 40px;
}
.demo .akashic--document img {
	margin: 0;
}