@charset "utf-8";
*{
	font-family:'SegoeUI','Hiragino Sans','Helvetica Neue','Avenir',"Open Sans",'Helvetica','Arial',sans-serif;
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
	position: relative;
	cursor: default;
	vertical-align: bottom;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	-webkit-touch-callout: none;
	-webkit-overflow-scrolling: touch;
	line-height: 0;
	user-select: none;
	list-style: none;
	text-orientation: upright;
	-webkit-text-orientation: upright;
	text-rendering: optimizeLegibility;
	word-break: break-all;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	font-family:'SegoeUI','Hiragino Sans','Helvetica Neue','Avenir',"Open Sans",'Helvetica','Arial',sans-serif;
	color: rgba(0,0,0,0.6);
	cursor: default;
	text-align: center;
	font-size: 34px;
	background-color: #ffffff;
	overflow: hidden;
}
a{
	display: inline-block;
	line-height: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
*:before,*:after{
	content: '';
	box-sizing: border-box;
}
input::-ms-clear,input::-ms-reveal,select::-ms-expand{
    display: none;
    visibility:hidden;
}
input,select,textarea{
	font-family:'SegoeUI','Hiragino Sans','Helvetica Neue','Avenir',"Open Sans",'Helvetica','Arial',sans-serif;
	-khtml-user-select: text;
	user-select: text;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	display: inline-block;
	z-index: 50;
	color: rgba(0,0,0,0.8);
	background-color: rgba(255,255,255,0);
	outline: none;
	overflow: hidden;
}
textarea{
	resize: none;
}
input[type=radio],input[type=checkbox],input[type=file]{
	display: none;
}
input[type='password']{
	font-family: 'Helvetica Neue',sans-serif;
}
form{
	width: 100%;
	height: 100%;
	display: block;
	z-index: 50;
}
.bag{
	position: fixed;
	top: 0;
	left: 0;
	text-align: left;
	user-select: text;
	width: auto;
	height: auto;
	display: block;
	font-size: 1em;
	line-height: 1.4;
	color: #333;
	background-color: rgba(255,255,255,0.8);
	z-index: 100000;
}
.bag *{
	font-size: 0.8em;
	line-height: normal;
	display: block;
	user-select: text;
}
.login{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: block;
	z-index: 100;
}
.login>dl{
	width: auto;
	height: auto;
	margin: auto;
	padding-top: 1em;
	display: inline-block;
}
.login>dl>dt{
	width: auto;
	height: auto;
	font-size: 1em;
	line-height: 2;
	display: block;
}
.login>dl>dd{
	width: auto;
	height: auto;
	padding: 0.3em;
	display: block;
}
.login>dl>dd>ul{
	width: 20em;
	height: auto;
	display: block;
}
.login>dl>dd>ul>li{
	width: auto;
	height: auto;
	padding: 0.3em;
	display: block;
}
.login>dl>dd>ul>li>ruby{
	width: 100%;
	height: auto;
	text-align: left;
	font-size: 0.5em;
	line-height: 2;
	display: block;
}
.login>dl>dd>ul>li>input[type="text"],.login>dl>dd>ul>li>input[type="password"]{
	width: 100%;
	height: 2em;
	padding: 0 0.5em;
	font-size: 1em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	display: block;
	z-index: 100;
}
.login>dl>dd>ul>li>input[type="password"]+input[type="password"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	display: block;
	box-shadow: none;
	z-index: 1;
}
.login>dl>dd>span{
	width: auto;
	height: auto;
	border: solid 1px rgba(0,0,0,0.4);
	font-size: 1em;
	line-height: 2;
	padding: 0 1em;
	cursor: pointer;
	display: inline-block;
}
.login>dl>dd>span:hover{
	color: #ffffff;
	background-color: #007FFE;
}
.login>dl>dd>p{
	width: auto;
	height: auto;
	padding: 1em;
	font-size: 0.7em;
	line-height: 1.4;
	color: #FE0055;
	display: block;
}
.loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.8);
	z-index: 1000;
}
.loading>dl{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	display: block;
	transform: translate(-50%,-50%);
}
.loading>dl>dt{
	width: 100%;
	height: auto;
	display: block;
}
.loading>dl>dt>p{
	width: auto;
	height: auto;
	text-align: center;
	white-space: nowrap;
	color: #ffffff;
	font-size: 0.6em;
	line-height: 3;
	display: block;
}
.loading>dl>dd{
	left: 50%;
	width: 3em;
	height: 3em;
	display: block;
	transform: translate(-50%,0);
}
.loading>dl>dd>figure{
	width: 100%;
	height: 100%;
	display: block;
	animation: loadmove 1s linear infinite;
}
.loading>dl>dd>figure:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: solid 0.1em #ffffff;
	border-right: none;
	border-top: solid 0.1em transparent;
	display: block;
	transform: rotate(18deg);
}
.loading>dl>dd>figure:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: solid 0.1em #ffffff;
	border-left: none;
	border-top: solid 0.1em transparent;
	display: block;
	transform: rotate(-18deg);
}
@keyframes loadmove{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes loadmoveend{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.error{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-color: #FFCCDD;
	display: block;
	z-index: 1000;
}
.error>p{
	width: auto;
	height: auto;
	font-size: 0.5em;
	line-height: 1.2;
	padding: 1em;
	cursor: pointer;
	display: inline-block;
}
.errorbox{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.8);
	z-index: 1000;
}
.errorbox>span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	display: block;
	text-align: center;
	transform: translate(-50%,-50%);
}
.errorbox>span>p{
	width: auto;
	height: auto;
	text-align: center;
	white-space: nowrap;
	color: #ffffff;
	font-size: 0.8em;
	line-height: 1.6;
	display: block;
}
.errorbox>span>label{
	width: auto;
	height: auto;
	color: #ffffff;
	font-size: 0.8em;
	line-height: 2;
	padding: 0 1em;
	background-color: #333333;
	box-shadow: 0 0 0 1px #ffffff;
	margin: 1em 0;
	cursor: pointer;
	display: inline-block;
}
noscript{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	transform: translate(0,-50%);
}
noscript>p{
	width: 100%;
	height: auto;
	display: block;
}
noscript>p:before{
	position: relative;
	content: 'Javascriptを有効にしてください。';
	width: 100%;
	height: auto;
	font-size: 1em;
	line-height: 1.2;
	text-align: center;
	display: block;
}
header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.6em;
	background-color: #eeeeee;
	border-bottom: solid 1px rgba(0,0,0,0.3);
	display: block;
	z-index: 100;
}
header>p{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	text-align: left;
	font-size: 0.7em;
	line-height: 1;
	padding: 0 1em;
	display: block;
	z-index: 50;
	transform: translate(0,-50%);
}
header>nav{
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	padding: 0.2em;
	display: inline-block;
	z-index: 100;
	transition: all 0.3s ease-in-out;
	transition-delay: 0.3s;
}
header>nav:nth-of-type(2){
	transition-delay: 0s;
	transform: translate(0,-100%);
}
header>nav>span{
	width: auto;
	height: 100%;
	margin: 0 0.3em;
	padding: 0 0.5em;
	cursor: pointer;
	display: inline-block;
}
header>nav>span:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	display: block;
	z-index: 50;
}
header>nav>span:hover:before{
	background-color: rgba(0,0,0,0.2);
}
header>nav>span:first-of-type{
	background-color: #999999;
}
header>nav>span:last-of-type{
	background-color: #0080FF;
}
header>nav>span>p{
	top: 50%;
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 1;
	color: #ffffff;
	text-align: left;
	cursor: pointer;
	display: block;
	z-index: 100;
	transform: translate(0,-50%);
}
header>nav>ul{
	width: auto;
	height: 100%;
	display: inline-block;
}
header>nav>ul>li{
	width: auto;
	height: 100%;
	margin: 0 0.3em;
	padding: 0 0.5em;
	background-color: #00CC00;
	cursor: pointer;
	display: inline-block;
}
header>nav>ul>li:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	display: block;
	z-index: 50;
}
header>nav>ul>li:hover:before{
	background-color: rgba(0,0,0,0.2);
}
header>nav>ul>li>p{
	top: 50%;
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 1;
	color: #ffffff;
	text-align: left;
	cursor: pointer;
	display: block;
	z-index: 100;
	transform: translate(0,-50%);
}
#TopicStatus[value="Edit"]:checked~header>nav:nth-of-type(1){
	transition-delay: 0s;
	transform: translate(0,-100%);
}
#TopicStatus[value="Edit"]:checked~header>nav:nth-of-type(2){
	transition-delay: 0.3s;
	transform: translate(0,0%);
}
main{
	width: 100%;
	height: 100%;
	padding-top: 1.6em;
	display: block;
}
main>dl{
	width: 100%;
	height: 100%;
	display: block;
}
main>dl>dt{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	display: block;
	z-index: 50;
}
main>dl>dt>nav{
	position: fixed;
	top: 2.2em;
	left: 0;
	width: 100%;
	height: 2.4em;
	padding: 0 2em;
	background-color: #ffffff;
	display: block;
	z-index: 100;
}
main>dl>dt>nav>div{
	top: 1em;
	width: 100%;
	height: 1.4em;
	padding-left: 8em;
	padding-right: 12em;
	background-color: #eee;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
	text-align: left;
	display: block;
}
main>dl>dt span{
	height: 100%;
	padding: 0 0.5em;
	border-left: solid 1px rgba(0,0,0,0.2);
	display: inline-block;
	z-index: 50;
}
main>dl>dt span:nth-of-type(1){
	position: absolute;
	top: 0;
	left: 0;
	width: 3em;
	border: none;
	z-index: 120;
}
main>dl>dt span:nth-of-type(2){
	position: absolute;
	top: 0;
	left: 3em;
	width: 5em;
}
main>dl>dt span:nth-of-type(3){
	width: 100%;
}
main>dl>dt span:nth-of-type(4){
	position: absolute;
	top: 0;
	right: 5em;
	width: 7em;
}
main>dl>dt span:nth-of-type(5){
	position: absolute;
	top: 0;
	right: 0;
	width: 5em;
	padding: 0;
}
main>dl>dt>nav>div>span>p{
	top: 50%;
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 1;
	display: block;
	transform: translate(0,-50%);
}
main>dl>dt>ul{
	width: 100%;
	height: auto;
	padding: 2em;
	padding-top: 3em;
	display: block;
	z-index: 50;
}
main>dl>dt>ul>li{
	width: 100%;
	height: auto;
	background-color: #ffffff;
	padding-left: 8em;
	padding-right: 12em;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
	display: block;
}
main>dl>dt>ul>li:nth-of-type(even){
	background-color: #fafafa;
}
main>dl>dt>ul>li>div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: right;
	background-color: rgba(255,0,85,0.2);
	display: block;
	z-index: 100;
	transform: scale(1,0);
	transition: all 0.1s ease-in-out;
}
main>dl>dt>ul>li>div:before{
	position: absolute;
	content: '右のボタンで削除できます、削除しますと復元できません｡';
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	color: #FF0055;
	text-align: center;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 1em;
	background-color: #ffffff;
	display: inline-block;
	z-index: 5;
	transform: translate(-50%,-50%);
}
main>dl>dt>ul>li>div>p{
	width: 7.14em;
	height: auto;
	color: #ffffff;
	font-size: 0.7em;
	line-height: 2.5;
	background-color: #FF0055;
	text-align: center;
	cursor: pointer;
	display: inline-block;
	z-index: 100;
}
main>dl>dt>ul>li>input[type="checkbox"]:checked~div{
	transform: scale(1,1);
}
main>dl>dt>ul>li>span>p{
	width: 100%;
	height: auto;
	font-size: 0.7em;
	line-height: 2.5;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
}
main>dl>dt span:nth-of-type(1) p,main>dl>dt span:nth-of-type(4) p,main>dl>dt span:nth-of-type(5) p{
	text-align: center;
}
main>dl>dt>ul>li>span>div{
	width: 100%;
	height: auto;
	font-size: 0.7em;
	line-height: 2.5;
	color: rgba(0,0,0,0.5);
	cursor: pointer;
	text-align: center;
	display: block;
}
main>dl>dt>ul>li>span>div:hover{
	color: #ffffff;
	background-color: #00CC00;
}
main>dl>dt>ul>li>span:nth-of-type(1)>label{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.2em;
	height: 1.2em;
	font-size: 0.9em;
	border-radius: 50%;
	cursor: pointer;
	background-color: #FF0055;
	display: block;
	transform: translate(-50%,-50%);
}
main>dl>dt>ul>li>span:nth-of-type(1)>label:before{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 0.1em;
	background-color: #ffffff;
	display: block;
	transform: translate(-50%,-50%);
	transition: all 0.1s ease-in-out;
}
main>dl>dt>ul>li>input[type="checkbox"]:checked~span:nth-of-type(1)>label:before{
	transform: translate(-50%,-50%) rotate(90deg);
}
main>dl>dt>ul>li>span:nth-of-type(4)>label{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	font-size: 0.9em;
	display: inline-block;
	z-index: 100;
	transform: translate(-50%,-50%);
}
main>dl>dt>ul>li>span:nth-of-type(4)>label *{
	cursor: pointer;
}
main>dl>dt>ul>li>span:nth-of-type(4)>label:before{
	position: absolute;
	content: attr(data-lt);
	top: 50%;
	left: 0;
	width: auto;
	height: auto;
	font-size: 0.5em;
	padding-right: 0.3em;
	line-height: 1;
	display: inline-block;
	transform: translate(-100%,-50%);
}
main>dl>dt>ul>li>span:nth-of-type(4)>label:after{
	position: absolute;
	content: attr(data-rt);
	top: 50%;
	right: 0;
	width: auto;
	height: auto;
	font-size: 0.5em;
	padding-left: 0.3em;
	line-height: 1;
	display: inline-block;
	transform: translate(100%,-50%);
}
main>dl>dt>ul>li>span:nth-of-type(4)>label>figure{
	width: auto;
	height: auto;
	display: block;
}
main>dl>dt>ul>li>span:nth-of-type(4)>label>figure:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	box-shadow: 0 0.08em 0.16em rgba(0,0,0,0.5);
	background-color: #ffffff;
	display: block;
	z-index: 100;
	transition: all 0.3s ease-in-out;
}
main>dl>dt>ul>li>span:nth-of-type(4)>input[type="checkbox"]:checked+label>figure:before{
	transform: translate(1em,0);
}
main>dl>dt>ul>li>span:nth-of-type(4)>label>figure>div{
	width: 2.2em;
	height: 1.2em;
	border-radius: 0.6em;
	box-shadow: 0 0 0 1px #cccccc;
	overflow: hidden;
	display: block;
	z-index: 50;
}
main>dl>dt>ul>li>span:nth-of-type(4)>label>figure>div:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 2.2em;
	height: 1.2em;
	background-color: #eee;
	border-radius: 0.6em;
	overflow: hidden;
	display: block;
	z-index: 100;
	transition: all 0.3s ease-in-out;
}
main>dl>dt>ul>li>span:nth-of-type(4)>label>figure>div:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 2.2em;
	height: 1.2em;
	background-color: rgba(0,230,38,0);
	border-radius: 0.6em;
	overflow: hidden;
	display: block;
	z-index: 50;
	transition: all 0.3s ease-in-out;
}
main>dl>dt>ul>li>span:nth-of-type(4)>input[type="checkbox"]:checked+label>figure>div:after{
	background-color: rgba(0,230,38,1);
}
main>dl>dt>ul>li>span:nth-of-type(4)>input[type="checkbox"]:checked+label>figure>div:before{
	transform: scale(0,0);
}
@keyframes tldel{
	0%{
		transform: scale(1,1);
	}
	100%{
		transform: scale(1,0);
	}
}
main>dl>dd{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fafafa;
	overflow: hidden;
	display: block;
	z-index: 100;
	transform: translate(0,100%);
	transition: all 0.5s ease-in-out;
}
#TopicStatus[value="Edit"]:checked~main>dl>dd{
	transform: translate(0,0);
}
main>dl>dd>dl{
	width: 100%;
	height: 100%;
	padding-top: 5em;
	display: block;
	transition: all 0.3s ease-in-out;
}
#TopicDetails:checked~dl{
	padding-top: 2em;
}
main>dl>dd>dl>dt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-color: rgba(0,0,0,0.2);
	box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
	display: block;
	z-index: 100;
}
main>dl>dd>dl>dt>ul{
	width: 100%;
	height: 5em;
	text-align: left;
	display: block;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}
