/* ---- define ---- */
:root {
	--bold: 2px;
	--font-size-smallXX: 10px;
	--font-size-smallX: 12px;
	--font-size-small: 14px;
	--font-size-default: 15px;
	--font-size-large: 20px;
	--font-size-largeX: 24px;
	--font-size-largeXX: 36px;
	
	--button-width-small: 70px;	
	--button-width-default: 100px;	
	--button-width-large: 130px;
	
	--scrollbar-span: 14px;
	--scrollbar-bold: 10px;
	--check-icon-size: 80px;
	--header-margin: 4px;
	--contents-margin: 1.2em;
	--contents-margin-h: 1.0em;
	
	--icon-size-default: 40px;
	--icon-size-large: 52px;
	--icon-size-largeX: 80px;
	--icon-size-largeXX: 128px;
	
	--card-width: 242px;
	--card-height: 48px;
	--card-margin: 4px;
	--card-padding: 4px;
	--card-icon-margin: 4px;
	
	--header-height: 50px;
}

@font-face {
	font-family: "myfont";
	src: url(../font/rounded.ttf);
	font-weight: normal;
	font-style: normal;
}

/* ---- normalize ---- */
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(-45deg, var(--back-color), var(--white-color));
}

body {
	display: flex;
	position: relative;
	justify-content: stretch;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--font-color);
	/* 全体のフォント設定 */
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: var(--font-size-default);
	font-weight: normal;
	/* iOS Safari のデザイン崩れ対処 */
	-webkit-text-size-adjust: 100%;
}

a {
	color: var(--power-color);
}
	a:focus,
	a:hover {
		color: var(--power-color);
		/* フォーカスの強調 */
		filter: drop-shadow(0px 0px 5px var(--power-color));
		-webkit-filter: drop-shadow(0px 0px 5px var(--power-color));
	}
	a:active {
		color: var(--input-color);
		/* フォーカスの強調 */
		filter: drop-shadow(0px 0px 5px var(--power-color));
		-webkit-filter: drop-shadow(0px 0px 5px var(--power-color));
	}

img {
	/* コンテンツ選択の防止 */
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select: none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-drag:none;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	background-color: var(--input-color);
	border: var(--bold) solid var(--accent-color);
	box-sizing: border-box;
	/* iOS Safari のデザイン崩れ対処 */
	/*-webkit-appearance: none;*/
}
	input:focus,
	select:focus,
	textarea:focus {
		/* フォーカスの強調 */
		box-shadow: 0 0 5px var(--power-color);
		-webkit-box-shadow: 0 0 5px var(--power-color);
		-moz-box-shadow: 0 0 5px var(--power-color);
	}
	input:read-only,
	textarea:read-only {
		/* 無効時の色味 */
		color: var(--accent-color);
		background-color: var(--input-disable-color);
	}
	input:disabled,
	select:disabled,
	textarea:disabled {
		/* 無効時の色味 */
		color: var(--accent-color);
		background-color: var(--input-disable-color);
		border: var(--bold) solid var(--accent-disable-color);
		/* フォーカスの無効化 */
		box-shadow: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
	}

