@charset "utf-8";
/*
**-- 共通CSS
*/

/*-- 基本設定 -----------------------------------------------*/

*,
*:before,
*:after {
	-webkit-print-color-adjust:exact;
	-webkit-text-size-adjust:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-size:inherit;
}
html, body, div, p, table, iframe, ul, li, img, h1, h2, h3, h4, h5, h6, header, footer {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6 {
	display:block;
	font-size:inherit;
	font-weight:normal;
	font-style:normal;
}
body {
	font-size:14px;
	text-align:left;
	vertical-align:top;
	background:#ffffff;
	font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-weight:lighter;
}
a, a:hover, a:visited {
	color:#a0a0a0;
	text-decoration:none;
}
input, textarea, select, button {
	font-size:inherit;
	font-family:inherit;
	-webkit-appearance:none;
	margin:0;
	line-height:1.3;
	border-width:1px;
	border-style:solid;
	border-radius:2px;
	padding:6px;
	vertical-align:bottom;
}
input[type='text'],
input[type='email'],
input[type='zip'],
input[type='tel'],
input[type='password'],
textarea, select, button {
	width:100%;
}
input[type='tel'] {
	text-align:right;
}
input[type='color'] {
	padding:1px;
	border:0;
	width:100%;
}
button,
input[type='submit'],
input[type='button'] {
	min-width:2em;
	padding:6px 10px;
}
button:not(:disabled),
input[type='submit']:not(:disabled),
input[type='button']:not(:disabled) {
	cursor:pointer;
}
input::placeholder {
	color:rgba(0,0,0,.3);
	font-weight:bolder;
}
select + .selecttri {
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	pointer-events:none;
	width:0;
	border:none;
}
select {
	padding:6px 2px;
}
select + .selecttri:before {
	position:absolute;
	bottom:0;
	right:0;
	content:'▼';
	line-height:1.3;
	display:block;
	padding:7px 3px;
}
textarea {
	resize:none;
}
@media screen and (min-width:540px) {
	input, textarea, select, button {
		padding:2px;
	}
	button,
	input[type='submit'],
	input[type='button'] {
		padding:2px 5px;
	}
	select {
		padding:2px 4px;
	}
	select + .selecttri:before {
		padding:3px 5px;
	}
}
*[a-left] {
	text-align:left;
}
*[a-right] {
	text-align:right;
}

.InputSet > input:not(:first-child), .InputSet > textarea:not(:first-child), .InputSet > select:not(:first-child), .InputSet > button:not(:first-child) {
	margin-left:1px;
}

.FormError {
	position:relative;
	display:block;
}
.FormError .inner {
	position:absolute;
	display:block;
	border-radius:5px;
	padding:5px 10px;
	font-weight:bold;
	font-size:12px;
	bottom:-3px;
	right:-2px;
	box-shadow:0 0 20px #ffffff;
	max-width:60%;
}
.FormError .into {
	position:absolute;
	width:0;
	height:150px;
	bottom:0;
}

.ShadowBack {
	position:fixed;
	top:50%;
	left:50%;
	right:50%;
	bottom:50%;
	z-index:15;
}
.ShadowBack > div {
	position:absolute;
	top:-50vh;
	left:-50vw;
	right:-50vw;
	bottom:-50vh;
	width:0px;
	height:0px;
	margin:auto;
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}
.ShadowBack > div > div {
	position:relative;
	width:100%;
	height:100%;
}
.ShadowBack > div > div:after {
	content:'';
	display:block;
	position:absolute;
	border-radius:30px;
	top:-30px;
	left:-30px;
	right:-30px;
	bottom:-30px;
}
.PopUp {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
	text-align:center;
	line-height:100vh;
	overflow:auto;
}
.PopUp > div {
	width:240px;
	display:inline-block;
	line-height:1.5;
	vertical-align:middle;
	text-align:left;
	transition-property:all;
	transition-duration:0.1s;
	transition-timing-function:linear;
	border-radius:30px;
	overflow:hidden;
	transform:scale(0);
	opacity:0;
}
.PopUp > div > div {
	position:relative;
	width:100%;
	height:100%;
}
.PopUp > div > div > div {
	padding:30px 30px 15px;
}
.PopUp > div > div > div:last-child {
	padding:15px 30px;
	cursor:pointer;
}
@media screen and (min-width:540px) {
	.PopUp > div {
		width:480px;
	}
}

.Switch {
	display:inline-block;
	width:70px;
	height:30px;
	border-radius:16px;
	overflow:hidden;
	padding:0 28px 0 0;
	white-space:nowrap;
	vertical-align:bottom;
	cursor:pointer;
}
.Switch[readonly] {
	pointer-events:none;
}
.Switch input { display:none; }
.Switch div {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-right:1px;
	transition-property:margin;
	transition-duration:0.1s;
	transition-timing-function:ease-in;
}
.Switch div:after {
	content:'';
	position:absolute;
	display:block;
	width:26px;
	height:26px;
	border-radius:13px;
	margin:2px;
}
.Switch input:checked + div {
	margin-left:40px;
}
.Switch div > * {
	position:absolute;
	box-sizing:border-box;
	display:block;
	vertical-align:top;
	text-align:center;
	width:72px;
	height:30px;
	padding:0;
	font-size:11px;
	line-height:30px;
	font-style:normal;
	font-weight:normal;
}
.Switch div > *:nth-child(1) {
	right:-31px;
	padding-right:20px;
}
.Switch div > b:empty:after {
	content:'火';
}
.Switch div > *:nth-child(2) {
	left:0;
	padding-left:20px;
}
.Switch input:checked + div > *:nth-child(2) {
	left:31px;
}
.Switch div > i:empty:after {
	content:'安';
}
@media screen and (min-width:540px) {
	.Switch {
		width:50px;
		height:22px;
		border-radius:16px;
		padding:0 20px 0 0;
	}
	.Switch div:after {
		width:18px;
		height:18px;
		border-radius:10px;
		margin:2px;
	}
	.Switch input:checked + div {
		margin-left:28px;
	}
	.Switch div > * {
		width:52px;
		height:22px;
		padding:0;
		font-size:9px;
		line-height:22px;
	}
	.Switch div > *:nth-child(1) {
		right:-23px;
		padding-right:16px;
	}
	.Switch div > *:nth-child(2) {
		left:0;
		padding-left:16px;
	}
	.Switch input:checked + div > *:nth-child(2) {
		left:31px;
	}
}

.CircleList {
	overflow:hidden;
	line-height:1.5;
}
.CircleList input {
	display:none;
}
.CircleList label {
	display:inline-block;
	text-align:center;
	line-height:26px;
	border-radius:20px;
	border:1px solid rgba(0,0,0,.15);
	margin:0 1px 1px 0;
	padding:1px;
}
.CircleList label:hover div:before {
	border-color:rgba(0,0,0,.15);
}
.CircleList label div {
	display:inline-block;
	line-height:26px;
	padding:0 10px 0 0;
	cursor:pointer;
}
.CircleList label div:before {
	content:'';
	display:inline-block;
	width:26px;
	height:26px;
	line-height:0px;
	vertical-align:bottom;
	border-radius:20px;
	margin-right:5px;
	border:1.5px solid rgba(0,0,0,0);
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}

.CircleRadio {
	overflow:hidden;
	line-height:1.5;
}
.CircleRadio input {
	display:none;
}
.CircleRadio label {
	display:inline-block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	border-radius:20px;
	margin-left:20px;
	cursor:pointer;
	border:1.5px solid rgba(0,0,0,0);
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}
.CircleRadio label:hover {
	border-color:rgba(0,0,0,.15);
}
.CircleRadio div {
	height:0;
	#white-space:nowrap;
	line-height:1.5;
}
.CircleRadio b {
	position:relative;
	height:30px;
	vertical-align:top;
}
.CircleRadio b:after {
	position:absolute;
	content:'';
	display:inline-block;
	width:30px;
	height:30px;
	border:2px solid rgba(10,10,10,.0);
	border-radius:20px;
	right:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:ease-in;
}
.CircleRadio span {
	display:inline-block;
	width:0;
	height:30px;
	transition-property:all;
	transition-duration:0.2s;
	transition-timing-function:ease-out;
	#border:1px solid #000000;
	vertical-align:top;
}
.CircleRadio input:checked ~ span { width:50px; }
.CircleRadio input:checked ~ b:after { border:2px solid rgba(10,10,10,.7); }
@media screen and (min-width:540px) {
	.CircleRadio label {
		width:25px;
		height:25px;
		line-height:25px;
		margin-left:25px;
	}
	.CircleRadio span,
	.CircleRadio b {
		height:25px;
	}
	.CircleRadio b:after {
		width:25px;
		height:25px;
	}
}

.SmallList > span {
	display:block;
	text-align:right;
}
.SmallList > .list > div > input {
	display:none;
}
.SmallList > .list {
	display:table;
	width:100%;
}
.SmallList > .list > div {
	display:table-row;
}
.SmallList > .list > div > * {
	display:table-cell;
	padding:1px 1px 3px;
}
.SmallList > .list > div:nth-child(even) {
	background-color:rgba(0,0,0,.1);
}
.SmallList > .list > div > label {
	position:relative;
	width:0.5%;
	min-width:26px;
	line-height:26px;
	text-align:center;
	vertical-align:top;
	cursor:pointer;
	margin-right:4px;
}
.SmallList > .list > div > label:first-of-type:before {
	position:absolute;
	content:'';
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;
	border:2px solid rgba(0,0,0,.05);
	border-radius:50%;
	width:26px;
	height:26px;
	margin:0;
	transition-property:border;
	transition-duration:0.1s;
	transition-timing-function:ease-in;
}
.SmallList > .list > div > label:hover:before {
	border:2px solid rgba(0,0,0,.1);
}
.SmallList > .list > div > input:checked + label:before {
	border:3px solid rgba(0,0,0,.5);
}
.SmallList > span input + input {
	margin-left:1px;
}
@media screen and (min-width:540px) {
	.SmallList > .list > div > label:before {
		width:23px;
		height:23px;
	}
}


.CoverFlow .stg {
	position:relative;
	border-radius:10px;
	overflow:hidden;
	perspective:500px;
}
.CoverFlow .stg:before {
	content:'';
	display:block;
	padding-top:75%;
}
.CoverFlow .blnk {
	position:absolute;
	top:50%;
	left:50%;
}
.CoverFlow .blnk > div {
	position:relative;
}
.CoverFlow .blnk > div > div {
	position:absolute;
	display:inline-block;
	width:200px;
	height:120px;
	left:-100px;
	top:-60px;
}
.CoverFlow .btn {
	display:inline-block;
	padding:10px;
}
.CoverFlow .btn input {
	display:none;
}
.CoverFlow .btn span {
	cursor:pointer;
}
.CoverFlow .btn input:checked + span {
	font-weight:bold;
}
.CoverFlow .stg > nav {
	position:absolute;
	overflow:auto;
	#-webkit-overflow-scrolling:touch;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.CoverFlow .stg > nav > nav {
	width:calc(100% + 500px);
	height:100%;
}
.CoverFlow .stg .imgp {
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	transition-property:all;
	transition-duration:.1s;
	transition-timing-function:linear;
}
.CoverFlow .stg span {
	position:relative;
	display:block;
}
.CoverFlow .stg .imgs {
	position:absolute;
	background-position:center center;
	background-size:contain;
	background-size:cover;
	background-repeat:no-repeat;
	display:block;
	width:200px;
	height:200px;
	left:-100px;
	top:-100px;
	#border:1px solid rgba(0,0,0,.5);
	cursor:pointer;
}
.CoverFlow .stg .imgs:last-of-type {
	transform:rotateX(180deg);
	border:none;
}
.CoverFlow .stg .htm {
	display:block;
	width:100%;
	height:100%;
}
.CoverFlow .stg .imgttl {
	position:absolute;
	bottom:20%;
	left:50%;
	transition-property:all;
	transition-duration:.2s;
	transition-timing-function:linear;
}
.CoverFlow .stg .imgttl > span {
	position:relative;
}
.CoverFlow .stg .imgttl > span > span {
	position:absolute;
	padding:3px 10px;
	background:#000000;
	border:2px solid transparent;
	border-radius:20px;
	color:#ffffff;
	left:-80px;
	right:-80px;
	bottom:0;
	display:inline-block;
	cursor:pointer;
	box-shadow:0 10px 10px rgba(0,0,0,.5);
}
.CoverFlow .stg .imgttl > span > span:hover {
	border-color:#ffffff;
}
.CoverFlow .stg h2 {
	position:absolute;
	display:block;
	top:-10px;
	left:10px;
}
@media screen and (min-width: 540px) {
	.CoverFlow .stg:before {
		padding-top:50%;
	}
}
@media screen and (min-width: 720px) {
	.CoverFlow .stg:before {
		padding-top:33%;
	}
}
.Popup {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding:50px;
	background-color:rgba(0,0,0,.5);
	z-index:9;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:linear;
	opacity:0;
}
.Popup div {
	width:100%;
	height:100%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:linear;
}
.Popup[act] {
	opacity:1;
	padding:10px;
}

.Qelect {
	vertical-align:bottom;
}
.Qelect > span,
.Qelect > .list {
	position:relative;
	display:block;
}
.Qelect > span > input[type='button'] {
	position:absolute;
	top:0;
	right:0;
}
.Qelect sub {
	font-size:80%;
	vertical-align:baseline;
	color:#6070b0;
}
.Qelect > .list > * {
	position:absolute;
	left:0;
	right:0;
	max-width:100%;
	min-width:200px;
	margin-bottom:20px;
	box-shadow:0 3px 6px 3px rgba(0,0,0,.5);
	overflow-y:auto;
	z-index:11;
}
.Qelect > .list[bottom] > * {
	margin-bottom:0;
	bottom:34px;
	box-shadow:0 0 6px 3px rgba(0,0,0,.5);
}
.Qelect > .list > * > * {
	display:block;
}
.Qelect > .list > * > div {
	padding:10px 5px;
	cursor:pointer;
}
.Qelect > .list > * > span {
	padding:1px;
	position:sticky;
	position:-webkit-sticky;
	top:0;
	box-shadow:0 3px 6px rgba(0,0,0,.3);
	text-align:right;
}
/*
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none)
pointer-events:none;
transition-property:all;
transition-duration:0.25s;
transition-timing-function:ease-in-out;
list-style-type:none;
opacity:.5;
-webkit-box-reflect:below 0 -webkit-linear-gradient(top, transparent, rgba(0,0,0,.3));
*/
.Breadcrumb {
	position:absolute;
	top:calc(50vw - 20px);
	left:0;
	right:0;
	line-height:1.2;
	z-index:3;
}
.Breadcrumb > * {
	position:relative;
	display:table;
	margin:0 auto;
}
.Breadcrumb > * > * {
	display:table-cell;
	text-align:center;
}
.Breadcrumb > * > *:not(:last-child):after {
	content:'/';
	display:inline-block;
	padding:0 5px 0 5px;
}
.Breadcrumb > * > h1 {
	display:table-caption;
	font-size:20px;
}
.Breadcrumb > * > * > * {
	display:inline-block;
	padding:0 0 0 5px;
}
@media screen and (min-width:540px) {
	.Breadcrumb {
		top:calc(25vw - 20px);
	}
	.Qelect > .list[bottom] > * {
		bottom:26px;
	}
}

.Head {
	position:sticky;
	position:-webkit-sticky;
	z-index:5;
}

.FormHead {
	border-width:1px;
	border-style:solid;
	box-shadow:0 3px 7px rgba(0,0,0,.5);
}
.FormHead:after {
	content:'';
	display:block;
	clear:both;
}
.FormHead > .pager,
.FormHead .control {
	display:inline-block;
	padding:4px;
}
.FormHead .control {
	float:right;
	vertical-align:top;
	white-space:nowrap;
}
.list .pager input,
.FormHead .pager input {
	padding:6px 0.25em;
}
.list .pager input:not(:first-child):not(:last-child),
.FormHead .pager input:not(:first-child):not(:last-child) {
	padding:6px 0.5em;
}
.list .pager input + input,
.FormHead .pager input + input {
	margin-left:1px;
}
.list .pager .nowPage,
.FormHead .nowPage {
	display:inline-block;
	padding:7px 5px;
	min-width:50px;
	text-align:center;
}
.nowPage select,
.list .pager .nowPage select,
.FormHead .nowPage select{
	border:none;
	padding:0;
	background:transparent;
	width:auto;
	text-align:right;
	line-height:1;
	vertical-align:baseline;
}
.nowPage option,
.list .pager .nowPage option,
.FormHead .nowPage option {
	padding:5px 10px;
}
@media screen and (min-width:540px) {
	.FormHead {
		display:table;
		width:100%;
	}
	.FormHead > .pager,
	.FormHead .control {
		width:99%;
		display:table-cell;
	}
	.FormHead .control {
		width:1%;
		float:none;
	}
	.list .pager .nowPage,
	.FormHead .nowPage {
		padding:3px;
	}
	.list .pager input,
	.FormHead .pager input {
		padding:2px 0.25em;
	}
	.list .pager input:not(:first-child):not(:last-child),
	.FormHead .pager input:not(:first-child):not(:last-child) {
		padding:2px 0.5em;
	}
}

.Form {
	border-spacing:0;
}
.Form,
.Form > thead,
.Form > tbody,
.Form > * > tr,
.Form > * > * > * {
	display:block;
}
.Form > * > * > th {
	font-weight:lighter;
	text-align:center;
}
.Form > * > * > td {
}
.Form > * > * > * {
	padding:5px;
}
.Form > * > * > td:not([text]) {
	padding:2px;
	line-height:1;
}
@media screen and (min-width:540px) {
	.Form:not([sm]) {
		display:table;
		width:100%;
	}
	.Form:not([sm]) > thead { display:table-header-group; }
	.Form:not([sm]) > tbody { display:table-row-group; }
	.Form:not([sm]) > * > tr { display:table-row; }
	.Form:not([sm]) > * > * > * { display:table-cell; }
	.Form:not([sm]) > * > * > th {
		width:20%;
	}
	.Form:not([sm]) > * > * > td {
		width:30%;
	}
}

.List {
	position:relative;
	overflow:auto;
	#max-height:calc(100vh - 170px);
}
.List > table {
	width:100%;
	border-spacing:0;
}
.List > * > * > * > * {
	padding:0;
	border:none;
	white-space:nowrap;
	padding:8px 5px;
}
.List > * > * > * > * > div {
	display:inline-block;
	vertical-align:top;
}
.List > * > thead > * > *,
.List > * > * > * > th {
	position:sticky;
	position:-webkit-sticky;
	z-index:2;
	font-weight:normal;
}
.List > * > thead > * > *[DESC]:after {
	content:'▼';
}
.List > * > thead > tr > *[ASC]:after {
	content:'▲';
}
.List > * > thead > tr > th {
	z-index:3;
}
.List > * > thead > tr > *:nth-of-type(n) {
	top:0;
	text-align:center;
}
.List > * > thead > tr > *[onclick] {
	cursor:pointer;
}
.List > * > * > tr > * {
	#left:0;
}
.List > * > tbody > tr > *[onclick]:hover,
.List > * > tbody > tr[onclick] > *:hover {
	cursor:pointer;
}
.List > * > tbody > tr:last-child > th {
	#text-align:left;
	#bottom:0;
}
.List > .tips,
.List > .sum {
	position:sticky;
	position:-webkit-sticky;
	left:0;
	padding:8px 5px;
}
.List > .sum {
	position:sticky;
	position:-webkit-sticky;
	bottom:0;
	white-space:nowrap;
	z-index:3;
}
@media screen and (min-width:540px) {
	.List > * > * > tr > * {
		padding:5px;
	}
}





.FileRect {
	position:relative;
	border-radius:5px;
	background:rgba(0,0,0,.35);
	padding:5px 5px 10px;
	text-align:center;
	min-height:100px;
	max-height:250px;
	border:2px solid #999999;
	overflow:auto;
}
.FileRect::-webkit-scrollbar {
	height:10px;
	width:10px;
	overflow:visible;
}
.FileRect::-webkit-scrollbar-track {
	margin:0;
	background:#999999;
	border-radius:5px;
}
.FileRect::-webkit-scrollbar:horizontal {
	width:100%;
}
.FileRect::-webkit-scrollbar:vertical {
	height:60%;
}
.FileRect::-webkit-scrollbar-thumb {
	position:absolute;
	#background: rgba(0,0,0,0.0);
	border-radius:5px;
	background:rgba(0,0,0,.7);
	border:2px solid #999999;
}
.FileRect::-webkit-scrollbar-thumb:horizontal {
	height:10px;
	bottom:10px;
}
.FileRect::-webkit-scrollbar-thumb:vertical {
	width:10px;
	right:10px;
}
.FileRect::-webkit-scrollbar-thumb:hover {
	#background: rgba(0,0,0,0.55);
}
.FileRect .mode {
	position:sticky;
	position:-webkit-sticky;
	top:0;
	padding:2px;
	float:right;
	z-index:4;
}

.FileRect .mode label {
	display:inline-block;
	border:1px solid transparent;
	margin-right:1px;
	padding:3px 5px;
	background:#aaaaaa;
}
.FileRect input:nth-of-type(1):checked ~ .mode label:nth-of-type(1),
.FileRect input:nth-of-type(2):checked ~ .mode label:nth-of-type(2) {
	border:1px solid #000000;
}
.FileRect .clr {
	clear:both;
}
.FileRect .flur {
	text-align: left;
}
.FileRect input:nth-of-type(1):checked ~ .flur {
	display:block;
}
.FileRect .flur:after {
	content:'';
	display:inline-block;
	vertical-align:top;
	width:85px;
	height:100px;
	min-height:100px;
	border:0 dashed #444444;
	border-radius:10px;
	color:#ffffff;
	transition-property:width,border;
	transition-duration:0.2s;
	transition-delay:0.1s;
	transition-timing-function:ease-in;
}
.FileRect input:nth-of-type(2):checked ~ .flur:after {
	display:block;
	width:auto;
	#min-height:auto;
}
.FileRect:not([dover]) .flur:empty:after {
	content:'アップロードファイルをこちらにドロップするか、ファイル選択を押して選択してください。';
	padding:20px;
	border-width:3px;
	width:auto;
	display:block;
}
.FileRect[dover] .flur:after {
	content:'ドロップしてください。';
	border-width:3px;
}
.FileRect input:nth-of-type(2):checked ~ .flur:after {
	width:auto;
	padding:5px;
	line-height:1.3;
	#height:20px;
}
@media screen and (min-width: 540px) {
	.FileRect input:nth-of-type(2):checked ~ .flur:after {
		padding:20px;
		line-height:30px;
	}
}
.FileRect[dover] input:nth-of-type(2):checked ~ .flur:after {
	#height:20px;
}
.FileRect[dover] input:nth-of-type(2):checked ~ .flur:not(:empty):after {
	height:20px;
}
.FileRect .ctrl {
	position:sticky;
	position:-webkit-sticky;
	bottom:0;
	display:table;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#ffffff;
	float:left;
	margin:10px 10px 0;
}
.FileRect .ctrl[right]{
	float:right;
}
.FileRect .ctrl > * {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#444444;
	cursor:pointer;
	white-space:nowrap;
	padding:0 1em;
}

.FileRect .flex {
	position:relative;
	vertical-align:top;
	width:85px;
}
.FileRect .flex[draggable] {
	-moz-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	user-select:none;
	-khtml-user-drag:element;
	-webkit-user-drag:element;
}
.FileRect .flex * {
	-moz-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	user-select:none;
}
.FileRect input:nth-of-type(1):checked ~ .flur .flex {
	display:inline-block;
	max-width:100px;
}
.FileRect input:nth-of-type(2):checked ~ .flur .flex {
	border-bottom:1px solid #888888;
	width:auto;
}

.FileRect .inst {
	position:absolute;
	display:block;
	width:2px;
	left:-1px;
	top:0;
	bottom:0;
	transition-property:width,left,height,top;
	transition-duration:0.1s;
	transition-timing-function:ease-in;
}
.FileRect .inst[dover] {
	width:10px;
	left:-5px;
	border:3px dashed rgba(0,0,0,.5);
}
.FileRect input:nth-of-type(2):checked ~ .flur .inst {
	width:auto;
	height:2px;
	top:-1px;
	left:0;
	right:0;
	bottom:auto;
}
.FileRect input:nth-of-type(2):checked ~ .flur .inst[dover] {
	height:10px;
	top:-5px;
}
.FileRect input {
	display:none;
}
.FileRect .data {
	display:none;
}
.FileRect .file {
	position:relative;
	margin:5px;
}
.FileRect input:nth-of-type(1):checked ~ .flur .label {
	#overflow:hidden;
	#text-overflow:ellipsis;
	word-break:break-all;
}
.FileRect input:nth-of-type(1):checked ~ .flur .label > span:nth-of-type(1) {
	display:none;
}
.FileRect input:nth-of-type(2):checked ~ .flur .file,
.FileRect input:nth-of-type(2):checked ~ .flur .label {
	display:inline-block;
	vertical-align:middle;
}
.FileRect input:nth-of-type(2):checked ~ .flur .file {
	width:85px;
}
.FileRect input:nth-of-type(2):checked ~ .flur .label {
	margin-left:10px;
	width:calc(100% - 115px);
}
.FileRect input:nth-of-type(2):checked ~ .flur .label > span {
	display:block;
}
.FileRect .file label {
	display:block;
}
.FileRect .file label:before {
	content:'';
	display:block;
	padding-top:100%;
}
.FileRect input:nth-of-type(1):checked ~ .file label {
	margin: 0 auto;
}
.FileRect .file .checcir {
	transition-property:all;
	transition-duration:0.1s;
	transition-timing-function:linear;
	fill:rgba(0,0,0,0);
	stroke:rgba(0,0,0,0);
	stroke-width:3px;
	stroke-dasharray:0% 5%;
}
.FileRect .file input:checked ~ svg .checcir {
	fill:rgba(0,0,0,0.5);
	stroke:rgba(255,255,255,1);
	stroke-dasharray:5% 5%;
}
.FileRect .file svg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}
.FileRect .file .loadcir {
	fill:none;
	stroke:rgba(0,0,0,.5);
	stroke-linecap:round;
	transform:rotate(-90deg);
	stroke-width:0;
}
.FileRect .file .loadcir + .loadcir {
	stroke:rgb(255,255,255);
	stroke-width:0;
}
.FileRect .file .loadcir[init] {
	stroke-width:16px;
}
.FileRect .file .loadcir + .loadcir[init] {
	stroke-width:12px;
}
.FileRect .file .loadcir + .loadcir[init="1"] {
	animation-name:FileRectInit;
	animation-iteration-count:infinite;
	animation-duration:.3s;
	animation-timing-function:linear;
}
.FileRect .file img {
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	left:0;
	right:0;
	max-width:100%;
	max-height:100%;
	pointer-events:none;
	margin:auto;
}
.FileRect .flex .label {
	display:inline-block;
	word-break: break-all;
	padding:1px 5px;
	text-align:left;
	word-break:break-all;
}
.FileRect .label > span {
	display:block;
	line-height:1.2;
}
.FileRect .label > span > span {
	display:inline-block;
	line-height:1;
}


