@charset "UTF-8";
/* Scss Document */
/* link */
a {
  text-decoration: none;
  overflow: hidden;
  color: #0065a0; }

a:hover {
  text-decoration: underline; }

/* text */
.error_text {
  color: #fb4c2f !important; }

.error_input {
  border: 1px solid #fb4c2f !important; }

/* form */
input[type="email"], input[type="password"], input[type="text"], select {
  padding: 0.7em 0.8em;
  font-size: 1.2em;
  border: 1px solid #dadce0;
  border-radius: 0.3em;
  width: 100%; }

input[type="button"],
input[type="submit"],
.back-button{
  background: #0065a0;
  padding: 0.8em 0.5em;
  border-radius: 0.3em;
  width: 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.1em;
  letter-spacing: 0.2em; }
  input[type="button"]:hover,
  input[type="submit"]:hover {
    background: #0076bb; }

input:focus {
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid #0076bb; }

input[type="button"]:focus,
input[type="submit"]:focus {
  border: none;
  box-shadow: none; }

/* login */

.login_wrap {
    width:100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login_frame {
  padding: 3em;
  border: 1px solid #dadce0;
  border-radius: 0.5em;
   }
  .login_frame .login_logo {
    width: 40%;
    margin: 0 auto 1em auto; }
  .login_frame .login_title {
    display: block;
    text-align: center;
    padding-bottom: 0.7em;
    font-size: 1.1em;
    color: #0065a0;
    margin-top: -0.4em; }
  .login_frame span {
    display: block;
    padding-bottom: 0.25em; }
  .login_frame p {
    font-weight: 400; }
  .login_frame input[type="email"], .login_frame input[type="password"], .login_frame input[type="text"], .login_frame select {}
  .login_frame .login_support {
    font-size: 0.9em;
    margin-bottom: 0.8em;
    justify-content: flex-end; }
    .login_frame .login_support li {
      padding: 0 0.5em;
      display: inline-block; }
  .login_frame .g-recaptcha {
    width: 80%;
    margin: 0 auto 1.2em; }
  .login_frame input + .error_text {
    padding-bottom: 0.7em;
    margin-top: -0.6em;
    font-size: 0.9em; }
  .login_frame input + input[type="button"],
  .login_frame input + input[type="submit"] {
    margin-top: 1em; }

.login_frame.login_frame_regist {
  position: static;
  transform: translate(0, 0);
  top: auto; }
@media (max-width: 500px) {
  .login_wrap {
    width: 100%; }

  .login_frame {
    padding: 3em;
    border: none;
    } }
/* header */
header {
  background: #FFFFFF;
  position: fixed;
  width: 100%;
  transition: 0.5s;
  z-index: 1000; top:0;}
  header .header_logo {
    max-width: 8em;
    padding: 0.5em; }
  header .header_user_name {
    margin-left: auto;
    display: inline-block;
    padding: 0.5em 1.5em 0.5em 3em;
    cursor: pointer;
    position: relative; }
    header .header_user_name::before {
      position: absolute;
      content: "";
      width: 1.4em;
      height: 1.4em;
      left: 1.2em;
      display: block;
      top: 0;
      bottom: 0;
      margin: auto;
      background: url("../svg/account/icon_header_menu.svg") no-repeat center center;
      background-size: 90%; }
    header .header_user_name:hover {
      color: #0065a0; }
    header .header_user_name #logout {
      display: none;
      position: absolute;
      bottom: -2em;
      right: 1.5em; }
    header .header_user_name #logout input {
      background: #555555;
      border-radius: 0.4em;
      font-size: 0.9em;
      color: #fff;
      cursor: pointer;
      padding: 0.6em 1.2em 0.5em;
      border: 0; }
      header .header_user_name #logout input:hover {
        background: #444; }

.header_shadow {
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); }

/* icon */
.icon {
  position: absolute;
  content: "";
  width: 1.4em;
  height: 1.4em;
  left: 1.2em;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto; }

.icon_api-list {
  background: url("../svg/account/icon_api-list_active.svg") no-repeat center center;
  background-size: 90%; }

.icon_api-plus {
  background: url("../svg/account/icon_api-plus_active.svg") no-repeat center center;
  background-size: 90%; }

.icon_api-user {
  background: url("../svg/account/icon_api-user_active.svg") no-repeat center center;
  background-size: 90%; }

.icon_api-help {
  background: url("../svg/account/icon_api-help_active.svg") no-repeat center center;
  background-size: 90%; }

.icon_api-copy {
  background: url("../svg/account/icon_api-copy.svg") no-repeat center center;
  background-size: 90%; }

/* side */
.side_menu {
    margin-top: 1.5em;
  position: fixed;
  min-width: 280px;
  z-index: 800; }
  .side_menu a {
    display: block;
    padding: 0.6em 0.5em 0.6em 3.5em;
    border-radius: 0 3em 3em 0;
    color: #3c4043;
    position: relative; }
    .side_menu a:hover {
      background: #f5f5f5;
      text-decoration: none; }
    .side_menu a .icon_api-list {
      background: url("../svg/account/icon_api-list.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu a .icon_api-plus {
      background: url("../svg/account/icon_api-plus.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu a .icon_api-user {
      background: url("../svg/account/icon_api-user.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu a .icon_api-help {
      background: url("../svg/account/icon_api-help.svg") no-repeat center center;
      background-size: 90%; }
  .side_menu .active {
    color: #0065a0;
    background: #e8f0fe; }
    .side_menu .active:hover {
      background: #e8f0fe; }
    .side_menu .active .icon_api-list {
      background: url("../svg/account/icon_api-list_active.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu .active .icon_api-plus {
      background: url("../svg/account/icon_api-plus_active.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu .active .icon_api-user {
      background: url("../svg/account/icon_api-user_active.svg") no-repeat center center;
      background-size: 90%; }
    .side_menu .active .icon_api-help {
      background: url("../svg/account/icon_api-help_active.svg") no-repeat center center;
      background-size: 90%; }

/* footer */
footer {
    width: 100%;
    position: absolute;
    bottom: 0;
  border-top: 1px solid #eeeeee;
  font-size: 0.85em; }
  footer span {
    padding: 0.5em 1.2em; }
  footer ul {
    margin-left: auto;
    padding: 0.5em 1.2em; }
    footer ul li {
      display: inline-block; }
      footer ul li::after {
        content: "│";
        color: #cccccc; }
      footer ul li + li::after {
        display: none; }
    footer ul a {
      color: #555555; }

/* contents / レイアウト */
.contents_wrap {
  width: 840px;
  margin: 0 auto 3% auto;
  min-height: 97%; }


.page_title {
  position: relative;
  padding-left: 1.8em;
  color: #0065a0;
  margin-bottom: 1em;
  font-size: 1.5em; }
  .page_title .icon {
    left: 0; }

@media (max-width: 1450px) {

  .contents_wrap {
    margin: 0 auto 3% 300px;
    min-height: 97%;
    max-width: 65%; } }
@media (max-width: 900px) {
  .header_shadow {
    box-shadow: none; }

  .contents_wrap {
    margin: 0 auto 5% auto;
      padding-top: 60px;
    min-height: 97%;
    width: 90%;
    max-width: 90%; }

  .side_menu {
      margin-top: 0;
    position: fixed;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1); }
    .side_menu ul {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; }
      .side_menu ul li {
        -webkit-flex-grow: 1;
        flex-grow: 1; }
    .side_menu a {
      display: block;
      padding: 0.6em 0.5em 0.6em 1em;
      border-radius: 0;
      text-align: center;
      position: relative;
      overflow: inherit; }
      .side_menu a:hover {
        background: #f5f5f5;
        text-decoration: none; }
    .side_menu .active {
      background: none; }
      .side_menu .active::before {
        bottom: -1px;
        left: 0;
        width: 100%;
        content: "";
        position: absolute;
        height: 2px;
        background: #0065a0; } }
@media (max-width: 767px) {
    .side_menu {
        margin-top: 0;
    }
  .side_menu a {
    padding: 0.6em 0.3em; }
    .side_menu a .icon {
      display: none; } }
@media (max-width: 320px) {
  .contents_wrap {
    padding-top: 120px; }

  .side_menu ul li {
    width: 50%;
    border-bottom: 1px solid #cccccc; }
    .side_menu ul li a {
      padding: 0.4em 0.2em; } }
/* contents / 内容 */
.list_wrap {
  padding: 1.5em;
  border: 1px solid #dadce0;
  border-radius: 0.5em; }

.list_title_sp {
  display: none; }

.tables {
  border-collapse: collapse;
  width: 100%;
  word-break: break-all; }
  .tables th, .tables td {
    border-collapse: collapse;
    padding: 0.6em 0.32em;
    border-bottom: 1px solid #dadce0;
    text-align: center;
    letter-spacing: 0.05em;
    vertical-align: middle; }
  .tables .table_api_name a {
    text-align: left;
    display: block;
    padding-left: 2em;
    position: relative; }
    .tables .table_api_name a::before {
      position: absolute;
      content: "";
      width: 0.6em;
      height: 0.6em;
      left: 0.3em;
      display: block;
      top: 0;
      bottom: 0;
      margin: auto;
      background: url("../svg/account/icon_arrow_right.svg") no-repeat center center;
      background-size: 90%;
      transition: 0.3s; }
    .tables .table_api_name a:hover::before {
      left: 0.6em; }
  .tables tr:hover th,
  .tables tr:hover td {
    background: #f5f5f5; }
  .tables .table_api_key span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 10em;
    display: inline-block;
    vertical-align: middle; }
  .tables input, .tables select {
    font-size: 1em;
    padding: 1em; }
  .tables .error_text {
    display: block;
    padding-top: 0.5em;
    font-size: 0.9em; }

.tables_lesp th, .tables_lesp td {
  padding: 1em 0.6em;
  text-align: left; }
.tables_lesp th {
  width: 25%;
  white-space: normal; }

.tables_new th, .tables_new td {
  padding: 0.6em 0.6em;
  text-align: left;
  border-bottom: 0; }
.tables_new .target_key {
  color: #0065a0; }

.tables_put {
  border-radius: 0.5em; }
  .tables_put td {
    background: #f5f5f5;
    border-bottom: 0;
    padding: 0.6em;
    border-radius: 0.3em 0 0 0.3em; }
  .tables_put td + td {
    padding-left: 0;
    border-radius: 0 0.3em 0.3em 0; }
  .tables_put input[type="button"],
  .tables_put input[type="submit"] {
    padding: 0.8em; }

.tables_host th, .tables_host td {
  padding: 0.5em 1em;
  text-align: left; }
.tables_host tr:hover th {
  background: #ffffff !important; }
.tables_host th {
  border-bottom: 1px solid #dadce0;
  padding: 0.3em 1em;
  font-size: 0.9em; }
.tables_host td {
  border-bottom: 1px dotted #dadce0; }
.tables_host .host_delete {
  width: 3%;
  white-space: nowrap;
  text-align: center;
  padding-left: 0.5em;
  padding-right: 0.5em; }
  .tables_host .host_delete img {
    height: 1.3em;
    width: auto;
    vertical-align: middle; }

.api_copy_wrap {
  position: relative; }
  .api_copy_wrap .icon {
    position: absolute;
    right: 0.2em;
    left: auto;
    bottom: 0;
    top: 0;
    display: block;
    margin: auto;
    cursor: pointer; }

.page_link {
  padding-top: 1em; }
  .page_link ul {
      list-style: none;
    margin: 0 auto;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 0.9em; }
  .page_link li {
      margin:0;
    border: 1px solid #dadce0;
    border-right: none; }
  .page_link a {
    display: block;
    padding: 0.3em 0.9em; }
    .page_link a:hover {
      background: #e8f0fe;
      text-decoration: none; }
  .page_link span {
    display: block;
    padding: 0.3em 0.9em;
    background: #eeeeee;
    border-right: 1px solid #eeeeee; }
  .page_link li:first-child {
    border-radius: 0.3em 0 0 0.3em; }
  .page_link li:last-child {
    border-right: 1px solid #dadce0;
    border-radius: 0 0.3em 0.3em 0; }

.host_none {
  text-align: center;
  padding: 10% 0;
  font-weight: 400; }

.api_day {
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.7em; }

@media (max-width: 767px) {
  .tables thead {
    display: none; }
  .tables .table_api_name,
  .tables .table_api_key {
    display: block;
    width: 100%; }
  .tables .table_api_name {
    border-bottom: 0;
    padding-bottom: 0; }
  .tables .table_api_key {
    padding-top: 0;
    padding-left: 2.3em;
    text-align: left; }
    .tables .table_api_key span {
      line-height: 1em;
      vertical-align: middle; }
  .tables .table_api_host,
  .tables .table_api_day {
    display: none; }

  .tables_lesp * {
    display: block; }
  .tables_lesp th, .tables_lesp td {
    width: 100%;
    border-bottom: 0; }
  .tables_lesp th {
    padding-bottom: 0.2em;
    border-top: 1px solid #dadce0; }
  .tables_lesp td {
    padding-top: 0; }

  .api_copy_wrap .icon {
    right: 0.5em; } }
/* contents / メッセージ */
.message {
  position: fixed;
  top: 0.7em;
  width: 100%;
  margin: auto;
  text-align: center;
  z-index: 5000;
  padding: 0 1em;
  pointer-events: none; }
  .message span {
    display: inline-block;
    padding: 0.6em 1em;
    border-radius: 3em;
    line-height: 1.1em; }

.message_error span {
  border: 1px solid #fb4c2f;
  background: #fef1f1;
  color: #fb4c2f; }

.message_comp span {
  border: 1px solid #157f3c;
  background: #e8f7ed;
  color: #157f3c; }
/* ホスト名が長いときに省略して表示させる　*/
.message_comp span var {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

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

/* contents / モーダル */
.modal-open {
  cursor: pointer; }

#modal-main {
  display: none;
  width: 550px;
  max-width: 92%;
  margin: 0;
  padding: 2.5em;
  background: #ffffff;
  position: fixed;
  border-radius: 0.5em;
  z-index: 7000; }
  #modal-main strong {
    display: block;
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: #0065a0;
    text-align: center; }
  #modal-main p {
    font-weight: 400; }
    #modal-main p span {
      color: #0065a0; }
  #modal-main .cancel {
    position: absolute;
    top: 0.2em;
    right: 0.3em;
    line-height: 1em;
    cursor: pointer;
    font-size: 2.5em;
    color: #555555; }
#modal-main p span var {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-height: 20px;
}

#modal-bg {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(99, 114, 130, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6000; }

#organize_form {
  display: none;
}

.text-center {
  text-align: center;
  border: 1px solid #fb4c2f;
  border-radius: 7px;
  padding: 5px;
  margin-bottom: 10px;
}

.auth-wrap {
    position: static !important;
    transform: initial !important;
    top: initial !important;
    width: 500px !important;
}

.host-type {
    color: lightgrey;
    font-size: 0.8rem;
}