@charset "UTF-8";
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;
}

/****************************************
 	基本設定							*
*****************************************/
@font-face {
  font-family: "Oswald Light";
  src: url("../fonts/Oswald-Light.eot?") format("eot"), url("../fonts/Oswald-Light.woff") format("woff"), url("../fonts/Oswald-Light.ttf") format("truetype"), url("../fonts/Oswald-Light.svg#Oswald-Light") format("svg");
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 13px;
  background-color: #18191c;
  color: #898989;
}

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

nav #user,
nav ul span,
main article h2,
footer .left p {
  font-family: "Oswald Light";
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #898989;
  -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:hover {
  opacity: 0.75;
}

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

/****************************************
 	ログイン							*
*****************************************/
#login {
  display: flex;
  height: 90vh;
  justify-content: center;
  align-items: center;
}
#login .wrapper {
  position: relative;
}
#login .wrapper #logo {
  margin-bottom: 30px;
}
#login .wrapper #logo h1 {
  text-align: center;
}
#login .wrapper #user ul {
  overflow: hidden;
}
#login .wrapper #user ul li {
  float: left;
  width: 150px;
  height: 250px;
  padding: 30px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwMjIyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-linear-gradient(270deg, #202226, #18191c);
  background: -webkit-linear-gradient(270deg, #202226, #18191c);
  background: linear-gradient(180deg, #202226, #18191c);
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
}
#login .wrapper #user ul li:not(:first-child) {
  margin-left: 15px;
}
#login .wrapper #user ul li.select {
  width: 300px;
  margin: 0;
  pointer-events: none;
}
#login .wrapper #user ul li.hide {
  width: 0;
  margin: 0;
  padding: 0;
}
#login .wrapper #user ul li.hide img {
  width: 0;
}
#login .wrapper #user ul li.hide p {
  width: 0;
  font-size: 0;
}
#login .wrapper #user ul li.hide span {
  width: 0;
  font-size: 0;
}
#login .wrapper #user ul li img {
  width: 125px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#login .wrapper #user ul li p {
  padding-top: 15px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
#login .wrapper #user ul li span {
  display: block;
  padding-top: 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}
#login .wrapper #form {
  position: absolute;
  width: 100%;
}
#login .wrapper #form ul li:not(:first-child) {
  margin-top: 5px;
}
#login .wrapper #form ul li input[type='submit'] {
  width: 100%;
}
#login .wrapper #number {
  margin-bottom: 10px;
}
#login .wrapper #number ul {
  overflow: hidden;
}
#login .wrapper #number ul li {
  float: left;
  margin-bottom: 5px;
}
#login .wrapper #number ul li:not(:first-child) {
  margin-left: 5px;
}
#login .wrapper #number ul li a {
  display: block;
  width: 50px;
  height: 50px;
  padding-top: 15px;
  border: 1px solid #999;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
}
#login .wrapper #number ul li a:hover {
  background-color: #18191c;
}

/****************************************
 	レイアウト							*
*****************************************/
#content {
  display: flex;
}
#content nav {
  width: 200px;
}
#content main {
  flex: 1;
  padding: 20px;
}
#content main .row {
  display: flex;
}
#content main .row + .row {
  margin-top: 30px;
}
#content main .row article {
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  padding: 20px;
}
#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 aside {
  width: 300px;
}
#content aside.close {
  width: 0;
}
#content aside.close .tab,
#content aside.close .list {
  width: 0;
  display: none;
}

