@charset "UTF-8";
/**
 * Types
 */
/**
 * Color Palette
 */
/* Brand */
/* Type */
/**
 * App Color
 */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* Resets */
html {
  font-size: 14px;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  background-color: white;
  box-sizing: border-box;
  color: #505050;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6,
sm {
  font-size: 10px;
}

.h0 {
  font-size: 0 !important;
}

.h1 {
  font-size: 20px !important;
}

.h2 {
  font-size: 18px !important;
}

.h3 {
  font-size: 16px !important;
}

.h4 {
  font-size: 14px !important;
}

.h5 {
  font-size: 12px !important;
}

.h6,
.sm {
  font-size: 10px !important;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 400;
}

p,
ul {
  margin-bottom: 1rem;
}

[type="text"],
[type="password"],
textarea {
  text-indent: 0.5em;
}

[type="text"],
[type="email"] {
  line-height: normal;
}

button,
input[type="submit"] {
  border-radius: 0;
  background-color: transparent;
  border: none;
  color: inherit;
}

button:focus {
  outline: none;
}

label {
  cursor: pointer;
}

button:disabled,
select:disabled {
  opacity: 0.5;
}

.bg-sat {
  /* background-color: #EBF0F5 */
  background-color: rgba(243, 223, 223, 0.6);
}

.bg-holiday {
  /* background-color: #F3DFDF */
  background-color: rgba(235, 240, 245, 0.6);
}

.bg-white {
  background-color: white;
}

.bg-primary {
  background-color: #505050;
}

.bg-warning {
  background-color: #F5C823;
}

.bg-danger {
  background-color: #D25858;
}

.bg-success {
  background-color: #2AB27B;
}

.text-default-color {
  color: #505050;
}

.text-white {
  color: white;
}

.text-black {
  color: #505050;
}

.text-muted {
  color: #C8C8C8 !important;
}

.text-primary {
  color: #1A466E !important;
}

.text-danger {
  color: #C52A2A !important;
}

.text-blue {
  color: #2369B6 !important;
}

.color-1 {
  background-color: #DE141D;
}

.color-2 {
  background-color: #00AB60;
}

.color-3 {
  background-color: #FFC954;
}

.color-4 {
  background-color: #008BC9;
}

.color-5 {
  background-color: #C53CBA;
}

.color-6 {
  background-color: #E08714;
}

.color-7 {
  background-color: #6E59D2;
}

.color-8 {
  background-color: #91BF78;
}

.color-9 {
  background-color: #77BBD9;
}

.color-10 {
  background-color: #F196C5;
}

.color-11 {
  background-color: #B3DC3E;
}

.color-12 {
  background-color: #284ED7;
}

.color-13 {
  background-color: #454343;
}

.color-14 {
  background-color: #AFAFAF;
}

.color-15 {
  background-color: #B48057;
}

.ota-rakuten {
  background-color: #67B822 !important;
}

.ota-jalan {
  background-color: #FF6600 !important;
}

.ota-ikyu {
  background-color: #1C4678 !important;
}

.ota-ikyu-biz {
  background-color: #8d63ba !important;
}

.ota-rurubu {
  background-color: #000066 !important;
}

.ota-trip {
  background-color: #00AF87 !important;
}

.ota-benefit {
  background-color: #00AF87 !important;
}

.ota-jtb {
  background-color: #C9152E !important;
}

.ota-booking {
  background-color: #003580 !important;
}

.ota-rakuten,
.ota-jalan,
.ota-ikyu,
.ota-ikyu-biz,
.ota-rurubu,
.ota-trip,
.ota-benefit,
.ota-jtb,
.ota-booking {
  border: none !important;
  color: white !important;
}

.ota-rakuten-inverse {
  background-color: white !important;
  border: 1px solid #67B822 !important;
  color: #67B822 !important;
}

.ota-jalan-inverse {
  background-color: white !important;
  border: 1px solid #FF6600 !important;
  color: #FF6600 !important;
}

.ota-ikyu-inverse {
  background-color: white !important;
  border: 1px solid #1C4678 !important;
  color: #1C4678 !important;
}

.ota-ikyu-biz-inverse {
  background-color: white !important;
  border: 1px solid #8d63ba !important;
  color: #8d63ba !important;
}

.ota-rurubu-inverse {
  background-color: white !important;
  border: 1px solid #000066 !important;
  color: #000066 !important;
}

.ota-trip-inverse {
  background-color: white !important;
  border: 1px solid #00AF87 !important;
  color: #00AF87 !important;
}

.ota-benefit-inverse {
  background-color: white !important;
  border: 1px solid #00AF87 !important;
  color: #00AF87 !important;
}

.ota-jtb-inverse {
  background-color: white !important;
  border: 1px solid #C9152E !important;
  color: #C9152E !important;
}

.ota-booking-inverse {
  background-color: white !important;
  border: 1px solid #003580 !important;
  color: #003580 !important;
}

/* Sizing */
.w-100 {
  width: 100%;
}

/* Border */
.border {
  border: 1px solid #C8C8C8 !important;
}

.border-top {
  border-top: 1px solid #C8C8C8 !important;
}

.border-right {
  border-right: 1px solid #C8C8C8 !important;
}

.border-bottom {
  border-bottom: 1px solid #C8C8C8 !important;
}

.border-left {
  border-left: 1px solid #C8C8C8 !important;
}

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

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

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

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

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

.border-primary {
  border-color: #505050 !important;
}

/* Scroll */
.scroll-x {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
}

.scroll-y {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

.ofh {
  overflow: hidden;
}

/* Display */
.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-table {
  display: table;
  table-layout: fixed;
}

.d-table > * {
  display: table-cell;
}

/* Visibility */
.hide {
  display: none !important;
}

/* Position */
.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.fixed, .fixed-fullscreen {
  position: fixed !important;
}

.fixed-fullscreen {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cover {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Break */
a.unstyled {
  color: inherit;
  text-decoration: none;
}

a.unstyled:hover {
  opacity: 0.75;
}

ul.unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

button.unstyled,
input[type="submit"].unstyled {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  color: inherit;
}

button.unstyled:hover,
input[type="submit"].unstyled:hover {
  opacity: 0.75;
}

.container {
  margin: 0 auto;
  max-width: 960px;
}

.cursor-grab {
  cursor: -webkit-grab;
}

.cursor-grab::active {
  cursor: -webkit-zoom-out;
}

/* Flex */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.align-items-start, .flex-y-start {
  align-items: flex-start !important;
}

.align-items-end, .flex-y-end {
  align-items: flex-end !important;
}

.align-items-center, .flex-y-center, .flex-center-center {
  align-items: center !important;
}

.align-items-baseline, .flex-y-baseline {
  align-items: baseline !important;
}

.align-items-stretch, .flex-y-stretch {
  align-items: stretch !important;
}

.align-self-auto, .flex-self-y-auto {
  -ms-grid-row-align: auto !important;
  align-self: auto !important;
}

.align-self-start, .flex-self-y-start {
  align-self: flex-start !important;
}

.align-self-end, .flex-self-y-end {
  align-self: flex-end !important;
}

.align-self-center, .flex-self-y-center {
  -ms-grid-row-align: center !important;
  align-self: center !important;
}

.align-self-baseline, .flex-self-y-baseline {
  align-self: baseline !important;
}

.align-self-stretch, .flex-self-y-stretch {
  -ms-grid-row-align: stretch !important;
  align-self: stretch !important;
}

.justify-content-start, .flex-x-start {
  justify-content: flex-start !important;
}

.justify-content-end, .flex-x-end {
  justify-content: flex-end !important;
}

.justify-content-center, .flex-x-center, .flex-center-center {
  justify-content: center !important;
}

.justify-content-between, .flex-x-between {
  justify-content: space-between !important;
}

.justify-content-around, .flex-x-around {
  justify-content: space-around !important;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-grow-3 {
  flex-grow: 3;
}

.flex-1 {
  flex: 1 0 1px;
}

.flex-2 {
  flex: 2 0 2px;
}

.flex-3 {
  flex: 3 0 3px;
}

.flex-4 {
  flex: 4 0 4px;
}

.flex-5 {
  flex: 5 0 5px;
}

.flex-6 {
  flex: 6 0 6px;
}

.flex-7 {
  flex: 7 0 7px;
}

.flex-8 {
  flex: 8 0 8px;
}

.flex-9 {
  flex: 9 0 9px;
}

.flex-10 {
  flex: 10 0 10px;
}

.flex-11 {
  flex: 11 0 11px;
}

.flex-12 {
  flex: 12 0 12px;
}

/**
 * Alias
 */
/**
 * 解りづらいので廃止予定
 */
.d-flex-center {
  display: flex !important;
  align-items: center !important;
}

.d-flex-center-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.d-flex-end {
  display: flex !important;
  align-items: flex-end !important;
}

.d-flex-stretch {
  display: flex !important;
  align-items: stretch !important;
}

/* List */
.list-unstyled, .list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline li {
  display: inline-block;
}

ol.list-circle {
  counter-reset: li;
  padding: 0;
}

ol.list-circle > li {
  list-style: none;
  position: relative;
}

ol.list-circle > li:before {
  counter-increment: li;
  content: counter(li);
  margin-right: 1em;
  background: white;
  border: 1px solid #505050;
  color: #505050;
  border-radius: 50%;
  text-align: center;
  width: 1.3em;
  height: 1.3em;
  position: absolute;
  left: 16px;
  top: 16px;
  line-height: 1.4;
}

/* Round */
.round-circle {
  border-radius: 50%;
}

.shadow, .icon-trash:hover {
  box-shadow: 0 2px 4px #A3A3A3;
}

.shadow-8 {
  box-shadow: 8px 8px 16px #A3A3A3;
}

/* Spacing */
.m-auto {
  margin: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.p-auto {
  padding: auto !important;
}

.pl-auto {
  padding-left: auto !important;
}

.pr-auto {
  padding-right: auto !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.m-0 {
  margin: 0px !important;
}

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

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

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

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

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

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

.p-0 {
  padding: 0px !important;
}

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

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

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

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

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

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

.m-2 {
  margin: 2px !important;
}

.ml-2 {
  margin-left: 2px !important;
}

.mr-2 {
  margin-right: 2px !important;
}

.mt-2 {
  margin-top: 2px !important;
}

.mb-2 {
  margin-bottom: 2px !important;
}

.mx-2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.my-2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.p-2 {
  padding: 2px !important;
}

.pl-2 {
  padding-left: 2px !important;
}

.pr-2 {
  padding-right: 2px !important;
}

.pt-2 {
  padding-top: 2px !important;
}

.pb-2 {
  padding-bottom: 2px !important;
}

.px-2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.py-2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.m-4 {
  margin: 4px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mx-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.p-4 {
  padding: 4px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.px-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.m-6 {
  margin: 6px !important;
}

.ml-6 {
  margin-left: 6px !important;
}

.mr-6 {
  margin-right: 6px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.mx-6 {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.my-6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.p-6 {
  padding: 6px !important;
}

.pl-6 {
  padding-left: 6px !important;
}

.pr-6 {
  padding-right: 6px !important;
}

.pt-6 {
  padding-top: 6px !important;
}

.pb-6 {
  padding-bottom: 6px !important;
}

.px-6 {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.m-8 {
  margin: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.p-8 {
  padding: 8px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.m-10 {
  margin: 10px !important;
}

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

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

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

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

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

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

.p-10 {
  padding: 10px !important;
}

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

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

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

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

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

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

.m-12 {
  margin: 12px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mx-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.p-12 {
  padding: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.px-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.m-14 {
  margin: 14px !important;
}

.ml-14 {
  margin-left: 14px !important;
}

.mr-14 {
  margin-right: 14px !important;
}

.mt-14 {
  margin-top: 14px !important;
}

.mb-14 {
  margin-bottom: 14px !important;
}

.mx-14 {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.my-14 {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.p-14 {
  padding: 14px !important;
}

.pl-14 {
  padding-left: 14px !important;
}

.pr-14 {
  padding-right: 14px !important;
}

.pt-14 {
  padding-top: 14px !important;
}

.pb-14 {
  padding-bottom: 14px !important;
}

.px-14 {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.py-14 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.m-16 {
  margin: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.p-16 {
  padding: 16px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.px-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.m-18 {
  margin: 18px !important;
}

.ml-18 {
  margin-left: 18px !important;
}

.mr-18 {
  margin-right: 18px !important;
}

.mt-18 {
  margin-top: 18px !important;
}

.mb-18 {
  margin-bottom: 18px !important;
}

.mx-18 {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.my-18 {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.p-18 {
  padding: 18px !important;
}

.pl-18 {
  padding-left: 18px !important;
}

.pr-18 {
  padding-right: 18px !important;
}

.pt-18 {
  padding-top: 18px !important;
}

.pb-18 {
  padding-bottom: 18px !important;
}

.px-18 {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.py-18 {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.m-20 {
  margin: 20px !important;
}

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

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

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

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

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

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

.p-20 {
  padding: 20px !important;
}

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

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

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

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

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

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

.m-24 {
  margin: 24px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mx-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.p-24 {
  padding: 24px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.m-28 {
  margin: 28px !important;
}

.ml-28 {
  margin-left: 28px !important;
}

.mr-28 {
  margin-right: 28px !important;
}

.mt-28 {
  margin-top: 28px !important;
}

.mb-28 {
  margin-bottom: 28px !important;
}

.mx-28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.my-28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.p-28 {
  padding: 28px !important;
}

.pl-28 {
  padding-left: 28px !important;
}

.pr-28 {
  padding-right: 28px !important;
}

.pt-28 {
  padding-top: 28px !important;
}

.pb-28 {
  padding-bottom: 28px !important;
}

.px-28 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.py-28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.m-30 {
  margin: 30px !important;
}

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

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

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

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

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

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

.p-30 {
  padding: 30px !important;
}

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

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

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

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

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

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

.m-32 {
  margin: 32px !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.p-32 {
  padding: 32px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.px-32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.m-40 {
  margin: 40px !important;
}

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

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

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

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

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

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

.p-40 {
  padding: 40px !important;
}

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

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

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

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

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

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

.m-48 {
  margin: 48px !important;
}

.ml-48 {
  margin-left: 48px !important;
}

.mr-48 {
  margin-right: 48px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.mx-48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.p-48 {
  padding: 48px !important;
}

.pl-48 {
  padding-left: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.px-48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.m-56 {
  margin: 56px !important;
}

.ml-56 {
  margin-left: 56px !important;
}

.mr-56 {
  margin-right: 56px !important;
}

.mt-56 {
  margin-top: 56px !important;
}

.mb-56 {
  margin-bottom: 56px !important;
}

.mx-56 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.my-56 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

.p-56 {
  padding: 56px !important;
}

.pl-56 {
  padding-left: 56px !important;
}

.pr-56 {
  padding-right: 56px !important;
}

.pt-56 {
  padding-top: 56px !important;
}

.pb-56 {
  padding-bottom: 56px !important;
}

.px-56 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.py-56 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.m-60 {
  margin: 60px !important;
}

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

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

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

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

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

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

.p-60 {
  padding: 60px !important;
}

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

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

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

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

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

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

.m-64 {
  margin: 64px !important;
}

.ml-64 {
  margin-left: 64px !important;
}

.mr-64 {
  margin-right: 64px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.mx-64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.my-64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.p-64 {
  padding: 64px !important;
}

.pl-64 {
  padding-left: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.pt-64 {
  padding-top: 64px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.px-64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.py-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.m-72 {
  margin: 72px !important;
}

.ml-72 {
  margin-left: 72px !important;
}

.mr-72 {
  margin-right: 72px !important;
}

.mt-72 {
  margin-top: 72px !important;
}

.mb-72 {
  margin-bottom: 72px !important;
}

.mx-72 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.my-72 {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.p-72 {
  padding: 72px !important;
}

.pl-72 {
  padding-left: 72px !important;
}

.pr-72 {
  padding-right: 72px !important;
}

.pt-72 {
  padding-top: 72px !important;
}

.pb-72 {
  padding-bottom: 72px !important;
}

.px-72 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.py-72 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.m-80 {
  margin: 80px !important;
}

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

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

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

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

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

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

.p-80 {
  padding: 80px !important;
}

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

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

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

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

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

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

/* Text */
.text-left {
  text-align: left;
}

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

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

.v-align-top {
  vertical-align: top;
}

.text-bold {
  font-weight: bold;
}

.text-thin {
  font-weight: 400;
}

.line-height-1 {
  line-height: 1;
}

.line-height-default {
  line-height: 1.62;
}

.nowrap {
  white-space: nowrap;
}

.nowrap-break {
  white-space: normal !important;
}

/* Arrow */
.arrow-top::before, .arrow-top::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-top::before {
  top: -14px;
  right: 15px;
  border-bottom: 7px solid #C8C8C8;
}

.arrow-top::after {
  top: -12px;
  right: 16px;
  border-bottom: 6px solid white;
}

.arrow-bottom {
  position: relative;
}

.arrow-bottom::before, .arrow-bottom::after {
  position: absolute;
  top: -1px;
  left: -7px;
}

.arrow-bottom::before {
  border: 6px solid transparent;
  border-top-color: #C8C8C8;
}

.arrow-bottom::after {
  border: 5px solid transparent;
  border-top-color: white;
}

.arrow-bottom::before, .arrow-bottom::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-bottom::before {
  bottom: -14px;
  right: 0px;
  border-top: 7px solid #C8C8C8;
}

.arrow-bottom::after {
  bottom: -12px;
  border-top: 6px solid white;
}

.arrow-user::before, .arrow-user::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-user::before {
  top: -14px;
  right: 39px;
  border-bottom: 7px solid #C8C8C8;
}

.arrow-user::after {
  top: -12px;
  right: 40px;
  border-bottom: 6px solid white;
}

.arrow-term::before, .arrow-term::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-term::before {
  top: -14px;
  left: 32px;
  border-bottom: 7px solid #C8C8C8;
}

.arrow-term::after {
  top: -12px;
  left: 33px;
  border-bottom: 6px solid white;
}

.arrow-update::before, .arrow-update::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-update::before {
  top: -14px;
  left: 64px;
  border-bottom: 7px solid #C8C8C8;
}

.arrow-update::after {
  top: -12px;
  left: 65px;
  border-bottom: 6px solid white;
}

.arrow-select-ota::before, .arrow-select-ota::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.arrow-select-ota::before {
  top: -14px;
  left: 98px;
  border-bottom: 7px solid #C8C8C8;
}

.arrow-select-ota::after {
  top: -12px;
  left: 99px;
  border-bottom: 6px solid white;
}

.circle-4 {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50%;
}

.circle-8 {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
}

.circle-12 {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
}

.circle-12 {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
}

.circle-14 {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
}

.circle-18 {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
}

.circle-24 {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
}

.circle-28 {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
}

.circle-32 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
}

.circle-40 {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
}

.circle-64 {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
}

.circle-12 {
  border: 1px solid white;
  box-sizing: content-box;
}

/* Icon */
.icon-state, .icon-term, .icon-term-full, .icon-update, .icon-detail, .icon-module, .icon-daily, .icon-realtime, .icon-web, .icon-filter, .icon-list, .icon-close, .icon-trash, .icon-face, .icon-settings, .icon-timer, .icon-person-add, .icon-rank, .icon-cart, .icon-download, .icon-manual, .icon-weather, .icon-action {
  background-position: center center;
  background-repeat: no-repeat;
}

.icon-state.success {
  background-image: url("/images/states/success.svg");
  background-size: 75% auto;
}

.icon-state.warning {
  background-image: url("/images/states/warning.svg");
  background-size: auto 75%;
}

.icon-state.up {
  background-image: url("/images/states/up.svg");
  background-size: auto 75%;
}

.icon-state.down {
  background-image: url("/images/states/down.svg");
  background-size: auto 75%;
}

.icon-term {
  background-image: url("/images/calender.svg");
  background-size: 50% auto;
}

.icon-term-full {
  width: 1em;
  height: 1em;
  background-image: url("/images/calender.svg");
  background-size: contain;
}

.icon-update {
  background-image: url("/images/cloud.svg");
  background-size: 50% auto;
}

.icon-detail {
  background-image: url("/images/detail.svg");
  background-size: auto 50%;
}

.icon-module {
  background-image: url("/images/module.svg");
  background-size: 50% auto;
}

.icon-daily {
  background-image: url("/images/daily.svg");
  background-size: 50% auto;
}

.icon-realtime {
  background-image: url("/images/realtime.svg");
  background-size: 50% auto;
}

.icon-web {
  background-image: url("/images/web.svg");
  background-size: 50% auto;
}

.icon-filter {
  background-image: url("/images/filter.svg");
  background-size: auto 50%;
}

.icon-list {
  background-image: url("/images/list.svg");
  background-size: 50% auto;
}

.icon-close {
  background-image: url("/images/close.svg");
  background-size: 50% auto;
  background-color: rgba(255, 255, 255, 0.25);
}

.icon-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.icon-trash {
  background-image: url("/images/icon-trash.svg");
  background-size: 50% auto;
  background-color: rgba(255, 255, 255, 0.25);
}

.icon-trash:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.icon-face {
  background-image: url("/images/headbar/face.svg");
  background-size: 110%;
}

.icon-settings {
  background-image: url("/images/settings.svg");
  background-size: contain;
}

.icon-timer {
  width: 1em;
  height: 1em;
  background-image: url("/images/timer.svg");
  background-size: contain;
}

.icon-person-add {
  width: 1em;
  height: 1em;
  background-image: url("/images/person-add.svg");
  background-size: contain;
}

.icon-rank {
  width: 1em;
  height: 1em;
  background-image: url("/images/rank.svg");
  background-size: contain;
}

.icon-cart {
  background-image: url("/images/cart.svg");
  background-size: 50% auto;
}

.icon-id {
  padding-left: 2em;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/images/id.svg");
  background-size: contain;
}

.icon-dropdown, .icon-right, .icon-left {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("/images/collapse/open.svg");
}

.icon-dropdown.active, .active.icon-right, .active.icon-left {
  transform: rotate(180deg);
}

.icon-right {
  transform: rotate(-90deg);
}

.icon-left {
  transform: rotate(90deg);
}

.icon-download, .icon-manual {
  width: 48px;
  height: 48px;
  background-color: #E1E5E9;
}

.icon-download {
  background-image: url("/images/download.svg");
}

.icon-manual {
  background-image: url("/images/manual.svg");
}

.icon-weather {
  background-size: contain;
  width: 3rem;
  height: 1.4rem;
}

.icon-weather.sunny {
  background-image: url("/images/weather/sunny.svg");
}

.icon-action.icon-0 {
  background-image: url("/images/action/icon-0.png");
}

.icon-action.icon-0.active {
  background-image: url("/images/action/icon-0-active.png");
}

.icon-action.icon-1 {
  background-image: url("/images/action/icon-1.png");
}

.icon-action.icon-1.active {
  background-image: url("/images/action/icon-1-active.png");
}

.icon-action.icon-2 {
  background-image: url("/images/action/icon-2.png");
}

.icon-action.icon-2.active {
  background-image: url("/images/action/icon-2-active.png");
}

.icon-action.icon-3 {
  background-image: url("/images/action/icon-3.png");
}

.icon-action.icon-3.active {
  background-image: url("/images/action/icon-3-active.png");
}

select {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  padding: 0.5em 1em;
  border: 1px solid #C8C8C8;
  border-radius: 0;
  padding-right: 3em !important;
  background-image: url("/images/collapse/open.svg");
  background-repeat: no-repeat;
  background-position: right 1em center;
  color: inherit;
}

.checkbox input {
  display: none;
}

.checkbox span {
  display: inline-block;
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em;
  background-image: url("/images/checkbox/off.svg");
}

.checkbox input:checked + span {
  background-image: url("/images/checkbox/on.svg");
}

.checkbox-single {
  width: 20px;
  height: 20px;
}

.checkbox-single input {
  display: none;
}

.checkbox-single span {
  display: inline-block;
  padding: 0;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/images/checkbox/off.svg");
}

.checkbox-single input:checked + span {
  background-image: url("/images/checkbox/on.svg");
}

.radio input {
  display: none;
}

.radio span {
  display: inline-block;
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url("/images/radio/off.svg");
}

.radio input:checked + span {
  background-image: url("/images/radio/on.svg");
}

/* Label */
.p-label {
  padding-top: 0.8em;
  padding-right: 1.6em;
  padding-bottom: 0.8em;
  padding-left: 1.6em;
}

.p-label.narrow {
  padding-top: 0.4em;
  padding-right: 0.8em;
  padding-bottom: 0.4em;
  padding-left: 0.8em;
}

.p-label.wide {
  width: 160px;
}

.jp .p-label {
  padding-top: 0.84em;
  padding-right: 1.6em;
  padding-bottom: 0.76em;
  padding-left: 1.6em;
}

.jp .p-label.narrow {
  padding-top: 0.42em;
  padding-right: 0.8em;
  padding-bottom: 0.38em;
  padding-left: 0.8em;
}

.style-gray, .icon-state.success, .icon-state.warning {
  background-color: white;
  border: 1px solid #505050;
  color: #505050;
}

.style-primary, .icon-term, .icon-update, .icon-detail, .icon-module, .icon-daily, .icon-realtime, .icon-web, .icon-filter, .icon-list, .icon-face {
  background-color: white;
  border: 1px solid #505050;
  color: #505050;
}

.style-danger {
  background-color: white;
  border: 1px solid #D25858;
  color: #D25858;
}

.style-danger.alert {
  background-color: #EA7C7C;
  color: white;
}

.style-warning {
  background-color: white;
  border: 1px solid #F5C823;
  color: #F5C823;
}

.style-success {
  background-color: white;
  border: 1px solid #2AB27B;
  color: #2AB27B;
}

.style-primary-inverse {
  background-color: #505050;
  border: 1px solid #505050;
  color: white;
}

.style-danger-inverse {
  background-color: #D25858;
  border: 1px solid #D25858;
  color: white;
}

.style-warning-inverse {
  background-color: #F5C823;
  border: 1px solid #F5C823;
  color: white;
}

.style-success-inverse {
  background-color: #2AB27B;
  border: 1px solid #2AB27B;
  color: white;
}

.style-note-dainger {
  background-color: #EA7C7C;
  border: 1px solid #CE4E4E;
  color: white;
}

.style-white {
  border: 1px solid white;
  color: white;
}

.style-white:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.style-white:active {
  background-color: rgba(0, 0, 0, 0.1);
}

a.btn {
  text-decoration: none;
}

.btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.btn:hover.style-gray, .btn.icon-state.success:hover, .btn.icon-state.warning:hover, .btn:hover.style-primary, .btn.icon-term:hover, .btn.icon-update:hover, .btn.icon-detail:hover, .btn.icon-module:hover, .btn.icon-daily:hover, .btn.icon-realtime:hover, .btn.icon-web:hover, .btn.icon-filter:hover, .btn.icon-list:hover, .btn.icon-face:hover, .btn:hover.style-danger, .btn:hover.style-warning, .btn:hover.style-success {
  background-color: #f9f9f9;
}

.btn:hover.style-primary-inverse {
  background-color: #636363;
}

.btn:hover.style-danger-inverse {
  background-color: #d76c6c;
}

.btn:hover.style-warning-inverse {
  background-color: #f6ce3b;
}

.btn:hover.style-success-inverse {
  background-color: #2fc789;
}

.btn:active {
  background-color: rgba(0, 0, 0, 0.025);
}

.btn:active.style-gray, .btn.icon-state.success:active, .btn.icon-state.warning:active, .btn:active.style-primary, .btn.icon-term:active, .btn.icon-update:active, .btn.icon-detail:active, .btn.icon-module:active, .btn.icon-daily:active, .btn.icon-realtime:active, .btn.icon-web:active, .btn.icon-filter:active, .btn.icon-list:active, .btn.icon-face:active, .btn:active.style-danger, .btn:active.style-warning, .btn:active.style-success {
  background-color: #f2f2f2;
}

.btn:active.style-primary-inverse {
  background-color: #767676;
}

.btn:active.style-danger-inverse {
  background-color: #dd8080;
}

.btn:active.style-warning-inverse {
  background-color: #f7d454;
}

.btn:active.style-success-inverse {
  background-color: #3ed196;
}

.btn:active.shadow, .btn.icon-trash:active:hover {
  box-shadow: 0 1px 2px #A3A3A3;
}

.sub-ttl {
  font-style: inherit;
}

.sub-ttl::before {
  content: "- ";
}

.sub-ttl::after {
  content: " -";
}

/* Modal-Mask */
.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-mask.dark {
  background-color: rgba(0, 0, 0, 0.5);
}

.table-hover tbody tr:hover {
  background-color: #FAFAFA;
}

.test-elements {
  /*
        0   : 黒テキスト
        1   : ???
        2   : ミュートテキスト
        
        9   : グレイ
        10  : 9と見分けつかない
        
        12  : 明るいグレイ
        13  : 白と背景の中間
        14  : 白と見分けつかない
    */
  /* 規格化 */
}

.test-elements button {
  margin-bottom: 1em;
}

.test-elements code {
  display: block;
  padding: 2rem;
  padding-top: 1rem;
}

.test-elements .gray-0 {
  background-color: #505050;
}

.test-elements .gray-1 {
  background-color: #979797;
}

.test-elements .gray-2 {
  background-color: #BABABA;
}

.test-elements .gray-3 {
  background-color: #D6D6E2;
}

.test-elements .gray-4 {
  background-color: #E1E5E9;
}

.test-elements .gray-5 {
  background-color: #E2E4EA;
}

.test-elements .gray-6 {
  background-color: #EAEAF1;
}

.test-elements .gray-7 {
  background-color: #EBEDF1;
}

.test-elements .gray-8 {
  background-color: #EEF2F4;
}

.test-elements .gray-9 {
  background-color: #EFEFEF;
}

.test-elements .gray-10 {
  background-color: #F0F0F0;
}

.test-elements .gray-11 {
  background-color: #F2F2F4;
}

.test-elements .gray-12 {
  background-color: #F6F6F6;
}

.test-elements .gray-13 {
  background-color: #FAFAFA;
}

.test-elements .gray-14 {
  background-color: #FFFEFE;
}

.test-elements .border-0 {
  background-color: #E1E5E9;
}

.test-elements .border-1 {
  background-color: #E2E4EA;
}

.test-elements .blue-0 {
  background-color: #D6D6E2;
}

.test-elements .blue-1 {
  background-color: #EAEAF1;
}

.test-elements .blue-2 {
  background-color: #EBEDF1;
}

.test-elements .blue-3 {
  background-color: #EEF2F4;
}

.test-elements .blue-4 {
  background-color: #F2F2F4;
}

.test-elements .gray-base {
  background-color: #505050;
}

.test-elements .gray-darker {
  background-color: #BABABA;
}

.test-elements .gray-dark {
  background-color: #d5d5d5;
}

.test-elements .gray {
  background-color: #EFEFEF;
}

.test-elements .gray-light {
  background-color: #F6F6F6;
}

.test-elements .gray-lighter {
  background-color: #FAFAFA;
}

.test-elements .brand-dark {
  background-color: #D6D6E2;
}

.test-elements .brand {
  background-color: #EBEDF1;
}

.test-elements .brand-light {
  background-color: #EEF2F4;
}

.action-menu {
  height: 48px;
}

.action-menu .tooltip {
  position: relative;
}

.action-menu .tooltip:hover::before {
  content: attr(data-tooltip);
  font-size: 14px;
  white-space: nowrap;
  position: absolute;
  left: -1em;
  top: -34px;
  border: 1px solid #C8C8C8;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 6px;
  padding-bottom: 4px;
  background-color: white;
  box-shadow: 4px 4px 4px #A3A3A3;
}

.action-menu .tooltip:hover::after {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  left: 9px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: white;
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  background-color: white;
  border-right: 1px solid #EAEAF1;
}

.navbar button {
  padding: 0;
  display: block;
  line-height: 1;
}

.navbar .wrapper-1 {
  padding: 20px;
}

.navbar .wrapper-2 > li {
  margin-top: 30px;
  margin-bottom: 30px;
}

.navbar .wrapper-2 > li > a,
.navbar .wrapper-2 > li > button {
  display: block;
  text-align: center;
  position: relative;
  padding: 3px 0;
  width: 80px;
}

.navbar .wrapper-2 > li > a:hover,
.navbar .wrapper-2 > li > button:hover {
  opacity: 1;
}

.navbar .wrapper-2 > li > a:hover::before,
.navbar .wrapper-2 > li > button:hover::before {
  display: block;
  position: absolute;
  top: 10px;
  left: 51px;
  content: "";
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #505050;
}

.navbar .wrapper-2 > li > a:hover::after,
.navbar .wrapper-2 > li > button:hover::after {
  content: attr(data-tooltip);
  display: flex;
  align-items: center;
  position: absolute;
  top: -6px;
  left: 67px;
  height: 48px;
  padding: 11px 16px;
  background-color: #505050;
  color: white;
  white-space: pre;
}

.navbar .wrapper-2 > li > a.active,
.navbar .wrapper-2 > li > button.active {
  box-sizing: content-box;
  margin-left: 2px;
  width: 76px;
  border-right: 2px solid #505050;
}

.navbar > li:last-child a,
.navbar > li:last-child button {
  margin-bottom: 0;
}

.navbar .drawer-mask {
  left: 80px;
}

/* headbar */
.headbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 80px;
  background-color: #DCDCDC;
}

.headbar .headbar-inner {
  height: 79px;
}

.spacer-headbar {
  height: 80px;
}

/* Footbar */
.footbar,
.spacer-footbar {
  height: 48px;
}

.footbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

.footbar .bar-btn {
  width: 48px;
  height: 48px;
  background-color: #505050;
  border-left: 1px solid #C8C8C8;
}

.footbar .bar-item {
  padding: 0 2rem;
  height: 48px;
  border-right: 1px solid #C8C8C8;
  font-size: 14px;
}

/* rightbar */
.rightbar {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  width: 0;
  overflow-x: visible;
}

.rightbar .rightbar-toggler {
  top: 50%;
  left: -24px;
}

.rightbar.show {
  width: 400px;
}

.rightbar.show .rightbar-toggler {
  left: -17px;
}

.rightbar.show .rightbar-toggler > div {
  transform: rotate(-90deg);
}

.rightbar .inner {
  top: 0;
  right: 0;
  bottom: 48px;
  left: 0;
  overflow-x: hidden;
}

.rightbar .language {
  line-height: 1;
}

.rightbar .language .info {
  margin-top: 1px;
  padding-top: 4px;
  padding-bottom: 2px;
  width: 48px;
  background-color: #505050;
  color: white;
  line-height: 1;
}

.rightbar .alert .badge {
  margin-top: 1px;
  padding-top: 4px;
  padding-bottom: 2px;
  width: 48px;
  background-color: #D25858;
  color: white;
  line-height: 1;
}

.rightbar .select-data-get-day {
  left: -1em;
  top: 2em;
}

.rightbar .competing-facilities .circle-14 {
  position: relative;
}

.rightbar .competing-facilities .circle-14.active::after {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  border: 1px solid #C8C8C8;
  border-radius: 50%;
}

.rightbar .row-1 {
  height: 80px;
}

/* Drawer */
.drawer {
  top: 0;
  left: 80px;
  width: 400px;
  height: 100vh;
}

/* Popup */
.popup {
  box-shadow: 2px 2px 4px #A3A3A3;
}

.popup-user {
  top: 70px;
  right: 50px;
  width: 280px;
}

.popup-user input {
  padding-left: 3.175em;
  padding-right: 3.175em;
}

.popup-alert {
  top: 70px;
  right: 16px;
  width: 400px;
}

.popup-alert .scroll-y {
  max-height: 80vh;
}

.popup-alert li:last-child .border-bottom {
  border: none;
}

.popup-term {
  top: 36px;
  left: -25px;
}

.popup-term .btn-enter {
  width: 160px;
}

.popup-update {
  top: 36px;
  left: -56px;
  width: 350px;
}

.popup-update .note::before {
  content: "＊";
}

.popup-update .label {
  padding-left: 30px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url("/images/checkbox/off.svg");
}

.popup-update input:checked + .label {
  background-image: url("/images/checkbox/on.svg");
}

.popup-update .btn-enter {
  width: 160px;
}

.popup-update .times li .state, .popup-update .times li .time {
  opacity: 0.3;
}

.popup-update .times li.active .state, .popup-update .times li.active .time {
  opacity: 1;
}

.popup-update .times .state {
  width: 24px;
  height: 24px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  background-image: url("/images/states/success.svg");
}

.popup-update .times .time {
  width: 5rem;
}

.popup-update .timers li.active button {
  opacity: 1;
}

.popup-update .timers li button {
  opacity: 0.3;
}

.popup-update .timers button {
  width: 112px;
  height: 32px;
}

.popup-select-ota {
  left: -10px;
  width: 570px;
}

.popup-select-ota form label .label {
  display: inline-block;
  margin-bottom: 40px;
  padding-left: 30px;
  width: 170px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  background-image: url("/images/checkbox/off.svg");
}

.popup-select-ota form label input:checked + .label {
  background-image: url("/images/checkbox/on.svg");
}

.popup-select-ota form .line {
  height: 1px;
  margin-bottom: 3em;
}

.popup-select-ota .btn-enter {
  width: 160px;
}

/* Chart */
.chart {
  height: 360px;
  background-color: white;
}

/* Table */
.data-list .cell {
  height: 3em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.data-list .toolbar {
  margin-left: 335px;
}

.data-list .toolbar .country {
  background-color: white;
}

.data-list .toolbar .before-tax {
  background-color: white;
  color: #505050;
}

.data-list .toolbar .before-tax.active {
  background-color: #505050;
  color: white;
}

.data-list .toolbar .compare {
  padding-left: 44.8px !important;
  background-color: white;
  border-color: #505050;
  color: #505050;
  background-image: url("/images/checkbox/off.svg");
  background-repeat: no-repeat;
  background-position: 16px center;
}

.data-list .toolbar .compare.active {
  background-image: url("/images/checkbox/on.svg");
}

.data-list .data-table li,
.data-list .data-table button {
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
  height: 3em;
  background-color: white;
  border-top: 1px solid #C8C8C8;
}

.data-list .data-table li.stretch,
.data-list .data-table button.stretch {
  height: auto;
}

.data-list .data-table li .hover,
.data-list .data-table button .hover {
  opacity: 0;
}

.data-list .data-table li:hover,
.data-list .data-table button:hover {
  opacity: 1;
  background-color: #ECECEC;
}

.data-list .data-table li:hover .hover,
.data-list .data-table button:hover .hover {
  opacity: 1;
}

.data-list .data-table li {
  padding-top: 0.9rem;
}

.data-list .data-table .table-name {
  width: 335px;
}

.data-list .data-table .table-name .d-flex-stretch:last-child {
  border-bottom: 1px solid #C8C8C8;
}

.data-list .data-table .table-name button {
  background-color: #ECECEC;
  text-align: left;
}

.data-list .data-table .table-name button:hover {
  background-color: #C8C8C8;
}

.data-list .data-table .table-name .name {
  padding-top: 0.3rem;
}

.data-list .data-table .table-name .label {
  padding-top: 0.2em;
  background-color: white;
  border: 1px solid #505050;
}

.data-list .data-table .data {
  flex: 1;
  overflow-x: scroll;
  overflow-y: visible;
  font-size: 0;
  white-space: nowrap;
}

.data-list .data-table .data article {
  display: inline-block;
}

.data-list .data-table .data article {
  margin-top: -1px;
  background-color: #DCDCDC;
  width: 215px;
}

.data-list .data-table .total {
  border-left: none;
}

.data-list .data-table .total header {
  background-color: #DCDCDC;
}

.data-list .data-table .total li {
  background-color: #ECECEC;
}

/* Fade */
.fade-enter-active {
  animation: fade .3s;
}

.fade-leave-active {
  animation: fade .3s reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade - Fast */
.fade-fast-enter-active {
  animation: fade .1s;
}

.fade-fast-leave-active {
  animation: fade .1s reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide */
.slide-left-enter-active {
  animation: slide-left .3s;
}

.slide-left-leave-active {
  animation: slide-left .3s reverse;
}

@keyframes slide-left {
  0% {
    margin-left: -100%;
  }
  100% {
    margin-left: 0;
  }
}

.slide-right-enter-active {
  animation: slide-right .3s;
}

.slide-right-leave-active {
  animation: slide-right .3s reverse;
}

@keyframes slide-right {
  0% {
    margin-right: -400px;
  }
  100% {
    margin-right: 0px;
  }
}

/* Layer Setting */
.dropdown {
  z-index: 996;
}

.popup-mask {
  z-index: 997;
}

.rightbar {
  z-index: 988;
}

.popup,
.headbar,
.footbar {
  z-index: 998;
}

.modal-view {
  z-index: 1020;
}

/* new */
.layer-content {
  z-index: 0;
}

.layer-cover-panel {
  z-index: 500;
}

.layer-bar {
  z-index: 1000;
}

.layer-modal-view {
  z-index: 1020;
}

.layer-navbar-mask {
  z-index: 1080;
}

.slide-left-enter-active {
  z-index: 1085;
}

.layer-navbar-drawer {
  z-index: 1090;
}

.layer-navbar {
  z-index: 1100;
}

.layer-navbar-apps {
  z-index: 1110;
}

.layer-modal-mask {
  z-index: 2000;
}

.layer-modal-content {
  z-index: 2500;
}

/* <navbar>認可で廃棄 */
.navbar {
  z-index: 1002;
}

.drawer-mask {
  z-index: 999;
}

.drawer {
  z-index: 1000;
}

#app > .col-main {
  height: 100vh;
  margin-left: 80px;
}

#app > .col-main.addRight {
  margin-right: 400px;
}

/* Vue */
[v-cloak] {
  color: rgba(0, 0, 0, 0) !important;
  opacity: 0 !important;
}

/* Customize */
.popper {
  border-radius: 0 !important;
  padding: 8px 16px 8px 16px !important;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Color */
.bg-gray-darker {
  background-color: #505050;
}

.bg-gray-dark {
  background-color: #C8C8C8;
}

.bg-gray {
  background-color: #DCDCDC;
}

.bg-gray-light {
  background-color: #ECECEC;
}

.bg-gray-lighter {
  background-color: #F5F5F5;
}

.bg-brand-dark {
  background-color: #D6D6E2;
}

.bg-brand {
  background-color: #EBEDF1;
}

.bg-brand-light {
  background-color: #EEF2F4;
}

.user-menu {
  width: 399px;
  height: 80px;
}

.user-menu .language .info,
.user-menu .alert .info {
  padding-top: 3px;
  padding-bottom: 3px;
  width: 48px;
  color: white;
  line-height: 1;
  background-color: #505050;
}

.user-menu .language .info.active,
.user-menu .alert .info.active {
  background-color: #D25858;
}

nput {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #DBDBDB;
}

input.error {
  border-color: #CE4E4E;
}

.close:hover {
  opacity: 0.8;
}

.close:active {
  opacity: 0.5;
}

a:link {
  color: inherit;
}

a:hover {
  opacity: 0.8;
}

.color-logo-0 {
  background-color: #E89112;
}

.color-logo-1 {
  background-color: #ECAB54;
}

.color-logo-2 {
  background-color: #EDB218;
}

.color-logo-3 {
  background-color: #F0C34E;
}

.color-logo-4 {
  background-color: #8EBA2E;
}

.color-logo-5 {
  background-color: #ADC963;
}

.color-logo-6 {
  background-color: #8FB5DB;
}

.color-logo-7 {
  background-color: #AFC9E4;
}

.color-logo-8 {
  background-color: #B287B2;
}

.color-logo-9 {
  background-color: #C6A7C6;
}

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