@charset "UTF-8";
/* color */
/* layout */
/* responsive */
/* style */
/* state */
/*----------------
header
-----------------*/
header {
  width: 100%;
  height: 5rem;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  color: white;
  padding: 0 2rem;
  z-index: 10;
  transition: all .5s ease;
  /* alarm */
}
@media screen and (max-width: 415px) {
  header {
    padding-left: 4rem;
  }
}
header #header-title {
  line-height: 2rem;
  height: 2rem;
}
header #header-title img {
  height: 100%;
  padding-top: 1rem;
}
@media screen and (max-width: 415px) {
  header #header-title {
    margin-left: -2.7rem;
    padding-top: 4px;
  }
}
header #header-contents {
  height: 3rem;
  font-size: smaller;
}
header #header-contents .header-item {
  line-height: 3rem;
}
header #header-contents .header-item-left {
  float: left;
}
header #header-contents .header-item-right {
  float: right;
}
header #header-contents .header-workplace {
  font-size: 1.5rem;
}
header #header-tools li {
  display: inline-block;
  margin-right: 2rem;
}
header #header-tools li:last-child {
  margin-right: 0;
}
@media screen and (max-width: 600px) {
  header #header-tools li {
    /* header item only icon */
  }
  header #header-tools li i {
    top: 0;
    font-size: .9rem;
  }
  header #header-tools li span {
    display: none;
  }
}
@media screen and (max-width: 415px) {
  header #header-tools li {
    /* header item icon slim */
    margin-right: 1rem;
  }
}
header #alarm-area {
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: right;
}
@keyframes alarm-blink {
  50% {
    opacity: 0;
  }
}
header .alarm-disp {
  display: inline-block;
  border-radius: 2px;
  -webkit-animation: alarm-blink 1s ease-out infinite;
  animation: alarm-blink 1s ease-out infinite;
}
header .alarm-disp a {
  padding: 0 1rem;
  font-weight: 600;
  line-height: 2.2rem;
  font-size: 1rem;
}
@-webkit-keyframes alarm-blink {
  50% {
    opacity: 0;
  }
}
header #alarm_disp_area {
  background: #ff6347;
}
header #maintenance_alarm_disp_area {
  background: #1ccdad;
}

/*----------------
 navigation (left side)
-----------------*/
section#nav {
  width: 13rem;
  height: calc(100% - 5rem);
  overflow-y: scroll;
  border-right: 1px solid #cfcfcf;
  /*float: left;*/
  position: fixed;
  top: 5rem;
  left: 0;
  padding-top: 1rem;
  transition: all .2s ease-out;
  background: white;
  white-space: nowrap;
  z-index: 9;
  -ms-overflow-style: none;
  scrollbar-width: 0;
}
section#nav::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 960px) {
  section#nav {
    /* hanbergar menu */
    padding-top: 4rem;
  }
  body:not(.open-menu) section#nav {
    width: calc(4rem + .5rem);
    left: -.5rem;
  }
  body:not(.open-menu) section#nav li {
    /* text */
    /* highlight */
  }
  body:not(.open-menu) section#nav li a {
    padding-left: 4rem;
  }
  body:not(.open-menu) section#nav li.current > a::before {
    left: 0;
  }
}
@media screen and (max-width: 415px) {
  section#nav {
    /* hanbergar menu icon invisible*/
    padding-top: 1rem;
  }
  body:not(.open-menu) section#nav {
    width: 0;
  }
}
section#nav ul li {
  padding: .25rem .5rem;
  /* current */
}
section#nav ul li a {
  line-height: 2.5rem;
  display: block;
  padding-left: 3.5rem;
  position: relative;
  border-radius: 6px;
}
section#nav ul li a:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}
section#nav ul li.current > a {
  font-weight: bold;
}
section#nav ul li.current > a:hover {
  background: none;
}
section#nav ul.nav-main > li > a i {
  position: absolute;
  line-height: 2.5rem;
  top: 0;
  left: 1.5rem;
}
section#nav ul.nav-main > li > a i.ic-expand {
  right: 0;
  left: auto;
  margin-right: 1.5rem;
  transform: rotate(90deg);
  transition: transform .2s ease;
}
@media screen and (max-width: 960px) {
  body:not(.open-menu) section#nav ul.nav-main > li > a i.ic-expand {
    display: none;
  }
}
section#nav ul.nav-main > li.current > a {
  color: #1ccdad;
  /* highlight */
}
section#nav ul.nav-main > li.current > a::before {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  position: absolute;
  background: #1ccdad;
  left: -0.5rem;
  top: 0;
}
section#nav ul.nav-main > li.open > a {
  font-weight: bold;
}
section#nav ul.nav-main > li.open > a i.ic-expand {
  transform: none;
}
section#nav ul.nav-main > li.open ul.nav-sub.menu-2 {
  height: 6rem;
}
section#nav ul.nav-main > li.open ul.nav-sub.menu-3 {
  height: 9rem;
}
section#nav ul.nav-main > li.open ul.nav-sub.menu-4 {
  height: 12rem;
}
section#nav ul.nav-sub {
  height: 0;
  transition: height .2s ease-out;
  overflow: hidden;
  font-size: smaller;
  width: 100%;
}
@media screen and (max-width: 960px) {
  body:not(.open-menu) section#nav ul.nav-sub {
    display: none;
  }
}
section#nav ul.nav-sub li a {
  color: #5a5a5a;
  margin-left: 2rem;
  padding-left: 1.5rem;
}
section#nav ul.nav-sub li.current a {
  cursor: default;
  color: #000;
}

