@charset "UTF-8";
/*/sitecore/content/Home/css_sc/mypage/p/activate*/
.breadcrumb-nav {
  background: #fff;
  box-shadow: var(--shadow-light);
  width: 100%;
  position: relative;
  overflow-x: auto;
}
.breadcrumb-nav .breadcrumb {
  align-items: baseline;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  list-style: none;
  overflow: scroll-x;
  margin: 0 auto;
}
@media screen and (min-width: 769px ) {
  .breadcrumb-nav .breadcrumb {
    min-width: 1100px;
  }
}
.breadcrumb-nav .breadcrumb li {
  color: var(--color-font-light);
  font-size: var(--size-txt-s);
  padding: 0.5em;
  white-space: nowrap;
}
.breadcrumb-nav .breadcrumb li:nth-child(1) {
  color: var(--color-font-mid);
  font-size: var(--size-h-m);
  font-weight: bold;
}
.breadcrumb-nav .breadcrumb li:nth-child(1) a, .breadcrumb-nav .breadcrumb li:nth-child(1) button {
  color: var(--color-font-mid);
}
.IsProductlist .breadcrumb-nav .breadcrumb li:nth-child(1)::before {
  content: url("https://www.sourcenext.com/~/media/Images/Common/icon_svg/icon_product-list.svg");
  vertical-align: middle;
  margin-right: 0.5em;
}
.breadcrumb-nav .breadcrumb button {
  border: none;
  background: transparent;
}
.breadcrumb-nav .breadcrumb a, .breadcrumb-nav .breadcrumb button {
  color: var(--color-font-light);
}
.breadcrumb-nav .breadcrumb a:after, .breadcrumb-nav .breadcrumb button:after {
  content: "";
  display: inline-block;
  height: 0.25em;
  width: 0.25em;
  border-right: solid 1px var(--color-font-light);
  border-bottom: solid 1px var(--color-font-light);
  transform: rotate(-45deg) translateY(-10%);
  margin: 0px 0 0 1em;
}
.breadcrumb-nav .breadcrumb a:hover, .breadcrumb-nav .breadcrumb button:hover {
  text-decoration: underline;
}

.csv_wrapper {
  display: flex;
  justify-content: end;
  margin: 30px auto 0;
}
@media screen and (min-width: 769px ) {
  .csv_wrapper {
    max-width: 1080px;
    min-width: 780px;
  }
}
.csv_wrapper #csvBtn {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #CFD2D4;
  border-radius: 3px;
  background: #FFF;
  font-size: 13px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}
.csv_wrapper #csvBtn::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(/~/media/img/common/icon/icon_download_outline_2.ashx) left center no-repeat;
  background-size: contain;
  margin-right: 5px;
}
.csv_wrapper #csvBtn:hover {
  background: #F6F7F8;
}

