@charset "UTF-8";
/*! =====このcssファイルはsassから生成されています。===== */
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #9CF;
	color: #000;
	font-family: sans-serif;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

a:link {
	color: #00C;
}

a:visited {
	color: #666;
}

a:active {
	color: #C00;
}

a:hover {
	color: #C00;
}

a i {
	color: #000;
}

hr {
	border-style: solid;
	border-width: 1px;
	border-color: #9CF;
	margin: 1ex auto;
}

header, main, footer, footer {
	background-color: #FFF;
	border-radius: 8px;
	padding: 8px;
}

header {
	width: 300px;
	position: fixed;
	margin: 12px;
	top: 0px;
	box-shadow: 0px 2px 2px 0px;
}

main, footer {
	display: block;
	margin: 12px 12px 12px 340px;
	box-shadow: 0px 2px 2px 0px;
}

footer {
	text-align: right;
}

input, select, em.thispage, .se, textarea, button, .button, .oyano, .oyaresno {
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	border-color: #000;
	padding: 4px;
	color: #000;
	background-color: #EEF;
}

select {
	padding: 2px;
}

input[name="picw"], select[name="picw"], em[name="picw"].thispage, [name="picw"].se, input[name="pich"], select[name="pich"], em[name="pich"].thispage, [name="pich"].se, input[name="del[]"], select[name="del[]"], em[name="del[]"].thispage, [name="del[]"].se, input[name="pwd"], select[name="pwd"], em[name="pwd"].thispage, [name="pwd"].se {
	width: 3em;
}

input[value="お絵かき"], select[value="お絵かき"], em[value="お絵かき"].thispage, [value="お絵かき"].se, .button {
	background-color: #396;
	color: #FFF;
}

input[name="upfile"], select[name="upfile"], em[name="upfile"].thispage, [name="upfile"].se {
	width: 10em;
}

em.thispage {
	background-color: #9CF;
	color: #000;
	font-style: normal;
	font-weight: bold;
}

.se {
	background-color: #9CF;
	color: #000;
	font-style: normal;
}

figure {
	float: left;
	margin-right: 8px;
	margin-bottom: 1ex;
}

figure img {
	max-width: 100%;
}

figcaption {
	font-size: smaller;
}

ul {
	list-style-type: none;
	font-size: smaller;
}

.res section {
	display: table;
}

.res h3, .res h4 {
	font-size: 100%;
	margin-bottom: 1ex;
}

.res figure {
	float: none;
}

.resma {
	color: #666;
}

.thfoot {
	clear: left;
	text-align: right;
}

.button {
	padding-left: 1ex;
	padding-right: 1ex;
	display: inline-block;
}

.button a {
	text-decoration: none;
	color: #FFF;
}

.button a i {
	color: #FFF;
}

.oyano, .oyaresno {
	background-color: #9CF;
	color: #000;
	display: inline-block;
	text-align: center;
	min-width: 2em;
}

.oekaki {
	font-size: smaller;
}

#appstage {
	display: flex;
	justify-content: center;
	align-items: center;
}

#appstage .app {
	margin: 0px 4px;
}

.NEO .color_bk {
	color: #69C;
}

.NEO .color_bk2 {
	color: #9CF;
}

.NEO .color_tool_icon {
	color: #6C9;
}

.NEO .color_icon {
	color: #9FC;
}

.NEO .color_iconselect {
	color: #9FC;
}

.NEO .color_text {
	color: #000;
}

.NEO .color_bar {
	color: #333;
}

.NEO .tool_color_button {
	color: #369;
}

.NEO .tool_color_button2 {
	color: #036;
}

.NEO .tool_color_text {
	color: #FFF;
}

.NEO .tool_color_bar {
	color: #EEE;
}

.NEO .tool_color_frame {
	color: #000;
}

.palette {
	width: 180px;
}

.palette fieldset {
	text-align: center;
}

.c {
	text-align: center;
}

#catalog {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#catalog div {
	width: 166px;
	text-align: center;
	overflow: hidden;
}

#catalog p {
	margin: 0.5ex auto;
}

#catalog img {
	width: 150px;
	height: 150px;
}

.delfo {
	font-size: smaller;
}

.delfo th, .delfo td {
	border: 1px solid #9CF;
}

@media screen and (max-width: 1024px) {
	.res {
		clear: left;
	}
}

@media screen and (max-width: 768px) {
	header {
		width: auto;
		position: relative;
		margin: 12px;
	}
	main, footer {
		display: block;
		margin: 12px;
	}
	#paintmode header {
		width: 300px;
		position: relative;
		margin: 12px;
	}
	#paintmode main, #paintmode footer {
		display: block;
		margin: 12px;
	}
	#paintmode footer {
		text-align: right;
		margin: 12px;
	}
}

@media screen and (max-width: 450px) {
	footer {
		text-align: right;
		margin: 12px;
	}
	#appstage {
		display: block;
	}
}