/*----------------
 responsive menu hanbergar icon
-----------------*/
.nav-icon {
  display: none;
  position: absolute;
  top: 0;
  right: -2.5px;
  z-index: 999;
  width: 4rem;
  height: 4rem;
  padding: calc((4rem - 1.2rem) / 2);
}
@media screen and (max-width: 960px) {
  .nav-icon {
    display: block;
  }
}
@media screen and (max-width: 415px) {
  .nav-icon {
    display: none;
  }
}
.nav-icon svg {
  cursor: pointer;
  width: 100%;
  height: 100%;
  /* open animation */
}
.nav-icon svg .border {
  fill: #000;
  transition: .3s all ease-out;
  transform-origin: 250px 250px;
}
body.open-menu .nav-icon svg .border1 {
  transform: translate(-102px, 102px) rotate(45deg);
}
body.open-menu .nav-icon svg .border2 {
  opacity: 0;
}
body.open-menu .nav-icon svg .border3 {
  transform: translate(-102px, -102px) rotate(-45deg);
}
.nav-icon:hover svg .border {
  opacity: .3;
}
header .nav-icon {
  display: none;
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: 0;
  right: auto;
  margin-left: -3.5rem;
  padding: calc((3rem - 1.2rem) / 2);
}
@media screen and (max-width: 415px) {
  header .nav-icon {
    display: block;
  }
}
header .nav-icon svg .border {
  fill: white;
}

/*-------------------
  form
 -------------------*/
select, input {
  max-width: 100%;
  color: #000;
  font-size: .9rem;
  padding: .5rem 1rem;
  margin: 0 .5rem .5rem 0;
  background: white;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
}
select:disabled, input:disabled {
  opacity: 0.6;
  color: #5a5a5a;
  cursor: default;
  background-color: #E2E2E2;
}
th select, td select, th input, td input {
  margin: 0;
}

/*-------------------
  select
 -------------------*/
select {
  padding-right: 2.5rem;
  cursor: pointer;
  background: white url(../../img/select_expand_ic.png) no-repeat right 0.8rem center;
  background-size: auto .4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select:disabled {
  background-image: url(../../img/select_expand_ic_disabled.png);
}
select::-ms-expand {
  display: none;
}
select.select-slim {
  margin-right: 0;
  padding: 0.5rem;
  padding-right: 1rem;
  background-size: auto .27rem;
  background-position: right .35rem center;
}

/*-------------------
  input
 -------------------*/
input {
  /* text focus */
}
input.input-hidden {
  display: none;
}
input:not([type="button"]):not([type="submit"]):focus {
  box-shadow: 0 0 0px 2px #cfcfcf inset;
}

::-moz-placeholder {
  color: #aaa;
}

:-ms-input-placeholder {
  color: #aaa;
}

::placeholder {
  color: #aaa;
}

.input-date {
  width: 7.5rem;
}

.input-time {
  width: 5rem;
}

#ui-datepicker-div {
  z-index: 10 !important;
}