#TopicDetails:checked~dl>dt>ul{
	height: 2em;
}
main>dl>dd>dl>dt>ul>li{
	width: auto;
	height: auto;
	padding: 0 0.2em;
	text-align: left;
	display: inline-block;
	z-index: 50;
}
main>dl>dd>dl>dt>ul>li:last-of-type{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2em;
	text-align: center;
	background-color: #333333;
	display: block;
	z-index: 100;
}
main>dl>dd>dl>dt>ul>li>ruby{
	width: auto;
	height: auto;
	font-size: 0.5em;
	line-height: 2;
	color: rgba(0,0,0,0.6);
	display: block;
}
main>dl>dd>dl>dt>ul>li>span{
	width: auto;
	height: auto;
	border-left: solid 0.2em transparent;
	border-right: solid 0.2em transparent;
	vertical-align: middle;
	display: inline-block;
}
main>dl>dd>dl>dt>ul>li>span select{
	width: auto;
	height: 2em;
	padding: 0 0.3em;
	font-size: 0.7em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	margin: 0.25em 0.2em;
	cursor: pointer;
	display: inline-block;
	z-index: 100;
}
main>dl>dd>dl>dt>ul>li:nth-of-type(4)>span{
	width: 100%;
}
main>dl>dd>dl>dt>ul>li>span>input[type="text"]{
	width: 16em;
	height: 2em;
	padding: 0 0.3em;
	font-size: 0.7em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0);
	margin: 0.25em 0;
	display: inline-block;
	z-index: 100;
}
main>dl>dd>dl>dt>ul>li>span>input[type="text"]:focus{
	background-color: #ffffff;
}
main>dl>dd>dl>dt>ul>li>span>p{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2em;
	padding: 0 0.3em;
	font-size: 0.7em;
	line-height: 2;
	color: #999999;
	background-color: #ffffff;
	margin: 0.25em 0;
	display: inline-block;
	z-index: 50;
}
main>dl>dd>dl>dt>ul>li>p{
	width: auto;
	height: auto;
	color: #ffffff;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 0.5em;
	margin: 0.6em;
	cursor: pointer;
	box-shadow: 0 0 0 1px #ffffff;
	display: inline-block;
	z-index: 50;
}
main>dl>dd>dl>dt>ul>li>p:hover{
	color: #4CA6FF;
	box-shadow: 0 0 0 1px #4CA6FF;
}
main>dl>dd>dl>dt>ul>li>label{
	position: absolute;
	top: 50%;
	left: 0;
	width: auto;
	height: auto;
	padding-left: 2em;
	display: block;
	cursor: pointer;
	z-index: 100;
	transform: translate(0,-50%);
}
main>dl>dd>dl>dt>ul>li>label:before{
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #ffffff;
	display: block;
	transform: translate(0,-50%);
}
main>dl>dd>dl>dt>ul>li>label:after{
	position: absolute;
	top: 50%;
	left: 0.75em;
	width: 0.5em;
	height: 0.5em;
	border-top: solid 2px #333333;
	border-left: solid 2px #333333;
	display: block;
	transform: translate(0,-25%) rotate(45deg);
}
main>dl>dd>dl>dt>ul>li>label:hover:before{
	background-color: #4CA6FF;
}
main>dl>dd>dl>dt>ul>li>label:hover:after{
	border-color: #ffffff;
}
#TopicDetails:checked~dl>dt>ul>li>label:after{
	border: none;
	border-bottom: solid 2px #333333;
	border-right: solid 2px #333333;
	transform: translate(0,-75%) rotate(45deg);
}
#TopicDetails:checked~dl>dt>ul>li>label:hover:after{
	border-color: #ffffff;
}
main>dl>dd>dl>dt>ul>li>label>p{
	width: auto;
	height: auto;
	cursor: pointer;
	display: block;
}
main>dl>dd>dl>dt>ul>li>label>p:before{
	position: relative;
	content: '情報を隠す';
	width: auto;
	height: auto;
	color: #ffffff;
	font-size: 0.7em;
	line-height: 2;
	display: block;
}
#TopicDetails:checked~dl>dt>ul>li>label>p:before{
	content: '情報を表示';
}
main>dl>dd>dl>dt>ul>li>label>p:hover:before{
	color: #4CA6FF;
}
main>dl>dd>dl>dt>ul>li>span>label{
	width: auto;
	height: auto;
	font-size: 0.7em;
	line-height: 2;
	padding-left: 2.2em;
	cursor: pointer;
	margin: 0.25em 0.2em;
	vertical-align: middle;
	display: inline-block;
}
main>dl>dd>dl>dt>ul>li>span>label:before{
	position: absolute;
	top: 50%;
	left: 0;
	width: 2em;
	height: 2em;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	display: block;
	z-index: 50;
	transform: translate(0,-50%);
}
main>dl>dd>dl>dt>ul>li>span>label:after{
	position: absolute;
	top: 50%;
	left: 0.7em;
	width: 0.6em;
	height: 1.2em;
	display: none;
	z-index: 100;
	border-right: solid 0.2em #00E600;
	border-bottom: solid 0.2em #00E600;
	transform: translate(0,-50%) rotate(45deg);
}
main>dl>dd>dl>dt>ul>li>span>input[type="checkbox"]:checked~label:after{
	display: block;
}
main>dl>dd>dl>dt>ul>li>span>span{
	width: auto;
	height: auto;
	vertical-align: middle;
	display: none;
}
main>dl>dd>dl>dt>ul>li>span>input[type="checkbox"]:checked~span{
	display: inline-block;
}
#TopicEditStatus:checked~dl>dt>ul>li:last-of-type:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 100;
}
main>dl>dd>dl>dd{
	width: 100%;
	height: 100%;
	display: block;
}
main>dl>dd>dl>dd>div{
	width: 100%;
	height: 100%;
	font-size: 0.9em;
	overflow-x: hidden;
	overflow-y: auto;
	display: block;
	z-index: 50;
	transition: all 0.3s ease-in-out;
}
#DetailsBox{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 100;
	transform: translate(100%,0);
	transition-delay: 0.3s;
}
#TopicEditStatus:checked~dl>dd>#DetailsBox{
	transform: translate(0,0);
	transition-delay: 0s;
}
#DetailsBox>span{
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	padding-top: 2em;
	background-color: rgba(0,0,0,0.8);
	display: block;
	z-index: 100;
	transform: translate(100%,0);
	box-shadow: none;
	transition: all 0.3s ease-in-out;
	transition-delay: 0s;
}
#TopicEditStatus:checked~dl>dd>#DetailsBox>span{
	box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
	transform: translate(0,0);
	transition-delay: 0.2s;
}
#DetailsBox>span>span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2em;
	background-color: rgba(0,0,0,0.8);
	padding-right: 1em;
	text-align: left;
	display: block;
	z-index: 100;
}
#DetailsBox>span>span>ruby{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	color: #ffffff;
	text-align: center;
	font-size: 0.6em;
	line-height: normal;
	padding: 0 0.5em;
	display: inline-block;
	z-index: 10;
	transform: translate(0,-50%);
}
#DetailsBox>span>span>p{
	width: auto;
	height: auto;
	font-size: 0.5em;
	line-height: 4em;
	padding: 0 1em;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	z-index: 100;
}
#DetailsBox>span>span>p:hover{
	color: #4CA6FF;
}
#DetailsBox>span>span>p:before{
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.8em;
	height: 0.8em;
	border: solid 2px transparent;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	display: block;
	transform: translate(0,-50%) rotate(45deg);
}
#DetailsBox>span>span>p:hover:before{
	border-top: solid 2px #4CA6FF;
	border-right: solid 2px #4CA6FF;
}
#DetailsBox>span>ul{
	width: 100%;
	height: 100%;
	padding: 0 0.5em;
	overflow-x: hidden;
	overflow-y: auto;
	display: block;
	z-index: 50;
}
#DetailsBox>span>ul>li{
	width: 100%;
	height: auto;
	padding: 0.5em 0;
	display: block;
}
#DetailsBox>span>ul>li ruby{
	width: 100%;
	height: auto;
	color: rgba(255,255,255,0.8);
	font-size: 0.5em;
	line-height: 2;
	text-align: left;
	display: block;
}
#DetailsBox>span>ul>li span{
	width: 100%;
	height: auto;
	white-space: nowrap;
	text-align: left;
	padding: 0.2em 0;
	display: block;
}
#DetailsBox>span>ul>li span>input[type="text"]{
	width: 100%;
	height: 2em;
	padding: 0 0.3em;
	font-size: 0.6em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	margin: 0.25em 0;
	display: inline-block;
	z-index: 100;
}
#DetailsBox>span>ul>li span>label{
	width: auto;
	height: auto;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 0.5em;
	padding-top: 2em;
	margin: 0 0.5em;
	color: rgba(255,255,255,0.4);
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
}
#DetailsBox>span>ul>li span>label:before{
	position: absolute;
	top: 0.5em;
	left: 50%;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #000000;
	box-shadow: 0 0 0 2px #000000;
	display: block;
	z-index: 50;
	transform: translate(-50%,0);
}
#DetailsBox>span>ul>li span>label:after{
	position: absolute;
	top: 0.5em;
	left: 50%;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: rgba(0,128,255,0);
	box-shadow: 0 0 0 2px #000000;
	display: block;
	z-index: 100;
	transform: translate(-50%,0);
	transition: all 0.1s ease-in-out;
}
#DetailsBox>span>ul>li span>input:checked+label{
	color: #ffffff;
}
#DetailsBox>span>ul>li span>input:checked+label:after{
	background-color: rgba(0,128,255,1);
}
#DetailsBox>span>ul>li span>label>figure{
	width: 2em;
	height: 2em;
	cursor: pointer;
	box-shadow: 0 0 0 1px #ffffff;
	border-radius: 50%;
	display: inline-block;
}
#DetailsBox>span>ul>li span>select{
	width: 100%;
	height: auto;
	padding: 0 0.3em;
	font-size: 0.6em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	margin: 0.25em 0;
	cursor: pointer;
	display: inline-block;
	z-index: 100;
}
#DetailsBox>span>ul>li span>div{
	width: 100%;
	height: auto;
	display: block;
}
#DetailsBox>span>ul>li span>div>p{
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 0.5em;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	cursor: pointer;
	display: block;
}
#DetailsBox>span>ul>li span>div>img{
	width: 100%;
	max-width: 8em;
	height: auto;
	margin: 0.5em auto;
	display: block;
}
#DetailsBox>span>ul>li span>div>img[src=""]{
	display: none;
}
#DetailsBox>span>ul>li span>p{
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 0.5em;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	cursor: pointer;
	display: block;
}
#DetailsBox>span>ul>li span>ol{
	width: 100%;
	height: auto;
	display: block;
}
#DetailsBox>span>ul>li span>ol>li{
	width: 100%;
	height: 0;
	overflow: hidden;
	display: block;
}
#DetailsBox>span>ul>li span>ol>li>ruby{
	padding-top: 1em;
}
#DetailsBox>span>ul>li span>ol>li>span>div>p{
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 2;
	padding: 0 0.5em;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	cursor: pointer;
	display: block;
	z-index: 100;
}
#DetailsBox>span>ul>li span>ol>li>span>div>object{
	width: 100%;
	height: 10em;
	box-shadow: 0 0 0 1px #000000;
	display: block;
	z-index: 5;
}
#DetailsBox>span>ul>li span>ol>li>span>div>object[data=""]{
	height: 0;
	box-shadow: none;
}
#DetailsBox>span>ul>li #LinkTypeUrl:checked~ol>li:first-of-type,#DetailsBox>span>ul>li #LinkTypePDF:checked~ol>li:last-of-type{
	height: auto;
}
#DetailsBox>span>ul>li span>dl{
	width: 100%;
	height: auto;
	padding: 0.5em 0;
	display: block;
}
#DetailsBox>span>ul>li span>dl>dt{
	width: 100%;
	height: auto;
	padding-left: 1.5em;
	display: block;
}
#DetailsBox>span>ul>li span>dl>dt>figure{
	position: absolute;
	top: 50%;
	left: 0;
	width: 1em;
	height: 1em;
	box-shadow: 0 0 0 1px #ffffff;
	border-radius: 50%;
	display: block;
	transform: translate(0,-50%);
}
#DetailsBox>span>ul>li span>dl>dt>input[type="text"]{
	width: 100%;
	height: auto;
	padding: 0 0.3em;
	font-size: 0.6em;
	line-height: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	margin: 0.25em 0;
	display: block;
	z-index: 100;
}
#DetailsBox>span>ul>li span>dl>dd{
	width: 100%;
	height: auto;
	padding: 0 0.5em;
	padding-bottom: 1em;
	overflow: hidden;
	display: block;
}
#DetailsBox>span>ul>li span>dl>dd>span{
	width: 100%;
	height: 2em;
	display: block;
	z-index: 10;
}
#DetailsBox>span>ul>li span>dl>dd>span *{
	cursor: pointer;
}
#DetailsBox>span>ul>li span>dl>dd>span>figure{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 0.4em;
	display: block;
	z-index: 10;
	transform: translate(0,-50%);
}
#DetailsBox>span>ul>li span>dl>dd>span>figure:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #ff0000 0%,#ff9900 10%,#ccff00 20%,#33ff00 30%,#00ff66 40%,#00ffff 50%,#0066ff 60%,#3300ff 70%,#cc00ff 80%,#ff0099 90%,#ff0000 100%);
	border-radius: 0.2em;
	display: block;
	z-index: 10;
}
#DetailsBox>span>ul>li span>dl>dd>span>figure:after{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 300%;
	background-color: rgba(0,0,0,0);
	display: block;
	z-index: 100;
	transform: translate(-50%,-50%);
}
#DetailsBox>span>ul>li span>dl>dd>span>figure>div{
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	box-shadow: 0 0 0 1px #ffffff,0 0 0 2px #000000,0 0 0.2em rgba(0,0,0,0.5);
	border-radius: 50%;
	cursor: pointer;
	display: block;
	z-index: 50;
	transform: translate(-50%,-50%);
}
#DetailsBox>span>ul>li span>dl>dd>div{
	width: 100%;
	height: 0;
	padding-top: 100%;
	display: block;
	z-index: 5;
}
#DetailsBox>span>ul>li span>dl>dd>div:before{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 150%;
	display: block;
	cursor: pointer;
	z-index: 1000;
	transform: translate(-50%,-50%);
}
#DetailsBox>span>ul>li span>dl>dd>div>ruby{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(127,127,127,1) 0%,rgba(127,127,127,0) 100%);
	display: block;
	z-index: 50;
}
#DetailsBox>span>ul>li span>dl>dd>div>ruby:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
	display: block;
	z-index: 50;
}
#DetailsBox>span>ul>li span>dl>dd>div>ruby:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
	display: block;
	z-index: 50;
}
#DetailsBox>span>ul>li span>dl>dd>div>figure{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
}
#DetailsBox>span>ul>li span>dl>dd>div>div{
	position: absolute;
	top: 0;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	box-shadow: 0 0 0 1px #ffffff,0 0 0 2px #000000,0 0 0.2em rgba(0,0,0,0.5);
	border-radius: 50%;
	cursor: pointer;
	display: block;
	z-index: 100;
	transform: translate(-50%,-50%);
}
#DetailsBox>span>ul>li span>span{
	width: 100%;
	height: 2em;
	padding-right: 5em;
	font-size: 0.6em;
	display: block;
}
#DetailsBox>span>ul>li span>span>input[type="text"]{
	position: absolute;
	top: 50%;
	right: 2em;
	width: 3em;
	height: 2em;
	font-size: 1em;
	line-height: 2;
	text-align: center;
	margin: 0;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	background-color: #ffffff;
	display: block;
	z-index: 100;
	transform: translate(0,-50%);
}
#DetailsBox>span>ul>li span>span>ruby{
	position: absolute;
	top: 50%;
	right: 0;
	width: 2em;
	height: 2em;
	font-size: 1em;
	line-height: 2;
	text-align: center;
	display: inline-block;
	z-index: 100;
	transform: translate(0,-50%);
}
#DetailsBox>span>ul>li span>span>dl{
	width: 100%;
	height: 0.6em;
	padding: 0;
	margin-top: 0.6em;
	border-left: solid 1em transparent;
	border-right: solid 1em transparent;
	display: block;
}
#DetailsBox>span>ul>li span>span>dl>dt{
	width: 100%;
	height: 100%;
	border-radius: 0.3em;
	box-shadow: 0 0 0 1px #ffffff;
	overflow: hidden;
	display: block;
	z-index: 5;
}
#DetailsBox>span>ul>li span>span>dl>dt>figure{
	position: absolute;
	top: 50%;
	left: 0;
	width: 200%;
	height: 100%;
	border-radius: inherit;
	text-align: left;
	display: block;
	transform: translate(0,-50%);
}
#DetailsBox>span>ul>li span>span>dl>dt>figure:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: rgba(0,128,255,1);
	display: block;
}
#DetailsBox>span>ul>li span>span>dl>dt>figure:after{
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background-color: #ffffff;
	display: block;
}
#DetailsBox>span>ul>li span>span>dl>dd{
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.2em;
	height: 1.2em;
	background-color: rgba(0,128,255,1);
	box-shadow: 0 0 0 0.1em #ffffff;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	z-index: 100;
	transform: translate(-50%,-50%);
}
#DetailsBox>span>div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	display: block;
	z-index: 80;
}
#DetailsBox>span>div>dl{
	position: absolute;
	top: 5em;
	left: 0;
	width: 100%;
	height: auto;
	padding: 1em;
	display: block;
}
#DetailsBox>span>div>dl>dt{
	width: 100%;
	height: auto;
	padding: 0.6em;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0.3em 0.3em 0 0;
	display: block;
}
#DetailsBox>span>div>dl>dt>p{
	width: 100%;
	height: auto;
	font-size: 0.6em;
	line-height: 1.4;
	color: #333333;
	display: block;
}
#DetailsBox>span>div>dl>dd{
	width: 100%;
	height: auto;
	padding: 1px 0;
	display: block;
}
#DetailsBox>span>div>dl>dd>span{
	width: 50%;
	height: auto;
	text-align: center;
	cursor: pointer;
	display: inline-block;
}
#DetailsBox>span>div>dl>dd>span:last-of-type{
	border-left: solid 1px transparent;
}
#DetailsBox>span>div>dl>dd>span:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	display: block;
	z-index: 5;
}
#DetailsBox>span>div>dl>dd>span:first-of-type:before{
	border-radius: 0 0 0 0.3em;
}
#DetailsBox>span>div>dl>dd>span:last-of-type:before{
	border-radius: 0 0 0.3em 0;
}
#DetailsBox>span>div>dl>dd>span:first-of-type:hover:before{
	background-color: #999999;
}
#DetailsBox>span>div>dl>dd>span:last-of-type:hover:before{
	background-color: #0080FF;
}
#DetailsBox>span>div>dl>dd>span>p{
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 0.6em;
	line-height: 3;
	color: #333333;
	display: block;
	cursor: pointer;
	z-index: 100;
}
#DetailsBox>span>div>dl>dd>span:hover>p{
	color: #ffffff;
}
#TopicBox{
	width: 50%;
	height: auto;
	padding: 1em 2.5em 5em;
	padding-right: 5em;
	margin: auto;
	display: block;
	z-index: 50;
}
#TopicBox>span{
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
	background-color: #ffffff;
}
#TopicBox>span:before{
	position: absolute;
	content: attr(title);
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	color: #ffffff;
	font-size: 0.5em;
	text-align: center;
	line-height: 2;
	background-color: #333333;
	border-radius: 50%;
	padding: 0 0.5em;
	display: none;
	z-index: 100;
	transform: translate(-50%,-50%);
}
#TopicBox>span:hover:before{
	display: block;
}
#TopicBox>span textarea{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	word-wrap: break-word;
	word-break: break-all;
	background-color: rgba(0,0,0,0);
	display: block;
	z-index: 100;
}
#TopicBox>span textarea:focus{
	background-color: #ffffff;
	box-shadow: 0 0 0.1em #0080FF;
}
#TopicBox>span p{
	word-wrap: break-word;
	word-break: break-all;
	z-index: 5;
}
#TopicBox>span label{
	position: absolute;
	width: 2em;
	height: 2em;
	cursor: pointer;
	display: block;
	z-index: 100;
}
#TopicBox>span label:nth-of-type(1){
	top: 0;
	right: 0;
	width: 3em;
	height: 100%;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px #0080FF;
	transform: translate(100%,0);
}
#TopicBox>span label:nth-of-type(1):before{
	position: absolute;
	content: '詳細表示';
	top: 50%;
	right: 0;
	width: 100%;
	height: auto;
	color: #0080FF;
	font-size: 0.5em;
	line-height: 2;
	text-align: center;
	display: block;
	z-index: 100;
	transform: translate(0,-50%);
}
#TopicBox>span label:nth-of-type(1):hover:before{
	color: #ffffff;
}
#TopicBox>span label:nth-of-type(1):after{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #fafafa;
	display: block;
	z-index: 10;
}
#TopicBox>span label:nth-of-type(1):hover:after{
	background-color: #0080FF;
}
#TopicBox>span label:nth-of-type(2){
	top: 50%;
	left: -0.5em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #FF0055;
	transform: translate(-100%,-50%);
}
#TopicBox>span label:nth-of-type(2):before{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 0.1em;
	background-color: #ffffff;
	display: block;
	transform: translate(-50%,-50%);
	transition: all 0.1s ease-in-out;
}
#TopicBox>span input[type="checkbox"]:checked~label:nth-of-type(2):before{
	transform: translate(-50%,-50%) rotate(90deg);
}
#TopicBox>span label:nth-of-type(3){
	top: 0;
	left: 0;
	width: 2em;
	height: 100%;
	background-color: #FF0055;
	transform: scale(0,1);
	transition: all 0.1s ease-in-out;
	transform-origin: left top;
}
#TopicBox>span label:nth-of-type(3):before{
	position: absolute;
	content: '削除';
	top: 50%;
	right: 0;
	width: 100%;
	height: auto;
	color: #ffffff;
	font-size: 0.5em;
	line-height: 2;
	text-align: center;
	display: block;
	z-index: 100;
	transform: translate(0,-50%);
}
#TopicBox>span input[type="checkbox"]:checked~label:nth-of-type(3){
	transform: scale(1,1);
}
#TopicBox>span label:nth-of-type(4){
	top: 0;
	right: -5em;
	width: 2em;
	height: 100%;
	display: none;
	z-index: 10;
}
#TopicBox>span label:nth-of-type(4):before{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: solid 0.3em transparent;
	border-right: solid 0.3em transparent;
	border-bottom: solid 0.4em #ffffff;
	display: block;
	z-index: 10;
	transform: translate(-50%,-60%);
}
#TopicBox>span label:nth-of-type(4):after{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background-color: #333333;
	display: block;
	z-index: 5;
	transform: translate(-50%,-50%);
}
#TopicBox>span:hover label:nth-of-type(4){
	display: block;
}
#TopicBox>span:first-of-type label:nth-of-type(4){
	display: none;
}
#TopicBox>span ul{
	width: 100%;
	height: auto;
	text-align: center;
	display: inline-block;
}
#TopicBox>span li{
	width: auto;
	height: auto;
	padding: 0.2em;
	vertical-align: top;
	display: inline-block;
}
#TopicBox>span li[data-num="1"]{
	width: 100%;
}
#TopicBox>span li[data-num="2"]{
	width: 50%;
}
#TopicBox>span li[data-num="3"]{
	width: 33.3%;
}
#TopicBox>span li[data-num="4"]{
	width: 25%;
}
#TopicBox>span li[data-num="5"]{
	width: 20%;
}
#TopicBox>span figure{
	white-space: normal;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
