@charset "UTF-8";

/*SR　岡追加*/
:root {
    /*    --breadcrumb-color: #fddfd4f1;
    --main-bg-color: #ffc9b5;
    --main-font-color: #ff6933;
    --main-border-color: #ff7f50;
    --table-row-color-odd: #fff7f4;
    --table-row-color-even: #ffc9b5;
    --table-link-font-color: #29a0cc;
    --shadow-color: #cc653f;
    --caution-font-color: #ff0000;
    --message-bg-color: #ffeeee;
    --message-border-color: #c9171e;
    --message-font-color: #c9171e;
*/
    --breadcrumb-color: #ccc; /* #fddfd4f1; */
    --main-bg-color: #fff; /* #ffc9b5; */
    --main-font-color: #e6a101; /* #ff6933; */
    --main-border-color: #999; /* #ff7f50; */
    --table-row-color-odd: #fff; /* #fff7f4; */
    --table-row-color-even: #fff; /* #ffc9b5; */
    --table-link-font-color: #29a0cc;
    --shadow-color: #cc653f;
    --caution-font-color: #ff0000;
    --message-bg-color: #ffeeee;
    --message-border-color: #c9171e;
    --message-font-color: #c9171e;
    /*公開画面系*/
    --published-shadow-color: #00a381;
    --published-border-color: #00cca0;
    --published-head-color: #00b28b;
    --published-font-color: #00ddad;
    --published-bg-color: #52ccb1;
    --published-dark: #00997d;
    --published-footer: #00b392;
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*--Layout--*/
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: normal;
}

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

html {
  background: #0068b7;
}

@media (max-width: 568px) {
  html {
    background: #fff;
  }
}

body {
  position: relative;
  font-family: sans-serif;
  border-top: solid 10px var(--main-border-color);
  font-family: sans-serif;
  background: #fff;
}

body * {
  box-sizing: border-box;
}

body img {
  max-width: 100%;
}

a {
  color: var(--main-font-color);
  text-decoration: none;
  transition: 0.4s;
}

a:hover {
  color: #c00;
}

a:hover img {
  opacity: 0.8;
}

/* float left を追加 */
header#header {
    width: 1200px;
    float: left;
    margin: auto;
    padding: 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1200px) {
  header#header {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

header#header .system-name h1 {
  max-width: 200px;
}

header#header .system-name p {
  color: var(--main-font-color);
}

header#header .system-info {
  color: var(--main-font-color);
}

header#header .account-name:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0.5em;
  content: "";
}

header#header .logout-btn {
  text-align: right;
}

header#header .logout-btn a {
  display: inline-block;
  margin: 10px 0;
  padding: 5px 3em;
  border: solid 1px var(--main-border-color);
  color: var(--main-font-color);
  font-size: 0.875rem;
}

header#header .logout-btn a:hover {
  background: var(--main-bg-color);
  color: #fff;
}

@media (max-width: 568px) {
  header#header {
    flex-direction: column;
    align-items: flex-start;
  }
  header#header .system-name {
    margin-bottom: 20px;
  }
  header#header .logout-btn {
    text-align: left;
  }
}

.logo {
  max-width: 200px;
  margin: auto;
}

/* パンくずリスト */
#breadcrumb {
  padding: 10px 0;
  background: var(--breadcrumb-color);
  font-size: 0.875rem;
}

#breadcrumb ul {
  width: 1200px;
  margin: auto;
  list-style: none;
  display: flex;
}

@media (max-width: 1200px) {
  #breadcrumb ul {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

#breadcrumb ul > li:not(:nth-child(1)):before {
  content: '>';
  margin: 0 1em;
}

/* パンくずリスト */

/* navbar */
.system-navigation {
  border-bottom: solid 1px var(--main-border-color);
}