/*-------------------
  checkbox, radiobutton
 -------------------*/
label.label-input-wrap {
  white-space: nowrap;
}
label.label-input-wrap:not(:last-child) {
  margin-right: 1rem;
}
label.label-input-wrap input[type="checkbox"],
label.label-input-wrap input[type="radio"] {
  display: none;
}
label.label-input-wrap input[type="checkbox"] + span::before,
label.label-input-wrap input[type="radio"] + span::before {
  font-family: "Font Awesome 5 Free";
  color: #1ccdad;
  padding-right: .5rem;
  font-weight: normal;
}
label.label-input-wrap input[type="checkbox"]:checked + span::before,
label.label-input-wrap input[type="radio"]:checked + span::before {
  font-weight: 900;
}
label.label-input-wrap input[type="checkbox"]:disabled + span,
label.label-input-wrap input[type="radio"]:disabled + span {
  opacity: 0.6;
}
label.label-input-wrap input[type="checkbox"]:not([disabled]) + span,
label.label-input-wrap input[type="radio"]:not([disabled]) + span {
  cursor: pointer;
}

label.label-input-wrap input[type="checkbox"] + span::before {
  content: "\f0c8";
}
label.label-input-wrap input[type="checkbox"]:checked + span::before {
  content: "\f14a";
}

label.label-input-wrap input[type="radio"] + span::before {
  content: "\f111";
}
label.label-input-wrap input[type="radio"]:checked + span::before {
  content: "\f192";
}

/* scroll style */
.input-scroll-wrap {
  display: inline-block;
  background: white;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  min-width: 8rem;
  max-height: 11rem;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: 0;
}
.input-scroll-wrap::-webkit-scrollbar {
  display: none;
}
.input-scroll-wrap ul {
  padding: .5rem 2rem .5rem 1rem;
  color: #000;
  font-size: .9rem;
}
.input-scroll-wrap li {
  margin-bottom: .5rem;
}

#checkbox-all {
  position: absolute;
  right: 0;
  top: 0;
}

/* radio wrap */
.radio-wrap {
  /*  border: 1px solid $color-border;
    border-radius: $border-radius-value;*/
  display: inline-block;
  padding: 0.5rem;
  padding-right: 2rem;
}
.radio-wrap p {
  margin-bottom: .3rem;
}
.radio-wrap p:last-child {
  margin-bottom: 0;
}
.radio-wrap label {
  font-size: .9rem;
}

/*-------------------
  label
 -------------------*/
.input-label-horizontal > label:first-of-type {
  /*display: inline-block;*/
  padding-right: 1rem;
}
.input-label-horizontal > * {
  display: inline-block;
}

.input-label-w6 > label:first-of-type {
  width: 6rem;
  padding-right: 0;
}

.input-label-w8 > label:first-of-type {
  width: 8rem;
  padding-right: 0;
}

.input-label-w10 > label:first-of-type {
  width: 10rem;
  padding-right: 0;
}

.input-label-w12 > label:first-of-type {
  width: 12rem;
  padding-right: 0;
}

.input-label-w15 > label:first-of-type {
  width: 15rem;
  padding-right: 0;
}

.input-label-w18 > label:first-of-type {
  width: 18rem;
  padding-right: 0;
}

.input-label-vertical > label:first-of-type {
  display: block;
  margin: 0 1rem .3rem 0;
}

/*-------------------
  base
-------------------*/
html {
  width: 100%;
  /*height: 100%;*/
  background: #F6F6F3;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color: #000;
  font-size: 14px;
  font-size: clamp(14px, 1vw, 18px);
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 18px;
    font-size: clamp(14px, 1vw, 18px);
  }
}