/*  OLD  */

.DateSelect {
	display:inline-table;
	margin:0 1px 1px 0;
	border-width:1px;
	border-style:solid;
	border-spacing:0;
}
.DateSelect > li {
	display:table-cell;
	padding:2px 6px;
}
.DateSelect > li:not(:first-child) {
	border-left-width:1px;
	border-left-style:solid;
	position:relative;
}
.DateSelect input{
	display:none;
}
.DateSelect > li > div:first-child {
	position:fixed;
	top:0px;
	left:0px;
	z-index:999;
}
.DateSelect > li > div:last-child {
	cursor:pointer;
	padding:2px;
}
.DateSelect > li > div:first-child + div {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:99;
}
.DateSelect > li > div:first-child:empty + div {
	display:none;
}
.DateSelect > li > div:first-child:empty + div + div:after {
	content:'▽';
	display:inline;
}
.DateSelect > li > div:first-child:not(:empty) + div + div:after {
	content:'△';
	display:inline;
}
.DateSelect > li > div > table {
	position:absolute;
	width:inherit;
	#bottom:0px;
	left:0px;
	border-radius:5px;
	border-spacing:0;
	overflow:hidden;
	z-index:999;
	border-width:1px;
	border-style:solid;
}
.DateSelect > li > div > table > tr > th,
.DateSelect > li > div > table > tr > td {
	width:30px;
	height:30px;
	padding:2px 6px;
	text-align:center;
	vertical-align:middle;
}
.DateSelect > li > div > table > tr > th {
	white-space:nowrap;
}
.DateSelect > li > div > table > tr:not(:first-child) > th:not(:first-child),
.DateSelect > li > div > table > tr > td:not(:first-child) {
	border-left-width:1px;
	border-left-style:solid;
}
.DateSelect > li > div > table > tr:not(:first-child) > th,
.DateSelect > li > div > table > tr:not(:first-child) > td {
	border-top-width:1px;
	border-top-style:solid;
}
.DateSelect > li > div > table > tr:first-child > th:not(:nth-child(3)),
.DateSelect > li > div > table > tr > td,
.DateSelect > li > div > table > tr:last-child > th:not(:first-child) {
	cursor:pointer;
}
.DateSelect > li > div > table > tr > td.Today {
	font-weight:bold;
}
@media screen and (max-width:550px) {
	.DateSelect > li > div > table > tr > th,
	.DateSelect > li > div > table > tr > td {
		width:30px;
		height:50px;
	}
}


