@charset "UTF-8";
@import url("fontawesome.css");
@import url("original.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/****************************************
 	基本設定								*
*****************************************/
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: .875rem;
  color: #4b515b;
}

input, select, textarea, button, option {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 12px;
  color: #4b515b;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #4b515b;
}

img {
  max-width: 100%;
  height: auto;
}
img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

/****************************************
 	レイアウト							*
*****************************************/
#content {
  display: flex;
}
#content nav {
  width: 230px;
  padding-bottom: 4rem;
  overflow-x: hidden;
}
#content main {
  flex: 1 1 0%;
  min-height: 100vh;
  border-left: 1px solid #e6ecf0;
}
#content main .row {
  display: flex;
  border-top: 1px solid #e6ecf0;
}
#content main .row + .row {
  margin-top: 30px;
}
#content main .row article {
  width: 100%;
  padding: 30px;
}
#content main .row article.col12 {
  width: 100%;
}
#content main .row article.col11 {
  width: 91.6667%;
}
#content main .row article.col10 {
  width: 83.3333%;
}
#content main .row article.col9 {
  width: 75%;
}
#content main .row article.col8 {
  width: 66.6667%;
}
#content main .row article.col7 {
  width: 58.3333%;
}
#content main .row article.col6 {
  width: 50%;
}
#content main .row article.col5 {
  width: 41.6667%;
}
#content main .row article.col4 {
  width: 33.3333%;
}
#content main .row article.col3 {
  width: 25%;
}
#content main .row article.col2 {
  width: 16.6667%;
}
#content main .row article.col1 {
  width: 8.33333%;
}
#content main .row article:first-child {
  margin-left: 0;
}
#content main .row article:last-child {
  margin-right: 0;
}
#content main .row article + article {
  border-left: 1px solid #e6ecf0;
}
#content main .row article section {
  position: relative;
}

/****************************************
 	ログイン							*
*****************************************/
#login {
  display: flex;
  height: 90vh;
  justify-content: center;
  align-items: center;
}
#login #content main {
  min-height: auto;
  width: 400px;
  height: 400px;
}
#login #content main section.form table tbody tr {
  border-bottom: none;
  background-color: transparent;
}
#login #content main section.form table tbody tr th, #login #content main section.form table tbody tr td {
  display: block;
  width: 100%;
}
#login #content main section.form table tbody tr th {
  padding-left: 0;
}
#login #content main section.form table tbody tr td {
  padding-top: 0;
}
#login #content main section.form table tfoot tr th {
  display: none;
}
#login #content main section.form table tfoot tr td {
  display: block;
  width: 100%;
  padding-top: 10px;
}

/****************************************
 	ナビゲーション						*
*****************************************/
nav h1 {
  height: 68px;
  padding-top: 16px;
  padding-left: 1.5rem;
}
nav h1 img {
  width: 1.5rem;
  vertical-align: super;
}
nav h1 p {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.125rem;
}
nav h1 p span {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
}
nav #menuTrigger {
  position: relative;
  display: none;
  float: right;
  width: 32px;
  height: 28px;
  margin-top: 3px;
  margin-right: 22px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
nav #menuTrigger span {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #a4a6a8;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
nav #menuTrigger span:nth-of-type(1) {
  top: 0;
}
nav #menuTrigger span:nth-of-type(2) {
  top: 12px;
}
nav #menuTrigger span:nth-of-type(3) {
  bottom: 0;
}
nav #menuTrigger.active span:nth-of-type(1) {
  -moz-transform: translateY(13px) rotate(-45deg);
  -ms-transform: translateY(13px) rotate(-45deg);
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
nav #menuTrigger.active span:nth-of-type(2) {
  opacity: 0;
}
nav #menuTrigger.active span:nth-of-type(3) {
  -moz-transform: translateY(-11px) rotate(45deg);
  -ms-transform: translateY(-11px) rotate(45deg);
  -webkit-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg);
}
nav .list {
  border-top: 1px solid #e6ecf0;
}
nav .list > ul {
  padding-top: 1.5rem;
  border-top: 1px solid #e6ecf0;
}
nav .list > ul:nth-of-type(1) {
  border-top: none;
}
nav .list > ul > li {
  margin-bottom: .25rem;
}
nav .list > ul > li.disabled > a {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
nav .list > ul > li.on > a svg,
nav .list > ul > li.on > a span {
  color: #ffde31;
}
nav .list > ul > li.on > ul > li.on > a {
  color: #fff;
}
nav .list > ul > li.open span svg {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
nav .list > ul > li.open > ul {
  display: block;
}
nav .list > ul > li:hover:not(.disabled):not(.on) > a:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 1.45rem;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: rgba(204, 204, 204, 0.1);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
nav .list > ul > li a {
  display: block;
  position: relative;
  height: 50px;
  padding-top: 12px;
  padding-left: 2rem;
  font-size: 0.8rem;
}
nav .list > ul > li svg {
  width: 16px;
  height: 16px;
  color: #a4a6a8;
}
nav .list > ul > li span {
  margin-left: .75rem;
  vertical-align: super;
}
nav .list > ul > li span svg {
  position: absolute;
  top: 17px;
  right: 40px;
  width: 16px;
  height: 16px;
}

/****************************************
 	ヘッダー							*
*****************************************/
header {
  height: 68px;
  padding: 0 30px;
}
header #breadcrumb {
  padding-top: 27px;
  font-size: 0.9em;
}
header #breadcrumb ul {
  overflow: hidden;
}
header #breadcrumb ul li {
  float: left;
}
header #breadcrumb ul li:not(:last-child):after {
  content: ">";
  margin-left: 10px;
  margin-right: 10px;
}
header #breadcrumb ul li:last-child a {
  color: #eecc20;
  font-weight: bold;
}