#TopicBox>span figure>img{
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
	min-height: 2em;
	display: block;
}
#TopicBox>span figure>img[src=""]{
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0);
	display: none;
}
@keyframes tcdel{
	0%{
		width: 100%;
		overflow: hidden;
	}
	100%{
		width: 0%;
		overflow: hidden;
	}
}
.filembox{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	z-index: 500;
}
.filembox>form{
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	z-index: 500;
}
.filembox>form>dl{
	width: 100%;
	height: 100%;
	padding-top: 2em;
	background-color: #333333;
	display: block;
	z-index: 100;
	transform: translate(0,100%);
	transition: all 0.3s ease-in-out;
}
.filembox>form>input[value="On"]+dl{
	transform: translate(0,0);
}
.filembox>form>dl>dt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2em;
	background-color: #222222;
	display: block;
	z-index: 10;
}
.filembox>form>dl>dt>span{
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: auto;
	height: auto;
	font-size: 0.7em;
	line-height: 2;
	padding: 0 0.5em;
	color: #ffffff;
	background-color: #999999;
	cursor: pointer;
	display: inline-block;
	z-index: 10;
	transform: translate(0,-50%);
}
.filembox>form>dl>dt>label{
	position: absolute;
	top: 50%;
	right: 0.5em;
	width: auto;
	height: auto;
	font-size: 0.7em;
	line-height: 2;
	padding: 0 0.5em;
	color: #ffffff;
	background-color: #007FFE;
	cursor: pointer;
	display: inline-block;
	z-index: 100;
	transform: translate(0,-50%);
}
.filembox>form>dl>dt>span:hover{
	background-color: #666666;
}
.filembox>form>dl>dd{
	width: 100%;
	height: 100%;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 50;
}
.filembox>form>dl>dd>ul{
	width: 100%;
	height: auto;
	padding: 1em;
	text-align: left;
	display: block;
}
.filembox>form>dl>dd>ul>li{
	width: 10%;
	height: 0;
	padding-top: 10%;
	display: inline-block;
}
.filembox>form>dl>dd>ul>li>span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 0.3em transparent;
	display: block;
}
.filembox>form>dl>dd>ul>li>span *{
	cursor: pointer;
}
.filembox>form>dl>dd>ul>li>span:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	box-shadow: 0 0 0 1px #000000;
	display: block;
	z-index: 5;
}
.filembox>form>dl>dd>ul>li>input[type="radio"]:checked~span:before{
	box-shadow: 0 0 0 2px #ffffff,0 0 0.5em #ffffff;
}
.filembox>form>dl>dd>ul>li>span>figure{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	z-index: 10;
}
.filembox>form>dl>dd>ul>li>span>object{
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
}
.filembox>form>dl>dd>ul>li>span>span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 25;
}
.filembox>form>dl>dd>ul>li>span>label{
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;
	color: #ffffff;
	font-size: 0.6em;
	line-height: 3;
	text-align: center;
	display: block;
	z-index: 150;
	transform: scale(1,0);
	transition: all 0.2s ease-in-out;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(1){
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	transform-origin: bottom;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(1):before{
	content: 'ファイル選択';
	width: 100%;
	height: auto;
	display: block;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(2){
	top: 0;
	background-color: rgba(255,0,85,0.8);
	transform-origin: top;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(2):before{
	content: 'ファイル削除';
	width: 100%;
	height: auto;
	display: block;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(3){
	bottom: 0;
	background-color: rgba(255,0,85,0.8);
	transform-origin: bottom;
}
.filembox>form>dl>dd>ul>li>span>label:nth-of-type(3):before{
	content: '削除する';
	width: 100%;
	height: auto;
	display: block;
}
.filembox>form>dl>dd>ul>li>input[type="radio"]:checked~span>label:nth-of-type(1),.filembox>form>dl>dd>ul>li>input[type="radio"]:checked~span>label:nth-of-type(2){
	transform: scale(1,1);
}
.filembox>form>dl>dd>ul>li>input[type="checkbox"]:checked+input[type="radio"]:checked~span>label:nth-of-type(1){
	transform: scale(1,0);
}
.filembox>form>dl>dd>ul>li>input[type="checkbox"]:checked+input[type="radio"]:checked~span>label:nth-of-type(2){
	background-color: rgba(0,0,0,0.8);
}
.filembox>form>dl>dd>ul>li>input[type="checkbox"]:checked+input[type="radio"]:checked~span>label:nth-of-type(2):before{
	content: 'キャンセル';
}
.filembox>form>dl>dd>ul>li>input[type="checkbox"]:checked+input[type="radio"]:checked~span>label:nth-of-type(3){
	transform: scale(1,1);
}
@media only screen and (max-width:4096px){
	body{ font-size: 32px; }
	#TopicBox{ width: 50%; }
}
@media only screen and (max-width:3840px){
	body{ font-size: 30px; }
	#TopicBox{ width: 50%; }
}
@media only screen and (max-width:3200px){
	body{ font-size: 28px; }
	.filembox>form>dl>dd>ul>li{
		width: 12.5%;
		padding-top: 12.5%;
	}
	#TopicBox{ width: 60%; }
}
@media only screen and (max-width:2880px){
	body{ font-size: 26px; }
	#TopicBox{ width: 60%; }
}
@media only screen and (max-width:2560px){
	body{ font-size: 24px; }
	.filembox>form>dl>dd>ul>li{
		width: 16.6%;
		padding-top: 16.6%;
	}
	#TopicBox{ width: 60%; }
}
@media only screen and (max-width:2048px){
	body{ font-size: 22px; }
	#TopicBox{ width: 70%; }
}
@media only screen and (max-width:1680px){
	body{ font-size: 20px; }
	.filembox>form>dl>dd>ul>li{
		width: 20%;
		padding-top: 20%;
	}
	#TopicBox{ width: 70%; }
}
@media only screen and (max-width:1440px){
	body{ font-size: 20px; }
	#TopicBox{ width: 80%; }
}
@media only screen and (max-width:1280px){
	body{ font-size: 20px; }
	.filembox>form>dl>dd>ul>li{
		width: 25%;
		padding-top: 25%;
	}
	#TopicBox{ width: 80%; }
}
@media only screen and (max-width:1024px){
	body{ font-size: 20px; }
	#TopicBox{ width: 90%; }
}
@media only screen and (max-width:980px){
	body{ font-size: 20px; }
	.filembox>form>dl>dd>ul>li{
		width: 33.33%;
		padding-top: 33.33%;
	}
	#TopicBox{ width: 100%; }
}
@media only screen and (max-width:680px){
	body{ font-size: 20px; }
	#TopicBox{ width: 100%; }
}
@media only screen and (max-width:580px){
	body{ width: 580px; font-size: 20px; overflow: auto; }
	main>dl>dt>nav{width: 580px;}
	.filembox>form>dl>dd>ul>li{
		width: 50%;
		padding-top: 50%;
	}
	#TopicBox{ width: 100%; }
}