button {
	font-family: inherit;
	font-size: 100%;
    padding: 0px;
	color: var(--accent-color);
	background-color: var(--input-color);
	border: var(--bold) solid var(--accent-color);
	box-sizing: border-box;
	width: var(--button-width-default);
	/* 影の表示 */
	filter: drop-shadow(1px 1px 2px var(--shadow-color));
	-webkit-filter: drop-shadow(1px 1px 2px var(--shadow-color));
	/* カーソル */
	cursor: pointer;
	cursor: hand;
	/* はみ出し防止 */
	text-overflow: clip;
	white-space: nowrap;
	overflow: hidden;
}
	button span {
		/* 判定の無効化 */
		pointer-events: none;
		/* コンテンツ選択の防止 */
		user-select:none;
		-webkit-user-select:none;
		-ms-user-select: none;
		-moz-user-select:none;
		-khtml-user-select:none;
		-webkit-user-drag:none;
		-khtml-user-drag:none;
	}
	button:hover {
		background-color: var(--select-color);
	}
	button:enabled:active {
		/* 座標の移動 */
		transform: translateY(2px);
		-moz-transform: translateY(2px);
		-webkit-transform: translateY(2px);
		-o-transform: translateY(2px);
		-ms-transform: translateY(2px);
		/* フォーカスの無効化 */
		box-shadow: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
		/* 影の非表示 */
		filter: unset;
		-webkit-filter: unset;
	}
	button:focus {
		/* フォーカスの強調 */
		box-shadow: 0 0 5px var(--power-color);
		-webkit-box-shadow: 0 0 5px var(--power-color);
		-moz-box-shadow: 0 0 5px var(--power-color);
	}
	button:disabled {
		/* 無効時の色味 */
		color: var(--accent-disable-color);
		background-color: var(--input-disable-color);
		border: var(--bold) solid var(--accent-disable-color);
		/* フォーカスの無効化 */
		box-shadow: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
		/* 影の非表示 */
		filter: unset;
		-webkit-filter: unset;
		/* カーソル */
		cursor: default;
	}
	button.important span {
		color: var(--power-color);
	}

/* ---- design ---- */
.solid-top {
	border: none;
	border-top: var(--bold) solid var(--accent-color);
	box-sizing: border-box;
}
.solid-bottom {
	border: none;
	border-bottom: var(--bold) solid var(--accent-color);
	box-sizing: border-box;
}

.title-border {
	display: flex;
	justify-content: stretch;
	align-items: center;
}
	.title-border:before,
	.title-border:after {
		border: none;
		border-top: 1px dashed var(--accent-color);
		content: "";
		flex-grow: 1;
	}
	.title-border:before {
		margin-right: 1rem;
	}
	.title-border:after {
		margin-left: 1rem;
	}

::-webkit-scrollbar {
	width: var(--scrollbar-bold);
	height: var(--scrollbar-bold);
}
::-webkit-scrollbar-track {
	background: var(--scroll-back-color);
	border: none;
	border-radius: var(--scrollbar-bold);
}
::-webkit-scrollbar-thumb {
	background: var(--accent-color);
	border-radius: var(--scrollbar-bold);
	box-shadow: none;
}

/* ---- tab ---- */
.tab-control a {
	display: inline-block; /* インラインブロック化 */
	padding: 0px 8px 0px 8px;
	border-width: var(--bold) var(--bold) 0px var(--bold);
	border-style: solid;
	border-color: var(--accent-color);
	color: var(--accent-color);
	background-color: var(--input-color);
	text-decoration: none; /* リンクの下線を消す */
	/* 高さの変化 */
	padding-bottom: 0px;
	margin-bottom: var(--bold);
	/* コンテンツ選択の防止 */
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select: none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-drag:none;
	/* 座標の移動 */
	transform: translateY(var(--bold));
	-moz-transform: translateY(var(--bold));
	-webkit-transform: translateY(var(--bold));
	-o-transform: translateY(var(--bold));
	-ms-transform: translateY(var(--bold));
}
	.tab-control a:hover {
		background-color: var(--select-color);
	}
	.tab-control a.selected {
		/* 高さの変化 */
		padding-bottom: var(--bold);
		margin-bottom: 0px;
	}