body {
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  position: relative;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

h1, h2, h3, h4 {
  font-weight: normal;
  text-align: left;
}

h3 {
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}

h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
a:hover {
  opacity: 0.7;
}

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

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

.text-caption {
  font-size: smaller;
  color: #5a5a5a;
}

.text-error {
  color: #ff6347;
}

.text-block {
  display: block;
  margin-bottom: .5rem;
}

span.icon-text {
  padding-left: .5rem;
}

/*-------------------
  indicator
-------------------*/
.blockMsg {
  border: none !important;
  background: none !important;
  width: 100% !important;
  left: 0 !important;
}
.blockMsg .indicator-wrap {
  display: inline-block;
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 2px;
  padding: 1rem 1.5rem;
}
@media screen and (max-width: 415px) {
  .blockMsg .indicator-wrap {
    padding: 1rem 1.5rem;
  }
}
.blockMsg .indicator-wrap * {
  vertical-align: middle;
}
.blockMsg .indicator-wrap .indicator {
  font-size: large;
}
@media screen and (max-width: 415px) {
  .blockMsg .indicator-wrap .indicator {
    font-size: medium;
  }
}
.blockMsg .indicator-wrap .indicator i {
  font-size: larger;
}
.blockMsg .indicator-wrap .indicator .icon-text {
  padding-left: 1rem;
}

/*-------------------
  button style
 -------------------*/
/* structure */
.btn {
  display: inline-block;
  font-size: .9rem;
  line-height: 1.5rem;
  margin: 0;
  padding: .5rem 1.5rem;
  border: 1px solid #cfcfcf;
  background: white;
  border-radius: 2px;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.btn:not([disabled]) {
  cursor: pointer;
}
.btn:not([disabled]):hover {
  opacity: 0.7;
}
.btn:not([disabled]):active {
  opacity: 1;
  background: #cfcfcf;
}
.btn[disabled] {
  opacity: 0.6;
}

.btn-ic {
  border: none;
  background: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding: .5rem;
  width: 2rem;
  height: 2rem;
  line-height: normal;
}
.btn-ic:not([disabled]):active {
  background: none;
}

.btn-ic-text {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.btn-small {
  padding: .2rem .5rem;
  font-size: .85rem;
}

/* skin */
.btn-theme, .btn-red {
  color: white;
  border: none;
}
.btn-theme:disabled, .btn-red:disabled {
  color: rgba(255, 255, 255, 0.5);
}

.btn-theme {
  background: #1ccdad;
}
.btn-theme:not([disabled]):active {
  background: #199982;
}

.btn-red {
  background: #ff6347;
}
.btn-red:not([disabled]):active {
  background: #e63819;
}

.btn-ic-theme {
  color: #1ccdad;
}
.btn-ic-theme:not([disabled]):active {
  color: #199982;
}

.btn-ic-red {
  color: #ff6347;
}
.btn-ic-red:not([disabled]):active {
  color: #e63819;
}

.btn-clear {
  border: none;
  background: none;
}
.btn-clear:not([disabled]):active {
  background: none;
}

.btn-back {
  padding-left: 0;
  top: -.5rem;
}

/*-------------------
  table
 -------------------*/
table.table-fixed {
  table-layout: fixed;
  width: 0;
}

.table-wrap {
  overflow-x: scroll;
  margin: 0 1rem 1rem 0;
  padding-bottom: 1rem;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrap:not(.no-scroll) {
  max-height: 35rem;
  overflow-y: scroll;
}
.table-wrap:not(.no-scroll).small {
  max-height: 20rem;
}
.table-wrap:not(.no-scroll).medium {
  max-height: 25rem;
}
.table-wrap:not(.no-scroll).normal {
  max-height: 30rem;
}
.table-wrap:not(.no-scroll).large {
  max-height: 35rem;
}
.table-wrap table:not(.ui-datepicker-calendar) {
  border-collapse: collapse;
}
.table-wrap table:not(.ui-datepicker-calendar) thead {
  color: #5a5a5a;
  border-bottom: 1px solid #5a5a5a;
  background: #F6F6F3;
}
.table-wrap table:not(.ui-datepicker-calendar) tbody tr {
  border-bottom: 1px solid #cfcfcf;
}
.table-wrap table:not(.ui-datepicker-calendar) th, .table-wrap table:not(.ui-datepicker-calendar) td {
  font-size: 1rem;
  white-space: nowrap;
  line-height: 3rem;
  padding: 0 1rem;
}
.table-wrap table:not(.ui-datepicker-calendar) th:first-of-type:not(.not-first), .table-wrap table:not(.ui-datepicker-calendar) td:first-of-type:not(.not-first) {
  padding-left: 2.5rem;
}
.table-wrap table:not(.ui-datepicker-calendar) th:last-of-type:not(.not-last), .table-wrap table:not(.ui-datepicker-calendar) td:last-of-type:not(.not-last) {
  padding-right: 2.5rem;
}
@media screen and (max-width: 415px) {
  .table-wrap table:not(.ui-datepicker-calendar) th, .table-wrap table:not(.ui-datepicker-calendar) td {
    padding: 0 .25rem;
  }
  .table-wrap table:not(.ui-datepicker-calendar) th:first-of-type:not(.not-first), .table-wrap table:not(.ui-datepicker-calendar) td:first-of-type:not(.not-first) {
    padding-left: 1rem;
  }
  .table-wrap table:not(.ui-datepicker-calendar) th:last-of-type:not(.not-last), .table-wrap table:not(.ui-datepicker-calendar) td:last-of-type:not(.not-last) {
    padding-right: 1rem;
  }
}
.table-wrap table:not(.ui-datepicker-calendar).table-variable th, .table-wrap table:not(.ui-datepicker-calendar).table-variable td {
  padding: 0 .25rem !important;
}
@media screen and (min-width: 416px) {
  .table-wrap table:not(.ui-datepicker-calendar).table-variable th, .table-wrap table:not(.ui-datepicker-calendar).table-variable td {
    padding: 0 2.5rem !important;
  }
}
.table-wrap table:not(.ui-datepicker-calendar).table-info thead {
  color: #000;
  border-bottom: none;
  background: rgba(28, 205, 173, 0.3);
}
.table-wrap table:not(.ui-datepicker-calendar).table-info th:not(:last-of-type) {
  border-right: 1px solid white;
}
.table-wrap table:not(.ui-datepicker-calendar).table-info td:not(:last-of-type) {
  border-right: 1px solid #cfcfcf;
}
.table-wrap table:not(.ui-datepicker-calendar).table-info th, .table-wrap table:not(.ui-datepicker-calendar).table-info td {
  line-height: 2rem;
}
.table-wrap table:not(.ui-datepicker-calendar).table-info th:first-of-type:not(.not-first), .table-wrap table:not(.ui-datepicker-calendar).table-info td:first-of-type:not(.not-first) {
  padding-left: 1rem;
}
.table-wrap table:not(.ui-datepicker-calendar).table-info th:last-of-type:not(.not-last), .table-wrap table:not(.ui-datepicker-calendar).table-info td:last-of-type:not(.not-last) {
  padding-right: 1rem;
}
@media screen and (max-width: 415px) {
  .table-wrap table:not(.ui-datepicker-calendar).table-info th:first-of-type:not(.not-first), .table-wrap table:not(.ui-datepicker-calendar).table-info td:first-of-type:not(.not-first) {
    padding-left: .25rem;
  }
  .table-wrap table:not(.ui-datepicker-calendar).table-info th:last-of-type:not(.not-last), .table-wrap table:not(.ui-datepicker-calendar).table-info td:last-of-type:not(.not-last) {
    padding-right: .25rem;
  }
}

.table-sticky.table-sticky-head {
  margin-bottom: 0;
  padding-bottom: 0;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-sticky.table-sticky-head::-webkit-scrollbar {
  display: none;
}

/*-------------------
  panel
-------------------*/
.panel {
  padding: 2rem;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: white;
}
@media screen and (max-width: 415px) {
  .panel {
    padding: 1rem;
  }
}

.panel-divider {
  width: calc(100% + 2rem * 2);
  height: 1px;
  border-bottom: 1px solid #cfcfcf;
  left: -2rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 415px) {
  .panel-divider {
    width: calc(100% + 1rem * 2);
    left: -1rem;
    margin-bottom: 1rem;
  }
}
.content-block .panel-divider {
  opacity: .5;
}

/*----------------
  tab layout(pabel header)
-----------------*/
#content-menu ul {
  display: flex;
  flex-wrap: wrap-reverse;
}
#content-menu ul .tab-item .tab-text {
  width: 100%;
  display: block;
  padding: .5rem .8rem;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  border: 1px solid #cfcfcf;
  border-bottom: none;
  background: white;
}
#content-menu ul .tab-item .tab-text:hover {
  opacity: 1;
}
@media screen and (max-width: 960px) {
  #content-menu ul .tab-item .tab-text {
    font-size: .9rem;
    padding: .5rem;
  }
}
@media screen and (max-width: 415px) {
  #content-menu ul .tab-item .tab-text {
    font-size: .7rem;
    padding: .4rem .5rem;
    line-height: 1.1rem;
  }
}
#content-menu ul .tab-item:not(.current) .tab-text:hover {
  background: #ebebeb;
}
#content-menu ul .tab-item.current {
  flex: none;
  /*order: -1;*/
  /*&::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    background: white;
    width: 100%;
    height: 1px;
    z-index: 2;
  }*/
}
#content-menu ul .tab-item.current .tab-text {
  /*border-bottom-color: white;*/
  font-weight: bold;
  color: #1ccdad;
  cursor: default;
}