.activate {
  color: var(--color-txt-mid);
  font-size: var(--size-txt-m);
  min-height: calc(100% - 100px);
  background: var(--color-ui-light);
  overflow: hidden;
}
@media screen and (min-width: 769px ) {
  .activate {
    min-height: calc(100vh - 300px);
  }
}
.activate .product-name {
  font-size: var(--size-h-m);
  color: var(--color-font-mid);
}
.activate .serial-code {
  font-size: var(--size-txt-s);
  color: var(--color-font-light);
}
.activate .serial-code::before {
  content: "シリアル番号：";
  font-size: var(--size-txt-caption);
}
.activate .date_registration {
  font-size: var(--size-txt-s);
  color: var(--color-font-light);
}
.activate .date_registration::before {
  content: "登録日：";
  font-size: var(--size-txt-caption);
}
.activate .date_licence-limit {
  font-size: var(--size-txt-s);
  color: var(--color-alert);
}
.activate .date_licence-limit::before {
  content: "ライセンス有効期限：";
  font-size: var(--size-txt-caption);
}
.activate .date_activate {
  font-size: var(--size-txt-caption);
  color: var(--color-font-light);
  text-align: center;
}
.activate .date_activate::before {
  content: "登録日時：";
  font-size: var(--size-txt-caption);
}
.activate .count_activate {
  font-weight: bold;
  color: var(--color-font-mid);
}
.activate .count_activate::after {
  content: "台で利用中";
}
.activate .count_serial {
  color: var(--color-font-light);
}
.activate .count_serial:not(.unlimited)::before {
  content: "（最大";
}
.activate .count_serial:not(.unlimited)::after {
  content: "台）";
}
.activate .count_serial.unlimited::before {
  content: "（台数制限なし）";
}
.activate .lead-box {
  background: transparent linear-gradient(180deg, var(--color-ui-light) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  border-bottom: 1px solid var(--color-border-light);
}
@media screen and (min-width: 769px ) {
  .activate .lead-box_wrapper {
    width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 628px;
    gap: 0 10px;
    grid-template-areas: "img title" "img txt";
  }
}
@media screen and (max-width: 768px ) {
  .activate .lead-box_wrapper {
    width: 100%;
    text-align: center;
    padding-top: 1em;
  }
}
.activate .lead-box h1 {
  font-size: var(--size-h-l);
  padding: 0;
  margin: 0;
  grid-area: title;
  align-self: end;
}
.activate .lead-box p {
  padding: 0;
  margin: 0;
  grid-area: txt;
  align-self: start;
}
.activate .lead-box img {
  grid-area: img;
  align-self: center;
  margin: 20px 0 0 0;
}
.activate .list-box ul {
  margin: 1em auto;
}
@media screen and (min-width: 769px ) {
  .activate .list-box ul {
    max-width: 1080px;
    min-width: 780px;
  }
}
.activate .list-box li {
  padding: 0.5em 0;
}
.activate .list-box li a, .activate .list-box li button {
  display: flex;
  flex-basis: auto;
  justify-content: space-between;
  align-items: center;
  justify-items: stretch;
  border-radius: var(--radius-m);
  padding: 1em 2em;
  border: none;
  width: 100%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-mid);
  background: #fff;
  position: relative;
  text-align: left;
}
@media screen and (max-width: 768px ) {
  .activate .list-box li a, .activate .list-box li button {
    flex-wrap: wrap;
    text-align: center;
    margin: 0.5em 1em;
    width: auto;
  }
}
.activate .list-box li a:hover, .activate .list-box li button:hover {
  background: var(--color-ui-light);
}
.activate .list-box li a::after, .activate .list-box li button::after {
  content: "";
  display: inline-block;
  height: 0.5em;
  width: 0.5em;
  border-right: solid 1px var(--color-font-light);
  border-bottom: solid 1px var(--color-font-light);
  transform: rotate(-45deg) translateY(-10%);
  margin: 0px 0 0 1em;
  position: absolute;
  right: 1em;
  top: calc(50% - 0.25em);
}
.activate .list-box li .product-unit {
  flex-grow: 1;
}
@media screen and (min-width: 769px ) {
  .activate .list-box li .product-unit {
    border-right: 1px solid #ddd;
  }
}
.activate .list-box li .serial-unit {
  text-align: center;
}
@media screen and (min-width: 769px ) {
  .activate .list-box li .serial-unit {
    flex-basis: 200px;
  }
}
@media screen and (max-width: 768px ) {
  .activate .list-box li .serial-unit {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: var(--radius-m);
    margin: 1em;
  }
}
.activate .list-box li .serial-unit .count_serial {
  font-size: var(--size-txt-m);
}
.activate .list-box li .serial-unit .count_activate {
  font-size: var(--size-h-s);
}
.activate .list-box li:first-child {
  display: block;
}
.activate .product-box {
  display: flex;
  flex-basis: auto;
  justify-items: stretch;
}
@media screen and (min-width: 769px ) {
  .activate .product-box {
    height: 100%;
    min-height: calc(100vh - 300px);
  }
}
@media screen and (max-width: 768px ) {
  .activate .product-box {
    width: 100%;
    flex-wrap: wrap;
  }
}
.activate .product-box .sidebar {
  padding: 1em 1.5em;
  background: #fff;
}
@media screen and (min-width: 769px ) {
  .activate .product-box .sidebar {
    min-width: 360px;
  }
}
@media screen and (max-width: 768px ) {
  .activate .product-box .sidebar {
    width: 100%;
  }
}
.activate .product-box .sidebar .product-unit {
  text-align: left;
}
.activate .product-box .sidebar .product-unit .serial-code, .activate .product-box .sidebar .product-unit .date_registration {
  font-size: var(--size-txt-caption);
}
.activate .product-box .sidebar .serial-unit {
  text-align: center;
  padding: 1em;
  margin: 2em auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-m);
}
.activate .product-box .sidebar .serial-unit .count_activate {
  font-size: var(--size-h-l);
  display: inline-block;
}
.activate .product-box .sidebar .serial-unit .count_serial {
  font-size: var(--size-txt-m);
  display: inline-block;
}
.activate .product-box .sidebar .serial-unit .date_licence-limit {
  margin-top: 1em;
}
.activate .product-box .sidebar .link-faq {
  text-align: center;
  font-size: var(--size-txt-s);
}
.activate .product-box .sidebar .link-faq a {
  color: var(--color-link);
  text-decoration: underline;
}
.activate .product-box .sidebar .link-faq a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}
.activate .product-box .sidebar .link-faq a::before {
  content: url(https://www.sourcenext.com/~/media/Images/support/contents/install/QA_1.svg);
  vertical-align: middle;
  margin: 0 0.3em 0 -1em;
}
.activate .product-box .sidebar .link-faq a::after {
  content: "製品の利用開始について";
}
.activate .product-box .contents {
  padding: 1em;
  flex-grow: 1;
  box-shadow: var(--shadow-inset);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_header {
  display: none;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0;
}
@media screen and (max-width: 768px ) {
  .activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list {
    justify-content: center;
  }
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list li {
  width: 340px;
  height: 200px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-mid);
  padding: 1.5em;
  margin: 1em;
  background: #fff;
  position: relative;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list li:first-child {
  display: block;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_chg-device {
  font-size: var(--size-txt-m);
  font-weight: normal;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--color-border-mid);
  width: 100%;
  padding: 0.2em;
  text-align: left;
  margin: 0.8em 0 1em 0;
  position: relative;
  height: 38px;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_chg-device:hover {
  background: var(--color-ui-light);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_chg-device::before {
  content: "機器名";
  display: block;
  position: absolute;
  top: -1.5em;
  color: var(--color-font-sub);
  font-size: var(--size-txt-caption);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_chg-device::after {
  content: url("https://www.sourcenext.com/~/media/Images/common/icon_svg/icon_edit.svg");
  display: block;
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--color-font-sub);
  font-size: var(--size-txt-caption);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_deactivate {
  background: var(--color-ui-dark);
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-light);
  vertical-align: middle;
  padding: 0.8em 2.4em;
  text-align: center;
  width: 240px;
  color: var(--color-font-on);
  border: none;
  margin: 0 auto;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_deactivate:hover {
  background-color: var(--color-ui-dark-hover);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_deactivate::before {
  content: url("https://www.sourcenext.com/~/media/Images/Mypage/p/activate/icon_delete_m_circle.svg");
  vertical-align: middle;
  margin: 0 0.2em 0 0;
  display: inline-block;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .IsActive-licence .btn_deactivate::after {
  content: "利用を解除";
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .NotActive-licence {
  background: var(--color-ui-mid-action);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .NotActive-licence p::before {
  content: "ご利用中の機器はありません\a製品の利用を開始すると機器が追加されます";
  white-space: pre;
  text-align: center;
  color: #fff;
  font-size: var(--size-txt-s);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence {
  text-align: center;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence::before {
  content: "＋追加";
  position: absolute;
  left: 4px;
  top: 4px;
  font-weight: bold;
  color: var(--color-font-sub);
  font-size: var(--size-txt-caption);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence h2 {
  font-size: var(--size-h-s);
  margin: 0.5em auto;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence h2::before {
  content: "さらに多くの機器で利用したい場合";
  white-space: pre;
  text-align: center;
  font-size: var(--size-h-s);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence p {
  font-size: var(--size-txt-s);
  line-height: 1.2em;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence p::before {
  content: "追加購入サービスをご利用ください\aお持ちの製品一覧トップから、\a製品を選んで利用できます。";
  white-space: pre;
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence .btn_add-licence {
  background: var(--color-link);
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-light);
  vertical-align: middle;
  padding: 0.8em 2.4em;
  text-align: center;
  width: 240px;
  color: var(--color-font-on);
  border: none;
  margin: 0 auto;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence .btn_add-licence:hover {
  background-color: var(--color-link-hover);
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence .btn_add-licence::before {
  content: "お持ちの製品一覧へ";
}
.activate .product-box .contents .activate_unit.unit_type_card .activate_unit_list .add-licence .btn_add-licence::after {
  content: "";
  display: inline-block;
  border-top: solid 2px var(--color-font-on);
  border-right: solid 2px var(--color-font-on);
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.5em;
  transform: rotate(45deg);
  position: absolute;
  top: 1.25em;
}
.activate .product-box .contents .activate_unit.unit_type_list {
  margin: 30px 10px;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header {
  display: flex;
  margin: 0 0 10px;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header button {
  border: none;
  background: inherit;
  font-size: 14px;
  font-weight: bold;
  color: #343c3e;
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_filter_default.svg) no-repeat 63% center;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header button.oreder--2 {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_filter_down.svg) no-repeat 63% center;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header button.oreder--1 {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_filter_up.svg) no-repeat 63% center;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header__device {
  width: 50%;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_header__date {
  width: 30%;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list {
  background: #FFF;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li {
  display: flex !important;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #dee1e3;
  /*li:hover*/
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li:nth-child(even) {
  background: #FAFBFB;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li:hover {
  background: #E4EEF2;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li button {
  border: none;
  background: none;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .h-title {
  display: flex;
  font-size: 13px;
  font-weight: normal;
  color: #000;
  width: 50%;
  padding-left: 5%;
  border-right: 1px solid #DEE1E3;
  background: url(https://www.sourcenext.com/~/media/Images/common/icon_svg/icon_edit.svg) no-repeat 99% center;
  background-size: 18px;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .h-title button {
  width: 100%;
  text-align: left;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .h-title button::before {
  content: " ";
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .date_activate {
  font-size: 13px;
  color: #000;
  width: 30%;
  border-right: 1px solid #DEE1E3;
  margin-right: 30px;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .date_activate::before {
  content: none;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .date_activate::after {
  content: "～";
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .btn_deactivate {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  font-size: 12px;
  padding: 4px 5px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  border-radius: 3px;
  line-height: 1;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .btn_deactivate::before {
  display: block;
  content: " ";
  width: 8px;
  height: 8px;
  margin: 0 4px 0 1px;
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_delete_s.svg) no-repeat;
  background-size: contain;
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li .btn_deactivate::after {
  content: "利用解除";
}
.activate .product-box .contents .activate_unit.unit_type_list .activate_unit_list li:hover .btn_deactivate::before {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_delete_s_caution.svg) no-repeat;
  background-size: contain;
}
.activate_navigation_top {
  display: flex;
  justify-content: space-between;
}
.activate_search__wrap {
  display: flex;
  align-items: center;
}
.activate_search__container {
  background: #FFF;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.activate_search__input {
  border: none;
  font-size: 13px;
  border-radius: 3px;
  padding: 0 0 0 5px;
}
.activate_search__button--reset {
  visibility: hidden;
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_delete_s_circle.svg) no-repeat center center;
  width: 25px;
  height: 25px;
  border: none;
}
.activate_search__button--search {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_search_s.svg) no-repeat center center;
  width: 30px;
  height: 25px;
  border: none;
  border-radius: 0 3px 3px 0;
}
.activate_search__notice {
  display: none;
  margin-left: 10px;
  font-size: 13px;
}
.activate_search__notice::after {
  content: "件ヒットしました";
}
.situation_type_completion .activate_search__button--reset {
  visibility: visible;
}
.situation_type_completion .activate_search__button--search {
  background-color: #BCCED6;
}
.situation_type_completion .activate_search__notice {
  display: block;
}
.activate_view_switcher {
  display: flex;
  padding: 2px;
  border-radius: 3px;
  background: #FFF;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}
.activate_view_switcher span {
  display: block;
  width: 21px;
  height: 21px;
  background-position: center;
  cursor: pointer;
}
.activate_view_switcher span.active {
  background-color: #BCCED6;
  border-radius: 3px;
}
.activate_view_switcher__card {
  background-image: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_view_switch_card.svg);
  background-repeat: no-repeat;
}
.activate_view_switcher__list {
  background-image: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_view_switch_list.svg);
  background-repeat: no-repeat;
}
.activate_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.activate_pagination__container {
  display: flex;
}
.activate_pagination__button {
  display: block;
  background: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  margin: 0 5px;
  border-radius: 3px;
}
.activate_pagination__button button {
  width: 25px;
  height: 25px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  font-size: 13px;
  color: #576D75;
  background-color: #fff;
}
.activate_pagination__button--disabled button {
  width: 25px;
  height: 25px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0.5;
  margin: 0 5px;
  font-size: 13px;
}
.activate_pagination__button_number {
  background: #FFF;
  border: none;
}
.activate_pagination__button_back {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_arw_s.svg) no-repeat;
  background-position: center;
  transform: rotate(180deg);
}
.activate_pagination__button_next {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_arw_s.svg) no-repeat;
  background-position: center;
}
.activate_pagination__button_last {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_arw_double_s.svg) no-repeat;
  background-position: center;
}
.activate_pagination__button_first {
  background: url(https://www.sourcenext.com/~/media/Images/mypage/p/activate/icon_arw_double_s.svg) no-repeat;
  background-position: center;
  transform: rotate(180deg);
}
.activate_pagination__numberdisplay {
  font-size: 13px;
  margin: 0 30px;
}
.activate_pagination__select {
  font-size: 13px;
}
.activate_pagination__select select {
  border: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  padding: 3px;
  border-radius: 3px;
}
.activate_pagination__select::before {
  content: "表示する件数";
  margin-right: 10px;
}
.activate_navigation_bottom {
  margin: 0 0 30px;
}

.activate-popup {
  width: calc(100% - 2em);
  height: calc(100% - 2em);
  max-width: 480px;
  max-height: 320px;
  background: #fff;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-mid);
  padding: 1.2em;
  margin: 1em;
  background: #fff;
  position: relative;
  text-align: center;
}
.activate-popup .btn_popup_cxl {
  background: var(--color-ui-light);
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-light);
  vertical-align: middle;
  padding: 0.8em 2.4em;
  text-align: center;
  width: 160px;
  color: var(--color-font-mid);
  border: none;
  margin: 1em 0.2em;
}
.activate-popup .btn_popup_cxl:hover {
  background-color: var(--color-ui-light-hover);
}
.activate-popup .btn_popup_cxl::before {
  content: "キャンセル";
}

#popup-rename h2 {
  font-size: var(--size-h-m);
  margin-bottom: 0.5em;
}
#popup-rename h2::before {
  content: "機器名の変更";
}
#popup-rename input {
  width: 100%;
  font-size: var(--size-txt-m);
  text-align: left;
  margin: 1em 0;
  border: 1px solid var(--color-border-mid);
  padding: 0.5em;
}
#popup-rename .btn_popup_rename {
  background: var(--color-success);
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-light);
  vertical-align: middle;
  padding: 0.8em 2.4em;
  text-align: center;
  width: 160px;
  color: var(--color-font-on);
  border: none;
  margin: 1em 0.2em;
}
#popup-rename .btn_popup_rename:hover {
  background-color: var(--color-success-hover);
}
#popup-rename .btn_popup_rename::before {
  content: "変更する";
}

#popup-deactivate h2 {
  font-size: var(--size-h-m);
  margin-bottom: 0.5em;
}
#popup-deactivate h2::before {
  content: "利用の解除";
}
#popup-deactivate p.lead-txt::before {
  content: "解除するとこの機器では利用できなくなります。\aもう1度認証すると利用は再開できます。";
  white-space: pre;
}
#popup-deactivate .btn_popup_deactivate {
  background: var(--color-alert);
  border-radius: var(--radius-max);
  box-shadow: var(--shadow-light);
  vertical-align: middle;
  padding: 0.8em 2.4em;
  text-align: center;
  width: 160px;
  color: var(--color-font-on);
  border: none;
  margin: 1em 0.2em;
}
#popup-deactivate .btn_popup_deactivate:hover {
  background-color: var(--color-alert-hover);
}
#popup-deactivate .btn_popup_deactivate::before {
  content: "解除する";
}

.link-faq {
  text-align: center;
  font-size: var(--size-txt-s);
}
.link-faq a {
  color: var(--color-link);
  text-decoration: underline;
}
.link-faq a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}
.link-faq a::before {
  content: url(https://www.sourcenext.com/~/media/Images/support/contents/install/QA_1.svg);
  vertical-align: middle;
  margin: 0 0.3em 0 -1em;
}
.link-faq a::after {
  content: "製品の利用開始について";
}

/*error*/
.activate .btnPosition {
  margin: 45px auto;
  text-align: center;
}

.activate .error-box {
  padding: 1em;
}

.activate .nodataUnit {
  color: var(--color-alert);
  border: solid 1px var(--color-alert-hover);
  padding: 1em;
  margin: 1em;
  text-align: center;
  font-size: var(--size-txt-m);
}

.activate .returnLogin {
  background: var(--color-link);
  line-height: 3.6em;
  border-radius: var(--radius-m);
  margin-bottom: 5px;
  width: 240px;
  color: var(--color-font-on);
  box-shadow: var(--shadow-mid);
  font-size: var(--size-txt-s);
  border: none;
  font-weight: bold;
  text-align: center;
}

.activate .returnLogin:hover {
  background: var(--color-link-hover);
}

.activate .returnLogin:before {
  content: "ログイン画面に戻る";
}