/****************************************
 	メイン								*
*****************************************/
main article h2 {
  margin-bottom: 20px;
  font-size: 1.25em;
  line-height: 1.5em;
}
main article h2:not(:first-child) {
  margin-top: 30px;
}
main article h2 span {
  margin-left: 10px;
  font-size: 0.75em;
  color: #999;
}

/****************************************
 	セクション（リスト）				*
*****************************************/
section.list caption.refiner {
  position: relative;
  margin-bottom: 5px;
  padding: 7px 10px 7px 30px;
  background-color: #edf2f7;
  font-size: 0.8em;
  line-height: 20px;
}
section.list caption.refiner > a {
  position: absolute;
  top: 27%;
}
section.list caption.refiner > a.filter {
  left: 10px;
}
section.list caption.refiner > a.clear {
  right: 5px;
}
section.list caption.refiner > a svg {
  width: 16px;
  height: 16px;
}
section.list caption.refiner ul {
  display: inline;
}
section.list caption.refiner ul li {
  display: inline;
}
section.list caption.refiner ul li:not(:first-child):before {
  content: ",";
  margin-left: 5px;
  margin-right: 5px;
}
section.list table {
  width: 100%;
}
section.list table th, section.list table td {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.9em;
  line-height: 1.25em;
}
section.list table th.tl, section.list table td.tl {
  padding-right: 0;
  text-align: left;
}
section.list table th.tc, section.list table td.tc {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
section.list table th.tr, section.list table td.tr {
  padding-left: 0;
  text-align: right;
}
section.list table thead {
  border-bottom: 1px solid #e2e8f0;
}
section.list table thead tr th {
  padding-top: 12px;
  padding-bottom: 12px;
}
section.list table tbody tr {
  height: 53px;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
section.list table tbody tr:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}
section.list table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
section.list table tbody tr.none td {
  padding-top: 75px;
  padding-bottom: 75px;
}
section.list table tbody tr[data-href]:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
section.list table tbody tr td:empty:before {
  content: "--";
  color: #ccc;
}
section.list table tbody tr td p {
  margin-top: 2px;
  font-size: 0.75em;
  color: #999;
}
section.list table tbody tr td p:first-child {
  margin-top: 0;
}
section.list table tbody tr td a.button {
  padding: 3px 6px;
}
section.list table tbody tr td span.unit {
  margin-left: 5px;
  font-size: 0.75em;
  color: #999;
}
section.list table tbody tr td span.label + span.label {
  margin-left: 5px;
}
section.list table tbody tr td .body {
  margin-top: 20px;
  margin-bottom: 20px;
  max-height: 210px;
  line-height: 1.5em;
  overflow: auto;
}
section.list table tbody tr td .body.all {
  max-height: none;
}
section.list table tbody tr td .preview img {
  vertical-align: middle;
}
section.list table tbody tr td .preview a.file {
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
  border-bottom: 1px dashed #666;
}
section.list table tbody tr td .preview a.file svg {
  width: 16px;
  height: 16px;
}
section.list table tbody tr td .preview a.file span {
  margin-left: 5px;
  vertical-align: super;
}
section.list table tbody tr td .multiL {
  margin: 15px 0;
}
section.list table tbody tr td .multiL .bar {
  margin-top: 8px;
  margin-bottom: 8px;
  border-top: 1px dashed #ddd;
}
section.list table tfoot {
  border-bottom: 1px solid rgba(80, 80, 80, 0.5);
}

section.paginator {
  padding: 20px 0;
}
section.paginator ul {
  text-align: center;
}
section.paginator ul li {
  display: inline-block;
}
section.paginator ul li.active a {
  background-color: #fff;
  -moz-box-shadow: 0px 3px 20px #eee;
  -webkit-box-shadow: 0px 3px 20px #eee;
  box-shadow: 0px 3px 20px #eee;
  -moz-border-radius: 0.375rem;
  -webkit-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
section.paginator ul li:not(:last-child) {
  margin-right: 10px;
}
section.paginator ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding-top: 12px;
  text-align: center;
}
section.paginator ul li a svg {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

section.mover {
  padding: 30px 0 20px;
}
section.mover ul {
  overflow: hidden;
  text-align: center;
}
section.mover ul li {
  display: inline-block;
}
section.mover ul li.prev {
  float: left;
}
section.mover ul li.next {
  float: right;
}

/****************************************
 	セクション（ビュー）				*
*****************************************/
section.view table {
  width: 100%;
}
section.view table + table {
  margin-top: 20px;
}
section.view table tr {
  height: 60px;
}
section.view table tbody tr:not(:last-child) {
  border-bottom: 1px solid #edf2f7;
}
section.view table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
section.view table tbody tr.lead {
  height: auto;
}
section.view table tbody tr.lead th {
  padding: 7px 10px;
  background-color: #edf2f7;
  font-size: 0.8em;
}
section.view table tbody tr.lead th svg {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: text-top;
}
section.view table tbody tr th, section.view table tbody tr td {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 0.9em;
  line-height: 1.5em;
}
section.view table tbody tr th {
  width: 20%;
  padding-left: 15px;
}
section.view table tbody tr td {
  padding-left: 11px;
}
section.view table tbody tr td[colspan] {
  padding-left: 0;
}
section.view table tbody tr td:empty:before {
  content: "--";
  color: #ccc;
}
section.view table tbody tr td a:not(:first-child) {
  margin-left: 10px;
}
section.view table tbody tr td a.button {
  padding: 3px 8px;
}
section.view table tbody tr td span.unit {
  margin-left: 5px;
  font-size: 0.75em;
  color: #999;
}
section.view table tbody tr td span.label + span.label {
  margin-left: 5px;
}
section.view table tbody tr td .preview img {
  vertical-align: middle;
}
section.view table tbody tr td .preview a.file {
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
  border-bottom: 1px dashed #666;
}
section.view table tbody tr td .preview a.file svg {
  width: 16px;
  height: 16px;
}
section.view table tbody tr td .preview a.file span {
  margin-left: 5px;
  vertical-align: super;
}
section.view table tbody tr td .preview a.button {
  margin-left: 15px;
  vertical-align: middle;
}
section.view table tbody tr td table {
  width: auto;
}
section.view table tbody tr td table tr {
  height: auto;
}
section.view table tbody tr td table th, section.view table tbody tr td table td {
  padding-top: 10px;
  padding-bottom: 10px;
}
section.view table tbody tr td table th.tl, section.view table tbody tr td table td.tl {
  text-align: left;
}
section.view table tbody tr td table th.tc, section.view table tbody tr td table td.tc {
  text-align: center;
}
section.view table tbody tr td table th.tr, section.view table tbody tr td table td.tr {
  text-align: right;
}
section.view table tbody tr td table thead tr {
  background-color: transparent !important;
}
section.view table tbody tr td table thead tr th {
  width: auto;
  padding: 0 15px 5px;
  font-size: 0.75em;
  color: #898989;
}
section.view table tbody tr td table tbody tr:nth-child(odd) {
  background-color: transparent;
}
section.view table tbody tr td table tbody tr:not(:last-child) {
  border-bottom: none;
}
section.view table tbody tr td table tbody tr:last-child td {
  padding-bottom: 0;
}
section.view table tbody tr td table tbody tr td {
  padding: 5px 15px;
}
section.view table tfoot tr:first-child td {
  padding-top: 20px;
}
section.view table tfoot tr td input[type='button'],
section.view table tfoot tr td input[type='submit'],
section.view table tfoot tr td a.button {
  width: 200px;
}
section.view table tfoot tr td input[type='button'] + input[type='button'],
section.view table tfoot tr td input[type='button'] + input[type='submit'],
section.view table tfoot tr td input[type='button'] + a.button,
section.view table tfoot tr td input[type='submit'] + input[type='button'],
section.view table tfoot tr td input[type='submit'] + input[type='submit'],
section.view table tfoot tr td input[type='submit'] + a.button,
section.view table tfoot tr td a.button + input[type='button'],
section.view table tfoot tr td a.button + input[type='submit'],
section.view table tfoot tr td a.button + a.button {
  margin-left: 3px;
}

/****************************************
 	セクション（フォーム）				*
*****************************************/
section.form table {
  width: 100%;
}
section.form table + table {
  margin-top: 20px;
}
section.form table tr {
  height: 60px;
}
section.form table tbody tr:not(:last-child) {
  border-bottom: 1px solid #edf2f7;
}
section.form table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
section.form table tbody tr[data-error] td input,
section.form table tbody tr[data-error] td textarea,
section.form table tbody tr[data-error] td select {
  padding-left: 8px;
  border-left-color: #ef5164;
  border-left-width: 3px;
}
section.form table tbody tr.lead {
  height: auto;
}
section.form table tbody tr.lead th {
  padding: 7px 10px;
  background-color: #edf2f7;
  font-size: 0.8em;
}
section.form table tbody tr.lead th svg {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: text-top;
}
section.form table tbody tr.static td {
  padding-left: 11px;
}
section.form table tbody tr th, section.form table tbody tr td {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 0.9em;
  line-height: 1.5em;
}
section.form table tbody tr th {
  width: 20%;
  padding-left: 15px;
}
section.form table tbody tr td:empty:before {
  content: "--";
  color: #ccc;
}
section.form table tbody tr td a:not(:first-child) {
  margin-left: 10px;
}
section.form table tbody tr td a.button {
  padding: 3px 8px;
}
section.form table tbody tr td span.unit {
  margin-left: 5px;
  font-size: 0.75em;
  color: #999;
}
section.form table tbody tr td span.unit:first-child {
  margin-left: 0;
}
section.form table tbody tr td span.unit + input,
section.form table tbody tr td span.unit + select {
  margin-left: 6px;
}
section.form table tbody tr td span.label + span.label {
  margin-left: 5px;
}
section.form table tbody tr td .preview {
  margin-bottom: 15px;
}
section.form table tbody tr td .preview img {
  vertical-align: middle;
}
section.form table tbody tr td .preview a.file {
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
  border-bottom: 1px dashed #666;
  vertical-align: middle;
}
section.form table tbody tr td .preview a.file svg {
  width: 16px;
  height: 16px;
}
section.form table tbody tr td .preview a.file span {
  margin-left: 5px;
  vertical-align: super;
}
section.form table tbody tr td .preview a.button {
  margin-left: 15px;
  vertical-align: middle;
}
section.form table tbody tr td input + input,
section.form table tbody tr td input + select,
section.form table tbody tr td select + input,
section.form table tbody tr td select + select {
  margin-left: 5px;
}
section.form table tbody tr td select + input[type='button'],
section.form table tbody tr td select + input[type='submit'],
section.form table tbody tr td select + a.button {
  margin: 7px;
}
section.form table tbody tr td table {
  width: auto;
}
section.form table tbody tr td table tr {
  height: auto;
}
section.form table tbody tr td table thead tr {
  background-color: transparent !important;
}
section.form table tbody tr td table thead tr th {
  width: auto;
  padding: 0 5px;
  font-size: 0.75em;
}
section.form table tbody tr td table tbody tr:nth-child(odd) {
  background-color: transparent;
}
section.form table tbody tr td table tbody tr:not(:last-child) {
  border-bottom: none;
}
section.form table tbody tr td table tbody tr td {
  padding-top: 5px;
  padding-bottom: 0;
}
section.form table tbody tr td table tbody tr td:not(:first-child) {
  padding-left: 5px;
}
section.form table tbody tr td p.error {
  margin-top: 5px;
  font-size: 0.75em;
  color: #ef5164;
}
section.form table tbody tr td p.error:before {
  content: "※";
}
section.form table tfoot tr:first-child td {
  padding-top: 20px;
}
section.form table tfoot tr td input[type='button'],
section.form table tfoot tr td input[type='submit'],
section.form table tfoot tr td a.button {
  width: 200px;
}
section.form table tfoot tr td input[type='button'] + input[type='button'],
section.form table tfoot tr td input[type='button'] + input[type='submit'],
section.form table tfoot tr td input[type='button'] + a.button,
section.form table tfoot tr td input[type='submit'] + input[type='button'],
section.form table tfoot tr td input[type='submit'] + input[type='submit'],
section.form table tfoot tr td input[type='submit'] + a.button,
section.form table tfoot tr td a.button + input[type='button'],
section.form table tfoot tr td a.button + input[type='submit'],
section.form table tfoot tr td a.button + a.button {
  margin-left: 3px;
}

/****************************************
 	セクション（アクション）			*
*****************************************/
section.action ul li:not(:last-child) {
  margin-bottom: 10px;
}
section.action ul li.primary a {
  background-color: #eecc20;
  color: #fff;
}
section.action ul li.success a {
  background-color: #2fc787;
  color: #fff;
}
section.action ul li.info a {
  background-color: #32bfc8;
  color: #fff;
}
section.action ul li.warning a {
  background-color: #fdbf21;
  color: #fff;
}
section.action ul li.danger a {
  background-color: #ef5164;
  color: #fff;
}
section.action ul li.inverse a {
  background-color: #6c757d;
  color: #fff;
}
section.action ul li a {
  display: block;
  padding: 20px 0;
  background-color: #edf2f7;
  color: #4a5568;
  text-align: center;
}
section.action ul li a:hover {
  opacity: 0.75;
}
section.action ul li a svg {
  height: 16px;
  width: 16px;
  margin-right: 5px;
  vertical-align: sub;
}

/****************************************
 	セクション（文章）					*
*****************************************/
section.sentence {
  margin: -30px;
  padding: 20px 30px;
  background-color: #fffeed;
}
section.sentence p {
  font-size: 0.9em;
  line-height: 1.5em;
}
section.sentence p + p {
  margin-top: 5px;
}

/****************************************
 	セクション（エラー）				*
*****************************************/
section.error {
  line-height: 1.5em;
  letter-spacing: 0.5px;
}
section.error a {
  text-decoration: underline;
}
section.error pre {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
}

/****************************************
 	フッター							*
*****************************************/
footer {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid #e6ecf0;
  text-align: center;
  font-size: 0.75em;
}

/****************************************
 	パーツ（フォーム）					*
*****************************************/
input[type='text'],
input[type='url'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='file'],
textarea,
select {
  border: 1px solid #e2e8f0;
  -moz-border-radius: 0.375rem;
  -webkit-border-radius: 0.375rem;
  border-radius: 0.375rem;
  font-size: 1em;
}
input[type='text']:invalid,
input[type='url']:invalid,
input[type='tel']:invalid,
input[type='email']:invalid,
input[type='number']:invalid,
input[type='password']:invalid,
input[type='file']:invalid,
textarea:invalid,
select:invalid {
  box-shadow: none;
  border-left-width: 3px;
  border-left-color: #ef5164;
}
input[type='text']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='file']:focus,
textarea:focus,
select:focus {
  outline: 0;
  -moz-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  -webkit-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

input[type='text'],
input[type='url'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'] {
  padding: 10px;
}
input[type='text']::placeholder,
input[type='url']::placeholder,
input[type='tel']::placeholder,
input[type='email']::placeholder,
input[type='number']::placeholder,
input[type='password']::placeholder {
  color: #bbb;
}

input[type='file'] {
  padding: 7px 10px;
}

textarea {
  min-width: 500px;
  height: 150px;
  padding: 10px;
}
textarea::placeholder {
  color: #bbb;
}

select {
  padding: 9px 10px;
}
select[multiple] {
  height: 200px;
  padding: 0;
}
select[multiple] option {
  padding: 10px 15px;
}

label.radio,
label.checkbox {
  position: relative;
  display: inline-block;
  top: 3px;
  margin-right: 20px;
  vertical-align: sub;
  line-height: 1.6;
}
label.radio input[type='radio'],
label.radio input[type='checkbox'],
label.checkbox input[type='radio'],
label.checkbox input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
}
label.radio input[type='radio']:disabled + span,
label.radio input[type='checkbox']:disabled + span,
label.checkbox input[type='radio']:disabled + span,
label.checkbox input[type='checkbox']:disabled + span {
  background-color: #d5d5d5;
  cursor: no-drop;
}
label.radio input[type='radio']:checked + span:after,
label.radio input[type='checkbox']:checked + span:after,
label.checkbox input[type='radio']:checked + span:after,
label.checkbox input[type='checkbox']:checked + span:after {
  position: absolute;
  font-family: "Font Awesome 5 Solid";
}
label.radio input[type='radio']:focus + span,
label.radio input[type='checkbox']:focus + span,
label.checkbox input[type='radio']:focus + span,
label.checkbox input[type='checkbox']:focus + span {
  outline: 0;
  -moz-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  -webkit-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
label.radio input[type='radio'] + span,
label.checkbox input[type='radio'] + span {
  width: 22px;
  border-radius: 50%;
}
label.radio input[type='radio']:checked + span:after,
label.checkbox input[type='radio']:checked + span:after {
  top: -1px;
  left: 2.8px;
  color: #eecc20;
  content: "\f111";
}
label.radio input[type='radio']:checked + span,
label.checkbox input[type='radio']:checked + span {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #eecc20;
}
label.radio input[type='checkbox']:checked + span,
label.checkbox input[type='checkbox']:checked + span {
  background-color: #eecc20;
  border: 1px solid #eecc20;
}
label.radio input[type='checkbox']:checked + span:after,
label.checkbox input[type='checkbox']:checked + span:after {
  top: -2px;
  left: 2px;
  color: rgba(255, 255, 255, 0.9);
  content: "\f00c";
}
label.radio span,
label.checkbox span {
  display: inline-block;
  position: relative;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
  -moz-transition: background-color, 0.5s, ease, 0s;
  -o-transition: background-color, 0.5s, ease, 0s;
  -webkit-transition: background-color, 0.5s, ease, 0s;
  transition: background-color, 0.5s, ease, 0s;
  font-size: 14px;
}
label.radio b,
label.checkbox b {
  color: #726868;
  display: inline-block;
  position: relative;
  top: -6px;
}

label.checkbox span {
  margin-right: 9px;
}

input[type='button'],
input[type='submit'] {
  padding: 10px 20px;
  background-color: #edf2f7;
  border: 1px solid #e2e8f0;
  -moz-border-radius: 0.375rem;
  -webkit-border-radius: 0.375rem;
  border-radius: 0.375rem;
  color: #4a5568;
  cursor: pointer;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
input[type='button']:hover,
input[type='submit']:hover {
  opacity: 0.85;
}
input[type='button'].primary,
input[type='submit'].primary {
  background-color: #eecc20;
  color: #fff;
}
input[type='button'].success,
input[type='submit'].success {
  background-color: #2fc787;
  color: #fff;
}
input[type='button'].info,
input[type='submit'].info {
  background-color: #32bfc8;
  color: #fff;
}
input[type='button'].warning,
input[type='submit'].warning {
  background-color: #fdbf21;
  color: #fff;
}
input[type='button'].danger,
input[type='submit'].danger {
  background-color: #ef5164;
  color: #fff;
}
input[type='button'].inverse,
input[type='submit'].inverse {
  background-color: #6c757d;
  color: #fff;
}

/****************************************
 	パーツ（ボタン）					*
*****************************************/
a.button {
  display: inline-block;
  padding: 12px 20px 13px;
  background-color: #edf2f7;
  border: 1px solid #e2e8f0;
  -moz-border-radius: 0.375rem;
  -webkit-border-radius: 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.95em;
  color: #4a5568;
  cursor: pointer;
  text-align: center;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a.button:hover {
  opacity: 0.85;
}
a.button.disabled {
  opacity: 0.2;
  pointer-events: none;
}
a.button.primary {
  background-color: #eecc20;
  color: #fff;
}
a.button.success {
  background-color: #2fc787;
  color: #fff;
}
a.button.info {
  background-color: #32bfc8;
  color: #fff;
}
a.button.warning {
  background-color: #fdbf21;
  color: #fff;
}
a.button.danger {
  background-color: #ef5164;
  color: #fff;
}
a.button.inverse {
  background-color: #6c757d;
  color: #fff;
}
a.button span {
  font-size: 0.9em;
}
a.button svg {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: sub;
}
a.button svg:last-child {
  margin-right: 0;
}

/****************************************
 	パーツ（ラベル）					*
*****************************************/
span.label {
  padding: 3px 7px;
  background-color: #edf2f7;
  font-size: 0.9em;
  color: #4a5568;
}
span.label.primary {
  background-color: #eecc20;
  color: #fff;
}
span.label.success {
  background-color: #2fc787;
  color: #fff;
}
span.label.info {
  background-color: #32bfc8;
  color: #fff;
}
span.label.warning {
  background-color: #fdbf21;
  color: #fff;
}
span.label.danger {
  background-color: #ef5164;
  color: #fff;
}
span.label.inverse {
  background-color: #6c757d;
  color: #fff;
}
span.label:last-child svg {
  margin-right: 0;
}
span.label svg {
  width: 14px;
  height: 16px;
  margin-right: 5px;
  vertical-align: text-top;
}
span.label svg:last-child {
  margin-right: 0;
}

/****************************************
 	パーツ（バッヂ）					*
*****************************************/
span.badge {
  padding: 3px 7px;
  background-color: #edf2f7;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 0.9em;
  color: #4a5568;
}
span.badge.primary {
  background-color: #eecc20;
  color: #fff;
}
span.badge.success {
  background-color: #2fc787;
  color: #fff;
}
span.badge.info {
  background-color: #32bfc8;
  color: #fff;
}
span.badge.warning {
  background-color: #fdbf21;
  color: #fff;
}
span.badge.danger {
  background-color: #ef5164;
  color: #fff;
}
span.badge.inverse {
  background-color: #6c757d;
  color: #fff;
}
span.badge svg {
  width: 14px;
  height: 16px;
  margin-right: 5px;
  vertical-align: text-top;
}
span.badge svg:last-child {
  margin-right: 0;
}

/****************************************
 	パーツ（アンダーバー）				*
*****************************************/
span.ubar {
  padding: 0 4px;
  border-bottom: 1px solid #999;
}
span.ubar.primary {
  border-bottom-color: #eecc20;
}
span.ubar.success {
  border-bottom-color: #2fc787;
}
span.ubar.info {
  border-bottom-color: #32bfc8;
}
span.ubar.warning {
  border-bottom-color: #fdbf21;
}
span.ubar.danger {
  border-bottom-color: #ef5164;
}
span.ubar.inverse {
  border-bottom-color: #6c757d;
}
span.ubar svg {
  width: 14px;
  height: 16px;
  margin-right: 5px;
  vertical-align: text-top;
}

/****************************************
 	モーダル							*
*****************************************/
#overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  -moz-animation: overlayFadeIn 0.2s ease-in 0s forwards;
  -webkit-animation: overlayFadeIn 0.2s ease-in 0s forwards;
  animation: overlayFadeIn 0.2s ease-in 0s forwards;
}
#overlay #modal {
  max-height: 90vh;
  min-width: 800px;
  overflow-y: auto;
  padding: 20px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-color: #f1f5f8;
}

@keyframes overlayFadeIn {
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
@-webkit-keyframes overlayFadeIn {
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
/****************************************
 	モーダル（詳細）					*
*****************************************/
#modal table[data-table='column'] tr.hide th {
  color: #ccc;
}
#modal table[data-table='column'] select {
  vertical-align: top;
}
#modal table[data-table='column'] input.valid {
  border-left-width: 3px;
  border-left-color: #32bfc8;
}
#modal table[data-table='column'] select.valid + .select2 .select2-selection {
  border-left-width: 3px;
  border-left-color: #4ab3f4;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px 0 0 5px;
}
#modal table[data-table='action'] {
  margin-top: 0;
}
#modal table[data-table='action'] td {
  padding-top: 0;
  text-align: center;
}
#modal table[data-table='action'] tfoot td a.button {
  width: 150px;
}