/* ---- announce ---- */
.announce {
	opacity: 0.0;
	padding: var(--contents-margin);
	max-width: 300px;
	max-height: 100%;
	background-color: var(--input-color);
	/* 要素の右下寄せ */
	position: fixed;
	bottom: var(--contents-margin-h);
	right: var(--contents-margin-h);
}
	.announce div {
		max-width: 100%;
		max-height: 100%;
		/* 文字の折り返し（単語単位） */
		word-break: keep-all;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

/* ---- popup ---- */
.popup {
	visibility: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: var(--shadow-color);
	/* 要素の中央寄せ */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
	_::-webkit-full-page-media, _:future, :root .popup {
		flex-direction: unset;
	}
.popup-input {
	display: grid;
	grid-template-rows: auto auto auto;
	margin: 0px;
	padding: calc(var(--contents-margin) / 2) var(--contents-margin);
	min-width: 250px;
	max-width: 60%;
	max-height: calc(100% - var(--contents-margin) * 1);
	background-color: var(--input-color);
}
	_::-webkit-full-page-media, _:future, :root .popup-input {
		grid-template-rows: auto 1fr auto;
		height: 300px;
	}
	.popup-header {
		color: var(--accent-color);
		grid-row: 1/2;
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
		/* はみ出し防止 */
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.popup-contents {
		grid-row: 2/3;
		/*padding-bottom: var(--contents-margin-h);*/
		width: 100%;
		/* 要素の中央寄せ */
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		/* 文字の折り返し（単語単位） */
		/* word-break: keep-all; */
		overflow-wrap: break-word;
		word-wrap: break-word;
		/* スクロールの為の設定 */
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
		_::-webkit-full-page-media, _:future, :root .popup-contents {
			height: auto;
		}
		.popup-contents:after {
			/* 指定された回り込みを解除 */
			content: "";
			clear: both;
			height: 0;
			display: block;
			visibility: hidden;
		}
		.popup-contents .column {
			/* 回り込みを設定 */
			display: flex;
		}
			.popup-contents .column label {
				margin-right: var(--contents-margin-h);
				/* 回り込みを設定 */
				display: inline-flex;
				float: left;
			}
		.popup-contents.message {
			/* 要素の中央寄せを解除 */
			display: unset;
		}
		.popup-contents.row {
			/* 要素の中央寄せ（縦並び） */
			flex-direction: row;
			padding-bottom: var(--contents-margin-h);
		}
		.popup-contents input[type="text"],
		.popup-contents input[type="email"],
		.popup-contents input[type="password"] {
			width: 100%;
			margin-bottom: calc(var(--contents-margin) / 8);
			font-size: var(--font-size-default);
			/* はみ出し防止 */
			text-overflow: ellipsis;
			white-space: nowrap;
			/* 要素の中央寄せ */
			text-align: center;
		}
		.popup-contents input[type="radio"] {
			width: auto;
		}
			.popup-effect {
				margin-top: 10px;
			}
			.popup-show-image {
				object-fit: contain;
				width: 100%;
				height: 100%;
			}
			.popup-label {
				width: 100%;
				padding-top: 4px;
				text-align: left;
				font-size: var(--font-size-small);
			}
			.popup-dummy {
				top:-100px;
				left:-100px;
				position:fixed;
			}
			.popup-textarea {
				width: 100%;
				min-height: 50px;
				max-height: 190px;
				resize: none;
			}
			.popup-icon {
				position: absolute;
				width: 1px;
				height: 1px;
				margin: -1px;
				border: 0;
				overflow: hidden;
				padding: 0;
				clip: rect(0, 0, 0, 0);
			}
				.popup-icon-image {
					border: var(--bold) solid var(--accent-color);
					width:  var(--icon-size-largeX);
					height: var(--icon-size-largeX);
					margin-left: var(--header-margin);
					margin-right: var(--header-margin);
					padding: 0px;
					border-radius: 20%;
					/* 画像を矩形にトリミング */
					object-fit: cover;
				}
				input.popup-icon + label {
					margin-top: var(--message-margin);
				}
				input.popup-icon + label img {
					/* 影の表示 */
					filter: drop-shadow(0px 0px 2px var(--icon-shadow-color));
					-webkit-filter: drop-shadow(0px 0px 2px var(--icon-shadow-color));
				}
				input.popup-icon:focus + label img,
				input.popup-icon:active + label img {
					/* フォーカスの強調 */
					filter: drop-shadow(0px 0px 5px var(--power-color));
					-webkit-filter: drop-shadow(0px 0px 5px var(--power-color));
				}
				input.popup-icon:disabled + label img,
				input.popup-icon:disabled:focus + label img,
				input.popup-icon:disabled:active + label img {
					/* 影やフォーカスの無効化 */
					filter: none;
					-webkit-filter: none;
				}
				input.popup-icon:enabled:active + label img {
					/* 座標の移動 */
					transform: translateY(var(--bold));
					-moz-transform: translateY(var(--bold));
					-webkit-transform: translateY(var(--bold));
					-o-transform: translateY(var(--bold));
					-ms-transform: translateY(var(--bold));
				}
				input.popup-icon + label img {
					border: var(--bold) solid var(--power-color);
				}
				input.popup-icon:disabled + label img {
					border: var(--bold) solid var(--accent-color);
				}
	.popup-controller {
		grid-row: 3/4;
		width: 100%;
		margin-top: 20px;
	}
		.popup-controller button span {
			/* 文字のスリム化 */
			display:inline-block;
			transform: scale(0.9, 1);
			letter-spacing: -2px;
			/* はみ出し防止 */
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.popup-cancel {
			width: var(--button-width-small);
		}
		.popup-cancel.only {
			margin-left: calc((100% - var(--button-width-small))/2);
		}
		.popup-button-single {
			margin-left: calc(100% - var(--button-width-small)*2);
			width: var(--button-width-small);
		}
		.popup-button-two-1,
		.popup-button-two-2 {
			margin-left: calc((100% - var(--button-width-small)*3)/2);
			width: var(--button-width-small);
		}

/* ---- box ---- */
.box {
	margin-top: var(--contents-margin);
	margin-bottom: var(--contents-margin);
	padding-left: var(--contents-margin);
}
	.box .box {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.box h1, .box h2, .box h3, .box h4 {
		margin-left: calc(var(--contents-margin-h) - var(--contents-margin));
	}
	.box hr {
		margin-left: var(--contents-inverse-indent);
	}
	.box:after {
		/* 指定された回り込みを解除 */
		content: "";
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
	}
	.box .tips {
		/* サイズを決める為に、回り込みを設定 */
		float: left;
	}

/* ---- custom-image radio ---- */
input[type="radio"].custom-image {
	/* 操作できるが非表示 */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	overflow: hidden;
	padding: 0;
	clip: rect(0, 0, 0, 0);
}
	input[type="radio"].custom-image:focus + label,
	input[type="radio"].custom-image:active + label {
		/* フォーカスの強調 */
		box-shadow: 0 0 5px var(--power-color);
		-webkit-box-shadow: 0 0 5px var(--power-color);
		-moz-box-shadow: 0 0 5px var(--power-color);
	}
	input[type="radio"].custom-image + label {
		margin-right: var(--bold);
		border: var(--bold) solid;
		border-color: var(--accent-color);
		border-radius: var(--bold);
		box-sizing: border-box;
		background-color: var(--input-color);
		font-size: var(--font-size-small);
		/* サイズを決める為に、回り込みを設定 */
		float: left;
		width: var(--check-icon-size);
		height: var(--check-icon-size);
		/* 要素の中央寄せ */
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		/* 影の表示 */
		filter: drop-shadow(1px 1px 2px var(--shadow-color));
		-webkit-filter: drop-shadow(1px 1px 2px var(--shadow-color));
	}
	input[type="radio"].custom-image:hover + label {
		background-color: var(--select-color);
		cursor: pointer;
	}
	input[type="radio"].custom-image:checked + label {
		color: var(--input-color);
		border-color: var(--accent-color);
		background-color: var(--accent-color);
		cursor: default;
		/* 座標の移動 */
		transform: translateY(2px);
		-moz-transform: translateY(2px);
		-webkit-transform: translateY(2px);
		-o-transform: translateY(2px);
		-ms-transform: translateY(2px);
		/* 影の非表示 */
		filter: unset;
		-webkit-filter: unset;
	}
	input[type="radio"].custom-image + label img {
		/* 未選択時の色味 */
		filter: sepia(100%) saturate(6932%) brightness(42%) hue-rotate(var(--accent-hue)) saturate(35%);
		-webkit-filter: sepia(100%) saturate(6932%) brightness(42%) hue-rotate(var(--accent-hue)) saturate(35%);
	}
	input[type="radio"].custom-image:checked + label img,
	input[type="radio"].custom-image:disabled:checked + label img {
		/* 選択時の色味 */
		filter: unset;
		-webkit-filter: unset;
	}
	input[type="radio"].custom-image:disabled + label,
	input[type="radio"].custom-image:disabled + label + label {
		/* 無効時の色味 */
		color: var(--accent-color);
		border-color: var(--accent-disable-color);
		background-color: var(--input-disable-color);
		cursor: default;
		/* フォーカスの無効化 */
		box-shadow: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
	}
	input[type="radio"].custom-image:disabled:checked + label,
	input[type="radio"].custom-image:disabled:checked + label + label,
	input[type="radio"].custom-image:disabled:focus + label,
	input[type="radio"].custom-image:disabled:focus + label + label {
		/* 無効選択時の色味 */
		color: var(--input-disable-color);
		border-color: var(--accent-disable-color);
		background-color: var(--accent-disable-color);
		cursor: default;
		/* フォーカスの無効化 */
		box-shadow: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
	}
	input[type="radio"].custom-image:disabled + label img {
		/* 無効時の色味 */
		filter: grayscale(100%) saturate(6932%) brightness(60%) hue-rotate(var(--accent-hue)) saturate(35%);
		-webkit-filter: grayscale(100%) saturate(6932%) brightness(60%) hue-rotate(var(--accent-hue)) saturate(35%);
	}
	input[type="radio"].custom-image:disabled:checked + label img {
		/* 無効時の色味 */
		filter: grayscale(100%) saturate(6932%) brightness(90%) hue-rotate(var(--accent-hue)) saturate(35%);
		-webkit-filter: grayscale(100%) saturate(6932%) brightness(90%) hue-rotate(var(--accent-hue)) saturate(35%);
	}
	
/* ---- custom-image checkbox ---- */
input[type="checkbox"].custom-image {
	/* 操作できるが非表示 */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	overflow: hidden;
	padding: 0;
	clip: rect(0, 0, 0, 0);
}
	input[type="checkbox"].custom-image:focus + label,
	input[type="checkbox"].custom-image:focus + label + label,
	input[type="checkbox"].custom-image:active + label,
	input[type="checkbox"].custom-image:active + label + label {
		/* フォーカスの強調 */
		filter: drop-shadow(0px 0px 5px var(--power-color));
		-webkit-filter: drop-shadow(0px 0px 5px var(--power-color));
	}
	input[type="checkbox"].custom-image + label,
	input[type="checkbox"].custom-image + label + label {
		/* 影の表示 */
		filter: drop-shadow(0px 0px 2px var(--icon-shadow-color));
		-webkit-filter: drop-shadow(0px 0px 2px var(--icon-shadow-color));
	}
	input[type="checkbox"].custom-image + label + label,
	input[type="checkbox"].custom-image:checked + label {
		/* 表示 */
		display: block;
	}
	input[type="checkbox"].custom-image + label,
	input[type="checkbox"].custom-image:checked + label + label {
		/* 非表示 */
		display: none;
	}
	input[type="checkbox"].custom-image:disabled + label,
	input[type="checkbox"].custom-image:disabled + label + label,
	input[type="checkbox"].custom-image:disabled:checked + label,
	input[type="checkbox"].custom-image:disabled:checked + label + label,
	input[type="checkbox"].custom-image:disabled:focus + label,
	input[type="checkbox"].custom-image:disabled:focus + label + label {
		/* 無効時の色味と影の無効化 */
		filter: grayscale(100%) saturate(6932%) brightness(90%) hue-rotate(var(--accent-hue)) saturate(35%);
		-webkit-filter: grayscale(100%) saturate(6932%) brightness(90%) hue-rotate(var(--accent-hue)) saturate(35%);
	}

/* ---- card ---- */
.card {
	position: relative;
	margin-top: var(--card-margin);
	margin-right: var(--card-margin);
	padding: var(--card-padding);
	width: var(--card-width);
	height: var(--card-height);
	color: var(--font-color);
	border: 0px none;
	background-color: var(--input-color);
}
	.card.invalid {
		color: var(--accent-disable-color);
	}
	.card-sign {
		position: absolute;
		top: calc(var(--card-padding)/2);
		right: var(--card-padding);
		font-size: var(--font-size-smallX);
		font-weight: bold;
		color: var(--power-color);
		/* フォーカスの強調 */
		filter: drop-shadow(0px 0px 5px white);
		-webkit-filter: drop-shadow(0px 0px 1px white);
		text-shadow: 2px 2px 1px white, -2px 2px 1px white, 2px -2px 1px white, -2px -2px 1px white;
	}
	.card-icon {
		position: absolute;
		top: var(--card-padding);
		left: var(--card-padding);
		width:  var(--icon-size-default);
		height: var(--icon-size-default);
		border-radius: 20%;
	}
	.card-name {
		position: absolute;
		top: 4px;
		left: calc(var(--icon-size-default) + var(--card-margin) + var(--card-icon-margin));
		font-size: var(--font-size-default);
		font-weight: bold;
		/* はみ出し防止 */
		max-width: calc(100% - var(--card-icon-margin) - var(--icon-size-default) - var(--card-padding) * 2);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}
	.card-comment {
		position: absolute;
		bottom: 4px;
		left: calc(var(--icon-size-default) + var(--card-margin) + var(--card-icon-margin));
		font-size: var(--font-size-small);
		/* はみ出し防止 */
		max-width: calc(100% - var(--card-icon-margin) - var(--icon-size-default) - var(--card-padding) * 2);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}
	.card-bookmark-back {
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 0px;
	}
	.card-bookmark {
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 0px;
		/* 未選択時の色味 */
		filter: sepia(100%) saturate(900%) brightness(60%) hue-rotate(var(--accent-hue)) saturate(150%);
		-webkit-filter: sepia(100%) saturate(900%) brightness(60%) hue-rotate(var(--accent-hue)) saturate(150%);
	}
	button.card:hover {
		background-color: var(--cursor-color);
	}
	button.card:disabled,
	button.card:disabled:hover {
		color: var(--font-color);
		background-color: var(--select-color);
		border: 0px none;
	}

/* スリムにした場合 */
.card.slim {
    width: calc(var(--card-width)*0.49);
	height: calc(var(--card-height)*0.6);
}
	/*
	.card.slim .card-icon {
		mask-image: linear-gradient(to bottom, white 0%, white 20%, transparent 60%, transparent 100%);
		-webkit-mask-image: linear-gradient(to bottom, white 0%, white 20%, transparent 60%, transparent 100%);
	}
	*/
	.card.slim .card-icon {		
		display: none;
	}
	.card.slim .card-name {		
		left: calc(var(--card-margin) + var(--card-icon-margin));
		max-width: calc(100% - var(--card-padding) * 2);
	}
	.card.slim .card-comment {
		display: none;
	}

/* ---- fade ---- */
.fade-in {
	opacity: 0;
	visibility: hidden;
}
.is-late {
	transition: .3s linear;
}
.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---- html ---- */
#js-base {
	/* 要素の中央寄せ */
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

#js-container {
}
	#js-header {
		position: relative;
	}
		#js-title-icon {
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#js-title-main {
			position: absolute;
			top: -8px;
			left: 50px;
			color: var(--accent-color);
			font-size: var(--font-size-largeXX);
			/* 字間 */
			letter-spacing: -2px;
			/* コンテンツ選択の防止 */
			user-select:none;
			-webkit-user-select:none;
			-ms-user-select: none;
			-moz-user-select:none;
			-khtml-user-select:none;
			-webkit-user-drag:none;
			-khtml-user-drag:none;
		}
		#js-title-sub {
			position: absolute;
			top: 30px;
			left: 52px;
			color: var(--accent-color);
			font-size: var(--font-size-default);
			/* 字間 */
			letter-spacing: 2px;
			/* コンテンツ選択の防止 */
			user-select:none;
			-webkit-user-select:none;
			-ms-user-select: none;
			-moz-user-select:none;
			-khtml-user-select:none;
			-webkit-user-drag:none;
			-khtml-user-drag:none;
		}
		#js-title-main,
		#js-title-sub {
			font-family: myfont;
			/* 縁取り */
			text-shadow: 
				2px  2px 1px var(--white-color),
				-2px  2px 1px var(--white-color),
				2px -2px 1px var(--white-color),
				-2px -2px 1px var(--white-color),
				2px  0px 1px var(--white-color),
				0px  2px 1px var(--white-color),
				-2px  0px 1px var(--white-color),
				0px -2px 1px var(--white-color); 
			/* はみ出し防止 */
			text-overflow: ellipsis;
			white-space: nowrap;
		}