/****************************************
 	ヘッダー							*
*****************************************/
header {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwMjIyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-linear-gradient(0deg, #202226, #18191c);
  background: -webkit-linear-gradient(0deg, #202226, #18191c);
  background: linear-gradient(90deg, #202226, #18191c);
  -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;
  overflow: hidden;
}
header .left {
  float: left;
  overflow: hidden;
}
header .right {
  float: right;
  padding-right: 20px;
  overflow: hidden;
}
header #logo {
  float: left;
}
header #logo a {
  display: block;
  width: 180px;
  padding: 30px 0 20px;
  text-align: center;
}
header ul.icon {
  float: left;
  overflow: hidden;
  padding-top: 30px;
}
header ul.icon li {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}
header ul.icon li a {
  color: #bbb;
  -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;
}
header ul.icon li a[data-action='menu'] {
  display: none;
}
header ul.icon li a[data-action='aside'].close i {
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
header ul.icon li a i {
  font-size: 32px;
}

/****************************************
 	ナビゲーション						*
*****************************************/
nav {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwMjIyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-linear-gradient(270deg, #202226, #18191c);
  background: -webkit-linear-gradient(270deg, #202226, #18191c);
  background: linear-gradient(180deg, #202226, #18191c);
  -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;
}
nav #user {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
nav #user img {
  width: 72px;
  height: 72px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
nav #user p {
  padding-top: 15px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
nav #user span {
  display: block;
  padding-top: 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
}
nav ul li {
  position: relative;
  width: 50%;
  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;
}
nav ul li.on, nav ul li:hover {
  background: #18191c;
}
nav ul li:not(:last-child) {
  border-bottom: 1px solid rgba(32, 32, 32, 0.75);
}
nav ul li a {
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
}
nav ul li a i {
  padding-bottom: 10px;
  font-size: 20px;
}
nav ul li a p {
  margin-bottom: 7px;
  font-size: 10px;
  color: #e5e5e5;
}
nav ul li a span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
nav ul li span.number {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 18px;
  height: 18px;
  background-color: #000;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
}
nav ul li span.number.primary {
  background-color: #3d5afe;
}
nav ul li span.number.success {
  background-color: #5bb75b;
}
nav ul li span.number.info {
  background-color: #04aec6;
}
nav ul li span.number.warning {
  background-color: #f09238;
}
nav ul li span.number.danger {
  background-color: #ff4080;
}
nav ul li span.number.inverse {
  background-color: #363636;
}
nav ul li span.number.clear {
  background-color: #fff;
}

/****************************************
 	メイン								*
*****************************************/
main article {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwMjIyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-linear-gradient(270deg, #202226, #18191c);
  background: -webkit-linear-gradient(270deg, #202226, #18191c);
  background: linear-gradient(180deg, #202226, #18191c);
  -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;
}
main article h2 {
  margin-bottom: 10px;
  font-size: 1.85em;
  color: #e5e5e5;
}
main article h2:not(:first-child) {
  margin-top: 30px;
}
main article h2 span {
  margin-left: 10px;
  font-size: 0.5em;
  color: #999;
}

/****************************************
 	セクション（リスト）				*
*****************************************/
section.list table {
  width: 100%;
}
section.list table caption {
  padding: 15px 0;
  border-bottom: 1px dotted #ccc;
  color: #fff;
  font-size: 1.25em;
}
section.list table th, section.list table td {
  padding: 20px 10px;
  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 rgba(80, 80, 80, 0.5);
}
section.list table thead tr th {
  font-size: 0.8em;
  line-height: 1.5em;
}
section.list table tbody tr {
  -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 rgba(64, 64, 64, 0.3);
}
section.list table tbody tr.none td {
  padding-top: 75px;
  padding-bottom: 75px;
}
section.list table tbody tr[data-href]:hover {
  background-color: #2a2a2a;
  cursor: pointer;
}
section.list table tbody tr td {
  color: #fff;
}
section.list table tbody tr td:empty:before {
  content: "--";
  color: #333;
}
section.list table tbody tr td.content {
  font-size: 0.8em;
}
section.list table tbody tr td p {
  margin-top: 2px;
  font-size: 0.75em;
  color: #999;
}
section.list table tbody tr td a {
  color: #fff;
  text-decoration: underline;
}
section.list table tbody tr td span.unit {
  margin-left: 5px;
  font-size: 0.75em;
  color: #999;
}
section.list table tbody tr td span.variable {
  color: #e30;
}
section.list table tbody tr td span.variable.site {
  color: #1e79a9;
}
section.list table tfoot {
  border-bottom: 1px solid rgba(80, 80, 80, 0.5);
}

section.paginator {
  padding: 20px 0;
  background-color: transparent;
  box-shadow: none;
}
section.paginator ul {
  text-align: center;
}
section.paginator ul li {
  display: inline-block;
}
section.paginator ul li.active a {
  border: 1px solid #fff;
  color: #fff;
}
section.paginator ul li:hover a {
  border: 1px solid #ccc;
  color: #c;
}
section.paginator ul li:not(:last-child) {
  margin-right: 10px;
}
section.paginator ul li a {
  display: inline-block;
  width: 36px;
  height: 36px;
  padding-top: 10px;
  text-align: center;
}
section.paginator ul li a svg {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

/****************************************
 	セクション（ビュー）				*
*****************************************/
section.view table {
  width: 100%;
}
section.view table caption {
  padding: 15px 0;
  border-bottom: 1px dotted #ccc;
  color: #fff;
  font-size: 1.25em;
}
section.view table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(64, 64, 64, 0.3);
}
section.view table tbody tr th, section.view table tbody tr td {
  padding-top: 25px;
  padding-bottom: 25px;
  line-height: 1.25em;
}
section.view table tbody tr th {
  width: 20%;
}
section.view table tbody tr td {
  word-break: break-all;
  color: #fff;
}
section.view table tbody tr td:empty:before {
  content: "--";
  color: #333;
}
section.view table tbody tr td.content {
  font-size: 0.8em;
}
section.view table tbody tr td a {
  color: #fff;
  text-decoration: underline;
}
section.view table tbody tr td span.unit {
  margin-left: 5px;
  font-size: 0.75em;
  color: #999;
}
section.view table tbody tr td span.variable {
  color: #e30;
}
section.view table tbody tr td span.variable.site {
  color: #1e79a9;
}
section.view table tbody tr td table {
  width: auto;
}
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 th {
  width: auto;
  padding: 0 15px 5px;
  font-size: 0.75em;
  color: #898989;
}
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 caption {
  padding: 15px 0;
  border-bottom: 1px dotted #ccc;
  color: #fff;
  font-size: 1.25em;
}
section.form table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(64, 64, 64, 0.3);
}
section.form table tbody tr[data-error] td input[type='text'],
section.form table tbody tr[data-error] td input[type='url'],
section.form table tbody tr[data-error] td input[type='tel'],
section.form table tbody tr[data-error] td input[type='email'],
section.form table tbody tr[data-error] td input[type='password'],
section.form table tbody tr[data-error] td input[type='file'],
section.form table tbody tr[data-error] td textarea,
section.form table tbody tr[data-error] td select {
  border-left-color: #ff4080;
}
section.form table tbody tr.static td {
  padding-top: 25px;
  padding-bottom: 25px;
  color: #fff;
}
section.form table tbody tr th, section.form table tbody tr td {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.25em;
}
section.form table tbody tr th {
  width: 20%;
}
section.form table tbody tr td:empty:before {
  content: "--";
  color: #333;
}
section.form table tbody tr td.content {
  font-size: 0.8em;
}
section.form table tbody tr td input[type='text'] + input[type='text'],
section.form table tbody tr td input[type='text'] + select,
section.form table tbody tr td select + input[type='text'],
section.form table tbody tr td select + select {
  margin-left: 5px;
}
section.form table tbody tr td a {
  color: #fff;
  text-decoration: underline;
}
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[type='text'],
section.form table tbody tr td span.unit + input[type='url'],
section.form table tbody tr td span.unit + input[type='tel'],
section.form table tbody tr td span.unit + input[type='email'],
section.form table tbody tr td span.unit + input[type='password'],
section.form table tbody tr td span.unit + input[type='file'],
section.form table tbody tr td span.unit + select {
  margin-left: 6px;
}
section.form table tbody tr td span.variable {
  color: #e30;
}
section.form table tbody tr td span.variable.site {
  color: #1e79a9;
}
section.form table tbody tr td table {
  width: auto;
}
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: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: #ff4080;
}
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 {
  margin-top: 20px;
}
section.action ul li.on a {
  background-color: #2a2a2a;
}
section.action ul li:not(:last-child) {
  margin-bottom: 10px;
}
section.action ul li.primary a {
  color: #3d5afe;
}
section.action ul li.success a {
  color: #5bb75b;
}
section.action ul li.info a {
  color: #04aec6;
}
section.action ul li.warning a {
  color: #f09238;
}
section.action ul li.danger a {
  color: #ff4080;
}
section.action ul li.inverse a {
  color: #363636;
}
section.action ul li.clear a {
  color: #fff;
}
section.action ul li a {
  display: block;
  padding: 20px 0;
  border: 1px solid #252528;
  text-align: center;
  color: #fff;
}
section.action ul li a:hover {
  background-color: #2a2a2a;
}
section.action ul li a i {
  margin-right: 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: #202226;
}

/****************************************
 	サイド								*
*****************************************/
aside {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwMjIyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-linear-gradient(270deg, #202226, #18191c);
  background: -webkit-linear-gradient(270deg, #202226, #18191c);
  background: linear-gradient(180deg, #202226, #18191c);
  -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;
}
aside .tab ul {
  display: flex;
}
aside .tab ul li {
  flex: 1;
  text-align: center;
  border-bottom: 2px solid #666;
}
aside .tab ul li.on {
  border-bottom-color: #1e79a9;
}
aside .tab ul li.on a {
  color: #1e79a9;
}
aside .tab ul li:hover a {
  color: #1e79a9;
}
aside .tab ul li a {
  display: block;
  padding-top: 30px;
  padding-bottom: 25px;
  -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;
}
aside .tab ul li a i {
  font-size: 20px;
}
aside .list {
  padding-top: 30px;
  overflow-y: auto;
  height: calc(100% - 132px);
}
aside .list ul:not(:first-child) {
  margin-top: 30px;
}
aside .list ul li {
  padding: 10px 30px;
}
aside .list ul li dl {
  overflow: hidden;
}
aside .list ul li dl dt {
  position: relative;
  float: left;
  width: 45px;
}
aside .list ul li dl dt img {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
aside .list ul li dl dt span {
  position: absolute;
  display: block;
  right: 6px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #333;
  background-color: #fff;
}
aside .list ul li dl dt span.primary {
  background-color: #3d5afe;
}
aside .list ul li dl dt span.success {
  background-color: #5bb75b;
}
aside .list ul li dl dt span.info {
  background-color: #04aec6;
}
aside .list ul li dl dt span.warning {
  background-color: #f09238;
}
aside .list ul li dl dt span.danger {
  background-color: #ff4080;
}
aside .list ul li dl dt span.inverse {
  background-color: #363636;
}
aside .list ul li dl dt span.clear {
  background-color: #fff;
}
aside .list ul li dl dd {
  float: left;
  margin-left: 25px;
  padding-top: 10px;
}
aside .list ul li dl dd p {
  color: #c5c5c5;
}
aside .list ul li dl dd span {
  font-size: 10px;
}

/****************************************
 	フッター							*
*****************************************/
footer {
  padding: 50px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjxzdG9wIG9mZnNldD0iNDglIiBzdG9wLWNvbG9yPSIjMTgxOTFjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjAyMjI2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -moz-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: -webkit-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: linear-gradient(90deg, #18191c, #18191c 48%, #202226);
  -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;
  overflow: hidden;
}
footer .left {
  float: left;
  overflow: hidden;
}
footer .right {
  float: right;
  overflow: hidden;
}
footer p {
  letter-spacing: 1px;
}
footer ul {
  overflow: hidden;
}
footer ul li {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
}
footer ul li a {
  -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;
}
footer ul li a:hover {
  color: #1e79a9;
}

/****************************************
 	パーツ（フォーム）					*
*****************************************/
input[type='text'],
input[type='url'],
input[type='tel'],
input[type='email'],
input[type='password'],
input[type='file'] {
  width: 100%;
  padding: 10px;
  background-color: transparent;
  border: 1px solid #666;
  color: #fff;
}
input[type='text']:invalid,
input[type='url']:invalid,
input[type='tel']:invalid,
input[type='email']:invalid,
input[type='password']:invalid,
input[type='file']:invalid {
  box-shadow: none;
  border-left-color: #ff4080;
}
input[type='text']::placeholder,
input[type='url']::placeholder,
input[type='tel']::placeholder,
input[type='email']::placeholder,
input[type='password']::placeholder,
input[type='file']::placeholder {
  color: #bbb;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  background-color: transparent;
  border: 1px solid #666;
  color: #fff;
}
textarea:invalid {
  box-shadow: none;
  border-left-color: #ff4080;
}
textarea::placeholder {
  color: #bbb;
}

label.radio {
  padding-left: 5px;
  padding-right: 5px;
  color: #fff;
}
label.radio input[type='radio'] {
  margin-right: 10px;
}

label.checkbox {
  padding-left: 5px;
  padding-right: 5px;
  color: #fff;
}
label.checkbox input[type='checkbox'] {
  margin-right: 10px;
}

select {
  width: 100%;
  padding: 9px 10px;
  background-color: transparent;
  border: 1px solid #666;
  color: #fff;
}
select:invalid {
  box-shadow: none;
  border-left-color: #ff4080;
}
select[multiple] {
  height: 200px;
  padding: 0;
}
select[multiple] option {
  padding: 10px 15px;
  color: #fff;
}

input[type='button'],
input[type='submit'] {
  padding: 10px 20px;
  background-color: #222;
  border: 1px solid #666;
  color: #fff;
  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 {
  background-color: #333;
}
input[type='button'].primary,
input[type='submit'].primary {
  color: #3d5afe;
}
input[type='button'].success,
input[type='submit'].success {
  color: #5bb75b;
}
input[type='button'].info,
input[type='submit'].info {
  color: #04aec6;
}
input[type='button'].warning,
input[type='submit'].warning {
  color: #f09238;
}
input[type='button'].danger,
input[type='submit'].danger {
  color: #ff4080;
}
input[type='button'].inverse,
input[type='submit'].inverse {
  color: #363636;
}
input[type='button'].clear,
input[type='submit'].clear {
  color: #fff;
}

/****************************************
 	パーツ（ボタン）					*
*****************************************/
a.button {
  display: inline-block;
  padding: 12px 20px 13px;
  background-color: #222;
  border: 1px solid #666;
  font-size: 0.9em;
  color: #fff;
  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 {
  background-color: #333;
}
a.button.primary {
  color: #3d5afe;
}
a.button.success {
  color: #5bb75b;
}
a.button.info {
  color: #04aec6;
}
a.button.warning {
  color: #f09238;
}
a.button.danger {
  color: #ff4080;
}
a.button.inverse {
  color: #363636;
}
a.button.clear {
  color: #fff;
}

/****************************************
 	パーツ（ラベル）					*
*****************************************/
span.label {
  padding: 3px 7px;
  font-size: 0.75em;
  color: #fff;
}
span.label.primary {
  background-color: #3d5afe;
}
span.label.success {
  background-color: #5bb75b;
}
span.label.info {
  background-color: #04aec6;
}
span.label.warning {
  background-color: #f09238;
}
span.label.danger {
  background-color: #ff4080;
}
span.label.inverse {
  background-color: #363636;
}
span.label.clear {
  background-color: #fff;
  color: #666;
}

/****************************************
 	パーツ（バッヂ）					*
*****************************************/
span.badge {
  padding: 3px 7px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 0.75em;
  color: #fff;
}
span.badge.primary {
  background-color: #3d5afe;
}
span.badge.success {
  background-color: #5bb75b;
}
span.badge.info {
  background-color: #04aec6;
}
span.badge.warning {
  background-color: #f09238;
}
span.badge.danger {
  background-color: #ff4080;
}
span.badge.inverse {
  background-color: #363636;
}
span.badge.clear {
  background-color: #fff;
  color: #666;
}

/****************************************
 	パーツ（アンダーバー）				*
*****************************************/
span.ubar {
  padding: 5px;
  border-bottom: 1px solid #fff;
}
span.ubar.primary {
  border-bottom-color: #3d5afe;
}
span.ubar.success {
  border-bottom-color: #5bb75b;
}
span.ubar.info {
  border-bottom-color: #04aec6;
}
span.ubar.warning {
  border-bottom-color: #f09238;
}
span.ubar.danger {
  border-bottom-color: #ff4080;
}
span.ubar.inverse {
  border-bottom-color: #363636;
}
span.ubar.clear {
  border-bottom-color: #fff;
}

/****************************************
 	パーツ（アラート）					*
*****************************************/
#flashMessage .alert {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: #fff;
  -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: #3d5afe;
}
#flashMessage .alert.success {
  background-color: #5bb75b;
}
#flashMessage .alert.info {
  background-color: #04aec6;
}
#flashMessage .alert.warning {
  background-color: #f09238;
}
#flashMessage .alert.danger {
  background-color: #ff4080;
}
#flashMessage .alert.inverse {
  background-color: #363636;
}
#flashMessage .alert.clear {
  background-color: #fff;
}

@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: 0.5px;
}
pre.cake-error a {
  text-decoration: underline;
}
pre.cake-error .cake-stack-trace {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #202226;
}
pre.cake-error code span {
  color: #ccc !important;
}

/****************************************
 	CakePHP SQLdump						*
*****************************************/
table.cake-sql-log {
  width: 100%;
  line-height: 1.25em;
  letter-spacing: 0.5px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjxzdG9wIG9mZnNldD0iNDglIiBzdG9wLWNvbG9yPSIjMTgxOTFjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjAyMjI2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -moz-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: -webkit-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: linear-gradient(90deg, #18191c, #18191c 48%, #202226);
  -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;
}
table.cake-sql-log caption {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4MTkxYyIvPjxzdG9wIG9mZnNldD0iNDglIiBzdG9wLWNvbG9yPSIjMTgxOTFjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjAyMjI2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -moz-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: -webkit-linear-gradient(0deg, #18191c, #18191c 48%, #202226);
  background: linear-gradient(90deg, #18191c, #18191c 48%, #202226);
  -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;
}
table.cake-sql-log th, table.cake-sql-log td {
  padding: 5px;
}
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: #ccc;
}

/****************************************
 	調整用								*
*****************************************/
.wauto {
  width: auto !important;
}

.hauto {
  height: auto !important;
}

.w0 {
  width: 0px !important;
}

.h0 {
  height: 0px !important;
}

.w10 {
  width: 10px !important;
}

.h10 {
  height: 10px !important;
}

.w20 {
  width: 20px !important;
}

.h20 {
  height: 20px !important;
}

.w30 {
  width: 30px !important;
}

.h30 {
  height: 30px !important;
}

.w40 {
  width: 40px !important;
}

.h40 {
  height: 40px !important;
}

.w50 {
  width: 50px !important;
}

.h50 {
  height: 50px !important;
}

.w60 {
  width: 60px !important;
}

.h60 {
  height: 60px !important;
}

.w70 {
  width: 70px !important;
}

.h70 {
  height: 70px !important;
}

.w80 {
  width: 80px !important;
}

.h80 {
  height: 80px !important;
}

.w90 {
  width: 90px !important;
}

.h90 {
  height: 90px !important;
}

.w100 {
  width: 100px !important;
}

.h100 {
  height: 100px !important;
}

.w110 {
  width: 110px !important;
}

.h110 {
  height: 110px !important;
}

.w120 {
  width: 120px !important;
}

.h120 {
  height: 120px !important;
}

.w130 {
  width: 130px !important;
}

.h130 {
  height: 130px !important;
}

.w140 {
  width: 140px !important;
}

.h140 {
  height: 140px !important;
}

.w150 {
  width: 150px !important;
}

.h150 {
  height: 150px !important;
}

.w160 {
  width: 160px !important;
}

.h160 {
  height: 160px !important;
}

.w170 {
  width: 170px !important;
}

.h170 {
  height: 170px !important;
}

.w180 {
  width: 180px !important;
}

.h180 {
  height: 180px !important;
}

.w190 {
  width: 190px !important;
}

.h190 {
  height: 190px !important;
}

.w200 {
  width: 200px !important;
}

.h200 {
  height: 200px !important;
}

.w250 {
  width: 250px !important;
}

.h250 {
  height: 250px !important;
}

.w300 {
  width: 300px !important;
}

.h300 {
  height: 300px !important;
}

.w350 {
  width: 350px !important;
}

.h350 {
  height: 350px !important;
}

.w400 {
  width: 400px !important;
}

.h400 {
  height: 400px !important;
}

.w450 {
  width: 450px !important;
}

.h450 {
  height: 450px !important;
}

.w500 {
  width: 500px !important;
}

.h500 {
  height: 500px !important;
}

.w600 {
  width: 600px !important;
}

.h600 {
  height: 600px !important;
}

.w700 {
  width: 700px !important;
}

.h700 {
  height: 700px !important;
}

.w800 {
  width: 800px !important;
}

.h800 {
  height: 800px !important;
}

.w900 {
  width: 900px !important;
}

.h900 {
  height: 900px !important;
}

.w1000 {
  width: 1000px !important;
}

.h1000 {
  height: 1000px !important;
}

/****************************************
 	レスポンシブル						*
*****************************************/
/* タブレット -------------------------------------------------- */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  	/****************************************
   		レイアウト							*
  	*****************************************/
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 71px;
  }

  #content {
    margin-top: 71px;
  }
  #content nav {
    display: none;
    position: fixed;
    width: 100%;
    top: 71px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #content main {
    padding: 10px;
  }
  #content main .row {
    display: block;
  }
  #content main .row article {
    padding: 10px;
  }
  #content main .row article[class^='col'] {
    width: 100%;
  }
  #content main .row article + article {
    margin-top: 20px;
    margin-left: 0;
  }

  .open #content nav {
    display: block;
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header #logo a {
    padding: 20px 0 10px;
  }
  header .right {
    padding-right: 10px;
  }
  header ul.icon {
    padding-top: 20px;
  }
  header ul.icon li a[data-action="menu"] {
    display: inline-block;
  }
  header ul.icon li a[data-action="menu"] i.fa-times {
    display: none;
  }

  .open header ul.icon li a[data-action="menu"] i.fa-bars {
    display: none;
  }
  .open header ul.icon li a[data-action="menu"] i.fa-times {
    display: inline-block;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav ul li {
    width: 25%;
  }

  /****************************************
  	セクション（リスト）				*
  *****************************************/
  section.list table th.pc, section.list table td.pc {
    display: none;
  }
  section.list table thead tr th {
    width: auto;
  }
  section.list table tbody tr td {
    word-break: break-word;
  }
  section.list table tbody tr td a, section.list table tbody tr td span {
    word-break: keep-all;
  }

  /****************************************
  	セクション（ビュー）				*
  *****************************************/
  section.view table tbody tr th {
    width: 25%;
  }
  section.view table tbody tr td {
    padding: 10px 10px 0 10px;
    word-break: break-all;
  }
  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: auto;
  }

  /****************************************
  	セクション（フォーム）				*
  *****************************************/
  section.form table tbody tr th {
    width: 25%;
  }
  section.form table tbody tr td {
    padding: 10px 10px 0 10px;
    word-break: break-all;
  }
  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;
  }

  /****************************************
  	セクション（アクション）			*
  *****************************************/
  section.action ul {
    display: flex;
  }
  section.action ul li a {
    padding: 10px;
  }

  /****************************************
  	フッター							*
  *****************************************/
  footer {
    padding: 30px;
  }
  footer .right {
    float: left;
    margin-top: 15px;
  }
  footer ul li {
    padding-left: 0;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /****************************************
  	パーツ（フォーム）					*
  *****************************************/
  input[type='text'],
  input[type='url'],
  input[type='tel'],
  input[type='email'],
  input[type='password'],
  input[type='file'] {
    padding: 7px;
  }

  textarea {
    padding: 7px;
  }

  label.radio {
    padding-left: 3px;
    padding-right: 3px;
  }
  label.radio input[type='radio'] {
    margin-right: 7px;
  }

  label.checkbox {
    padding-left: 3px;
    padding-right: 3px;
  }
  label.checkbox input[type='checkbox'] {
    margin-right: 7px;
  }

  select {
    padding: 7px 8px;
  }
  select[multiple] option {
    padding: 7px 12px;
  }

  input[type='button'],
  input[type='submit'] {
    padding: 5px 10px;
  }

  /****************************************
  	パーツ（ボタン）					*
  *****************************************/
  a.button {
    padding: 6px 10px 7px;
    font-size: 0.7em;
  }

  /****************************************
  	調整用								*
  *****************************************/
  .w300 {
    width: auto !important;
  }

  .w350 {
    width: auto !important;
  }

  .w400 {
    width: auto !important;
  }

  .w450 {
    width: auto !important;
  }

  .w500 {
    width: auto !important;
  }

  .w600 {
    width: auto !important;
  }

  .w700 {
    width: auto !important;
  }

  .w800 {
    width: auto !important;
  }

  .w900 {
    width: auto !important;
  }

  .w1000 {
    width: auto !important;
  }

  /****************************************
  	基本設定							*
  *****************************************/
  body {
    font-size: 12px;
  }

  input, select, textarea, button, option {
    font-size: 11px;
  }
}
/* スマホ -------------------------------------------------- */
@media only screen and (max-width: 766px) {
  	/****************************************
   		レイアウト							*
  	*****************************************/
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 71px;
  }

  #content {
    margin-top: 71px;
  }
  #content nav {
    display: none;
    position: fixed;
    width: 100%;
    top: 71px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #content main {
    padding: 10px;
  }
  #content main .row {
    display: block;
  }
  #content main .row article {
    padding: 10px;
  }
  #content main .row article[class^='col'] {
    width: 100%;
  }
  #content main .row article + article {
    margin-top: 20px;
    margin-left: 0;
  }

  .open #content nav {
    display: block;
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header #logo a {
    padding: 20px 0 10px;
  }
  header .right {
    padding-right: 10px;
  }
  header ul.icon {
    padding-top: 20px;
  }
  header ul.icon li a[data-action="menu"] {
    display: inline-block;
  }
  header ul.icon li a[data-action="menu"] i.fa-times {
    display: none;
  }

  .open header ul.icon li a[data-action="menu"] i.fa-bars {
    display: none;
  }
  .open header ul.icon li a[data-action="menu"] i.fa-times {
    display: inline-block;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav ul li {
    width: 25%;
  }

  /****************************************
  	セクション（リスト）				*
  *****************************************/
  section.list table th.pc, section.list table td.pc {
    display: none;
  }
  section.list table thead tr th {
    width: auto;
  }
  section.list table tbody tr td {
    word-break: break-word;
  }
  section.list table tbody tr td a, section.list table tbody tr td span {
    word-break: keep-all;
  }

  /****************************************
  	セクション（ビュー）				*
  *****************************************/
  section.view table tbody tr th {
    width: 25%;
  }
  section.view table tbody tr td {
    padding: 10px 10px 0 10px;
    word-break: break-all;
  }
  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: auto;
  }

  /****************************************
  	セクション（フォーム）				*
  *****************************************/
  section.form table tbody tr th {
    width: 25%;
  }
  section.form table tbody tr td {
    padding: 10px 10px 0 10px;
    word-break: break-all;
  }
  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;
  }

  /****************************************
  	セクション（アクション）			*
  *****************************************/
  section.action ul {
    display: flex;
  }
  section.action ul li a {
    padding: 10px;
  }

  /****************************************
  	フッター							*
  *****************************************/
  footer {
    padding: 30px;
  }
  footer .right {
    float: left;
    margin-top: 15px;
  }
  footer ul li {
    padding-left: 0;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /****************************************
  	パーツ（フォーム）					*
  *****************************************/
  input[type='text'],
  input[type='url'],
  input[type='tel'],
  input[type='email'],
  input[type='password'],
  input[type='file'] {
    padding: 7px;
  }

  textarea {
    padding: 7px;
  }

  label.radio {
    padding-left: 3px;
    padding-right: 3px;
  }
  label.radio input[type='radio'] {
    margin-right: 7px;
  }

  label.checkbox {
    padding-left: 3px;
    padding-right: 3px;
  }
  label.checkbox input[type='checkbox'] {
    margin-right: 7px;
  }

  select {
    padding: 7px 8px;
  }
  select[multiple] option {
    padding: 7px 12px;
  }

  input[type='button'],
  input[type='submit'] {
    padding: 5px 10px;
  }

  /****************************************
  	パーツ（ボタン）					*
  *****************************************/
  a.button {
    padding: 6px 10px 7px;
    font-size: 0.7em;
  }

  /****************************************
  	調整用								*
  *****************************************/
  .w300 {
    width: auto !important;
  }

  .w350 {
    width: auto !important;
  }

  .w400 {
    width: auto !important;
  }

  .w450 {
    width: auto !important;
  }

  .w500 {
    width: auto !important;
  }

  .w600 {
    width: auto !important;
  }

  .w700 {
    width: auto !important;
  }

  .w800 {
    width: auto !important;
  }

  .w900 {
    width: auto !important;
  }

  .w1000 {
    width: auto !important;
  }

  /****************************************
  	基本設定							*
  *****************************************/
  body {
    font-size: 11px;
  }

  input, select, textarea, button, option {
    font-size: 10px;
  }
}