.system-navigation nav {
  width: 1200px;
  margin: auto;
  padding: 20px;
  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  .system-navigation nav {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.system-navigation nav > h2 {
  margin-right: 30px;
}

.system-navigation nav > h2:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0;
  content: "";
  margin-left: 0.5em;
}

.system-navigation ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.system-navigation ul li {
  width: 15em;
  max-width: 100%;
  margin: 2px;
}

.system-navigation ul li a {
  display: block;
  border: solid 1px var(--main-border-color);
  text-align: center;
  padding: 5px;
  color: var(--main-font-color);
}

.system-navigation ul li a:hover {
  background: var(--main-bg-color);
  color: #fff;
}

@media (max-width: 568px) {
  .system-navigation ul li {
    width: 100%;
  }
}

.system-navigation ul li.nav--current {
  background: var(--main-bg-color);
  border: solid 1px var(--main-border-color);
  text-align: center;
  padding: 5px;
  color: var(--main-font-color);
}

/* navbar */

/* width 1200 -> 2000 */
.system-body {
  width: 2000px;
  margin: auto;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

@media (max-width: 2000px) {
  .system-body {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.system-body > * {
  flex-shrink: 0;
}

main, aside {
  display: block;
}

/* 入力欄リスト設定 */
.system-select {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.system-select > li, .system-select > p.system-select__detail {
  margin-right: 10px;
  margin-bottom: 5px;
  border: solid 1px var(--main-border-color);
  display: table;
}

.system-select > li span, .system-select > p.system-select__detail span {
  display: inline-block;
  padding: 5px 10px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.system-select > li .system-select__heading, .system-select > p.system-select__detail .system-select__heading {
  background: var(--main-bg-color);
  color: var(--main-font-color);
  white-space: nowrap;
}

.system-select > li .system-select__input, .system-select > p.system-select__detail .system-select__input {
  background: #fff;
}

@media (max-width: 568px) {
  .system-select {
    flex-direction: column;
    align-items: flex-start;
  }
  .system-select > li, .system-select > p.system-select__detail {
    margin: 0 0 10px;
  }
}
/* 入力欄リスト設定 */

/* ボタン設定 */
.system-select__btn a,
.system-output-btn a {
  display: inline-block;
  border: solid 1px var(--main-font-color);
  padding: 5px 20px;
  background: #fff;
  color: var(--main-font-color);
  box-shadow: 3px 3px 0 var(--shadow-color);
}

.system-select__btn a:hover,
.system-output-btn a:hover {
  background: var(--main-font-color);
  color: #fff;
}

.system-output-btn {
  text-align: center;
}

/* ボタン設定 */

.login .system-body {
  justify-content: center;
}

.login-heading {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
  background: var(--main-font-color);
  color: #fff;
  font-size: 1.25rem;
  padding: 5px 20px;
}

.login-window {
  border: solid 1px var(--main-font-color);
  background: var(--main-bg-color);
  padding: 40px;
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  text-align: center;
}

.login-window form {
  margin: 40px auto 0;
  display: block;
}

.login-window form p {
  margin-bottom: 20px;
}

.login-window form p span, .login-window form p input[type='text'], .login-window form p input[type='password'] {
  display: block;
  width: 100%;
}

.login-window form p span {
  text-align: left;
}

.login-window form p:last-child {
  margin: 40px 0 0;
  text-align: center;
}

.login-window form input[type='text'],
.login-window form input[type='password'] {
  background: #fff;
  border: solid 1px #333;
  border-radius: 4px;
  padding: 5px;
}

.public .login-heading {
  background: #000;
}

.public .login-window {
  border-color: #888;
  background: #eee;
}

/* テーブル設定 */
.system-table {
  overflow: auto;
}

.table-output {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 20px 0;
}



.table-output th {
    background: var(--main-font-color);
    color: #fff;
}

.table-output-oshirase {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin: 20px 0;
}

.table-output td, .table-output th {
  border: solid 1px var(--main-border-color);
  padding: 5px;
  text-align: center;
}

.table-output th {
  background: var(--main-font-color);
  color: #fff;
}

/* SR　岡追加　テーブルフッター */
.table-output tfoot > tr td{
  background: #fff !important;
  text-decoration: none;
}
/* テーブルフッター */

.table-output td {
  background: var(--table-row-color-odd);
}

.table-output tr:nth-child(2n + 1) td {
  background: var(--table-row-color-even);
}

.table-output tr:nth-child(n) td.table-output--notyet {
  background: #f00;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 568px) {
  .table-output {
    overflow-x: scroll;
  }
  .table-output td, .table-output th {
    white-space: nowrap;
  }
}

/* テーブル設定 */


.table-output-public {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 20px 0;
}

.table-output-public td, .table-output-public th {
  border: solid 1px gray;
  padding: 5px;
  text-align: center;
}

.table-output-public th {
  background: #000;
  color: #fff;
}

.table-output-public td {
  background: #fff;
}

.table-output-public tr:nth-child(2n + 1) td {
  background: #e6e6e6;
}

.table-output-public tr:nth-child(n) td.table-output--notyet {
  background: #f00;
  color: #fff;
  font-weight: bold;
}

@media (max-width: 568px) {
  .table-output-public {
    overflow-x: scroll;
  }
  .table-output-public td, .table-output-public th {
    white-space: nowrap;
  }
}

#goTop {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

footer {
  background: var(--main-bg-color);;
}

footer .footer_info {
  width: 1200px;
  margin: auto;
  padding: 20px 0;
  color: var(--main-border-color);;
}

@media (max-width: 1200px) {
  footer .footer_info {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

footer .copyright {
  background: var(--main-border-color);;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  padding: 5px;
}

/*--CPU--*/
.u-mg0 {
  margin: 0px !important;
}

.u-mt0 {
  margin-top: 0px !important;
}

.u-mr0 {
  margin-right: 0px !important;
}

.u-mb0 {
  margin-bottom: 0px !important;
}

.u-ml0 {
  margin-left: 0px !important;
}

.u-pd0 {
  padding: 0px !important;
}

.u-pt0 {
  padding-top: 0px !important;
}

.u-pr0 {
  padding-right: 0px !important;
}

.u-pb0 {
  padding-bottom: 0px !important;
}

.u-pl0 {
  padding-left: 0px !important;
}

.u-mg10 {
  margin: 10px !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mr10 {
  margin-right: 10px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-ml10 {
  margin-left: 10px !important;
}

.u-pd10 {
  padding: 10px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pr10 {
  padding-right: 10px !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pl10 {
  padding-left: 10px !important;
}

.u-mg20 {
  margin: 20px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mr20 {
  margin-right: 20px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-ml20 {
  margin-left: 20px !important;
}

.u-pd20 {
  padding: 20px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-mg30 {
  margin: 30px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mr30 {
  margin-right: 30px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-ml30 {
  margin-left: 30px !important;
}

.u-pd30 {
  padding: 30px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pr30 {
  padding-right: 30px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pl30 {
  padding-left: 30px !important;
}

.u-mg40 {
  margin: 40px !important;
}

.u-mt40 {
  margin-top: 40px !important;
}

.u-mr40 {
  margin-right: 40px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

.u-ml40 {
  margin-left: 40px !important;
}

.u-pd40 {
  padding: 40px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pr40 {
  padding-right: 40px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pl40 {
  padding-left: 40px !important;
}

.u-mg50 {
  margin: 50px !important;
}

.u-mt50 {
  margin-top: 50px !important;
}

.u-mr50 {
  margin-right: 50px !important;
}

.u-mb50 {
  margin-bottom: 50px !important;
}

.u-ml50 {
  margin-left: 50px !important;
}

.u-pd50 {
  padding: 50px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pr50 {
  padding-right: 50px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-pl50 {
  padding-left: 50px !important;
}

.u-fs-xxsmall {
  font-size: 0.75rem;
}

.u-fs-xsmall {
  font-size: 0.875rem;
}

.u-fs-small {
  font-size: 0.9375rem;
}

.u-fs-normal {
  font-size: 1rem;
}

.u-fs-large {
  font-size: 1.125rem;
}

.u-fs-xlarge {
  font-size: 1.25rem;
}

.u-fs-xxlarge {
  font-size: 1.5rem;
}

.u-fs-xxxlarge {
  font-size: 1.75rem;
}

.u-fc-text {
  color: #444;
}

.u-fc-strong {
  color: #127d17;
}

.u-fc-coution {
  color: #f00;
}

.u-fc-hover {
  color: #c00;
}

.u-ls-disc {
  list-style-type: disc !important;
  padding-left: 1.5em !important;
}

.u-ls-circle {
  list-style-type: circle !important;
  padding-left: 1.5em !important;
}

.u-ls-square {
  list-style-type: square !important;
  padding-left: 1.5em !important;
}

.u-ls-decimal {
  list-style-type: decimal !important;
  padding-left: 1.5em !important;
}

.u-ls-ur {
  list-style-type: upper-roman !important;
  padding-left: 1.5em !important;
}

.u-ls-none {
  list-style-type: none !important;
  padding-left: 1.5em !important;
}

.u-ls-play li:before {
  font-family: 'FontAwesome';
  margin-right: 0.5em;
  content: "";
}

.u-ls-cog li:before {
  font-family: 'FontAwesome';
  margin-right: 0.5em;
  content: "";
}

.u-require {
  padding: 2px 5px;
  background: #c20f17;
  color: #fff;
  border-radius: 4px;
  margin: 0 4px;
}

a.u-btn {
  background-color: #fff;
  color: #2a71b9;
  border: solid 1px #2a71b9;
  border-radius: 4px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
}

.u-fb {
  font-weight: bold;
}

.u-tr {
  text-align: right;
}

.u-tc {
  text-align: center;
}

.u-tl {
  text-align: left;
}

.u-w100 {
  width: 100% !important;
}

/* SR　岡追加 ヴァリデーションエラー */
.validate-error{
  padding:0px !important;
  color: #f00;
  text-align: left;
  border-radius: 5px 5px;
}

.required-input {
  color: #f00;
}
/* SR　岡追加 */

/* SR　岡追加 メッセージ */
.message {

    padding: 5px;
    color: var(--message-font-color);
    text-align: left;
    border-radius: 5px 5px;
    background-color: var(--message-bg-color);
    max-width: 50%;
    border: 2px solid var(--message-border-color);
    display: inline-block;
    margin-bottom: 5px;
}

.required-input {
    color: #f00;
}
/* SR　岡追加 */


/* SR 岡追加 問合せフォーム上部*/
.contact-title{
  font-size:x-large;
  font-weight: bolder;
}

.contact-line{
  width: calc(100% + 20px);
  height: 10px;
  position: relative;
  top: -10px;
  left: -10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: var(--main-bg-color);
}

/* SR 岡追加 問合せフォーム上部*/

/*SR　岡追加　縦並びのリスト要素　登録画面に仕様*/
.system-select__vertical {
  margin-bottom: 5px;
  margin-right: 20px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.system-select__vertical > li, .system-select__vertical > p.system-select__detail {
  margin-bottom: 5px;
  border: solid 1px var(--main-border-color);
  display: table;
}

.system-select__vertical > li span, .system-select__vertical > p.system-select__detail span {
  display: inline-block;
  padding: 5px 10px;
  display: table-cell;
  /*text-align: center;*/
  vertical-align: middle;
}

.system-select__vertical > li .system-select__heading, .system-select__vertical > p.system-select__detail .system-select__heading {
  background: var(--main-bg-color);
  color: var(--main-font-color);
  white-space: nowrap;
  text-align: left;
}

.system-select__vertical > li .system-select__sub_heading {
  margin-left: 20px;
  background: var(--main-bg-color);
  color: var(--main-font-color);
  white-space: nowrap;
}

.system-select__vertical > li .system-select__input, .system-select__vertical > p.system-select__detail .system-select__input {
  background: #fff;
}
/* ここまで縦並びリスト */

/* SR　岡追加 複数要素表示用のボックス 縦スクロールあり */
.box-select{
  margin-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  overflow: auto;
  border: solid 1px var(--main-border-color);
  max-height: 225px;
  max-width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.box-select::webkit-scrollbar{
    display: none;
}
.box-select > li span, .box-select > p.box-select span {
  display: inline-block;
  padding: 5px 10px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.box-select > li{
  margin-right: 5px;
  margin-bottom: 5px;
  border: solid 1px var(--main-border-color);
  display: table;
}

.box-select > li .box-select__heading {
  background: var(--main-bg-color);
  color: var(--main-font-color);
}

.box-select > li .box-select__input {
  background: #fff;
}

.box-title {
  position: relative;
  display: inline-block;
  padding: 0 9px;
  top: 1px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: var(--main-border-color);
  color: #ffffff;
  border-radius: 5px 5px 0 0;
}

.box-title.ref{
  top: 3px;
}
/*　複数要素表示用のボックス 縦スクロールあり　*/

/* SR 岡追加 ロゴ・電子押印の横並び設定 */
.box-image{
  border: solid 1px var(--main-border-color);
  min-height: 50px;
  max-height: 300px;
  min-width: 50px;
  max-width: 300px;
}

.image__horizontal{
  float: left;
  margin-right: 20px;
}

.box-image-title{
  position: relative;
  display: inline-block;
  padding: 0 9px;
  right: 10px;
  top: 7px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: var(--main-border-color);
  color: #ffffff;
  border-radius: 5px 5px 0 0;
}

.image-select__btn{
  position: relative;
  padding: 1px 2px;
  top: -2px;
}

.image-width{
  max-height: 100%;
  max-width: 100%;
}

.none-border{
  border: none !important;
}

.add-border{
  border: solid 1px var(--main-border-color);
  overflow: none;
}

/* 横並び */
.display-flex{
  display: flex;
}

/* 文字列に色を付ける　サイズ */
.font-color-main{
  color: var(--main-font-color);
}
/* ロゴ・電子押印の横並び設定 */

/* SR 岡追加 テーブル内リンク */
td > a{
  color: var(--table-link-font-color);
  text-decoration:underline;
}
/* テーブル内リンク */

/* SR 岡追加 モーダル用 */
.popup{
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  position:absolute;
  padding: auto auto;
  z-index:99;
}
.btn_area{
  width:370px;
  height:180px;
  position:fixed;
  top:48%;
  left:47%;
  margin-top:-120px;
  margin-left:-150px;
  background-color:#fff;
  z-index:100;
  border:solid 1px var(--main-border-color);
}
.btn_area p{
  padding:15px;
}
.btn_area span{
  margin:0 10px;
}
.close-btn{
  position: relative;
  left: 95%;
  color: var(--main-font-color);
}
.window-line{
  margin: 0px;
  border-bottom:solid 1px var(--main-border-color);
}
/* モーダル用 */

/* SR 岡追加 送付ファイル一覧用テーブルスクロール */
.overflow{
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 0px;
  table-layout: auto;
}

/* 送付ファイル一覧用テーブルスクロール */

/* SR 岡追加 テーブルflex削除 */
.auto-table{
  table-layout: auto;
}

/**/

/* SR 岡追加 ファイル参照ボタン　レイアウト */
.file-select > input[type="file"]{
  display: none;
}

.file-select > label{
  font-size: smaller;
  display: inline-block;
  border: solid 1px var(--main-font-color);
  padding: 1px 5px;
  background: #fff;
  color: var(--main-font-color);
  box-shadow: 3px 3px 0 var(--shadow-color);
}

.file-select > label:hover{
  background: var(--main-font-color);
  color: #fff;
  transition: 0.4s;
}

/* SR 岡追加 ファイル参照ボタン　レイアウト */
.ref-pos{
  position: relative;
}

/* ファイル参照ボタン　レイアウト */

/* SR 岡追加 お知らせ用 */
h2.news{
  width: 500px;
  max-width: 500px;
  border:solid 1px var(--main-border-color);
  background-color: var(--main-font-color);
}

.news-display{
  width: 500px;
  max-width: 500px;
}

.news-display > li{
  border: none;
}
/* お知らせ用 */

.paging{
  position: relative;
  left: 1em;
}

/* テーブルに題名をつける */
.table-title{
  margin-top: 0px;
}
/* テーブルに題名をつける */

/* SR 岡追加 注意喚起 */
.caution{
  color: var(--caution-font-color);
  font-size: smaller;
}
/* 注意喚起 */

/* SR 岡追加 リキッド枠 */
.box-border{
  height: auto;
  border: solid 1px var(--main-border-color);
  padding: 5px;
}
/*  */

/* SR 岡追加 文字幅 */
.mail{
  width: 350px;
}
.tel{
  width: 140px;
}
.postnum{
  width: 90px;
}
.display_order{
  width: 60px;
}
/**/

/* SR 岡追加 marginをなくす*/
.none-margin{
  margin: 0px !important;
}
/* SR 岡追加 paddingをなくす*/
.none-padding{
  padding: 0px !important;
}

/* SR 岡追加 paddingをなくす*/
.lfrg-10-padding{
  padding: 0px 10px !important;
}

/* SR 岡追加 paddingをなくす*/
.tpbt-5-padding{
  padding: 0px 0px !important;
}

/* SR 岡追加 paddingをなくす*/
.tpbt-5-rglf-10-padding{
  padding: 0px 10px !important;
}

/* SR 岡追加 margin追加用 */
.top-margin-10{
  margin-top: 10px;
}
.top-margin-20{
  margin-top: 20px;
}
.top-margin-30{
  margin-top: 30px;
}
.top-margin-40{
  margin-top: 40px;
}
.top-margin-50{
  margin-top: 50px;
}
.bottom-margin-10{
  margin-bottom: 10px;
}
.bottom-margin-20{
  margin-bottom: 20px;
}
.bottom-margin-30{
  margin-bottom: 30px;
}
.bottom-margin-40{
  margin-bottom: 40px;
}
.bottom-margin-50{
  margin-bottom: 50px;
}
.right-margin-10{
  margin-right: 10px !important;
}
.right-margin-20{
  margin-right: 20px;
}
.right-margin-30{
  margin-right: 30px;
}
.right-margin-40{
  margin-right: 40px;
}
.right-margin-50{
  margin-right: 50px;
}
.left-margin-10{
  margin-left: 10px;
}
.left-margin-20{
  margin-left: 20px;
}
.left-margin-30{
  margin-left: 30px;
}
.left-margin-40{
  margin-left: 40px;
}
.left-margin-50{
  margin-left: 50px;
}
/* margin追加用 */

/* SR　岡追加 テーブルサイズ　画面ごと */
.user-table{
  width: 240px;
}

.office-table{
  width: 240px !important;
}

.report-setting-table{
  width: 100%;
}
/* テーブルサイズ　画面ごと  */

/* SR 岡追加 特殊なテーブル設定 */
.help-col{
  max-width: 70px;
  border-left: 0px none !important;
}
.bfr-help-col{
  border-right: 0px none !important;
}
/* 特殊なテーブル設定 */

/* SR　岡追加 テーブル列幅指定用 */
/* 文字列用*/
th.xshort-width{
  width:60px;
  white-space: nowrap;
}

td.lf-xshort-width{
  min-width: 60px;
  max-width: 60px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-xshort-width{
  min-width: 60px;
  max-width: 60px;
  white-space: normal;
  word-break:break-all;
}

td.rg-xshort-width{
  min-width: 60px;
  max-width: 60px;
  white-space: normal;
  word-break:break-all;
  text-align: right !important;
}

th.short-width{
  width: 100px;
  white-space: nowrap;
}

td.lf-short-width{
  min-width: 100px;
  max-width: 100px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-short-width{
  min-width: 100px;
  max-width: 100px;
  white-space: normal;
  word-break:break-all;
}

td.rg-short-width{
  min-width: 100px;
  max-width: 100px;
  white-space: normal;
  word-break:break-all;
  text-align: right !important;
}

th.middle-width{
  width: 150px;
  white-space: nowrap;
}

td.lf-middle-width{
  min-width: 150px;
  max-width: 150px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-middle-width{
  min-width: 150px;
  max-width: 150px;
  white-space: normal;
  word-break:break-all;
}

td.rg-middle-width{
  min-width: 150px;
  max-width: 150px;
  white-space: normal;
  word-break:break-all;
  text-align: right !important;
}

th.xmiddle-width{
  width: 200px;
  white-space: nowrap;
}

td.lf-xmiddle-width{
  min-width: 200px;
  max-width: 200px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-xmiddle-width{
  min-width: 200px;
  max-width: 200px;
  white-space: normal;
  word-break:break-all;
}

td.rg-xmiddle-width{
  min-width: 200px;
  max-width: 200px;
  white-space: normal;
  word-break:break-all;
  text-align: right !important;
}

th.long-width{
  width: 250px;
  white-space: nowrap;
}

td.lf-long-width{
  min-width: 250px;
  max-width: 250px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-long-width{
  min-width: 250px;
  max-width: 250px;
  white-space: normal;
  word-break:break-all;
}

td.rg-long-width{
  min-width: 250px;
  max-width: 250px;
  white-space: normal;
  word-break:break-all;
  text-align: right !important;
}

th.xlong-width{
  width: 300px;
  white-space: nowrap;
}

td.lf-xlong-width{
  min-width: 300px;
  max-width: 300px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-xlong-width{
  min-width: 300px;
  max-width: 300px;
  white-space: normal;
  word-break:break-all;
}

td.rg-xlong-width{
  min-width: 300px;
  max-width: 300px;
  word-break:break-all;
  white-space: normal;
  text-align: right !important;
}

th.xxlong-width{
  width: 350px;
  white-space: nowrap;
}

td.lf-xxlong-width{
  min-width: 350px;
  max-width: 350px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-xxlong-width{
  min-width: 350px;
  max-width: 350px;
  white-space: normal;
  word-break:break-all;
}

td.rg-xxlong-width{
  min-width: 350px;
  max-width: 350px;
  word-break:break-all;
  white-space: normal;
  text-align: right !important;
}

td.btn-width-55{
  min-width: 55px;
  max-width: 55px;
  white-space: normal;
  word-break:break-all;
}

/* 全角10文字対応 */
th.fullwidth-10-width{
  width: 165px;
  white-space: nowrap;
}

td.oshirase-fullwidth-10-width{
  min-width: 470px;
  max-width: 470px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

th.oshirase-fullwidth-10-width {
    width: 470px;
    white-space: nowrap;
}

td.lf-fullwidth-10-width {
    min-width: 165px;
    max-width: 165px;
    white-space: normal;
    word-break: break-all;
    text-align: left !important;
}

/* 全角15文字対応 */
th.fullwidth-15-width{
  width: 240px;
  white-space: nowrap;
}

td.lf-fullwidth-15-width{
  min-width: 240px;
  max-width: 240px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 全角20文字対応 */
th.fullwidth-20-width{
  width: 315px;
  white-space: nowrap;
}

td.lf-fullwidth-20-width{
  min-width: 315px;
  max-width: 315px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

td.ct-fullwidth-20-plus-width{
  min-width: 350px;
  max-width: 350px;
  white-space: normal;
  word-break:break-all;
}

/* 全角25文字対応 */
th.fullwidth-25-width{
  width: 390px;
  white-space: nowrap;
}

td.lf-fullwidth-25-width{
  min-width: 390px;
  max-width: 390px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 全角30文字対応 */
th.fullwidth-30-width{
  width: 470px;
  white-space: nowrap;
}

td.lf-fullwidth-30-width{
  min-width: 470px;
  max-width: 470px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 全角40文字対応 */
th.fullwidth-40-width{
  width: 630px;
  white-space: nowrap;
}

td.lf-fullwidth-40-width{
  min-width: 630px;
  max-width: 630px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 全角60文字対応 */
th.fullwidth-60-width{
  width: 920px;
  white-space: nowrap;
}

td.lf-fullwidth-60-width{
  min-width: 920px;
  max-width: 920px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 半角20文字対応 */
th.halfwidth-20-width {
    width: 270px;
    white-space: nowrap;
}

/* 半角40文字対応 */
th.halfwidth-40-width {
    width: 545px;
    white-space: nowrap;
}

td.lf-halfwidth-40-width{
  min-width: 545px;
  max-width: 545px;
  white-space: normal;
  word-break:break-all;
  text-align: left !important;
}

/* 特殊サイズ */
/* 日付 */
th.date-width{
  width: 110px;
  white-space: nowrap;
}

td.date-width{
  min-width: 110px;
  max-width: 110px;
  word-break:break-all;
}

th.new-width {
    width: 130px;
    white-space: nowrap;
}

td.new-width {
    min-width: 130px;
    max-width: 130px;
    word-break: break-all;
    text-align: left !important
}

th.service-width {
    width: 200px;
    white-space: nowrap;
}

td.service-width {
    min-width: 200px;
    max-width: 200px;
    word-break: break-all;
    text-align: left !important
}

th.juyo-width {
    width: 50px;
    white-space: nowrap;
}

td.juyo-width {
    min-width: 50px;
    max-width: 50px;
    word-break: break-all;
}

/* 日時 */
th.datetime-width{
  width: 160px;
  white-space: nowrap;
}



td.datetime-width{
  min-width: 160px;
  max-width: 160px;
  word-break:break-all;
}
/*取引先の送付先*/
th.client-sending-width{
  width: 1000px;
  white-space: nowrap;
}

/* 表示順 */
th.display-order-width{
  width: 80px;
  white-space: nowrap;
}

td.display-order-width{
  min-width: 80px;
  max-width: 80px;
  word-break:break-all;
  text-align: right !important;
}
/*取引先判断*/
th.decide-client-width{
  min-width: 200px;
  width: 800px;
  white-space: nowrap;
}

td.decide-client-width{
  min-width: 200px;
  max-width: 800px;
  word-break:break-all;
  text-align: left !important;
}

/* サイズ指定用 */

/* SR 岡追加 サイズ指定のみ 強制変更*/
.width-65{
  width: 65px !important;
  min-width: 65px !important;
}

.width-75{
  width: 75px !important;
  min-width: 75px !important;
}

.width-90{
  width: 90px !important;
  min-width: 90px !important;
}

.width-100{
  width: 100px !important;
  min-width: 100px !important;
}

.width-115{
  width: 115px !important;
  min-width: 115px !important;
}

.width-125{
  width: 125px !important;
  min-width: 125px !important;
}

.width-175{
  width: 175px !important;
  min-width: 175px !important;
}

.width-180{
  width: 180px !important;
  min-width: 180px !important;
}

.width-200{
  width: 200px !important;
  min-width: 200px !important;
}

.width-268{
  width: 268px !important;
  min-width: 268px !important;
}

.width-350{
  width: 350px !important;
  min-width: 350px !important;
}

.width-470{
  width: 470px !important;
  min-width: 470px !important;
}

.width-510{
  width: 510px !important;
  min-width: 510px !important;
}

.lf-width-75 {
    width: 75px;
    max-width: 75px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角4文字 */
.lf-width-85 {
    width: 85px;
    max-width: 85px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-100 {
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-120 {
    width: 120px;
    max-width: 120px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角6文字 */
.lf-width-115 {
    width: 115px;
    max-width: 115px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-125 {
    width: 125px;
    max-width: 125px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角6.5文字 */
.lf-width-130 {
    width: 130px;
    max-width: 130px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角7文字 */
.lf-width-135 {
    width: 135px;
    max-width: 135px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-145 {
    width: 145px;
    max-width: 145px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-150 {
    width: 150px;
    max-width: 150px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-170 {
    width: 170px;
    max-width: 170px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-245 {
    width: 245px;
    max-width: 245px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角15文字 */
.lf-width-260 {
    width: 260px;
    max-width: 260px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角20文字 */
.lf-width-340 {
    width: 340px;
    max-width: 340px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角20文字 */
.lf-width-350 {
    width: 350px;
    max-width: 350px;
    word-wrap: break-word;
    text-align: left !important;
}

/* 全角30文字 */
.lf-width-500 {
    width: 500px;
    max-width: 500px;
    word-wrap: break-word;
    text-align: left !important;
}

.lf-width-510{
  width: 510px !important;
  min-width: 510px !important;
  text-align: left !important;
}

.new-lf-width-510 {
    width: 510px !important;
    min-width: 510px !important;
    height: 300px !important;
    text-align: left !important;
}

.lf-width-585{
  width: 585px !important;
  min-width: 585px !important;
  text-align: left !important;
}

.contact-form-title{
  width: 832px !important;
  min-width: 832px !important;
  text-align: left !important;
  padding: 10px;
  border-radius: 5px 5px;
}

.lf-lg-width{
  width: 250px;
  text-align: left !important;
}

.rg-width-90{
  width: 90px;
  text-align: right !important;
}

/* 全角10文字対応 */
.width-170__input{
  width: 170px !important;
}

/* 全角11文字対応 */
.width-180__input{
  width: 180px !important;
}

/* 全角15文字対応 */
.width-250__input{
  width: 278px !important;
}

/* 全角20文字対応 */
.width-330__input{
  width: 330px !important;
}

/* 全角22文字対応 */
.width-375__input{
  width: 375px !important;
}

/* 利用日幅 */
.width-450__input{
  width: 450px !important;
}

/* 全角30文字対応 */
.width-490__input{
  width: 490px !important;
}

.new-width-490__input {
    width: 490px !important;
    height: 100px !important;
}


/* 全角40文字対応 */
.width-650__input{
  width: 650px !important;
}

/* 全角50文字対応 */
.width-810__input{
  width: 810px !important;
}

/* 全角60文字対応 */
.width-970__input{
  width: 970px !important;
}

/* 半角30文字対応 */
.width-425-half__input{
  width: 425px !important;
}

/* 半角40文字対応 */
.width-565-half__input{
  width: 565px !important;
}

.width-585-half__input {
    width: 585px !important;
    text-align: left !important;
}

/* 特殊サイズ */
/* 承認フロー */
.approval-box-width{
  width: 610px;
}

/*自社グループ*/
.office-box-width{
  width: 390px;
}

/* 利用可能機能 */
.available-function-width{
  width: 390px;
}

/* 取引先帳票表示内容 */
.client-report-width{
  width: 670px;
}

/* 自社グループ帳票表示内容 */
.office-report-width{
  width: 885px;
}

/*承認フロー*/
.approval-staff-width{
  width: 355px;
}

/*お問い合わせ*/
.contact-confirming-size{
  width: 850px;
  max-height: 800px;
}

/*お問合せ内容*/
.contact-content-size{
  width: 585px;
  height: 250px;
}

/* サイズ指定のみ */

/* SR　岡追加 位置調整 */
.top-1{
  position: relative;
  top: 1px;
}
.top-2{
  position: relative;
  top: 2px;
}
.top-3{
  position: relative;
  top: 3px;
}
.top-4{
  position: relative;
  top: 4px;
}
.top-5{
  position: relative;
  top: 5px;
}
.top-6{
  position: relative;
  top: 6px;
}
.top-7{
  position: relative;
  top: 7px;
}
.top--1{
  position: relative;
  top: -1px;
}
.top--2{
  position: relative;
  top: -2px;
}
.top--3{
  position: relative;
  top: -3px;
}
.top--4{
  position: relative;
  top: -4px;
}
.top--5{
  position: relative;
  top: -5px;
}
.top--6{
  position: relative;
  top: -6px;
}
.top--7{
  position: relative;
  top: -7px;
}
.top--8{
  position: relative;
  top: -8px;
}
.top--9{
  position: relative;
  top: -9px;
}
.top--10{
  position: relative;
  top: -10px;
}

.left-5{
  position: relative;
  left: 5px;
}

.left-10{
  position: relative;
  left: 10px;
}

.float-lf{
  float: left;
}

/* 担当者画面での右側表示位置調整 */
.top-staff{
  position: relative;
}

@media(min-width:893px){
  .top-staff{
    position: relative;
    top: -160px;
  }
}
/* SR　岡追加 位置調整 */


/* 取引先登録 取引先の送付先一覧 */
.client-sending-btn{
  position: relative;
  left: 77%;
  bottom: 5px;
}
/* 位置調整 */

/* SR 岡追加 ボタンサイズ変更 */
.xsm-btn{
  font-size: small;
  padding: 0.5px 1px;
}

.xsm-btn a{
  padding: 1px 2px;
}

.sm-btn{
  font-size: smaller;
  padding: 1px 5px;
}

.sm-btn a{
  padding: 1px 5px;
}

.lg-btn{
  font-size: larger;
  padding: 3px 10px;
}

/* SR 岡追加 公開DL画面用 */
/*公開ログイン画面*/
.login-published-title{
  font-style: italic;
}

.login-published .system-body {
  justify-content: center;
}

.login-published-heading {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
  background: var(--published-font-color);
  color: #fff;
  font-size: 1.25rem;
  padding: 5px 20px;
}

.login-published-window {
  border: solid 1px var(--published-font-color);
  background: var(--published-bg-color);
  padding: 40px;
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  text-align: center;
}

.login-published-window form {
  margin: 40px auto 0;
  display: block;
}

.login-published-window form p {
  margin-bottom: 20px;
}

.login-published-window form p span, .login-published-window form p input[type='text'], .login-published-window form p input[type='password'] {
  display: block;
  width: 100%;
}

.login-published-window form p span {
  text-align: left;
}

.login-published-window form p:last-child {
  margin: 40px 0 0;
  text-align: center;
}

.login-published-window form input[type='text'],
.login-published-window form input[type='password'] {
  background: #fff;
  border: solid 1px #333;
  border-radius: 4px;
  padding: 5px;
}

.published-login__btn{
  display: block;
  background: var(--published-head-color);
  max-width: 100px;
  margin: 0 auto;
  padding: 5px;
  border: solid 1px var(--published-head-color);
  border-radius: 10px 10px;
  transition: 0.4s;
}

.published-login__btn a{
  color: #fff;
}

.published-login__btn:hover{
  position: relative;
  transform: translate(-3px,-3px);
  box-shadow: 5px 5px 5px var(--published-shadow-color);
}

.published-login__btn:active{
  position: relative;
  transform: translate(3px,3px);
  box-shadow: none;
}

.published-login__btn:active{
  margin: 0 auto;
  padding: 5px;
  border: solid 1px #fff;
  border-radius: 10px 10px;
  color: #fff;
}

#mailaddress{
  margin: 0 auto;
  width: 400px;
}

#password{
  margin: 0 auto;
  width: 400px;
}

.in-icon{
  display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.news-published{
  width: 500px;
  max-width: 500px;
  border:solid 1px var(--published-border-color);
  background-color: var(--published-head-color);
  color: #fff;
}

.news-published-display{
  width: 500px; 
}

.news-published-display > li{
  border: none;
}

.news-body{
  background-color: #fff;
  list-style: none;
  max-width: 100%;
  padding: 5px;
}

.news{
  display: flex;
  text-align: left;
  margin-bottom: 5px;
}

.news span{
  text-align: left;
  margin-right: 5px;
}

/* 公開DL画面 */
.head-date{
  font-size: larger;
  position: relative;
  padding: 0 65px;
  text-align: left;
}

.head-date:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background:  var(--published-dark);
  z-index: 0;
}

.head-date span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

.card{
  position: relative;
  padding: 5px 10px;
  margin-right: 20px;
  height: 167px;
  min-width: 300px;
  max-width: 350px;
  top: 5px;
  left: 5px;
  border: solid 1px  var(--published-border-color);
  border-radius: 10px 10px;
  transition: 0.4s;
}

.downloaded{
  background-color: var(--published-border-color);
}

.downloaded .card-title{
  border-bottom: dotted 2px #fff;
}

.downloaded .card-action{
  background-color: #fff;
  border: solid 1px #fff;
}

.card:hover{
  top: 0px;
  left: 0px;
  box-shadow: 10px 8px 5px var(--published-shadow-color);
}

.card .fa-circle{
  color: var(--published-shadow-color);
  display: block;
  margin-bottom: 10px;
}

.card-list{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.card-list li{
  margin-right: 20px;
  margin-bottom: 20px;
}

.card-title{
  display: block;
  margin-bottom: 10px;
  height: 55%;
  border-bottom: dotted 2px var(--published-border-color);
  transition: 0.4s;
}

.card:hover .card-title{
  height: 48%;
}

.card:hover .card-action{
  transform: scale(1.15, 1.15);
}

.card-title .card-label{
  position: relative;
  left: 10px;
}

.action-list{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  text-align: center;
}

.card-action {
  display: block;
  width: 110px;
  padding: 2px;
  position: relative;
  top: 1px;
  left: 3px;
  text-align: center;
  margin-left: 10px;
  margin-right: 20px;
  border: solid 1px var(--published-border-color);
  border-radius: 5px 5px;
  transition: 0.4s;
}

.card-action.compile {
  width: 200px;
}

.card-action a{
  color: var(--published-font-color);
}

.card-action:hover {
  top: 0px;
  left: 0px;
  background: var(--published-font-color);
  box-shadow: 5px 5px 0 var(--published-shadow-color);
}

.card-action:active {
  top: 1px;
  left: 3px;
  background: #fff;
  box-shadow: none;
}

.card-action:hover > a{
  color: #fff;
}

.card-action:active a{
  color: var(--published-font-color);
}

.card-info{
  font-size: small;
  margin-left: 10px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
}

#current{
  font-weight: bold;
}

#current::after{
  content: "▼";
  font-size: large;
  color: var(--published-dark);
  position: relative;
  top: 100%;
  right: 50%;
}

body#published {
  position: relative;
  font-family: sans-serif;
  border-top: solid 10px var(--published-dark);
  font-family: sans-serif;
  background: #fff;
}

/* float left を追加*/
header#header-published {
    width: 1200px;
    float: left;
    margin: auto;
    padding: 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1200px) {
  header#header-published  {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

header#header-published  .system-name h1 {
  max-width: 200px;
}

header#header-published  .system-name p {
  color: var(--published-font-color);
}

header#header-published  .system-info {
  color: var(--published-font-color);
}

header#header-published  .account-name:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0.5em;
  content: "";
}

header#header-published  .logout-btn {
  text-align: right;
}

header#header-published  .logout-btn a {
  display: inline-block;
  margin: 10px 0;
  padding: 5px 3em;
  border: solid 1px var(--published-border-color);
  color: var(--published-font-color);
  font-size: 0.875rem;
}

header#header-published  .logout-btn a:hover {
  background: var(--published-bg-color);
  color: #fff;
}

@media (max-width: 568px) {
  header#header-published  {
    flex-direction: column;
    align-items: flex-start;
  }
  header#header-published  .system-name {
    margin-bottom: 20px;
  }
  header#header-published  .logout-btn {
    text-align: left;
  }
}

#breadcrumb-published {
  padding: 10px 0;
  background: var(--published-dark);
  color: #fff;
  font-size: 0.875rem;
}

#breadcrumb-published ul {
  width: 1200px;
  margin: auto;
  list-style: none;
  display: flex;
}

@media (max-width: 1200px) {
  #breadcrumb-published ul {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

#breadcrumb-published ul > li:not(:nth-child(1)):before {
  content: '>';
  margin: 0 1em;
}

.footer-published {
  background: var(--published-footer);
}

.footer-published .footer_info {
  width: 1200px;
  margin: auto;
  padding: 20px 0;
  color: #000;
}

@media (max-width: 1200px) {
  .footer-published .footer_info {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.footer-published .copyright {
  background: var(--published-dark);
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  padding: 5px;
}

/* 公開DL画面用 */

/* SR　谷本追加 */
/* サイズ指定用 */
span.w240px {
  width: 240px !important;
}
/* 文字幅 */
.service-select{
  width:250px;
}
.contact-select{
  width:250px;
}
.office-name{
  width:300px;
}
.tanto{
  width:250px;
}
.gaiyo{
  width:300px;
}
.bank-name{
  width:300px;
}
.shiten-name{
  width:300px;
}
.koza-no{
  width:100px;
}
.koza-meiginin{
  width:250px;
}
.sort{
  width:100px;
}