/****************************************
 	フラッシュメッセージ				*
*****************************************/
#flashMessage .alert {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: #fff;
  z-index: 999;
  -moz-animation: alertSlideUp 0.66s ease-in 5s forwards;
  -webkit-animation: alertSlideUp 0.66s ease-in 5s forwards;
  animation: alertSlideUp 0.66s ease-in 5s forwards;
}
#flashMessage .alert.primary {
  background-color: #eecc20;
}
#flashMessage .alert.success {
  background-color: #2fc787;
}
#flashMessage .alert.info {
  background-color: #32bfc8;
}
#flashMessage .alert.warning {
  background-color: #fdbf21;
}
#flashMessage .alert.danger {
  background-color: #ef5164;
}
#flashMessage .alert.inverse {
  background-color: #6c757d;
}
#flashMessage .alert.clear {
  background-color: #edf2f7;
}

@keyframes alertSlideUp {
  to {
    padding: 0;
    font-size: 0;
  }
}
@-webkit-keyframes alertSlideUp {
  to {
    padding: 0;
    font-size: 0;
  }
}
/****************************************
 	CakePHP error						*
*****************************************/
pre.cake-error {
  line-height: 1.5em;
  letter-spacing: .5px;
}
pre.cake-error a {
  text-decoration: underline;
}
pre.cake-error .cake-stack-trace {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

/****************************************
 	CakePHP SQLdump						*
*****************************************/
table.cake-sql-log {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #eee;
  font-size: 0.8em;
  line-height: 1.5em;
  letter-spacing: .5px;
}
table.cake-sql-log caption {
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ddd;
}
table.cake-sql-log th, table.cake-sql-log td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
table.cake-sql-log th:first-child, table.cake-sql-log td:first-child {
  text-align: center;
}
table.cake-sql-log tbody tr td span.syntax {
  color: #e30;
}

/****************************************
 	width								*
*****************************************/
.w0 {
  width: 0px !important;
}

.w10 {
  width: 10px !important;
}

.w20 {
  width: 20px !important;
}

.w30 {
  width: 30px !important;
}

.w40 {
  width: 40px !important;
}

.w50 {
  width: 50px !important;
}

.w60 {
  width: 60px !important;
}

.w70 {
  width: 70px !important;
}

.w80 {
  width: 80px !important;
}

.w90 {
  width: 90px !important;
}

.w100 {
  width: 100px !important;
}

.w110 {
  width: 110px !important;
}

.w120 {
  width: 120px !important;
}

.w130 {
  width: 130px !important;
}

.w140 {
  width: 140px !important;
}

.w150 {
  width: 150px !important;
}

.w160 {
  width: 160px !important;
}

.w170 {
  width: 170px !important;
}

.w180 {
  width: 180px !important;
}

.w190 {
  width: 190px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.w300 {
  width: 300px !important;
}

.w350 {
  width: 350px !important;
}

.w400 {
  width: 400px !important;
}

.w450 {
  width: 450px !important;
}

.w500 {
  width: 500px !important;
}

.w600 {
  width: 600px !important;
}

.w700 {
  width: 700px !important;
}

.w800 {
  width: 800px !important;
}

.w900 {
  width: 900px !important;
}

.w1000 {
  width: 1000px !important;
}

/****************************************
 	height								*
*****************************************/
.h0 {
  height: 0px !important;
}

.h10 {
  height: 10px !important;
}

.h20 {
  height: 20px !important;
}

.h30 {
  height: 30px !important;
}

.h40 {
  height: 40px !important;
}

.h50 {
  height: 50px !important;
}

.h60 {
  height: 60px !important;
}

.h70 {
  height: 70px !important;
}

.h80 {
  height: 80px !important;
}

.h90 {
  height: 90px !important;
}

.h100 {
  height: 100px !important;
}

.h110 {
  height: 110px !important;
}

.h120 {
  height: 120px !important;
}

.h130 {
  height: 130px !important;
}

.h140 {
  height: 140px !important;
}

.h150 {
  height: 150px !important;
}

.h160 {
  height: 160px !important;
}

.h170 {
  height: 170px !important;
}

.h180 {
  height: 180px !important;
}

.h190 {
  height: 190px !important;
}

.h200 {
  height: 200px !important;
}

.h250 {
  height: 250px !important;
}

.h300 {
  height: 300px !important;
}

.h350 {
  height: 350px !important;
}

.h400 {
  height: 400px !important;
}

.h450 {
  height: 450px !important;
}

.h500 {
  height: 500px !important;
}

.h600 {
  height: 600px !important;
}

.h700 {
  height: 700px !important;
}

.h800 {
  height: 800px !important;
}

.h900 {
  height: 900px !important;
}

.h1000 {
  height: 1000px !important;
}

/****************************************
 	レスポンシブル						*
*****************************************/
/* ノートパソコン -------------------------------------------------- */
@media only screen and (min-width: 1280px) and (max-width: 1500px) {
  #content main .row {
    display: block;
  }
  #content main .row + .row {
    margin-top: 0;
  }
  #content main .row article {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  section.action ul {
    display: flex;
  }
  section.action ul li {
    width: 25%;
    font-size: 0.75rem;
  }
  section.action ul li:not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  section.action ul li a {
    padding: 10px 0;
  }
}
/* タブレット -------------------------------------------------- */
@media only screen and (min-width: 767px) and (max-width: 1279px) {
  #content main .row {
    display: block;
  }
  #content main .row + .row {
    margin-top: 0;
  }
  #content main .row article {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  section.action ul {
    display: flex;
  }
  section.action ul li {
    width: 25%;
    font-size: 0.75rem;
  }
  section.action ul li:not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  section.action ul li a {
    padding: 10px 0;
  }

  section.view table tbody tr td {
    padding-right: 11px;
  }

  section.form table tbody tr td {
    padding-left: 9px;
    padding-right: 9px;
  }

  input[type='text'],
  input[type='url'],
  input[type='tel'],
  input[type='email'],
  input[type='number'],
  input[type='password'],
  input[type='file'],
  textarea {
    width: 100%;
    min-width: auto;
  }

  .select2 {
    width: auto !important;
  }

  body {
    font-size: .775rem;
  }

  #content nav {
    width: 85px;
  }

  nav h1 {
    padding-left: 0;
    text-align: center;
  }
  nav h1 img {
    width: 2rem;
  }
  nav h1 p {
    display: none;
  }
  nav .list > ul > li:hover:not(.disabled):not(.on) > a:before {
    left: 1.65rem;
  }
  nav .list > ul > li a {
    text-align: center;
    padding-left: 0;
  }
  nav .list > ul > li span {
    display: none;
  }
}
/* スマホ -------------------------------------------------- */
@media only screen and (max-width: 766px) {
  #content main .row {
    display: block;
  }
  #content main .row + .row {
    margin-top: 0;
  }
  #content main .row article {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  section.action ul {
    display: flex;
  }
  section.action ul li {
    width: 25%;
    font-size: 0.75rem;
  }
  section.action ul li:not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  section.action ul li a {
    padding: 10px 0;
  }

  section.view table tbody tr td {
    padding-right: 11px;
  }

  section.form table tbody tr td {
    padding-left: 9px;
    padding-right: 9px;
  }

  input[type='text'],
  input[type='url'],
  input[type='tel'],
  input[type='email'],
  input[type='number'],
  input[type='password'],
  input[type='file'],
  textarea {
    width: 100%;
    min-width: auto;
  }

  .select2 {
    width: auto !important;
  }

  body {
    font-size: .7rem;
    padding: 1.25rem 0;
  }

  #content {
    display: block;
  }
  #content nav {
    width: 100%;
    padding-bottom: 0;
  }
  #content header {
    display: none;
  }
  #content main {
    border-left: none;
  }
  #content main .row article {
    margin-top: 15px;
    padding: 15px 20px;
  }

  nav h1 {
    display: inline-block;
    height: 55px;
    padding-top: 0;
  }
  nav #menuTrigger {
    display: inline-block;
  }
  nav .list {
    display: none;
    margin-bottom: 20px;
  }
  nav .list > ul {
    margin-top: .5rem;
    padding-top: .5rem;
  }
  nav .list > ul > li a {
    display: block;
    position: relative;
    height: 33px;
    padding-top: 9px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  }
  nav .list > ul > li svg {
    width: 16px;
    height: 16px;
  }
  nav .list > ul > li span svg {
    top: 10px;
  }
  nav .list > ul > li > ul > li > a {
    padding-top: 10px;
    height: 40px;
  }

  section.view table tfoot tr td input[type='button'],
  section.view table tfoot tr td input[type='submit'],
  section.view table tfoot tr td a.button,
  section.form table tfoot tr td input[type='button'],
  section.form table tfoot tr td input[type='submit'],
  section.form table tfoot tr td a.button {
    width: auto;
  }
}