@charset "utf-8";

/* @group Common */
html { position: relative; min-width: 1020px; min-height: 100%; font-weight: normal; font-size: 62.5%; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-width: 100%; margin: 0 0 3.2em 0; padding: 0; border-top: 10px solid #d71921; background-color: #FFFFFF; color: #434343; font-size: 1.4em; }
hr { display: none; visibility: hidden; clear: both; border: none; border-width: 0; }
a { color: #000; text-decoration: underline; }
.msie * { line-height: 1.3; }
button,
input { outline: none; }
button,
input[type="submit"] { cursor: pointer; }
/* @end */

/* @fontello */
@font-face {
	font-family: 'fontello';
	src: url("fontello.eot");
	src: url('fontello.eot?#iefix') format('embedded-opentype'),
		 url('fontello.svg#fontello') format('svg'),
		 url('fontello.woff') format('woff'),
		 url('fontello.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/* @end */

/* @keyframes */
@-webkit-keyframes anime_table_btnarea {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes anime_table_btnarea {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
/* @end */

/* @group Header */
header[role="banner"] { position: relative; width: 100%; min-height: 3.3em; }
header[role="banner"] h1 { text-align: left; }
header[role="banner"] h1 strong,
header[role="banner"] h1 a { display: block; color: #000; vertical-align: top; }
header[role="banner"] h1 > a { display: inline-block; }
header[role="banner"] h1 strong span,
header[role="banner"] h1 a span { display: inline-block; margin-left: 0.5em; padding-top:0.2em; vertical-align: top; }
header[role="banner"] ul { position: absolute; right: 0; top: 0; margin-top: 0.25em; }
header[role="banner"] ul > li { display: inline-block; text-align: right; }
header[role="banner"] ul > li::before { font-family: 'fontello'; margin-right: 0.35em; color: #d71921; }
header[role="banner"] ul > li:first-child::before { content: '\e802'; }
header[role="banner"] ul > li:last-child::before { content: '\79'; }
/* @end */

/* @group Footer */
footer { position: absolute; left: 0; bottom: 0; display: table; width: 100%; height: 3.2em; background-color: #e5e5e5; color: #000; }
footer > * { width: 1000px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
footer p { font-size: 0.9em; }
footer small { display: table-cell; width: 100%; padding: 0 1.3em; font-size: 0.7em; vertical-align: middle; }
/* @end */

/* @group gnavi */
nav[role="navigation"] { float: left; width: 200px; }
nav[role="navigation"] ul li { margin-bottom: 0.75em; width: 100%; height: 2.625em; border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
nav[role="navigation"] ul li:last-child { margin-bottom: 0; }
nav[role="navigation"] ul li:hover a { opacity: 0.6; text-decoration: none; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; }
[data-btn-action="btn_back_to_list"]::before,
nav[role="navigation"] ul li a:not([data-link-type="current"]):before { margin-right: 0.5em; content: '\5d' !important; font-family: 'fontello'; }
[data-btn-action="btn_back_to_list"]::before { color: #fff; }
nav[role="navigation"] ul li a:not([data-link-type="current"]):before { color: #d71921; }
nav[role="navigation"] ul li a,
nav[role="navigation"] ul li [data-link-type="current"] { display: block; width: 100%; height: 100%; padding: .65em .65em; color: #333; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-decoration: none; line-height: 1; }
nav[role="navigation"] ul li a { font-size: 1.2rem; line-height: 1.5; }
nav[role="navigation"] ul li a {
	background-color: #dbdbdb;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.1)),color-stop(0.45, rgba(255,255,255,0.5)),color-stop(0.55, rgba(255,255,255,0.5)),color-stop(1, rgba(255,255,255,0.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.1) 100%);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.1) 100%);
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.1) 100%);
	background-image: linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.1) 100%);
}
nav[role="navigation"] ul li [data-link-type="current"] { color: #fff; text-indent: 0.8em; font-style: normal; line-height: 1.5; position: relative; }
nav[role="navigation"] ul li [data-link-type="current"],
article[role="main"] .pagenation > em {
	background-color: #d71921;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.5)),color-stop(0.35, rgba(255,255,255,0.35)),color-stop(1, rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0) 100%);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0) 100%);
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0) 100%);
	background-image: linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0) 100%);
}
nav[role="navigation"] ul li a[data-type~="admin"]{background-color: #D5BEBD; }
nav[role="navigation"] ul li [data-link-type="current"]::before { display: inline-block; content: ''; padding-right: 0.5em; width: 0; height: 0.6em; border-left: 1.125em #fff solid; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
/* @end */

/* @group Contents Common */
[data-role="form_wrapper"] > form:first-of-type { border: 1px solid #aaa; padding: 1.275em .5em; -webkit-box-sizing: -moz-border-box; box-sizing: border-box; box-sizing: border-box; }
[data-role="form_wrapper"] > form p:empty { display: none; }
[data-role="form_wrapper"] { position: relative; padding-bottom: 56px; }
[data-role="form_wrapper"] .date { position: absolute; padding: 0 !important; line-height: 1; top: 10px; right: 10px; }
[data-role="form_wrapper"] > form { position: static !important; }
[data-role="form_wrapper"] input[name="form_delete"],
[data-role="form_wrapper"] button[name="form_delete"] { font-weight: normal; position: absolute; bottom: 0; right: 0; }
[data-role="form_wrapper"] input[name="form_submit"],
[data-role="form_wrapper"] button[name="form_submit"] { bottom: 0 !important; }
[id="container"] { margin: 0 auto; padding: 1.8em 0; width: 1000px; min-height: 100%; height: auto !important; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
[id="container"] [itemtype$="Breadcrumb"] { min-height: 1em; padding: 0.85em 0 1.5em; margin-bottom: .857em; }
[id="container"] [itemtype$="Breadcrumb"] ul { vertical-align: middle; font-style: normal; font-size: 0.9em; }
[id="container"] [itemtype$="Breadcrumb"] ul li { display: inline; padding: 0.5em 0; vertical-align: middle; }
[id="container"] [itemtype$="Breadcrumb"] ul li:after { margin-left: 0.5em; content: '\6f'; text-align: center; font-family: 'fontello'; }
[id="container"] [itemtype$="Breadcrumb"] ul li:last-child:after { content: ''; }
[id="container"] [itemtype$="Breadcrumb"] ul li > * { font-style: normal; }

article[role="main"] { float: right; width: 780px; min-height: 500px; margin-bottom: 30px;}
article[role="main"]:after { display: block; clear: both; height: 0; content: ''; }
article[role="main"] a[data-btn-action^="btn_"],
article[role="main"] input[type="submit"],
article[role="main"] button[type="submit"] { display: inline-block; padding: 0.75em; color: #fff; font-size: 1em; border: 1px solid rgba(0,0,0,0.3); }
article[role="main"] a[data-btn-action^="btn_"]:hover,
article[role="main"] input[type="submit"]:hover,
article[role="main"] button[type="submit"]:hover { opacity: 0.8; text-decoration: none; text-shadow: 1px 1px rgba(0,0,0,0.3); -webkit-transition: opacity .2s linear; transition: opacity .2s linear; }
article[role="main"] table tbody td a[data-btn-action^="btn_"],
article[role="main"] input[type="submit"],
article[role="main"] button[type="submit"] { padding: 1rem !important; font-size: 1.4rem !important; line-height: 1; }
article[role="main"] a[data-btn-action^="btn_"],
article[role="main"] input[type="submit"],
body:not(.issue) article[role="main"] button[type="submit"] {
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(0,0,0,0.3)),color-stop(0.3, rgba(0,0,0,0.2)),color-stop(1, rgba(0,0,0,0)));
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%);
	background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%);
	text-decoration: none;
}

article[role="main"] a[data-btn-action$="import"] { background-color: #009648; }
article[role="main"] a[data-btn-action$="export"] { background-color: #009648; }
article[role="main"] a[data-btn-action$="add"],
article[role="main"] a[data-btn-action$="login"],
article[role="main"] a[data-btn-action$="create"],
article[role="main"] input[name="form_submit"],
article[role="main"] button[name="form_submit"],
body.message.login article[role="main"] [data-btn-action="btn_login"] { background-color: #ff4a52; }
article[role="main"] a[data-btn-action$="printing"] { background-color: #8b4513; }
article[role="main"] a[data-btn-action$="editing"] { background-color: #ff4a52; }
article[role="main"] a[data-btn-action$="delete"],
article[role="main"] input[name="form_delete"],
article[role="main"] button[name="form_delete"] { background-color: #006cb3; font-weight: normal; }
article[role="main"] a[data-btn-action$="copy"] { background-color: #ff9859; }
article[role="main"] a[data-btn-action$="back_to_list"] { background-color: #ffc619; }

article[role="main"] a[data-btn-action$="create"] { text-align: center; }
.msie article[role="main"] a[data-btn-action^="btn_"] { padding-bottom: 0.3em; }

.btn_s { width: 4em; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.btn_m { width: 9.5em; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

article[role="main"] button[name="form_delete"]::before,
article[role="main"] a[data-btn-action^="btn"]:before,
article[role="main"] input[type="submit"]:before,
article[role="main"] [data-role="form_wrapper"] [name="form_submit"]::before { content: ''; padding-right: 0.25em; text-align: center; font-family: 'fontello'; }
article[role="main"] a[data-btn-action$="create"]:before,
article[role="main"] a[data-btn-action$="add"]:before,
article[role="main"] input[name="form_submit"]:before { content: '\74'; }
article[role="main"] a[data-btn-action$="export"]:before { content: '\79'; }
article[role="main"] button[name="form_delete"]::before,
article[role="main"] a[data-btn-action$="delete"]:before,
article[role="main"] span.delete:before { content: '\72'; }
article[role="main"] a[data-btn-action$="import"]:before { content: '\75'; }
article[role="main"] a[data-btn-action$="editing"]:before { content: '\65'; }
article[role="main"] a[data-btn-action$="copy"]:before { content: '\69'; }
article[role="main"] [data-role="form_wrapper"] [name="form_submit"]::before { content: '\e800'; }

article[role="main"] form[action*="new"] [name="form_submit"],
article[role="main"] form[action*="edit"] [name="form_submit"] { position: absolute; left: 50%; text-align: center; font-weight: normal; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }

article[role="main"] p.btn_delete_r { text-align: right; }

body:not(.message) article[role="main"] > header { position: relative; min-height: 3.3em; }
body:not(.message) article[role="main"] > header h1 {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0 0 0.5em 0;
	line-height: 2;
	color: #d71921;
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 2px solid #d71921;
	background-color: #dbdbdb;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.7)),color-stop(0.35, rgba(255,255,255,0.5)),color-stop(1, rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 100%);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 100%);
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 100%);
	background-image: linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 100%);
}
body:not(.message) article[role="main"] > header h1:before { display: inline-block; content: ''; padding-right: 0.5em; width: 0; height: 0.6em; border-left: 1.25em #d71921 solid; }
body:not(.message) article[role="main"] > header ul.btn_area { position: absolute; right: 0; bottom: 8px; }
body:not(.message) article[role="main"] > header ul.btn_area li { display: inline-block; margin: 0; }
.msie body:not(.message) article[role="main"] > header h1 { padding-top: 0.5em; line-height: 1.5; }
.msie body:not(.message) article[role="main"] > header h1:before { margin-bottom: 0.1em; }
article[role="main"] table { width: 100%; border-spacing: 0; empty-cells: hide; table-layout: fixed; border-collapse: collapse; }

article[role="main"] table, article[role="main"] table th, article[role="main"] table td { padding: 0.5em; border: 1px solid #fff; border-bottom-width: 5px; font-size: 1.2rem; text-align: center; vertical-align: middle; }
article[role="main"] table { padding: 0; }
article[role="main"] table th { color: #fff; background-color: #666; }
article[role="main"] table tbody tr { background-color: #eee; }
article[role="main"] table tbody tr:nth-child(even) { background-color: #dcdcdc; }
article[role="main"] table td select,
article[role="main"] table td select option,
article[role="main"] table td input[type="text"] { max-width: 94%; }
body:not(.edit) article[role="main"] table tbody tr:hover { background-color: #c0e8ff; }
body:not(.issue):not(.edit) article[role="main"] > table thead tr > :last-child { width: 7em; }

article[role="main"] .pagenation { margin: 2.5em 0 .8em; text-align: right; font-size: 0.9em; }
article[role="main"] .pagenation > * { display: inline-block; padding: .5em .75em; margin-left: .5em; border: 1px solid #aaa; }
article[role="main"] .pagenation > :first-child { margin-left: 0; }
article[role="main"] .pagenation > em { font-style: normal; background-color: #e5e5e5; }
article[role="main"] .pagenation > a { text-decoration: none; }
article[role="main"] .pagenation > a:hover { opacity: 0.6; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; }
article[role="main"] .pagenation > *:empty { display: none; }
article[role="main"] li { margin: 0.5em 0; }
article[role="main"] + p { display: block; clear: both; text-align: right; }
article[role="main"] + p::before { margin-right: 0.35em; color: #d71921; content: '\e803'; text-decoration: none !important; font-family: 'fontello'; }
/* @end */

/* @group Message */
body.message article[role="main"] { float: none; width: 100%; padding: 2em 5em; min-height: 250px; margin-bottom: 1em; border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.message article[role="main"] header[role="banner"] { float: none; text-align: center; }
body.message article[role="main"] header[role="banner"] h1 { float: none; text-align: center; }

body.message.login article[role="main"] p { font-size: 1.4em; text-align: center; }
body.message.login article[role="main"] p a[data-btn-action="btn_login"] { padding: 0.5em 2em; }
body.message.login article[role="main"] > article { margin: 2em auto 0; padding: 1.35em; background-color: rgba(128,128,128,0.1); border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.message.login article[role="main"] dl { margin-top: 1em; }
body.message.login article[role="main"] dt { position: absolute; }
body.message.login article[role="main"] > form dl { width: 38.5%; margin: 2em auto; }
body.message.login article[role="main"] > form dl dt { width: 5em; padding-top: 0.4em; text-align: right; }
body.message.login article[role="main"] > form dl dd { margin-bottom: 1em; padding-left: 6em; text-align: center; }
body.message.login article[role="main"] > form dl dd input { width: 90%; }
body.message.login article[role="main"] > article dt { padding-top: 0.8em; }
body.message.login article[role="main"] > article dd { padding: 0.8em 0.5em 0.8em 8em; border-top: 1px solid #b0b0b0; line-height: 1.3; }
body.message.login article[role="main"] > article dd:first-of-type { border-top-color: #d71921; }

/* @end */

/* @group Top */
body.top article[role="main"] { padding-bottom: 2em; }
body.top article[role="main"] > article { margin-bottom: 1em; padding: 1.35em; border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.top article[role="main"] > article h1 { border-left: 0.2em solid #d71921; text-indent: 0.5em; }
body.top article[role="main"] > article dl { margin-top: 1em; }
body.top article[role="main"] > article dt { position: absolute; padding-top: 0.8em; }
body.top article[role="main"] > article dd { padding: 0.8em 0.5em 0.8em 8em; border-top: 1px solid #b0b0b0; line-height: 1.3; }
body.top article[role="main"] > article dd:first-of-type { border-top-color: #d71921; }
body.top article[role="main"] > article > dl > dt > span::after{margin-left:2px;font-family:'fontello';content:'\5d'}
body.top article[role="main"] > article > dl > dt > span{color:#994545;font-weight:bold;}
body.top article[role="main"] > p:last-child { font-size: 1.4em; text-align: center; }
body.top article[role="main"] > p:last-child a[data-btn-action="btn_create"] { padding: 1em 2em; }

/* @end */

/* @group Issue */
body.issue article[role="main"] > ol,
body.issue article[role="main"] > nav ul { position: relative; width: 100%; margin: -0.5em auto 0.2em; padding: 0; counter-reset: li; list-style: none; }

body.issue article[role="main"] > ol:after { content: ''; clear: both; display: block; height: 0; }
body.issue article[role="main"] > ol:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; z-index: 200; border: 0.5em solid #fff; border-left-width: 0; border-right-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > ol li { float: left; position: relative; display: block; width: 24.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > ol li > span,
body.issue article[role="main"] > ol li > strong { display: block; width: 100%; /*height: 100%;*/ padding: 0.8em; text-align: center; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > ol li > *:before { content: counter(li); counter-increment: li; display: inline-block; width: 1.5em; margin: -0.3em 0.5em 0 0; padding-top: 0.1em; text-align: center; vertical-align: middle; border-radius: 2em; line-height: 1.3; font-size: 0.8em; }
body.issue article[role="main"] > ol li > *:after { content: ''; display: block; position: absolute; right: -0.5em; top: 0.15em; height: 2.3em; width: 2.3em; box-shadow: 5px 5px 1px 0 #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 100; }
body.issue article[role="main"] > ol li > span:before { color: #898989; background-color: #fff; }
body.issue article[role="main"] > ol li > span:after { background-color: #898989; }
body.issue article[role="main"] > ol li > strong:before { color: #fff; background-color: #d71921; }
body.issue article[role="main"] > ol li > strong:after { background-color: #f5dadb; }
body.issue article[role="main"] > ol li > span { color: #fff; background-color: #898989; }
body.issue article[role="main"] > ol li > strong { color: #d71921; background-color: #f5dadb; }
body.issue article[role="main"] > form > nav ul { position: relative; width: 80%; margin: 1em auto; height: 3.2em; background-color: #d71921; }
body.issue article[role="main"] > form > nav ul:before,
body.issue article[role="main"] > form > nav ul:after { content: ''; display: block; position: absolute; width: 110%; height: 0; margin-left: -5%; border-bottom: 5px solid #fff; z-index: 200; }
body.issue article[role="main"] > form > nav ul:before { top: -3px; }
body.issue article[role="main"] > form > nav ul:after { bottom: -3px; }
body.issue article[role="main"] > form > nav ul li { float: left; position: relative; display: block; width: 32%; height: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > form > nav ul li:first-child { width: 36%; }
body.issue article[role="main"] > form > nav ul li > button { background-color: #d71921; display: block; top: 0; width: 100%; height:100%; text-align: center; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > form > nav ul li > button[name*="submit"] { cursor: pointer; outline: none; }
body.issue article[role="main"] > form > nav ul li > a,
body.issue article[role="main"] > form > nav ul li > strong { display: block; top: 0; width: 100%; height:100%; padding: 1.2em 1em 0; text-align: center; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > form > nav ul li > button,
body.issue article[role="main"] > form > nav ul li > a { color: #fff; }
body.issue article[role="main"] > form > nav ul li > strong { color: #d71921; background-color: #f5dadb; }
body.issue article[role="main"] > form > nav ul li:nth-child(2):before,
body.issue article[role="main"] > form > nav ul li:nth-child(2):after { content: ''; display: block; position: absolute; height: 2.4em; width: 2.4em; background-color: #f5dadb; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 100; }
body.issue article[role="main"] > form > nav ul li:nth-child(2):before { left: -0.6em; top: 0.4em; box-shadow: -5px -5px 1px 0 #fff; }
body.issue article[role="main"] > form > nav ul li:nth-child(2):after { right: -0.6em; top: 0.4em; box-shadow: 5px 5px 1px 0 #fff; }
body.issue article[role="main"] > form > nav ul li:last-child { float: right; }
body.issue article[role="main"] > form > nav ul li:first-child button,
body.issue article[role="main"] > form > nav ul li:first-child a { margin-top: -0.45em; font-size: 0.9em; }
body.issue article[role="main"] > form > nav ul li:first-child > button span,
body.issue article[role="main"] > form > nav ul li:first-child > a span { display: block; font-size: 0.9em; line-height: 1.5; }
body.issue article[role="main"] > form > nav ul li:first-child button:before,
body.issue article[role="main"] > form > nav ul li:last-child button:after,
body.issue article[role="main"] > form > nav ul li:first-child a:before,
body.issue article[role="main"] > form > nav ul li:last-child a:after { content: ''; position: absolute; top: 50%; display: block; font-family: 'fontello'; color: #fff; font-size: 1.6em; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 100; }
body.issue article[role="main"] > form > nav ul li:first-child button:before,
body.issue article[role="main"] > form > nav ul li:first-child a:before { content: '\5b'; left: -0.1em; }
body.issue article[role="main"] > form > nav ul li:last-child button:after,
body.issue article[role="main"] > form > nav ul li:last-child a:after { content: '\5d'; right: -0.1em; }
body.issue article[role="main"] > form > nav ul li:first-child:before,
body.issue article[role="main"] > form > nav ul li:last-child:after { content: ''; display: block; position: absolute; top: 0.4em; height: 2.4em; width: 2.4em; background-color: #d71921; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.issue article[role="main"] > form > nav ul li:first-child:before { left: -1em; }
body.issue article[role="main"] > form > nav ul li:last-child:after { right: -1em; }

body.issue article[role="main"] > form > nav ul li > strong:before,
body.issue article[role="main"] > form > nav ul li:last-child > button:before,
body.issue article[role="main"] > form > nav ul li:last-child > a:before { display: inline-block; width: 1.5em; margin: -0.3em 0.5em 0 0; padding-top: 0.1em; text-align: center; vertical-align: middle; border-radius: 2em; line-height: 1.3; font-size: 0.8em; }
body.issue article[role="main"] > form > nav ul li > strong:before { color: #fff; background-color: #d71921; position: relative; z-index: 101; }
body.issue article[role="main"] > form > nav ul li:last-child > button:before,
body.issue article[role="main"] > form > nav ul li:last-child > a:before { color: #898989; background-color: #fff; }

body.issue article[role="main"] > table { border-collapse: separate; }
body.issue article[role="main"] > table thead td { padding: 0.5em 0 !important;}
body.issue article[role="main"] > table thead td select { max-width: 5em;  }
body.issue article[role="main"] > table tbody tr { border-top: 1px solid transparent; }
body.issue article[role="main"] > table tbody tr:first-child { border-bottom: 2em solid #fff; }
body.issue article[role="main"] > table tbody td { padding: 0.5em 0 !important;}
body.issue article[role="main"] > table tbody td:first-child { padding: 0.5em 0 !important; }
body.issue article[role="main"] > table tbody td:first-child span { display: block; min-width: 6em; }
body.issue article[role="main"] > table tbody td:first-child span a { position: relative; display: inline-block; width: 1.4em; height: 1.8em; text-indent: 100%; white-space: nowrap; overflow: hidden; }
body.issue article[role="main"] > table tbody td:first-child span a + a { margin-left: 0.25em; }
body.issue article[role="main"] > table tbody td > span { font-weight: bold; }

body.issue article[role="main"] > table tbody tr td { position: relative; border: 1px solid #fff; font-size: 100%;}
body.issue article[role="main"] > table tbody tr:nth-of-type(even) > td { border-bottom-width: 5px; }
body.issue article[role="main"] > table tbody tr td:first-child > div { position: absolute; top: 2.4em; width: 40em; text-align: left; z-index: 1000; border: 2px solid transparent; }
body.issue article[role="main"] > table tbody tr div > div { display: none; animation-name: anime_table_btnarea; animation-duration: 1s; animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-name: anime_table_btnarea; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; }
body.issue [data-table="issue_top"] thead th { font-size: 1rem; padding: .5em 0; }
body.issue [data-table="issue_top"] thead > tr:first-child th { border-bottom-width: 1px; }
body.issue [data-table="issue_top"] [data-cell="btn_area"] { padding: 0 !important; background-color: #fff; }
body.issue [data-table="issue_top"] [data-cell="btn_area"] > div { table-layout: fixed; width: 100%; display: table; }
body.issue [data-table="issue_top"] [data-cell="btn_area"] > div > a { display: table-cell; border: none;border-left: 1px solid #fff; padding: .5rem 1rem !important; }
body.issue [data-table="issue_top"] [data-cell="btn_area"] > div > a:first-child { border-left: none; }
body.issue [data-table="issue_top"] td[colspan="2"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.issue [data-table="issue_top"] select { width: 4.75em; margin-left: .25em; }


body.issue article[role="main"] > table tbody tr div > p:before { content: '\5d'; font-family: 'fontello'; color: #d71921; padding-right: 0.25em; }
body.issue article[role="main"] > table tbody tr.open td { border-bottom-width: 5.5em; }
body.issue article[role="main"] > table tbody tr.open div > p:before { content: '\e801'; }
body.issue article[role="main"] > table tbody tr.open div > div { display: block; }

body.issue article[role="main"] > table tbody a { margin: 0.5em 0 1em; padding: 0.6em 0.6em 0.6em 1.8em; font-size: 1.2em ; }
body.issue article[role="main"] > table tbody a:before { content: ''; /*position: absolute;*/ display: inline-block; font-family: 'fontello'; color: #fff; line-height: 1; /*-webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 100; */}
body.issue article[role="main"] > table tbody a[data-btn-action="btn_copy"]:before { content: '\69'; top: 50%; background-color: }
body.issue article[role="main"] > table tbody a[data-btn-action="btn_editing"]:before { content: '\65'; top: 50%; }
body.issue article[role="main"] > table tbody a[data-btn-action="btn_printing"]:before { content: '\77'; top: 50%; }
body.issue article[role="main"] > table tbody a[data-btn-action="btn_delete"]:before { content: '\72'; top: 50%; }

body.issue.index article[role="main"] > table  > tbody > tr > td:not(:first-child) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

body.issue.info article[role="main"] > form > nav ul li > strong:before { content: '1'; }
body.issue.info article[role="main"] > form > nav ul li:last-child > button:before,
body.issue.info article[role="main"] > form > nav ul li:last-child > a:before { content: '2'; }
body.issue.info article[role="main"] > form > table tbody tr td:first-child { width: 13em }
body.issue.info article[role="main"] > form > table tbody tr td:last-child { padding-left: 1em; text-align: left; }

body.issue.detail1 article[role="main"] > nav ul li > strong:before { content: '2'; }
body.issue.detail1 article[role="main"] > nav ul li:last-child > a:before { content: '2'; }
body.issue.detail1 article[role="main"] > table tbody a[data-btn-action="btn_delete"]:before { top: 43%; }
body.issue.detail1 article[role="main"] > table tbody a[data-btn-action="btn_add"]:before { content: '\74'; top: 45%; }

body.issue.detail2 article[role="main"] > nav ul li > strong:before { content: '2'; }
body.issue.detail2 article[role="main"] > nav ul li:last-child > a:before { content: '3'; }
body.issue.detail2 article[role="main"] > div.product_info + div.product_info { margin-top: 20px; }
body.issue.detail2 article[role="main"] > div.product_info > p:last-of-type { text-align: right; }
body.issue.detail2 article[role="main"] > div.product_info:last-of-type { position: relative; }
body.issue.detail2 article[role="main"] > p.btn_add { margin-bottom: 0.3em; }
body.issue.detail2 article[role="main"] > .product_info { margin: 0.5em auto; padding: 0.5em; border: 2px solid #ccc; }
body.issue.detail2 article[role="main"] > p.btn_add > a { margin-right: 0.3em; }

body.issue.preview article[role="main"] > nav ul li > strong:before { content: '3'; }
body.issue.preview article[role="main"] > nav ul li:last-child > a:before { content: '4'; }
body.issue.preview article[role="main"] > nav ul li:last-child a { margin-top: -0.5em; font-size: 0.9em; }
body.issue.preview #preview_doc { width: 700px; margin: 0 auto; }
body.issue.preview #preview_doc * { line-height:1.5; }
body.issue.preview #preview_doc h1 { font-size: 2em; width: 10em; margin: 10pt auto; }
body.issue.preview #preview_doc dd { margin: 0; padding-left: 4em; }

body.issue.preview article[role="main"] > p,
body.issue.print article[role="main"] > p { text-align: center; }
/* @end */


/* @group Edit */
body.address.edit article[role="main"] > p,
body.customer.edit article[role="main"] > p,
body.sign.edit article[role="main"] > p,
body.unit.edit article[role="main"] > p,
body.type.edit article[role="main"] > p,
body.news article[role="main"] form > p,
body.news article[role="main"] > p,
body.user article[role="main"] form > p,
body.user article[role="main"] > p,
body.setting article[role="main"] > p,
body.setting article[role="main"] form > p,
body.sign article[role="main"] form > p,
body.unit article[role="main"] form > p,
body.type article[role="main"] form > p { padding: 5px 0; }

body.address.edit article[role="main"] > p:first-of-type,
body.customer.edit article[role="main"] > p:first-of-type,
body.news article[role="main"] > p:first-of-type,
body.sign.edit article[role="main"] > p:first-of-type,
body.unit.edit article[role="main"] > p:first-of-type,
body.type.edit article[role="main"] > p:first-of-type/*,
body.sign article[role="main"] form > p:first-of-type,
body.unit article[role="main"] form > p:first-of-type,
body.type article[role="main"] form > p:first-of-type*/ { margin-top: 40px; }

body.sign.edit p > span,
body.news p > span,
body.user p > span,
body.setting p > span,
body label > span { display: inline-block; margin-right: 12px; width: 115px; text-align: right; }

body.setting.edit article[role="main"] table { margin-top: 10px; }

body.type.edit article[role="main"] a[data-btn-action$="create"],
body.sign.edit article[role="main"] a[data-btn-action$="create"],
body.user article[role="main"] a[data-btn-action$="create"],
body.news article[role="main"] a[data-btn-action$="editing"],
body.address.edit article[role="main"] a[data-btn-action$="create"],
body.customer.edit article[role="main"] a[data-btn-action$="create"],
body.setting.edit article[role="main"] a[data-btn-action$="create"] { margin-top: 30px; }

body.user article[role="main"] > strong { display: block; margin: 20px 0 10px; }
body.user article[role="main"] > strong:nth-of-type(2) { margin-top: 30px; }

body.sign.edit p > span input { margin-left: 10px; }


body.setting.edit table thead th { padding: 12px 0; }
body.setting.edit article[role="main"] a[data-btn-action$="create"] { margin-top: 20px; }

body.sign article[role="main"] form[action*='destroy'],
body.unit article[role="main"] form[action*='destroy'],
body.type article[role="main"] form[action*='destroy'],
body.news article[role="main"] form[action*='destroy'],
body.setting article[role="main"] form[action*='destroy'],
body.user article[role="main"] form[action*='destroy'] { text-align: right; }

body.news article[role="main"] form span.separate_hyphen,
body.user article[role="main"] form span.separate_hyphen { width:auto; margin-right:5px; margin-left:5px;}

body.news article[role="main"] form span.errortxt
body.user article[role="main"] form span.errortxt { display:inline-block;width:auto;color:#FF0000;}

body.news article[role="main"] form label p,
body.user article[role="main"] form label p {display:inline-block;width:auto;}

body.setting article[role="main"] form dl.password_list,
body.user article[role="main"] form dl.password_list { display:inline-block;margin-left:134px;position:relative;margin-top: -20px; }
body.setting article[role="main"] form dl.password_list dd:not(:last-child),
body.user article[role="main"] form dl.password_list dd:not(:last-child) { margin-bottom: 10px; }
body.setting article[role="main"] form dl.password_list + span.errortxt,
body.user article[role="main"] form dl.password_list + span.errortxt { vertical-align:top;}

body.news article[role="main"] p > span[role="preview"],
body.user article[role="main"] p > span[role="preview"] {text-align:left; width:500px; width:-webkit-calc(100% - 150px); width: calc(100% - 150px);}

body article form p > span[role="inputcolumn"] { width:500px; width:-webkit-calc(100% - 150px); width: calc(100% - 150px); text-align: left; line-height:1.5;}
body article[role="main"] label em,
body article form p > em { display:inline-block; padding-right: 1em; font-style: normal; background-color: #d71921; position: relative; margin-right: 1em; padding: .25em .5em; font-size: 1rem; font-weight: normal; display: inline-block; color: #fff; }
/* @end */

/* @button temp */
body.issue.info article[role="main"] a[data-btn-action$="sample"] { background-color: #ff9859; }
body.sign.edit article[role="main"] a[data-btn-action$="add"],
body.sign.edit article[role="main"] a[data-btn-action$="add"] + a[data-btn-action$="delete"] { font-size: 1.1rem; padding: 0.3em 0.5em; }
/* @end */

/* @invalid_text */
body article[role="main"] form[role="form"] .invalid_text {
	padding: 0.1em 0.5em;
	color: #fff;
	font-style: normal;
	font-weight: bold;
	background: #f00;
}

body article[role="main"] form[role="form"] input[type="text"].valid,
body article[role="main"] form[role="form"] input[type="password"].valid,
body article[role="main"] form[role="form"] input[type="email"].valid,
body article[role="main"] form[role="form"] input[type="tel"].valid,
body article[role="main"] form[role="form"] input[type="number"].valid {
	background: #f0fff0;
}
body article[role="main"] form[role="form"] input[type="text"].invalid,
body article[role="main"] form[role="form"] input[type="password"].invalid,
body article[role="main"] form[role="form"] input[type="email"].invalid,
body article[role="main"] form[role="form"] input[type="tel"].invalid,
body article[role="main"] form[role="form"] input[type="number"].invalid {
	background: #ffe4e1;
}
body article[role="main"] form[role="form"] input[type="text"].required,
body article[role="main"] form[role="form"] input[type="password"].required,
body article[role="main"] form[role="form"] input[type="email"].required,
body article[role="main"] form[role="form"] input[type="tel"].required,
body article[role="main"] form[role="form"] input[type="number"].required {
	background: #ffffe0;
}