.Rect8 {
	position:relative;
	display:inline-block;
	z-index:20;
}
.Rect8,
.Rect8 > div {
	overflow:hidden;
}
.Rect8:before {
	content:'';
	display:block;
	padding-top:100%;
}
.Rect8 > * {
	top   :-7%;
	left  :-7%;
	right :-7%;
	bottom:-7%;
}
.Rect8 > * > * {
	top   :6.5%;
	left  :6.5%;
	right :6.5%;
	bottom:6.5%;
}
.Rect8 .mf {
	#background-color:rgba(0,0,0,.1);
}
.Rect8 .X,
.Rect8 .mf {
	box-shadow:0 0 15px rgba(255,128,0,.8) inset, 0 0 10px rgba(255,255,255,1) inset;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:linear;
}
.Rect8[die] .X,
.Rect8[die] .mf {
	box-shadow:0 0 25px rgba(255,128,0,0) inset, 0 0 15px rgba(255,255,255,0) inset;
}
.Rect8 * {
	position:absolute;
	transform:rotate(45deg);
}
.Rect8 > *:hover > *:not(.mf) {
	#background-color:rgba(0,0,0,.1);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 326dpi) { 
	.Rect8 .X,
	.Rect8 .mf {
		box-shadow:0 0 30px rgba(255,128,0,.8) inset, 0 0 20px rgba(255,255,255,1) inset;
	}
	.Rect8[die] .X,
	.Rect8[die] .mf {
		box-shadow:0 0 50px rgba(255,128,0,0) inset, 0 0 30px rgba(255,255,255,0) inset;
	}
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 400dpi) { 
	.Rect8 .X,
	.Rect8 .mf {
		box-shadow:0 0 45px rgba(255,128,0,.8) inset, 0 0 30px rgba(255,255,255,1) inset;
	}
	.Rect8[die] .X,
	.Rect8[die] .mf {
		box-shadow:0 0 75px rgba(255,128,0,0) inset, 0 0 45px rgba(255,255,255,0) inset;
	}
}