/*----------------
  panel footer
-----------------*/
.panel-footer {
  margin-top: 1rem;
}

/*-------------------
  content
-------------------*/
.content-block {
  margin-bottom: 2rem;
  max-width: 100%;
  overflow: hidden;
}
* > .content-block:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 415px) {
  .content-block {
    margin-bottom: 1rem;
  }
}

.content-block-horizontal {
  display: inline-block;
  margin-right: 2rem;
  margin-bottom: 1rem;
  vertical-align: top;
  max-width: 100%;
}
* > .content-block-horizontal:last-of-type {
  margin-right: 0;
}
@media screen and (max-width: 415px) {
  .content-block-horizontal {
    margin-right: 1rem;
  }
}

.content-indent {
  margin-left: 2rem !important;
  /*max-width: calc(100% - 2rem);*/
}
@media screen and (max-width: 415px) {
  .content-indent {
    margin-left: 1rem !important;
    /*max-width: calc(100% - 1rem);*/
  }
}

/*----------------
  dialog
-----------------*/
.dialog-back {
  background-color: #000000;
  position: fixed;
  left: 0px;
  top: 0px;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 999;
}

/* dialog */
.dialog-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 999;
  visibility: hidden;
  top: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-wrap[style="visibility: hidden;"] .dialog-content {
  overflow-y: hidden;
}
.dialog-wrap .dialog-content {
  display: inline-block;
  text-align: left;
  padding: 2rem;
  background-color: #FFFFFF;
  box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.34);
  border-radius: 2px;
  max-height: 90%;
  max-width: 90%;
  overflow-y: scroll;
}
@media screen and (max-width: 415px) {
  .dialog-wrap .dialog-content {
    padding: 1rem;
  }
}
.dialog-wrap .dialog-content .table-wrap {
  margin-right: 0 !important;
}

/*----------------
contents right side
-----------------*/
/*$contents-header-item-height: 2.5rem;*/
.contents-full {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (max-width: 415px) {
  .contents-full {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.right-side {
  padding-left: 15rem;
  padding-right: 2rem;
  overflow: hidden;
  /*overflow-y: scroll;*/
  transition: width .2s ease-out;
}
@media screen and (max-width: 960px) {
  .right-side {
    padding-left: 6rem;
  }
}
@media screen and (max-width: 415px) {
  .right-side {
    width: 100%;
    padding: 0 1rem;
  }
}

/* header, footer */
#contents-header, #contents-footer {
  /* pc */
  /* pc-slim */
}
@media screen and (min-width: 415px) {
  #contents-header, #contents-footer {
    position: fixed;
    width: calc(100% - 13rem);
    padding-left: 2rem;
    z-index: 2;
    right: 0;
    background: #F6F6F3;
  }
}
@media screen and (min-width: 415px) and (max-width: 960px) {
  #contents-header, #contents-footer {
    width: calc(100% - 4rem);
  }
}
#contents-header.contents-full, #contents-footer.contents-full {
  width: 100%;
}

/* panel frame */
#contents-header::after, #contents-footer.isScroll::before {
  /* pc */
}
@media screen and (min-width: 415px) {
  #contents-header::after, #contents-footer.isScroll::before {
    content: "";
    height: 2px;
    width: 100%;
    background: white;
    display: block;
    border-radius: 2px;
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
  }
}

/* header */
#contents-header {
  /* pc */
  /* sp */
}
@media screen and (min-width: 415px) {
  #contents-header {
    padding-top: 7rem;
  }
  #contents-header::after {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
}
@media screen and (max-width: 415px) {
  #contents-header {
    padding-top: 6rem;
  }
}

/* footer */
#contents-footer {
  padding-bottom: 1rem;
  /* pc */
}
@media screen and (min-width: 416px) {
  #contents-footer {
    bottom: 0;
  }
  #contents-footer.isScroll::before {
    bottom: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
}

/* main */
#contents-main {
  padding-bottom: 1rem;
  padding-top: 7rem;
  /* sp */
  /* pc */
}
@media screen and (max-width: 415px) {
  #contents-main.has-header {
    padding-top: 0;
  }
  #contents-main.has-footer {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 416px) {
  #contents-main.has-header {
    padding-top: 9.5rem;
  }
  #contents-main.has-header.tab-2row {
    padding-top: 12rem;
  }
  #contents-main.has-header.tab-3row {
    padding-top: 14.5rem;
  }
  #contents-main.has-header.tab-4row {
    padding-top: 17rem;
  }
  #contents-main.has-header.tab-5row {
    padding-top: 19.5rem;
  }
  #contents-main.has-header.tab-6row {
    padding-top: 22rem;
  }
  #contents-main.has-header.tab-7row {
    padding-top: 24.5rem;
  }
  #contents-main.has-header.tab-8row {
    padding-top: 27rem;
  }
  #contents-main.has-header.tab-9row {
    padding-top: 29.5rem;
  }
  #contents-main.has-header.tab-10row {
    padding-top: 32rem;
  }
  #contents-main.has-footer {
    padding-bottom: 4.5rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mt6 {
  margin-top: 60px !important;
}

.mr6 {
  margin-right: 60px !important;
}

.mb6 {
  margin-bottom: 60px !important;
}

.ml6 {
  margin-left: 60px !important;
}

.mt7 {
  margin-top: 70px !important;
}

.mr7 {
  margin-right: 70px !important;
}

.mb7 {
  margin-bottom: 70px !important;
}

.ml7 {
  margin-left: 70px !important;
}

.mt8 {
  margin-top: 80px !important;
}

.mr8 {
  margin-right: 80px !important;
}

.mb8 {
  margin-bottom: 80px !important;
}

.ml8 {
  margin-left: 80px !important;
}

.mt9 {
  margin-top: 90px !important;
}

.mr9 {
  margin-right: 90px !important;
}

.mb9 {
  margin-bottom: 90px !important;
}

.ml9 {
  margin-left: 90px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pt6 {
  padding-top: 60px !important;
}

.pr6 {
  padding-right: 60px !important;
}

.pb6 {
  padding-bottom: 60px !important;
}

.pl6 {
  padding-left: 60px !important;
}

.pt7 {
  padding-top: 70px !important;
}

.pr7 {
  padding-right: 70px !important;
}

.pb7 {
  padding-bottom: 70px !important;
}

.pl7 {
  padding-left: 70px !important;
}

.pt8 {
  padding-top: 80px !important;
}

.pr8 {
  padding-right: 80px !important;
}

.pb8 {
  padding-bottom: 80px !important;
}

.pl8 {
  padding-left: 80px !important;
}

.pt9 {
  padding-top: 90px !important;
}

.pr9 {
  padding-right: 90px !important;
}

.pb9 {
  padding-bottom: 90px !important;
}

.pl9 {
  padding-left: 90px !important;
}

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

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

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

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

/*----------------
  iOS専用
-----------------*/
.ios-text {
  -webkit-text-size-adjust: 100% !important;
}

/*# sourceMappingURL=common.css.map */