/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./src/css/main.scss ***!
  \********************************************************************************************************************************************************************/
@charset "UTF-8";
/*! UIkit 3.13.7 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  color: #666;
}

body {
  margin: 0;
}

.uk-link, a {
  color: #1e87f0;
  text-decoration: none;
  cursor: pointer;
}

.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
  color: #0f6ecd;
  text-decoration: underline;
}

abbr[title] {
  text-decoration: underline dotted;
  -webkit-text-decoration-style: dotted;
}

b, strong {
  font-weight: bolder;
}

:not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
  font-family: Consolas, monaco, monospace;
  font-size: 0.875rem;
  color: #f0506e;
  white-space: nowrap;
  padding: 2px 6px;
  background: #f8f8f8;
}

em {
  color: #f0506e;
}

ins {
  background: #ffd;
  color: #666;
  text-decoration: none;
}

mark {
  background: #ffd;
  color: #666;
}

q {
  font-style: italic;
}

small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

canvas, img, svg, video {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

img:not([src]) {
  visibility: hidden;
  min-width: 1px;
}

iframe {
  border: 0;
}

address, dl, fieldset, figure, ol, p, pre, ul {
  margin: 0 0 20px 0;
}

* + address, * + dl, * + fieldset, * + figure, * + ol, * + p, * + pre, * + ul {
  margin-top: 20px;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  color: #333;
  text-transform: none;
}

* + .uk-h1, * + .uk-h2, * + .uk-h3, * + .uk-h4, * + .uk-h5, * + .uk-h6, * + .uk-heading-2xlarge, * + .uk-heading-large, * + .uk-heading-medium, * + .uk-heading-small, * + .uk-heading-xlarge, * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
  margin-top: 40px;
}

.uk-h1, h1 {
  font-size: 2.23125rem;
  line-height: 1.2;
}

.uk-h2, h2 {
  font-size: 1.7rem;
  line-height: 1.3;
}

.uk-h3, h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.uk-h4, h4 {
  font-size: 1.25rem;
  line-height: 1.4;
}

.uk-h5, h5 {
  font-size: 16px;
  line-height: 1.4;
}

.uk-h6, h6 {
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (min-width: 960px) {
  .uk-h1, h1 {
    font-size: 2.625rem;
  }

  .uk-h2, h2 {
    font-size: 2rem;
  }
}
ol, ul {
  padding-left: 30px;
}

ol > li > ol, ol > li > ul, ul > li > ol, ul > li > ul {
  margin: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

.uk-hr, hr {
  overflow: visible;
  text-align: inherit;
  margin: 0 0 20px 0;
  border: 0;
  border-top: 1px solid #e5e5e5;
}

* + .uk-hr, * + hr {
  margin-top: 20px;
}

address {
  font-style: normal;
}

blockquote {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: #333;
}

* + blockquote {
  margin-top: 20px;
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

blockquote footer {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
}

blockquote footer::before {
  content: "— ";
}

pre {
  font: 0.875rem/1.5 Consolas, monaco, monospace;
  color: #666;
  -moz-tab-size: 4;
  tab-size: 4;
  overflow: auto;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #fff;
}

pre code {
  font-family: Consolas, monaco, monospace;
}

:focus {
  outline: 0;
}

:focus-visible {
  outline: 2px dotted #333;
}

::selection {
  background: #39f;
  color: #fff;
  text-shadow: none;
}

details, main {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

:root {
  --uk-breakpoint-s:640px;
  --uk-breakpoint-m:960px;
  --uk-breakpoint-l:1200px;
  --uk-breakpoint-xl:1600px;
}

.uk-link-muted a, .uk-link-toggle .uk-link-muted, a.uk-link-muted {
  color: #999;
}

.uk-link-muted a:hover, .uk-link-toggle:hover .uk-link-muted, a.uk-link-muted:hover {
  color: #666;
}

.uk-link-text a, .uk-link-toggle .uk-link-text, a.uk-link-text {
  color: inherit;
}

.uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text, a.uk-link-text:hover {
  color: #999;
}

.uk-link-heading a, .uk-link-toggle .uk-link-heading, a.uk-link-heading {
  color: inherit;
}

.uk-link-heading a:hover, .uk-link-toggle:hover .uk-link-heading, a.uk-link-heading:hover {
  color: #1e87f0;
  text-decoration: none;
}

.uk-link-reset a, a.uk-link-reset {
  color: inherit !important;
  text-decoration: none !important;
}

.uk-link-toggle {
  color: inherit !important;
  text-decoration: none !important;
}

.uk-heading-small {
  font-size: 2.6rem;
  line-height: 1.2;
}

.uk-heading-medium {
  font-size: 2.8875rem;
  line-height: 1.1;
}

.uk-heading-large {
  font-size: 3.4rem;
  line-height: 1.1;
}

.uk-heading-xlarge {
  font-size: 4rem;
  line-height: 1;
}

.uk-heading-2xlarge {
  font-size: 6rem;
  line-height: 1;
}

@media (min-width: 960px) {
  .uk-heading-small {
    font-size: 3.25rem;
  }

  .uk-heading-medium {
    font-size: 3.5rem;
  }

  .uk-heading-large {
    font-size: 4rem;
  }

  .uk-heading-xlarge {
    font-size: 6rem;
  }

  .uk-heading-2xlarge {
    font-size: 8rem;
  }
}
@media (min-width: 1200px) {
  .uk-heading-medium {
    font-size: 4rem;
  }

  .uk-heading-large {
    font-size: 6rem;
  }

  .uk-heading-xlarge {
    font-size: 8rem;
  }

  .uk-heading-2xlarge {
    font-size: 11rem;
  }
}
.uk-heading-divider {
  padding-bottom: calc(5px + 0.1em);
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}

.uk-heading-bullet {
  position: relative;
}

.uk-heading-bullet::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -0.1em;
  vertical-align: middle;
  height: calc(4px + 0.7em);
  margin-right: calc(5px + 0.2em);
  border-left: calc(5px + 0.1em) solid #e5e5e5;
}

.uk-heading-line {
  overflow: hidden;
}

.uk-heading-line > * {
  display: inline-block;
  position: relative;
}

.uk-heading-line > ::after, .uk-heading-line > ::before {
  content: "";
  position: absolute;
  top: calc(50% - (0.2px + 0.05em) / 2);
  width: 2000px;
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}

.uk-heading-line > ::before {
  right: 100%;
  margin-right: calc(5px + 0.3em);
}

.uk-heading-line > ::after {
  left: 100%;
  margin-left: calc(5px + 0.3em);
}

[class*=uk-divider] {
  border: none;
  margin-bottom: 20px;
}

* + [class*=uk-divider] {
  margin-top: 20px;
}

.uk-divider-icon {
  position: relative;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.uk-divider-icon::after, .uk-divider-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  max-width: calc(50% - 25px);
  border-bottom: 1px solid #e5e5e5;
}

.uk-divider-icon::before {
  right: calc(50% + 25px);
  width: 100%;
}

.uk-divider-icon::after {
  left: calc(50% + 25px);
  width: 100%;
}

.uk-divider-small {
  line-height: 0;
}

.uk-divider-small::after {
  content: "";
  display: inline-block;
  width: 100px;
  max-width: 100%;
  border-top: 1px solid #e5e5e5;
  vertical-align: top;
}

.uk-divider-vertical {
  width: max-content;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid #e5e5e5;
}

.uk-list {
  padding: 0;
  list-style: none;
}

.uk-list > * > :last-child {
  margin-bottom: 0;
}

.uk-list > * > ul, .uk-list > :nth-child(n+2) {
  margin-top: 10px;
}

.uk-list-circle > *, .uk-list-decimal > *, .uk-list-disc > *, .uk-list-hyphen > *, .uk-list-square > * {
  padding-left: 30px;
}

.uk-list-decimal {
  counter-reset: decimal;
}

.uk-list-decimal > * {
  counter-increment: decimal;
}

.uk-list-circle > ::before, .uk-list-decimal > ::before, .uk-list-disc > ::before, .uk-list-hyphen > ::before, .uk-list-square > ::before {
  content: "";
  position: relative;
  left: -30px;
  width: 30px;
  height: 1.5em;
  margin-bottom: -1.5em;
  display: list-item;
  list-style-position: inside;
  text-align: right;
}

.uk-list-disc > ::before {
  list-style-type: disc;
}

.uk-list-circle > ::before {
  list-style-type: circle;
}

.uk-list-square > ::before {
  list-style-type: square;
}

.uk-list-decimal > ::before {
  content: counter(decimal, decimal) " . ";
}

.uk-list-hyphen > ::before {
  content: "–  ";
}

.uk-list-muted > ::before {
  color: #999 !important;
}

.uk-list-emphasis > ::before {
  color: #333 !important;
}

.uk-list-primary > ::before {
  color: #1e87f0 !important;
}

.uk-list-secondary > ::before {
  color: #222 !important;
}

.uk-list-bullet > * {
  padding-left: 30px;
}

.uk-list-bullet > ::before {
  content: "";
  display: list-item;
  position: relative;
  left: -30px;
  width: 30px;
  height: 1.5em;
  margin-bottom: -1.5em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.uk-list-divider > :nth-child(n+2) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}

.uk-list-striped > * {
  padding: 10px 10px;
}

.uk-list-striped > :nth-of-type(odd) {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.uk-list-striped > :nth-of-type(odd) {
  background: #f8f8f8;
}

.uk-list-striped > :nth-child(n+2) {
  margin-top: 0;
}

.uk-list-large > * > ul, .uk-list-large > :nth-child(n+2) {
  margin-top: 20px;
}

.uk-list-collapse > * > ul, .uk-list-collapse > :nth-child(n+2) {
  margin-top: 0;
}

.uk-list-large.uk-list-divider > :nth-child(n+2) {
  margin-top: 20px;
  padding-top: 20px;
}

.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
  margin-top: 0;
  padding-top: 0;
}

.uk-list-large.uk-list-striped > * {
  padding: 20px 10px;
}

.uk-list-collapse.uk-list-striped > * {
  padding-top: 0;
  padding-bottom: 0;
}

.uk-list-collapse.uk-list-striped > :nth-child(n+2), .uk-list-large.uk-list-striped > :nth-child(n+2) {
  margin-top: 0;
}

.uk-description-list > dt {
  color: #333;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
}

.uk-description-list > dt:nth-child(n+2) {
  margin-top: 20px;
}

.uk-description-list-divider > dt:nth-child(n+2) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.uk-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 20px;
}

* + .uk-table {
  margin-top: 20px;
}

.uk-table th {
  padding: 16px 12px;
  text-align: left;
  vertical-align: bottom;
  font-size: 0.875rem;
  font-weight: 400;
  color: #999;
  text-transform: uppercase;
}

.uk-table td {
  padding: 16px 12px;
  vertical-align: top;
}

.uk-table td > :last-child {
  margin-bottom: 0;
}

.uk-table tfoot {
  font-size: 0.875rem;
}

.uk-table caption {
  font-size: 0.875rem;
  text-align: left;
  color: #999;
}

.uk-table-middle, .uk-table-middle td {
  vertical-align: middle !important;
}

.uk-table-divider > :first-child > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > tr:not(:first-child) {
  border-top: 1px solid #e5e5e5;
}

.uk-table-striped tbody tr:nth-of-type(odd), .uk-table-striped > tr:nth-of-type(odd) {
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.uk-table-hover tbody tr:hover, .uk-table-hover > tr:hover {
  background: #ffd;
}

.uk-table tbody tr.uk-active, .uk-table > tr.uk-active {
  background: #ffd;
}

.uk-table-small td, .uk-table-small th {
  padding: 10px 12px;
}

.uk-table-large td, .uk-table-large th {
  padding: 22px 12px;
}

.uk-table-justify td:first-child, .uk-table-justify th:first-child {
  padding-left: 0;
}

.uk-table-justify td:last-child, .uk-table-justify th:last-child {
  padding-right: 0;
}

.uk-table-shrink {
  width: 1px;
}

.uk-table-expand {
  min-width: 150px;
}

.uk-table-link {
  padding: 0 !important;
}

.uk-table-link > a {
  display: block;
  padding: 16px 12px;
}

.uk-table-small .uk-table-link > a {
  padding: 10px 12px;
}

@media (max-width: 959px) {
  .uk-table-responsive, .uk-table-responsive tbody, .uk-table-responsive td, .uk-table-responsive th, .uk-table-responsive tr {
    display: block;
  }

  .uk-table-responsive thead {
    display: none;
  }

  .uk-table-responsive td, .uk-table-responsive th {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .uk-table-responsive .uk-table-link:not(:first-child) > a, .uk-table-responsive td:not(:first-child):not(.uk-table-link), .uk-table-responsive th:not(:first-child):not(.uk-table-link) {
    padding-top: 5px !important;
  }

  .uk-table-responsive .uk-table-link:not(:last-child) > a, .uk-table-responsive td:not(:last-child):not(.uk-table-link), .uk-table-responsive th:not(:last-child):not(.uk-table-link) {
    padding-bottom: 5px !important;
  }

  .uk-table-justify.uk-table-responsive td, .uk-table-justify.uk-table-responsive th {
    padding-left: 0;
    padding-right: 0;
  }
}
.uk-table tbody tr {
  transition: background-color 0.1s linear;
}

.uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-table-striped > tr:nth-of-type(even):last-child {
  border-bottom: 1px solid #e5e5e5;
}

.uk-icon {
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  padding: 0;
  background-color: transparent;
  display: inline-block;
  fill: currentcolor;
  line-height: 0;
}

button.uk-icon:not(:disabled) {
  cursor: pointer;
}

.uk-icon::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
  fill: currentcolor;
}

.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
  stroke: currentcolor;
}

.uk-icon > * {
  transform: translate(0, 0);
}

.uk-icon-image {
  width: 20px;
  height: 20px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  object-fit: scale-down;
  max-width: none;
}

.uk-icon-link {
  color: #999;
}

.uk-icon-link:hover {
  color: #666;
}

.uk-active > .uk-icon-link, .uk-icon-link:active {
  color: #595959;
}

.uk-icon-button {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 500px;
  background: #f8f8f8;
  color: #999;
  vertical-align: middle;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}

.uk-icon-button:hover {
  background-color: #ebebeb;
  color: #666;
}

.uk-active > .uk-icon-button, .uk-icon-button:active {
  background-color: #dfdfdf;
  color: #666;
}

.uk-range {
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
  max-width: 100%;
  width: 100%;
  background: 0 0;
}

.uk-range:focus {
  outline: 0;
}

.uk-range::-moz-focus-outer {
  border: none;
}

.uk-range:not(:disabled)::-webkit-slider-thumb {
  cursor: pointer;
}

.uk-range:not(:disabled)::-moz-range-thumb {
  cursor: pointer;
}

.uk-range::-webkit-slider-runnable-track {
  height: 3px;
  background: #ebebeb;
  border-radius: 500px;
}

.uk-range:active::-webkit-slider-runnable-track, .uk-range:focus::-webkit-slider-runnable-track {
  background: #dedede;
}

.uk-range::-moz-range-track {
  height: 3px;
  background: #ebebeb;
  border-radius: 500px;
}

.uk-range:focus::-moz-range-track {
  background: #dedede;
}

.uk-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -7px;
  height: 15px;
  width: 15px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #ccc;
}

.uk-range::-moz-range-thumb {
  border: none;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #ccc;
}

.uk-checkbox, .uk-input, .uk-radio, .uk-select, .uk-textarea {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  font: inherit;
}

.uk-input {
  overflow: visible;
}

.uk-select {
  text-transform: none;
}

.uk-select optgroup {
  font: inherit;
  font-weight: 700;
}

.uk-textarea {
  overflow: auto;
}

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

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

.uk-input::-moz-placeholder, .uk-textarea::-moz-placeholder {
  opacity: 1;
}

.uk-checkbox:not(:disabled), .uk-radio:not(:disabled) {
  cursor: pointer;
}

.uk-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.uk-input, .uk-textarea {
  -webkit-appearance: none;
}

.uk-input, .uk-select, .uk-textarea {
  max-width: 100%;
  width: 100%;
  border: 0 none;
  padding: 0 10px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  transition: 0.2s ease-in-out;
  transition-property: color, background-color, border;
}

.uk-input, .uk-select:not([multiple]):not([size]) {
  height: 40px;
  vertical-align: middle;
  display: inline-block;
}

.uk-input:not(input), .uk-select:not(select) {
  line-height: 38px;
}

.uk-select[multiple], .uk-select[size], .uk-textarea {
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: top;
}

.uk-select[multiple], .uk-select[size] {
  resize: vertical;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  outline: 0;
  background-color: #fff;
  color: #666;
  border-color: #1e87f0;
}

.uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled {
  background-color: #f8f8f8;
  color: #999;
  border-color: #e5e5e5;
}

.uk-input::placeholder {
  color: #999;
}

.uk-textarea::placeholder {
  color: #999;
}

.uk-form-small {
  font-size: 0.875rem;
}

.uk-form-small:not(textarea):not([multiple]):not([size]) {
  height: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

[multiple].uk-form-small, [size].uk-form-small, textarea.uk-form-small {
  padding: 5px 8px;
}

.uk-form-small:not(select):not(input):not(textarea) {
  line-height: 28px;
}

.uk-form-large {
  font-size: 1.25rem;
}

.uk-form-large:not(textarea):not([multiple]):not([size]) {
  height: 55px;
  padding-left: 12px;
  padding-right: 12px;
}

[multiple].uk-form-large, [size].uk-form-large, textarea.uk-form-large {
  padding: 7px 12px;
}

.uk-form-large:not(select):not(input):not(textarea) {
  line-height: 53px;
}

.uk-form-danger, .uk-form-danger:focus {
  color: #f0506e;
  border-color: #f0506e;
}

.uk-form-success, .uk-form-success:focus {
  color: #32d296;
  border-color: #32d296;
}

.uk-form-blank {
  background: 0 0;
  border-color: transparent;
}

.uk-form-blank:focus {
  border-color: #e5e5e5;
  border-style: solid;
}

input.uk-form-width-xsmall {
  width: 50px;
}

select.uk-form-width-xsmall {
  width: 75px;
}

.uk-form-width-small {
  width: 130px;
}

.uk-form-width-medium {
  width: 200px;
}

.uk-form-width-large {
  width: 500px;
}

.uk-select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

.uk-select:not([multiple]):not([size]) option {
  color: #666;
}

.uk-select:not([multiple]):not([size]):disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-input[list] {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

.uk-input[list]:focus, .uk-input[list]:hover {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

.uk-checkbox, .uk-radio {
  display: inline-block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  margin-top: -4px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: 1px solid #ccc;
  transition: 0.2s ease-in-out;
  transition-property: background-color, border;
}

.uk-radio {
  border-radius: 50%;
}

.uk-checkbox:focus, .uk-radio:focus {
  background-color: rgba(0, 0, 0, 0);
  outline: 0;
  border-color: #1e87f0;
}

.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
  background-color: #1e87f0;
  border-color: transparent;
}

.uk-checkbox:checked:focus, .uk-checkbox:indeterminate:focus, .uk-radio:checked:focus {
  background-color: #0e6dcd;
}

.uk-radio:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-checkbox:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-checkbox:disabled, .uk-radio:disabled {
  background-color: #f8f8f8;
  border-color: #e5e5e5;
}

.uk-radio:disabled:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-checkbox:disabled:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-checkbox:disabled:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-legend {
  width: 100%;
  color: inherit;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.uk-form-custom {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
}

.uk-form-custom input[type=file], .uk-form-custom select {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  -webkit-appearance: none;
  opacity: 0;
  cursor: pointer;
}

.uk-form-custom input[type=file] {
  font-size: 500px;
  overflow: hidden;
}

.uk-form-label {
  color: #333;
  font-size: 0.875rem;
}

.uk-form-stacked .uk-form-label {
  display: block;
  margin-bottom: 5px;
}

@media (max-width: 959px) {
  .uk-form-horizontal .uk-form-label {
    display: block;
    margin-bottom: 5px;
  }
}
@media (min-width: 960px) {
  .uk-form-horizontal .uk-form-label {
    width: 200px;
    margin-top: 7px;
    float: left;
  }

  .uk-form-horizontal .uk-form-controls {
    margin-left: 215px;
  }

  .uk-form-horizontal .uk-form-controls-text {
    padding-top: 7px;
  }
}
.uk-form-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

.uk-form-icon:hover {
  color: #666;
}

.uk-form-icon:not(a):not(button):not(input) {
  pointer-events: none;
}

.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input {
  padding-left: 40px !important;
}

.uk-form-icon-flip {
  right: 0;
  left: auto;
}

.uk-form-icon-flip ~ .uk-input {
  padding-right: 40px !important;
}

.uk-button {
  margin: 0;
  border: none;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 30px;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color, border-color;
}

.uk-button:not(:disabled) {
  cursor: pointer;
}

.uk-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.uk-button:hover {
  text-decoration: none;
}

.uk-button-default {
  background-color: transparent;
  color: #333;
  border: 1px solid #e5e5e5;
}

.uk-button-default:hover {
  background-color: transparent;
  color: #333;
  border-color: #b2b2b2;
}

.uk-button-default.uk-active, .uk-button-default:active {
  background-color: transparent;
  color: #333;
  border-color: #999;
}

.uk-button-primary {
  background-color: #1e87f0;
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-primary:hover {
  background-color: #0f7ae5;
  color: #fff;
}

.uk-button-primary.uk-active, .uk-button-primary:active {
  background-color: #0e6dcd;
  color: #fff;
}

.uk-button-secondary {
  background-color: #222;
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-secondary:hover {
  background-color: #151515;
  color: #fff;
}

.uk-button-secondary.uk-active, .uk-button-secondary:active {
  background-color: #080808;
  color: #fff;
}

.uk-button-danger {
  background-color: #f0506e;
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-danger:hover {
  background-color: #ee395b;
  color: #fff;
}

.uk-button-danger.uk-active, .uk-button-danger:active {
  background-color: #ec2147;
  color: #fff;
}

.uk-button-danger:disabled, .uk-button-default:disabled, .uk-button-primary:disabled, .uk-button-secondary:disabled {
  background-color: transparent;
  color: #999;
  border-color: #e5e5e5;
}

.uk-button-small {
  padding: 0 15px;
  line-height: 28px;
  font-size: 0.875rem;
}

.uk-button-large {
  padding: 0 40px;
  line-height: 53px;
  font-size: 0.875rem;
}

.uk-button-text {
  padding: 0;
  line-height: 1.5;
  background: 0 0;
  color: #333;
  position: relative;
}

.uk-button-text::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  border-bottom: 1px solid #333;
  transition: right 0.3s ease-out;
}

.uk-button-text:hover {
  color: #333;
}

.uk-button-text:hover::before {
  right: 0;
}

.uk-button-text:disabled {
  color: #999;
}

.uk-button-text:disabled::before {
  display: none;
}

.uk-button-link {
  padding: 0;
  line-height: 1.5;
  background: 0 0;
  color: #333;
}

.uk-button-link:hover {
  color: #999;
  text-decoration: none;
}

.uk-button-link:disabled {
  color: #999;
  text-decoration: none;
}

.uk-button-group {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}

.uk-button-group > .uk-button:nth-child(n+2), .uk-button-group > div:nth-child(n+2) .uk-button {
  margin-left: -1px;
}

.uk-button-group .uk-button.uk-active, .uk-button-group .uk-button:active, .uk-button-group .uk-button:hover {
  position: relative;
  z-index: 1;
}

.uk-progress {
  vertical-align: baseline;
  display: block;
  width: 100%;
  border: 0;
  background-color: #f8f8f8;
  margin-bottom: 20px;
  height: 15px;
  border-radius: 500px;
  overflow: hidden;
}

* + .uk-progress {
  margin-top: 20px;
}

.uk-progress::-webkit-progress-bar {
  background-color: transparent;
}

.uk-progress::-webkit-progress-value {
  background-color: #1e87f0;
  transition: width 0.6s ease;
}

.uk-progress::-moz-progress-bar {
  background-color: #1e87f0;
  transition: width 0.6s ease;
}

.uk-section {
  display: flow-root;
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 960px) {
  .uk-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.uk-section > :last-child {
  margin-bottom: 0;
}

.uk-section-xsmall {
  padding-top: 20px;
  padding-bottom: 20px;
}

.uk-section-small {
  padding-top: 40px;
  padding-bottom: 40px;
}

.uk-section-large {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (min-width: 960px) {
  .uk-section-large {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.uk-section-xlarge {
  padding-top: 140px;
  padding-bottom: 140px;
}

@media (min-width: 960px) {
  .uk-section-xlarge {
    padding-top: 210px;
    padding-bottom: 210px;
  }
}
.uk-section-default {
  background: #fff;
}

.uk-section-muted {
  background: #f8f8f8;
}

.uk-section-primary {
  background: #1e87f0;
}

.uk-section-secondary {
  background: #222;
}

.uk-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 640px) {
  .uk-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 960px) {
  .uk-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.uk-container > :last-child {
  margin-bottom: 0;
}

.uk-container .uk-container {
  padding-left: 0;
  padding-right: 0;
}

.uk-container-xsmall {
  max-width: 750px;
}

.uk-container-small {
  max-width: 900px;
}

.uk-container-large {
  max-width: 1400px;
}

.uk-container-xlarge {
  max-width: 1600px;
}

.uk-container-expand {
  max-width: none;
}

.uk-container-expand-left {
  margin-left: 0;
}

.uk-container-expand-right {
  margin-right: 0;
}

@media (min-width: 640px) {
  .uk-container-expand-left.uk-container-xsmall, .uk-container-expand-right.uk-container-xsmall {
    max-width: calc(50% + 375px - 30px);
  }

  .uk-container-expand-left.uk-container-small, .uk-container-expand-right.uk-container-small {
    max-width: calc(50% + 450px - 30px);
  }
}
@media (min-width: 960px) {
  .uk-container-expand-left, .uk-container-expand-right {
    max-width: calc(50% + 600px - 40px);
  }

  .uk-container-expand-left.uk-container-xsmall, .uk-container-expand-right.uk-container-xsmall {
    max-width: calc(50% + 375px - 40px);
  }

  .uk-container-expand-left.uk-container-small, .uk-container-expand-right.uk-container-small {
    max-width: calc(50% + 450px - 40px);
  }

  .uk-container-expand-left.uk-container-large, .uk-container-expand-right.uk-container-large {
    max-width: calc(50% + 700px - 40px);
  }

  .uk-container-expand-left.uk-container-xlarge, .uk-container-expand-right.uk-container-xlarge {
    max-width: calc(50% + 800px - 40px);
  }
}
.uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right {
  width: calc(100% + 15px);
}

.uk-container-item-padding-remove-left {
  margin-left: -15px;
}

.uk-container-item-padding-remove-right {
  margin-right: -15px;
}

@media (min-width: 640px) {
  .uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right {
    width: calc(100% + 30px);
  }

  .uk-container-item-padding-remove-left {
    margin-left: -30px;
  }

  .uk-container-item-padding-remove-right {
    margin-right: -30px;
  }
}
@media (min-width: 960px) {
  .uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right {
    width: calc(100% + 40px);
  }

  .uk-container-item-padding-remove-left {
    margin-left: -40px;
  }

  .uk-container-item-padding-remove-right {
    margin-right: -40px;
  }
}
.uk-tile {
  display: flow-root;
  position: relative;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 640px) {
  .uk-tile {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 960px) {
  .uk-tile {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.uk-tile > :last-child {
  margin-bottom: 0;
}

.uk-tile-xsmall {
  padding-top: 20px;
  padding-bottom: 20px;
}

.uk-tile-small {
  padding-top: 40px;
  padding-bottom: 40px;
}

.uk-tile-large {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (min-width: 960px) {
  .uk-tile-large {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.uk-tile-xlarge {
  padding-top: 140px;
  padding-bottom: 140px;
}

@media (min-width: 960px) {
  .uk-tile-xlarge {
    padding-top: 210px;
    padding-bottom: 210px;
  }
}
.uk-tile-default {
  background-color: #fff;
}

.uk-tile-muted {
  background-color: #f8f8f8;
}

.uk-tile-primary {
  background-color: #1e87f0;
}

.uk-tile-secondary {
  background-color: #222;
}

.uk-card {
  position: relative;
  box-sizing: border-box;
  transition: box-shadow 0.1s ease-in-out;
}

.uk-card-body {
  display: flow-root;
  padding: 30px 30px;
}

.uk-card-header {
  display: flow-root;
  padding: 15px 30px;
}

.uk-card-footer {
  display: flow-root;
  padding: 15px 30px;
}

@media (min-width: 1200px) {
  .uk-card-body {
    padding: 40px 40px;
  }

  .uk-card-header {
    padding: 20px 40px;
  }

  .uk-card-footer {
    padding: 20px 40px;
  }
}
.uk-card-body > :last-child, .uk-card-footer > :last-child, .uk-card-header > :last-child {
  margin-bottom: 0;
}

.uk-card-title {
  font-size: 1.5rem;
  line-height: 1.4;
}

.uk-card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  height: 22px;
  padding: 0 10px;
  background: #1e87f0;
  color: #fff;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  border-radius: 2px;
  text-transform: uppercase;
}

.uk-card-badge:first-child + * {
  margin-top: 0;
}

.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
  background-color: #fff;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-card-default {
  background-color: #fff;
  color: #666;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-default .uk-card-title {
  color: #333;
}

.uk-card-default.uk-card-hover:hover {
  background-color: #fff;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-card-default .uk-card-header {
  border-bottom: 1px solid #e5e5e5;
}

.uk-card-default .uk-card-footer {
  border-top: 1px solid #e5e5e5;
}

.uk-card-primary {
  background-color: #1e87f0;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-primary .uk-card-title {
  color: #fff;
}

.uk-card-primary.uk-card-hover:hover {
  background-color: #1e87f0;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-card-secondary {
  background-color: #222;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-secondary .uk-card-title {
  color: #fff;
}

.uk-card-secondary.uk-card-hover:hover {
  background-color: #222;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-card-small .uk-card-body, .uk-card-small.uk-card-body {
  padding: 20px 20px;
}

.uk-card-small .uk-card-header {
  padding: 13px 20px;
}

.uk-card-small .uk-card-footer {
  padding: 13px 20px;
}

@media (min-width: 1200px) {
  .uk-card-large .uk-card-body, .uk-card-large.uk-card-body {
    padding: 70px 70px;
  }

  .uk-card-large .uk-card-header {
    padding: 35px 70px;
  }

  .uk-card-large .uk-card-footer {
    padding: 35px 70px;
  }
}
.uk-card-body > .uk-nav-default {
  margin-left: -30px;
  margin-right: -30px;
}

.uk-card-body > .uk-nav-default:only-child {
  margin-top: -15px;
  margin-bottom: -15px;
}

.uk-card-body > .uk-nav-default .uk-nav-divider, .uk-card-body > .uk-nav-default .uk-nav-header, .uk-card-body > .uk-nav-default > li > a {
  padding-left: 30px;
  padding-right: 30px;
}

.uk-card-body > .uk-nav-default .uk-nav-sub {
  padding-left: 45px;
}

@media (min-width: 1200px) {
  .uk-card-body > .uk-nav-default {
    margin-left: -40px;
    margin-right: -40px;
  }

  .uk-card-body > .uk-nav-default:only-child {
    margin-top: -25px;
    margin-bottom: -25px;
  }

  .uk-card-body > .uk-nav-default .uk-nav-divider, .uk-card-body > .uk-nav-default .uk-nav-header, .uk-card-body > .uk-nav-default > li > a {
    padding-left: 40px;
    padding-right: 40px;
  }

  .uk-card-body > .uk-nav-default .uk-nav-sub {
    padding-left: 55px;
  }
}
.uk-card-small > .uk-nav-default {
  margin-left: -20px;
  margin-right: -20px;
}

.uk-card-small > .uk-nav-default:only-child {
  margin-top: -5px;
  margin-bottom: -5px;
}

.uk-card-small > .uk-nav-default .uk-nav-divider, .uk-card-small > .uk-nav-default .uk-nav-header, .uk-card-small > .uk-nav-default > li > a {
  padding-left: 20px;
  padding-right: 20px;
}

.uk-card-small > .uk-nav-default .uk-nav-sub {
  padding-left: 35px;
}

@media (min-width: 1200px) {
  .uk-card-large > .uk-nav-default {
    margin: 0;
  }

  .uk-card-large > .uk-nav-default:only-child {
    margin: 0;
  }

  .uk-card-large > .uk-nav-default .uk-nav-divider, .uk-card-large > .uk-nav-default .uk-nav-header, .uk-card-large > .uk-nav-default > li > a {
    padding-left: 0;
    padding-right: 0;
  }

  .uk-card-large > .uk-nav-default .uk-nav-sub {
    padding-left: 15px;
  }
}
.uk-close {
  color: #999;
  transition: 0.1s ease-in-out;
  transition-property: color, opacity;
}

.uk-close:hover {
  color: #666;
}

.uk-spinner > * {
  animation: uk-spinner-rotate 1.4s linear infinite;
}

@keyframes uk-spinner-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(270deg);
  }
}
.uk-spinner > * > * {
  stroke-dasharray: 88px;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: uk-spinner-dash 1.4s ease-in-out infinite;
  stroke-width: 1;
  stroke-linecap: round;
}

@keyframes uk-spinner-dash {
  0% {
    stroke-dashoffset: 88px;
  }
  50% {
    stroke-dashoffset: 22px;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 88px;
    transform: rotate(450deg);
  }
}
.uk-totop {
  padding: 5px;
  color: #999;
  transition: color 0.1s ease-in-out;
}

.uk-totop:hover {
  color: #666;
}

.uk-totop:active {
  color: #333;
}

.uk-marker {
  padding: 5px;
  background: #222;
  color: #fff;
  border-radius: 500px;
}

.uk-marker:hover {
  color: #fff;
}

.uk-alert {
  position: relative;
  margin-bottom: 20px;
  padding: 15px 29px 15px 15px;
  background: #f8f8f8;
  color: #666;
}

* + .uk-alert {
  margin-top: 20px;
}

.uk-alert > :last-child {
  margin-bottom: 0;
}

.uk-alert-close {
  position: absolute;
  top: 20px;
  right: 15px;
  color: inherit;
  opacity: 0.4;
}

.uk-alert-close:first-child + * {
  margin-top: 0;
}

.uk-alert-close:hover {
  color: inherit;
  opacity: 0.8;
}

.uk-alert-primary {
  background: #d8eafc;
  color: #1e87f0;
}

.uk-alert-success {
  background: #edfbf6;
  color: #32d296;
}

.uk-alert-warning {
  background: #fff6ee;
  color: #faa05a;
}

.uk-alert-danger {
  background: #fef4f6;
  color: #f0506e;
}

.uk-alert h1, .uk-alert h2, .uk-alert h3, .uk-alert h4, .uk-alert h5, .uk-alert h6 {
  color: inherit;
}

.uk-alert a:not([class]) {
  color: inherit;
  text-decoration: underline;
}

.uk-alert a:not([class]):hover {
  color: inherit;
  text-decoration: underline;
}

.uk-placeholder {
  margin-bottom: 20px;
  padding: 30px 30px;
  background: 0 0;
  border: 1px dashed #e5e5e5;
}

* + .uk-placeholder {
  margin-top: 20px;
}

.uk-placeholder > :last-child {
  margin-bottom: 0;
}

.uk-badge {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 500px;
  vertical-align: middle;
  background: #1e87f0;
  color: #fff !important;
  font-size: 11px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.uk-badge:hover {
  text-decoration: none;
}

.uk-label {
  display: inline-block;
  padding: 0 10px;
  background: #1e87f0;
  line-height: 1.5;
  font-size: 0.875rem;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  text-transform: uppercase;
}

.uk-label-success {
  background-color: #32d296;
  color: #fff;
}

.uk-label-warning {
  background-color: #faa05a;
  color: #fff;
}

.uk-label-danger {
  background-color: #f0506e;
  color: #fff;
}

.uk-overlay {
  padding: 30px 30px;
}

.uk-overlay > :last-child {
  margin-bottom: 0;
}

.uk-overlay-default {
  background: rgba(255, 255, 255, 0.8);
}

.uk-overlay-primary {
  background: rgba(34, 34, 34, 0.8);
}

.uk-article {
  display: flow-root;
}

.uk-article > :last-child {
  margin-bottom: 0;
}

.uk-article + .uk-article {
  margin-top: 70px;
}

.uk-article-title {
  font-size: 2.23125rem;
  line-height: 1.2;
}

@media (min-width: 960px) {
  .uk-article-title {
    font-size: 2.625rem;
  }
}
.uk-article-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}

.uk-article-meta a {
  color: #999;
}

.uk-article-meta a:hover {
  color: #666;
  text-decoration: none;
}

.uk-comment-body {
  display: flow-root;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.uk-comment-header {
  display: flow-root;
  margin-bottom: 20px;
}

.uk-comment-body > :last-child, .uk-comment-header > :last-child {
  margin-bottom: 0;
}

.uk-comment-title {
  font-size: 1.25rem;
  line-height: 1.4;
}

.uk-comment-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}

.uk-comment-list {
  padding: 0;
  list-style: none;
}

.uk-comment-list > :nth-child(n+2) {
  margin-top: 70px;
}

.uk-comment-list .uk-comment ~ ul {
  margin: 70px 0 0 0;
  padding-left: 30px;
  list-style: none;
}

@media (min-width: 960px) {
  .uk-comment-list .uk-comment ~ ul {
    padding-left: 100px;
  }
}
.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
  margin-top: 70px;
}

.uk-comment-primary {
  padding: 30px;
  background-color: #f8f8f8;
}

.uk-search {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
}

.uk-search-input::-webkit-search-cancel-button, .uk-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.uk-search-input::-moz-placeholder {
  opacity: 1;
}

.uk-search-input {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  font: inherit;
  overflow: visible;
  -webkit-appearance: none;
  vertical-align: middle;
  width: 100%;
  border: none;
  color: #666;
}

.uk-search-input:focus {
  outline: 0;
}

.uk-search-input::placeholder {
  color: #999;
}

.uk-search .uk-search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

.uk-search .uk-search-icon:hover {
  color: #999;
}

.uk-search .uk-search-icon:not(a):not(button):not(input) {
  pointer-events: none;
}

.uk-search .uk-search-icon-flip {
  right: 0;
  left: auto;
}

.uk-search-default {
  width: 240px;
}

.uk-search-default .uk-search-input {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  background: 0 0;
  border: 1px solid #e5e5e5;
}

.uk-search-default .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0);
  border-color: #1e87f0;
}

.uk-search-default .uk-search-icon {
  width: 40px;
}

.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
  padding-left: 40px;
}

.uk-search-default .uk-search-icon-flip ~ .uk-search-input {
  padding-right: 40px;
}

.uk-search-navbar {
  width: 400px;
}

.uk-search-navbar .uk-search-input {
  height: 40px;
  background: 0 0;
  font-size: 1.5rem;
}

.uk-search-navbar .uk-search-icon {
  width: 40px;
}

.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
  padding-left: 40px;
}

.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input {
  padding-right: 40px;
}

.uk-search-large {
  width: 500px;
}

.uk-search-large .uk-search-input {
  height: 80px;
  background: 0 0;
  font-size: 2.625rem;
}

.uk-search-large .uk-search-icon {
  width: 80px;
}

.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
  padding-left: 80px;
}

.uk-search-large .uk-search-icon-flip ~ .uk-search-input {
  padding-right: 80px;
}

.uk-search-toggle {
  color: #999;
}

.uk-search-toggle:hover {
  color: #666;
}

.uk-accordion {
  padding: 0;
  list-style: none;
}

.uk-accordion > :nth-child(n+2) {
  margin-top: 20px;
}

.uk-accordion-title {
  display: block;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
}

.uk-accordion-title::before {
  content: "";
  width: 1.4em;
  height: 1.4em;
  margin-left: 10px;
  float: right;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.uk-open > .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-accordion-title:hover {
  color: #666;
  text-decoration: none;
}

.uk-accordion-content {
  display: flow-root;
  margin-top: 20px;
}

.uk-accordion-content > :last-child {
  margin-bottom: 0;
}

.uk-drop {
  display: none;
  position: absolute;
  z-index: 1020;
  --uk-position-offset:20px;
  box-sizing: border-box;
  width: 300px;
  max-width: 100vw;
}

.uk-drop.uk-open {
  display: block;
}

.uk-drop-stack .uk-drop-grid > * {
  width: 100% !important;
}

.uk-dropdown {
  display: none;
  position: absolute;
  z-index: 1020;
  --uk-position-offset:10px;
  box-sizing: border-box;
  min-width: 200px;
  max-width: 100vw;
  padding: 25px;
  background: #fff;
  color: #666;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.uk-dropdown.uk-open {
  display: block;
}

.uk-dropdown-nav {
  white-space: nowrap;
  font-size: 0.875rem;
}

.uk-dropdown-nav > li > a {
  color: #999;
}

.uk-dropdown-nav > li.uk-active > a, .uk-dropdown-nav > li > a:hover {
  color: #666;
}

.uk-dropdown-nav .uk-nav-header {
  color: #333;
}

.uk-dropdown-nav .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}

.uk-dropdown-nav .uk-nav-sub a {
  color: #999;
}

.uk-dropdown-nav .uk-nav-sub a:hover, .uk-dropdown-nav .uk-nav-sub li.uk-active > a {
  color: #666;
}

.uk-dropdown-stack .uk-dropdown-grid > * {
  width: 100% !important;
}

.uk-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 15px 15px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.15s linear;
}

@media (min-width: 640px) {
  .uk-modal {
    padding: 50px 30px;
  }
}
@media (min-width: 960px) {
  .uk-modal {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.uk-modal.uk-open {
  opacity: 1;
}

.uk-modal-page {
  overflow: hidden;
}

.uk-modal-dialog {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  width: 600px;
  max-width: 100% !important;
  background: #fff;
  opacity: 0;
  transform: translateY(-100px);
  transition: 0.3s linear;
  transition-property: opacity, transform;
}

.uk-open > .uk-modal-dialog {
  opacity: 1;
  transform: translateY(0);
}

.uk-modal-container .uk-modal-dialog {
  width: 1200px;
}

.uk-modal-full {
  padding: 0;
  background: 0 0;
}

.uk-modal-full .uk-modal-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: translateY(0);
}

.uk-modal-body {
  display: flow-root;
  padding: 30px 30px;
}

.uk-modal-header {
  display: flow-root;
  padding: 15px 30px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.uk-modal-footer {
  display: flow-root;
  padding: 15px 30px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
}

.uk-modal-body > :last-child, .uk-modal-footer > :last-child, .uk-modal-header > :last-child {
  margin-bottom: 0;
}

.uk-modal-title {
  font-size: 2rem;
  line-height: 1.3;
}

[class*=uk-modal-close-] {
  position: absolute;
  z-index: 1010;
  top: 10px;
  right: 10px;
  padding: 5px;
}

[class*=uk-modal-close-]:first-child + * {
  margin-top: 0;
}

.uk-modal-close-outside {
  top: 0;
  right: -5px;
  transform: translate(0, -100%);
  color: #fff;
}

.uk-modal-close-outside:hover {
  color: #fff;
}

@media (min-width: 960px) {
  .uk-modal-close-outside {
    right: 0;
    transform: translate(100%, -100%);
  }
}
.uk-modal-close-full {
  top: 0;
  right: 0;
  padding: 20px;
  background: #fff;
}

.uk-slideshow {
  -webkit-tap-highlight-color: transparent;
}

.uk-slideshow-items {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.uk-slideshow-items > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.uk-slideshow-items > :not(.uk-active) {
  display: none;
}

.uk-slider {
  -webkit-tap-highlight-color: transparent;
}

.uk-slider-container {
  overflow: hidden;
}

.uk-slider-container-offset {
  margin: -11px -25px -39px -25px;
  padding: 11px 25px 39px 25px;
}

.uk-slider-items {
  will-change: transform;
  position: relative;
  touch-action: pan-y;
}

.uk-slider-items:not(.uk-grid) {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-touch-callout: none;
}

.uk-slider-items.uk-grid {
  flex-wrap: nowrap;
}

.uk-slider-items > * {
  flex: none;
  max-width: 100%;
  position: relative;
}

.uk-sticky {
  position: relative;
}

.uk-sticky-fixed {
  z-index: 980;
  box-sizing: border-box;
  margin: 0 !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.uk-sticky[class*=uk-animation-] {
  animation-duration: 0.2s;
}

.uk-sticky.uk-animation-reverse {
  animation-duration: 0.2s;
}

.uk-offcanvas {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.uk-offcanvas-flip .uk-offcanvas {
  right: 0;
  left: auto;
}

.uk-offcanvas-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -270px;
  box-sizing: border-box;
  width: 270px;
  padding: 20px 20px;
  background: #222;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 960px) {
  .uk-offcanvas-bar {
    left: -350px;
    width: 350px;
    padding: 40px 40px;
  }
}
.uk-offcanvas-flip .uk-offcanvas-bar {
  left: auto;
  right: -270px;
}

@media (min-width: 960px) {
  .uk-offcanvas-flip .uk-offcanvas-bar {
    right: -350px;
  }
}
.uk-open > .uk-offcanvas-bar {
  left: 0;
}

.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
  left: auto;
  right: 0;
}

.uk-offcanvas-bar-animation {
  transition: left 0.3s ease-out;
}

.uk-offcanvas-flip .uk-offcanvas-bar-animation {
  transition-property: right;
}

.uk-offcanvas-reveal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease-out;
}

.uk-offcanvas-reveal .uk-offcanvas-bar {
  left: 0;
}

.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
  left: auto;
  right: 0;
}

.uk-open > .uk-offcanvas-reveal {
  width: 270px;
}

@media (min-width: 960px) {
  .uk-open > .uk-offcanvas-reveal {
    width: 350px;
  }
}
.uk-offcanvas-flip .uk-offcanvas-reveal {
  right: 0;
  left: auto;
}

.uk-offcanvas-close {
  position: absolute;
  z-index: 1000;
  top: 5px;
  right: 5px;
  padding: 5px;
}

@media (min-width: 960px) {
  .uk-offcanvas-close {
    top: 20px;
    right: 20px;
  }
}
.uk-offcanvas-close:first-child + * {
  margin-top: 0;
}

.uk-offcanvas-overlay {
  width: 100vw;
  touch-action: none;
}

.uk-offcanvas-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.uk-offcanvas-overlay.uk-open::before {
  opacity: 1;
}

.uk-offcanvas-container, .uk-offcanvas-page {
  overflow-x: hidden;
}

.uk-offcanvas-container {
  position: relative;
  left: 0;
  transition: left 0.3s ease-out;
  box-sizing: border-box;
  width: 100%;
}

:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
  left: 270px;
}

.uk-offcanvas-flip.uk-offcanvas-container-animation {
  left: -270px;
}

@media (min-width: 960px) {
  :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
    left: 350px;
  }

  .uk-offcanvas-flip.uk-offcanvas-container-animation {
    left: -350px;
  }
}
.uk-switcher {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-switcher > :not(.uk-active) {
  display: none;
}

.uk-switcher > * > :last-child {
  margin-bottom: 0;
}

.uk-leader {
  overflow: hidden;
}

.uk-leader-fill::after {
  display: inline-block;
  margin-left: 15px;
  width: 0;
  content: attr(data-fill);
  white-space: nowrap;
}

.uk-leader-fill.uk-leader-hide::after {
  display: none;
}

:root {
  --uk-leader-fill-content:".";
}

.uk-notification {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1040;
  box-sizing: border-box;
  width: 350px;
}

.uk-notification-bottom-right, .uk-notification-top-right {
  left: auto;
  right: 10px;
}

.uk-notification-bottom-center, .uk-notification-top-center {
  left: 50%;
  margin-left: -175px;
}

.uk-notification-bottom-center, .uk-notification-bottom-left, .uk-notification-bottom-right {
  top: auto;
  bottom: 10px;
}

@media (max-width: 639px) {
  .uk-notification {
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
  }
}
.uk-notification-message {
  position: relative;
  padding: 15px;
  background: #f8f8f8;
  color: #666;
  font-size: 1.25rem;
  line-height: 1.4;
  cursor: pointer;
}

* + .uk-notification-message {
  margin-top: 10px;
}

.uk-notification-close {
  display: none;
  position: absolute;
  top: 20px;
  right: 15px;
}

.uk-notification-message:hover .uk-notification-close {
  display: block;
}

.uk-notification-message-primary {
  color: #1e87f0;
}

.uk-notification-message-success {
  color: #32d296;
}

.uk-notification-message-warning {
  color: #faa05a;
}

.uk-notification-message-danger {
  color: #f0506e;
}

.uk-tooltip {
  display: none;
  position: absolute;
  z-index: 1030;
  --uk-position-offset:10px;
  top: 0;
  box-sizing: border-box;
  max-width: 200px;
  padding: 3px 6px;
  background: #666;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
}

.uk-tooltip.uk-active {
  display: block;
}

.uk-sortable {
  position: relative;
}

.uk-sortable > :last-child {
  margin-bottom: 0;
}

.uk-sortable-drag {
  position: fixed !important;
  z-index: 1050 !important;
  pointer-events: none;
}

.uk-sortable-placeholder {
  opacity: 0;
  pointer-events: none;
}

.uk-sortable-empty {
  min-height: 50px;
}

.uk-sortable-handle:hover {
  cursor: move;
}

.uk-countdown-number {
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  line-height: 0.8;
}

@media (min-width: 640px) {
  .uk-countdown-number {
    font-size: 4rem;
  }
}
@media (min-width: 960px) {
  .uk-countdown-number {
    font-size: 6rem;
  }
}
.uk-countdown-separator {
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .uk-countdown-separator {
    font-size: 2rem;
  }
}
@media (min-width: 960px) {
  .uk-countdown-separator {
    font-size: 3rem;
  }
}
.uk-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-grid > * {
  margin: 0;
}

.uk-grid > * > :last-child {
  margin-bottom: 0;
}

.uk-grid {
  margin-left: -30px;
}

.uk-grid > * {
  padding-left: 30px;
}

* + .uk-grid-margin, .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin {
  margin-top: 30px;
}

@media (min-width: 1200px) {
  .uk-grid {
    margin-left: -40px;
  }

  .uk-grid > * {
    padding-left: 40px;
  }

  * + .uk-grid-margin, .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin {
    margin-top: 40px;
  }
}
.uk-grid-column-small, .uk-grid-small {
  margin-left: -15px;
}

.uk-grid-column-small > *, .uk-grid-small > * {
  padding-left: 15px;
}

* + .uk-grid-margin-small, .uk-grid + .uk-grid-row-small, .uk-grid + .uk-grid-small, .uk-grid-row-small > .uk-grid-margin, .uk-grid-small > .uk-grid-margin {
  margin-top: 15px;
}

.uk-grid-column-medium, .uk-grid-medium {
  margin-left: -30px;
}

.uk-grid-column-medium > *, .uk-grid-medium > * {
  padding-left: 30px;
}

* + .uk-grid-margin-medium, .uk-grid + .uk-grid-medium, .uk-grid + .uk-grid-row-medium, .uk-grid-medium > .uk-grid-margin, .uk-grid-row-medium > .uk-grid-margin {
  margin-top: 30px;
}

.uk-grid-column-large, .uk-grid-large {
  margin-left: -40px;
}

.uk-grid-column-large > *, .uk-grid-large > * {
  padding-left: 40px;
}

* + .uk-grid-margin-large, .uk-grid + .uk-grid-large, .uk-grid + .uk-grid-row-large, .uk-grid-large > .uk-grid-margin, .uk-grid-row-large > .uk-grid-margin {
  margin-top: 40px;
}

@media (min-width: 1200px) {
  .uk-grid-column-large, .uk-grid-large {
    margin-left: -70px;
  }

  .uk-grid-column-large > *, .uk-grid-large > * {
    padding-left: 70px;
  }

  * + .uk-grid-margin-large, .uk-grid + .uk-grid-large, .uk-grid + .uk-grid-row-large, .uk-grid-large > .uk-grid-margin, .uk-grid-row-large > .uk-grid-margin {
    margin-top: 70px;
  }
}
.uk-grid-collapse, .uk-grid-column-collapse {
  margin-left: 0;
}

.uk-grid-collapse > *, .uk-grid-column-collapse > * {
  padding-left: 0;
}

.uk-grid + .uk-grid-collapse, .uk-grid + .uk-grid-row-collapse, .uk-grid-collapse > .uk-grid-margin, .uk-grid-row-collapse > .uk-grid-margin {
  margin-top: 0;
}

.uk-grid-divider > * {
  position: relative;
}

.uk-grid-divider > :not(.uk-first-column)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #e5e5e5;
}

.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #e5e5e5;
}

.uk-grid-divider {
  margin-left: -60px;
}

.uk-grid-divider > * {
  padding-left: 60px;
}

.uk-grid-divider > :not(.uk-first-column)::before {
  left: 30px;
}

.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
  margin-top: 60px;
}

.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
  left: 60px;
}

@media (min-width: 1200px) {
  .uk-grid-divider {
    margin-left: -80px;
  }

  .uk-grid-divider > * {
    padding-left: 80px;
  }

  .uk-grid-divider > :not(.uk-first-column)::before {
    left: 40px;
  }

  .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
    margin-top: 80px;
  }

  .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
    top: -40px;
    left: 80px;
  }
}
.uk-grid-divider.uk-grid-column-small, .uk-grid-divider.uk-grid-small {
  margin-left: -30px;
}

.uk-grid-divider.uk-grid-column-small > *, .uk-grid-divider.uk-grid-small > * {
  padding-left: 30px;
}

.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before {
  left: 15px;
}

.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin {
  margin-top: 30px;
}

.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
  top: -15px;
  left: 30px;
}

.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
  top: -15px;
}

.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
  left: 30px;
}

.uk-grid-divider.uk-grid-column-medium, .uk-grid-divider.uk-grid-medium {
  margin-left: -60px;
}

.uk-grid-divider.uk-grid-column-medium > *, .uk-grid-divider.uk-grid-medium > * {
  padding-left: 60px;
}

.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before {
  left: 30px;
}

.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
  margin-top: 60px;
}

.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
  left: 60px;
}

.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
}

.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
  left: 60px;
}

.uk-grid-divider.uk-grid-column-large, .uk-grid-divider.uk-grid-large {
  margin-left: -80px;
}

.uk-grid-divider.uk-grid-column-large > *, .uk-grid-divider.uk-grid-large > * {
  padding-left: 80px;
}

.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before {
  left: 40px;
}

.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
  margin-top: 80px;
}

.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
  top: -40px;
  left: 80px;
}

.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
  top: -40px;
}

.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
  left: 80px;
}

@media (min-width: 1200px) {
  .uk-grid-divider.uk-grid-column-large, .uk-grid-divider.uk-grid-large {
    margin-left: -140px;
  }

  .uk-grid-divider.uk-grid-column-large > *, .uk-grid-divider.uk-grid-large > * {
    padding-left: 140px;
  }

  .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before {
    left: 70px;
  }

  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
    margin-top: 140px;
  }

  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
    top: -70px;
    left: 140px;
  }

  .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
    top: -70px;
  }

  .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
    left: 140px;
  }
}
.uk-grid-item-match, .uk-grid-match > * {
  display: flex;
  flex-wrap: wrap;
}

.uk-grid-item-match > :not([class*=uk-width]), .uk-grid-match > * > :not([class*=uk-width]) {
  box-sizing: border-box;
  width: 100%;
  flex: auto;
}

.uk-nav, .uk-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-nav li > a {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  text-decoration: none;
}

.uk-nav > li > a {
  padding: 5px 0;
}

ul.uk-nav-sub {
  padding: 5px 0 5px 15px;
}

.uk-nav-sub ul {
  padding-left: 15px;
}

.uk-nav-sub a {
  padding: 2px 0;
}

.uk-nav-parent-icon > .uk-parent > a::after {
  content: "";
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.uk-nav-parent-icon > .uk-parent.uk-open > a::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-nav-header {
  padding: 5px 0;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.uk-nav-header:not(:first-child) {
  margin-top: 20px;
}

.uk-nav .uk-nav-divider {
  margin: 5px 0;
}

.uk-nav-default {
  font-size: 0.875rem;
}

.uk-nav-default > li > a {
  color: #999;
}

.uk-nav-default > li > a:hover {
  color: #666;
}

.uk-nav-default > li.uk-active > a {
  color: #333;
}

.uk-nav-default .uk-nav-header {
  color: #333;
}

.uk-nav-default .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}

.uk-nav-default .uk-nav-sub a {
  color: #999;
}

.uk-nav-default .uk-nav-sub a:hover {
  color: #666;
}

.uk-nav-default .uk-nav-sub li.uk-active > a {
  color: #333;
}

.uk-nav-primary > li > a {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #999;
}

.uk-nav-primary > li > a:hover {
  color: #666;
}

.uk-nav-primary > li.uk-active > a {
  color: #333;
}

.uk-nav-primary .uk-nav-header {
  color: #333;
}

.uk-nav-primary .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}

.uk-nav-primary .uk-nav-sub a {
  color: #999;
}

.uk-nav-primary .uk-nav-sub a:hover {
  color: #666;
}

.uk-nav-primary .uk-nav-sub li.uk-active > a {
  color: #333;
}

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

.uk-nav-center li > a {
  justify-content: center;
}

.uk-nav-center .uk-nav-sub, .uk-nav-center .uk-nav-sub ul {
  padding-left: 0;
}

.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after {
  margin-left: 0;
}

.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid #e5e5e5;
}

.uk-navbar {
  display: flex;
  position: relative;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
  background: #f8f8f8;
}

.uk-navbar-center, .uk-navbar-center-left > *, .uk-navbar-center-right > *, .uk-navbar-left, .uk-navbar-right {
  display: flex;
  align-items: center;
}

.uk-navbar-right {
  margin-left: auto;
}

.uk-navbar-center:only-child {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.uk-navbar-center:not(:only-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  box-sizing: border-box;
  z-index: 990;
}

.uk-navbar-center-left, .uk-navbar-center-right {
  position: absolute;
  top: 0;
}

.uk-navbar-center-left {
  right: 100%;
}

.uk-navbar-center-right {
  left: 100%;
}

[class*=uk-navbar-center-] {
  width: max-content;
  box-sizing: border-box;
}

.uk-navbar-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-navbar-center:only-child, .uk-navbar-left, .uk-navbar-right {
  flex-wrap: wrap;
}

.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.25em;
  box-sizing: border-box;
  min-height: 80px;
  padding: 0 15px;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-decoration: none;
}

.uk-navbar-nav > li > a {
  color: #999;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}

.uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a[aria-expanded=true] {
  color: #666;
}

.uk-navbar-nav > li > a:active {
  color: #333;
}

.uk-navbar-nav > li.uk-active > a {
  color: #333;
}

.uk-navbar-item {
  color: #666;
}

.uk-navbar-item > :last-child {
  margin-bottom: 0;
}

.uk-navbar-toggle {
  color: #999;
}

.uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded=true] {
  color: #666;
  text-decoration: none;
}

.uk-navbar-subtitle {
  font-size: 0.875rem;
}

.uk-navbar-dropdown {
  display: none;
  position: absolute;
  z-index: 1020;
  --uk-position-offset:15px;
  box-sizing: border-box;
  width: 200px;
  max-width: 100vw;
  padding: 25px;
  background: #fff;
  color: #666;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.uk-navbar-dropdown.uk-open {
  display: block;
}

.uk-navbar-dropdown-grid {
  margin-left: -50px;
}

.uk-navbar-dropdown-grid > * {
  padding-left: 50px;
}

.uk-navbar-dropdown-grid > .uk-grid-margin {
  margin-top: 50px;
}

.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * {
  width: 100% !important;
}

.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) {
  width: 400px;
}

.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) {
  width: 600px;
}

.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) {
  width: 800px;
}

.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
  width: 1000px;
}

.uk-navbar-dropdown-dropbar {
  --uk-position-offset:0px;
  margin-bottom: 0;
  padding: 15px;
  box-shadow: none;
}

.uk-navbar-dropdown-nav {
  font-size: 0.875rem;
}

.uk-navbar-dropdown-nav > li > a {
  color: #999;
}

.uk-navbar-dropdown-nav > li > a:hover {
  color: #666;
}

.uk-navbar-dropdown-nav > li.uk-active > a {
  color: #333;
}

.uk-navbar-dropdown-nav .uk-nav-header {
  color: #333;
}

.uk-navbar-dropdown-nav .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}

.uk-navbar-dropdown-nav .uk-nav-sub a {
  color: #999;
}

.uk-navbar-dropdown-nav .uk-nav-sub a:hover {
  color: #666;
}

.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
  color: #333;
}

.uk-navbar-dropbar {
  position: absolute;
  z-index: 980;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
}

.uk-navbar-container > .uk-container .uk-navbar-left {
  margin-left: -15px;
  margin-right: -15px;
}

.uk-navbar-container > .uk-container .uk-navbar-right {
  margin-right: -15px;
}

.uk-navbar-dropdown-grid > * {
  position: relative;
}

.uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  border-left: 1px solid #e5e5e5;
}

.uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50px;
  right: 0;
  border-top: 1px solid #e5e5e5;
}

.uk-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -20px;
  padding: 0;
  list-style: none;
}

.uk-subnav > * {
  flex: none;
  padding-left: 20px;
  position: relative;
}

.uk-subnav > * > :first-child {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  color: #999;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}

.uk-subnav > * > a:hover {
  color: #666;
  text-decoration: none;
}

.uk-subnav > .uk-active > a {
  color: #333;
}

.uk-subnav-divider {
  margin-left: -41px;
}

.uk-subnav-divider > * {
  display: flex;
  align-items: center;
}

.uk-subnav-divider > ::before {
  content: "";
  height: 1.5em;
  margin-left: 0;
  margin-right: 20px;
  border-left: 1px solid transparent;
}

.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  border-left-color: #e5e5e5;
}

.uk-subnav-pill > * > :first-child {
  padding: 5px 10px;
  background: 0 0;
  color: #999;
}

.uk-subnav-pill > * > a:hover {
  background-color: #f8f8f8;
  color: #666;
}

.uk-subnav-pill > * > a:active {
  background-color: #f8f8f8;
  color: #666;
}

.uk-subnav-pill > .uk-active > a {
  background-color: #1e87f0;
  color: #fff;
}

.uk-subnav > .uk-disabled > a {
  color: #999;
}

.uk-breadcrumb {
  padding: 0;
  list-style: none;
}

.uk-breadcrumb > * {
  display: contents;
}

.uk-breadcrumb > * > * {
  font-size: 0.875rem;
  color: #999;
}

.uk-breadcrumb > * > :hover {
  color: #666;
  text-decoration: none;
}

.uk-breadcrumb > :last-child > a:not([href]), .uk-breadcrumb > :last-child > span {
  color: #666;
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  content: "/";
  display: inline-block;
  margin: 0 20px 0 16px;
  font-size: 0.875rem;
  color: #999;
}

.uk-pagination {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  padding: 0;
  list-style: none;
}

.uk-pagination > * {
  flex: none;
  padding-left: 0;
  position: relative;
}

.uk-pagination > * > * {
  display: block;
  padding: 5px 10px;
  color: #999;
  transition: color 0.1s ease-in-out;
}

.uk-pagination > * > :hover {
  color: #666;
  text-decoration: none;
}

.uk-pagination > .uk-active > * {
  color: #666;
}

.uk-pagination > .uk-disabled > * {
  color: #999;
}

.uk-tab {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  padding: 0;
  list-style: none;
  position: relative;
}

.uk-tab::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 0;
  border-bottom: 1px solid #e5e5e5;
}

.uk-tab > * {
  flex: none;
  padding-left: 20px;
  position: relative;
}

.uk-tab > * > a {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  justify-content: center;
  padding: 5px 10px;
  color: #999;
  border-bottom: 1px solid transparent;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: color 0.1s ease-in-out;
}

.uk-tab > * > a:hover {
  color: #666;
  text-decoration: none;
}

.uk-tab > .uk-active > a {
  color: #333;
  border-color: #1e87f0;
}

.uk-tab > .uk-disabled > a {
  color: #999;
}

.uk-tab-bottom::before {
  top: 0;
  bottom: auto;
}

.uk-tab-bottom > * > a {
  border-top: 1px solid transparent;
  border-bottom: none;
}

.uk-tab-left, .uk-tab-right {
  flex-direction: column;
  margin-left: 0;
}

.uk-tab-left > *, .uk-tab-right > * {
  padding-left: 0;
}

.uk-tab-left::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  border-left: 1px solid #e5e5e5;
  border-bottom: none;
}

.uk-tab-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  border-left: 1px solid #e5e5e5;
  border-bottom: none;
}

.uk-tab-left > * > a {
  justify-content: left;
  border-right: 1px solid transparent;
  border-bottom: none;
}

.uk-tab-right > * > a {
  justify-content: left;
  border-left: 1px solid transparent;
  border-bottom: none;
}

.uk-tab .uk-dropdown {
  margin-left: 30px;
}

.uk-slidenav {
  padding: 5px 10px;
  color: rgba(102, 102, 102, 0.5);
  transition: color 0.1s ease-in-out;
}

.uk-slidenav:hover {
  color: rgba(102, 102, 102, 0.9);
}

.uk-slidenav:active {
  color: rgba(102, 102, 102, 0.5);
}

.uk-slidenav-large {
  padding: 10px 10px;
}

.uk-slidenav-container {
  display: flex;
}

.uk-dotnav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -12px;
}

.uk-dotnav > * {
  flex: none;
  padding-left: 12px;
}

.uk-dotnav > * > * {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: 0 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(102, 102, 102, 0.4);
  transition: 0.2s ease-in-out;
  transition-property: background-color, border-color;
}

.uk-dotnav > * > :hover {
  background-color: rgba(102, 102, 102, 0.6);
  border-color: transparent;
}

.uk-dotnav > * > :active {
  background-color: rgba(102, 102, 102, 0.2);
  border-color: transparent;
}

.uk-dotnav > .uk-active > * {
  background-color: rgba(102, 102, 102, 0.6);
  border-color: transparent;
}

.uk-dotnav-vertical {
  flex-direction: column;
  margin-left: 0;
  margin-top: -12px;
}

.uk-dotnav-vertical > * {
  padding-left: 0;
  padding-top: 12px;
}

.uk-thumbnav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -15px;
}

.uk-thumbnav > * {
  padding-left: 15px;
}

.uk-thumbnav > * > * {
  display: inline-block;
  position: relative;
}

.uk-thumbnav > * > ::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.1s ease-in-out;
}

.uk-thumbnav > * > :hover::after {
  background-color: transparent;
}

.uk-thumbnav > .uk-active > ::after {
  background-color: transparent;
}

.uk-thumbnav-vertical {
  flex-direction: column;
  margin-left: 0;
  margin-top: -15px;
}

.uk-thumbnav-vertical > * {
  padding-left: 0;
  padding-top: 15px;
}

.uk-iconnav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -10px;
}

.uk-iconnav > * {
  padding-left: 10px;
}

.uk-iconnav > * > a {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  line-height: 0;
  color: #999;
  text-decoration: none;
  font-size: 0.875rem;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}

.uk-iconnav > * > a:hover {
  color: #666;
}

.uk-iconnav > .uk-active > a {
  color: #666;
}

.uk-iconnav-vertical {
  flex-direction: column;
  margin-left: 0;
  margin-top: -10px;
}

.uk-iconnav-vertical > * {
  padding-left: 0;
  padding-top: 10px;
}

.uk-lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  background: #000;
  opacity: 0;
  transition: opacity 0.15s linear;
  touch-action: pinch-zoom;
}

.uk-lightbox.uk-open {
  display: block;
  opacity: 1;
}

.uk-lightbox :focus {
  outline-color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox :focus-visible {
  outline-color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-page {
  overflow: hidden;
}

.uk-lightbox-items > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  will-change: transform, opacity;
}

.uk-lightbox-items > * > * {
  max-width: 100vw;
  max-height: 100vh;
}

.uk-lightbox-items > * > :not(iframe) {
  width: auto;
  height: auto;
}

.uk-lightbox-items > .uk-active {
  display: flex;
}

.uk-lightbox-toolbar {
  padding: 10px 10px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-toolbar > * {
  color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-toolbar-icon {
  padding: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-toolbar-icon:hover {
  color: #fff;
}

.uk-lightbox-button {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.uk-lightbox-button:hover {
  color: #fff;
}

.uk-lightbox-caption:empty {
  display: none;
}

.uk-lightbox-iframe {
  width: 80%;
  height: 80%;
}

[class*=uk-animation-] {
  animation: 0.5s ease-out both;
}

.uk-animation-fade {
  animation-name: uk-fade;
  animation-duration: 0.8s;
  animation-timing-function: linear;
}

.uk-animation-scale-up {
  animation-name: uk-fade, uk-scale-up;
}

.uk-animation-scale-down {
  animation-name: uk-fade, uk-scale-down;
}

.uk-animation-slide-top {
  animation-name: uk-fade, uk-slide-top;
}

.uk-animation-slide-bottom {
  animation-name: uk-fade, uk-slide-bottom;
}

.uk-animation-slide-left {
  animation-name: uk-fade, uk-slide-left;
}

.uk-animation-slide-right {
  animation-name: uk-fade, uk-slide-right;
}

.uk-animation-slide-top-small {
  animation-name: uk-fade, uk-slide-top-small;
}

.uk-animation-slide-bottom-small {
  animation-name: uk-fade, uk-slide-bottom-small;
}

.uk-animation-slide-left-small {
  animation-name: uk-fade, uk-slide-left-small;
}

.uk-animation-slide-right-small {
  animation-name: uk-fade, uk-slide-right-small;
}

.uk-animation-slide-top-medium {
  animation-name: uk-fade, uk-slide-top-medium;
}

.uk-animation-slide-bottom-medium {
  animation-name: uk-fade, uk-slide-bottom-medium;
}

.uk-animation-slide-left-medium {
  animation-name: uk-fade, uk-slide-left-medium;
}

.uk-animation-slide-right-medium {
  animation-name: uk-fade, uk-slide-right-medium;
}

.uk-animation-kenburns {
  animation-name: uk-kenburns;
  animation-duration: 15s;
}

.uk-animation-shake {
  animation-name: uk-shake;
}

.uk-animation-stroke {
  animation-name: uk-stroke;
  animation-duration: 2s;
  stroke-dasharray: var(--uk-animation-stroke);
}

.uk-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}

.uk-animation-fast {
  animation-duration: 0.1s;
}

.uk-animation-toggle:not(:hover):not(:focus) [class*=uk-animation-] {
  animation-name: none;
}

@keyframes uk-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes uk-scale-up {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes uk-scale-down {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes uk-slide-top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-top-small {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom-small {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left-small {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right-small {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-top-medium {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom-medium {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left-medium {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right-medium {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes uk-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
@keyframes uk-stroke {
  0% {
    stroke-dashoffset: var(--uk-animation-stroke);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
[class*=uk-child-width] > * {
  box-sizing: border-box;
  width: 100%;
}

.uk-child-width-1-2 > * {
  width: 50%;
}

.uk-child-width-1-3 > * {
  width: 33.3222259247%;
}

.uk-child-width-1-4 > * {
  width: 25%;
}

.uk-child-width-1-5 > * {
  width: 20%;
}

.uk-child-width-1-6 > * {
  width: 16.6638893518%;
}

.uk-child-width-auto > * {
  width: auto;
}

.uk-child-width-expand > :not([class*=uk-width]) {
  flex: 1;
  min-width: 1px;
}

@media (min-width: 640px) {
  .uk-child-width-1-1\@s > * {
    width: 100%;
  }

  .uk-child-width-1-2\@s > * {
    width: 50%;
  }

  .uk-child-width-1-3\@s > * {
    width: 33.3222259247%;
  }

  .uk-child-width-1-4\@s > * {
    width: 25%;
  }

  .uk-child-width-1-5\@s > * {
    width: 20%;
  }

  .uk-child-width-1-6\@s > * {
    width: 16.6638893518%;
  }

  .uk-child-width-auto\@s > * {
    width: auto;
  }

  .uk-child-width-expand\@s > :not([class*=uk-width]) {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 960px) {
  .uk-child-width-1-1\@m > * {
    width: 100%;
  }

  .uk-child-width-1-2\@m > * {
    width: 50%;
  }

  .uk-child-width-1-3\@m > * {
    width: 33.3222259247%;
  }

  .uk-child-width-1-4\@m > * {
    width: 25%;
  }

  .uk-child-width-1-5\@m > * {
    width: 20%;
  }

  .uk-child-width-1-6\@m > * {
    width: 16.6638893518%;
  }

  .uk-child-width-auto\@m > * {
    width: auto;
  }

  .uk-child-width-expand\@m > :not([class*=uk-width]) {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 1200px) {
  .uk-child-width-1-1\@l > * {
    width: 100%;
  }

  .uk-child-width-1-2\@l > * {
    width: 50%;
  }

  .uk-child-width-1-3\@l > * {
    width: 33.3222259247%;
  }

  .uk-child-width-1-4\@l > * {
    width: 25%;
  }

  .uk-child-width-1-5\@l > * {
    width: 20%;
  }

  .uk-child-width-1-6\@l > * {
    width: 16.6638893518%;
  }

  .uk-child-width-auto\@l > * {
    width: auto;
  }

  .uk-child-width-expand\@l > :not([class*=uk-width]) {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 1600px) {
  .uk-child-width-1-1\@xl > * {
    width: 100%;
  }

  .uk-child-width-1-2\@xl > * {
    width: 50%;
  }

  .uk-child-width-1-3\@xl > * {
    width: 33.3222259247%;
  }

  .uk-child-width-1-4\@xl > * {
    width: 25%;
  }

  .uk-child-width-1-5\@xl > * {
    width: 20%;
  }

  .uk-child-width-1-6\@xl > * {
    width: 16.6638893518%;
  }

  .uk-child-width-auto\@xl > * {
    width: auto;
  }

  .uk-child-width-expand\@xl > :not([class*=uk-width]) {
    flex: 1;
    min-width: 1px;
  }
}
[class*=uk-width] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.uk-width-1-2 {
  width: 50%;
}

.uk-width-1-3 {
  width: 33.3222259247%;
}

.uk-width-2-3 {
  width: 66.6444518494%;
}

.uk-width-1-4 {
  width: 25%;
}

.uk-width-3-4 {
  width: 75%;
}

.uk-width-1-5 {
  width: 20%;
}

.uk-width-2-5 {
  width: 40%;
}

.uk-width-3-5 {
  width: 60%;
}

.uk-width-4-5 {
  width: 80%;
}

.uk-width-1-6 {
  width: 16.6638893518%;
}

.uk-width-5-6 {
  width: 83.3194467589%;
}

.uk-width-small {
  width: 150px;
}

.uk-width-medium {
  width: 300px;
}

.uk-width-large {
  width: 450px;
}

.uk-width-xlarge {
  width: 600px;
}

.uk-width-2xlarge {
  width: 750px;
}

.uk-width-auto {
  width: auto;
}

.uk-width-expand {
  flex: 1;
  min-width: 1px;
}

@media (min-width: 640px) {
  .uk-width-1-1\@s {
    width: 100%;
  }

  .uk-width-1-2\@s {
    width: 50%;
  }

  .uk-width-1-3\@s {
    width: 33.3222259247%;
  }

  .uk-width-2-3\@s {
    width: 66.6444518494%;
  }

  .uk-width-1-4\@s {
    width: 25%;
  }

  .uk-width-3-4\@s {
    width: 75%;
  }

  .uk-width-1-5\@s {
    width: 20%;
  }

  .uk-width-2-5\@s {
    width: 40%;
  }

  .uk-width-3-5\@s {
    width: 60%;
  }

  .uk-width-4-5\@s {
    width: 80%;
  }

  .uk-width-1-6\@s {
    width: 16.6638893518%;
  }

  .uk-width-5-6\@s {
    width: 83.3194467589%;
  }

  .uk-width-small\@s {
    width: 150px;
  }

  .uk-width-medium\@s {
    width: 300px;
  }

  .uk-width-large\@s {
    width: 450px;
  }

  .uk-width-xlarge\@s {
    width: 600px;
  }

  .uk-width-2xlarge\@s {
    width: 750px;
  }

  .uk-width-auto\@s {
    width: auto;
  }

  .uk-width-expand\@s {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 960px) {
  .uk-width-1-1\@m {
    width: 100%;
  }

  .uk-width-1-2\@m {
    width: 50%;
  }

  .uk-width-1-3\@m {
    width: 33.3222259247%;
  }

  .uk-width-2-3\@m {
    width: 66.6444518494%;
  }

  .uk-width-1-4\@m {
    width: 25%;
  }

  .uk-width-3-4\@m {
    width: 75%;
  }

  .uk-width-1-5\@m {
    width: 20%;
  }

  .uk-width-2-5\@m {
    width: 40%;
  }

  .uk-width-3-5\@m {
    width: 60%;
  }

  .uk-width-4-5\@m {
    width: 80%;
  }

  .uk-width-1-6\@m {
    width: 16.6638893518%;
  }

  .uk-width-5-6\@m {
    width: 83.3194467589%;
  }

  .uk-width-small\@m {
    width: 150px;
  }

  .uk-width-medium\@m {
    width: 300px;
  }

  .uk-width-large\@m {
    width: 450px;
  }

  .uk-width-xlarge\@m {
    width: 600px;
  }

  .uk-width-2xlarge\@m {
    width: 750px;
  }

  .uk-width-auto\@m {
    width: auto;
  }

  .uk-width-expand\@m {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 1200px) {
  .uk-width-1-1\@l {
    width: 100%;
  }

  .uk-width-1-2\@l {
    width: 50%;
  }

  .uk-width-1-3\@l {
    width: 33.3222259247%;
  }

  .uk-width-2-3\@l {
    width: 66.6444518494%;
  }

  .uk-width-1-4\@l {
    width: 25%;
  }

  .uk-width-3-4\@l {
    width: 75%;
  }

  .uk-width-1-5\@l {
    width: 20%;
  }

  .uk-width-2-5\@l {
    width: 40%;
  }

  .uk-width-3-5\@l {
    width: 60%;
  }

  .uk-width-4-5\@l {
    width: 80%;
  }

  .uk-width-1-6\@l {
    width: 16.6638893518%;
  }

  .uk-width-5-6\@l {
    width: 83.3194467589%;
  }

  .uk-width-small\@l {
    width: 150px;
  }

  .uk-width-medium\@l {
    width: 300px;
  }

  .uk-width-large\@l {
    width: 450px;
  }

  .uk-width-xlarge\@l {
    width: 600px;
  }

  .uk-width-2xlarge\@l {
    width: 750px;
  }

  .uk-width-auto\@l {
    width: auto;
  }

  .uk-width-expand\@l {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 1600px) {
  .uk-width-1-1\@xl {
    width: 100%;
  }

  .uk-width-1-2\@xl {
    width: 50%;
  }

  .uk-width-1-3\@xl {
    width: 33.3222259247%;
  }

  .uk-width-2-3\@xl {
    width: 66.6444518494%;
  }

  .uk-width-1-4\@xl {
    width: 25%;
  }

  .uk-width-3-4\@xl {
    width: 75%;
  }

  .uk-width-1-5\@xl {
    width: 20%;
  }

  .uk-width-2-5\@xl {
    width: 40%;
  }

  .uk-width-3-5\@xl {
    width: 60%;
  }

  .uk-width-4-5\@xl {
    width: 80%;
  }

  .uk-width-1-6\@xl {
    width: 16.6638893518%;
  }

  .uk-width-5-6\@xl {
    width: 83.3194467589%;
  }

  .uk-width-small\@xl {
    width: 150px;
  }

  .uk-width-medium\@xl {
    width: 300px;
  }

  .uk-width-large\@xl {
    width: 450px;
  }

  .uk-width-xlarge\@xl {
    width: 600px;
  }

  .uk-width-2xlarge\@xl {
    width: 750px;
  }

  .uk-width-auto\@xl {
    width: auto;
  }

  .uk-width-expand\@xl {
    flex: 1;
    min-width: 1px;
  }
}
.uk-width-max-content {
  width: max-content;
}

.uk-width-min-content {
  width: min-content;
}

[class*=uk-height] {
  box-sizing: border-box;
}

.uk-height-1-1 {
  height: 100%;
}

.uk-height-viewport {
  min-height: 100vh;
}

.uk-height-viewport-2 {
  min-height: 200vh;
}

.uk-height-viewport-3 {
  min-height: 300vh;
}

.uk-height-viewport-4 {
  min-height: 400vh;
}

.uk-height-small {
  height: 150px;
}

.uk-height-medium {
  height: 300px;
}

.uk-height-large {
  height: 450px;
}

.uk-height-max-small {
  max-height: 150px;
}

.uk-height-max-medium {
  max-height: 300px;
}

.uk-height-max-large {
  max-height: 450px;
}

.uk-text-lead {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;
}

.uk-text-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}

.uk-text-meta a {
  color: #999;
}

.uk-text-meta a:hover {
  color: #666;
  text-decoration: none;
}

.uk-text-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.uk-text-large {
  font-size: 1.5rem;
  line-height: 1.5;
}

.uk-text-default {
  font-size: 16px;
  line-height: 1.5;
}

.uk-text-light {
  font-weight: 300;
}

.uk-text-normal {
  font-weight: 400;
}

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

.uk-text-lighter {
  font-weight: lighter;
}

.uk-text-bolder {
  font-weight: bolder;
}

.uk-text-italic {
  font-style: italic;
}

.uk-text-capitalize {
  text-transform: capitalize !important;
}

.uk-text-uppercase {
  text-transform: uppercase !important;
}

.uk-text-lowercase {
  text-transform: lowercase !important;
}

.uk-text-decoration-none {
  text-decoration: none !important;
}

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

.uk-text-emphasis {
  color: #333 !important;
}

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

.uk-text-secondary {
  color: #222 !important;
}

.uk-text-success {
  color: #32d296 !important;
}

.uk-text-warning {
  color: #faa05a !important;
}

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

.uk-text-background {
  -webkit-background-clip: text;
  color: transparent !important;
  display: inline-block;
  background-color: #1e87f0;
}

.uk-text-left {
  text-align: left !important;
}

.uk-text-right {
  text-align: right !important;
}

.uk-text-center {
  text-align: center !important;
}

.uk-text-justify {
  text-align: justify !important;
}

@media (min-width: 640px) {
  .uk-text-left\@s {
    text-align: left !important;
  }

  .uk-text-right\@s {
    text-align: right !important;
  }

  .uk-text-center\@s {
    text-align: center !important;
  }
}
@media (min-width: 960px) {
  .uk-text-left\@m {
    text-align: left !important;
  }

  .uk-text-right\@m {
    text-align: right !important;
  }

  .uk-text-center\@m {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .uk-text-left\@l {
    text-align: left !important;
  }

  .uk-text-right\@l {
    text-align: right !important;
  }

  .uk-text-center\@l {
    text-align: center !important;
  }
}
@media (min-width: 1600px) {
  .uk-text-left\@xl {
    text-align: left !important;
  }

  .uk-text-right\@xl {
    text-align: right !important;
  }

  .uk-text-center\@xl {
    text-align: center !important;
  }
}
.uk-text-top {
  vertical-align: top !important;
}

.uk-text-middle {
  vertical-align: middle !important;
}

.uk-text-bottom {
  vertical-align: bottom !important;
}

.uk-text-baseline {
  vertical-align: baseline !important;
}

.uk-text-nowrap {
  white-space: nowrap;
}

.uk-text-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.uk-text-truncate, th.uk-text-truncate {
  max-width: 0;
}

.uk-text-break {
  overflow-wrap: break-word;
}

td.uk-text-break, th.uk-text-break {
  word-break: break-word;
}

[class*=uk-column-] {
  column-gap: 30px;
}

@media (min-width: 1200px) {
  [class*=uk-column-] {
    column-gap: 40px;
  }
}
[class*=uk-column-] img {
  transform: translate3d(0, 0, 0);
}

.uk-column-divider {
  column-rule: 1px solid #e5e5e5;
  column-gap: 60px;
}

@media (min-width: 1200px) {
  .uk-column-divider {
    column-gap: 80px;
  }
}
.uk-column-1-2 {
  column-count: 2;
}

.uk-column-1-3 {
  column-count: 3;
}

.uk-column-1-4 {
  column-count: 4;
}

.uk-column-1-5 {
  column-count: 5;
}

.uk-column-1-6 {
  column-count: 6;
}

@media (min-width: 640px) {
  .uk-column-1-2\@s {
    column-count: 2;
  }

  .uk-column-1-3\@s {
    column-count: 3;
  }

  .uk-column-1-4\@s {
    column-count: 4;
  }

  .uk-column-1-5\@s {
    column-count: 5;
  }

  .uk-column-1-6\@s {
    column-count: 6;
  }
}
@media (min-width: 960px) {
  .uk-column-1-2\@m {
    column-count: 2;
  }

  .uk-column-1-3\@m {
    column-count: 3;
  }

  .uk-column-1-4\@m {
    column-count: 4;
  }

  .uk-column-1-5\@m {
    column-count: 5;
  }

  .uk-column-1-6\@m {
    column-count: 6;
  }
}
@media (min-width: 1200px) {
  .uk-column-1-2\@l {
    column-count: 2;
  }

  .uk-column-1-3\@l {
    column-count: 3;
  }

  .uk-column-1-4\@l {
    column-count: 4;
  }

  .uk-column-1-5\@l {
    column-count: 5;
  }

  .uk-column-1-6\@l {
    column-count: 6;
  }
}
@media (min-width: 1600px) {
  .uk-column-1-2\@xl {
    column-count: 2;
  }

  .uk-column-1-3\@xl {
    column-count: 3;
  }

  .uk-column-1-4\@xl {
    column-count: 4;
  }

  .uk-column-1-5\@xl {
    column-count: 5;
  }

  .uk-column-1-6\@xl {
    column-count: 6;
  }
}
.uk-column-span {
  column-span: all;
}

[data-uk-cover], [uk-cover] {
  max-width: none;
  position: absolute;
  left: 50%;
  top: 50%;
  --uk-position-translate-x:-50%;
  --uk-position-translate-y:-50%;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
}

iframe[data-uk-cover], iframe[uk-cover] {
  pointer-events: none;
}

.uk-cover-container {
  overflow: hidden;
  position: relative;
}

.uk-background-default {
  background-color: #fff;
}

.uk-background-muted {
  background-color: #f8f8f8;
}

.uk-background-primary {
  background-color: #1e87f0;
}

.uk-background-secondary {
  background-color: #222;
}

.uk-background-contain, .uk-background-cover, .uk-background-height-1-1, .uk-background-width-1-1 {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.uk-background-cover {
  background-size: cover;
}

.uk-background-contain {
  background-size: contain;
}

.uk-background-width-1-1 {
  background-size: 100%;
}

.uk-background-height-1-1 {
  background-size: auto 100%;
}

.uk-background-top-left {
  background-position: 0 0;
}

.uk-background-top-center {
  background-position: 50% 0;
}

.uk-background-top-right {
  background-position: 100% 0;
}

.uk-background-center-left {
  background-position: 0 50%;
}

.uk-background-center-center {
  background-position: 50% 50%;
}

.uk-background-center-right {
  background-position: 100% 50%;
}

.uk-background-bottom-left {
  background-position: 0 100%;
}

.uk-background-bottom-center {
  background-position: 50% 100%;
}

.uk-background-bottom-right {
  background-position: 100% 100%;
}

.uk-background-norepeat {
  background-repeat: no-repeat;
}

.uk-background-fixed {
  background-attachment: fixed;
  backface-visibility: hidden;
}

@media (pointer: coarse) {
  .uk-background-fixed {
    background-attachment: scroll;
  }
}
@media (max-width: 639px) {
  .uk-background-image\@s {
    background-image: none !important;
  }
}
@media (max-width: 959px) {
  .uk-background-image\@m {
    background-image: none !important;
  }
}
@media (max-width: 1199px) {
  .uk-background-image\@l {
    background-image: none !important;
  }
}
@media (max-width: 1599px) {
  .uk-background-image\@xl {
    background-image: none !important;
  }
}
.uk-background-blend-multiply {
  background-blend-mode: multiply;
}

.uk-background-blend-screen {
  background-blend-mode: screen;
}

.uk-background-blend-overlay {
  background-blend-mode: overlay;
}

.uk-background-blend-darken {
  background-blend-mode: darken;
}

.uk-background-blend-lighten {
  background-blend-mode: lighten;
}

.uk-background-blend-color-dodge {
  background-blend-mode: color-dodge;
}

.uk-background-blend-color-burn {
  background-blend-mode: color-burn;
}

.uk-background-blend-hard-light {
  background-blend-mode: hard-light;
}

.uk-background-blend-soft-light {
  background-blend-mode: soft-light;
}

.uk-background-blend-difference {
  background-blend-mode: difference;
}

.uk-background-blend-exclusion {
  background-blend-mode: exclusion;
}

.uk-background-blend-hue {
  background-blend-mode: hue;
}

.uk-background-blend-saturation {
  background-blend-mode: saturation;
}

.uk-background-blend-color {
  background-blend-mode: color;
}

.uk-background-blend-luminosity {
  background-blend-mode: luminosity;
}

[class*=uk-align] {
  display: block;
  margin-bottom: 30px;
}

* + [class*=uk-align] {
  margin-top: 30px;
}

.uk-align-center {
  margin-left: auto;
  margin-right: auto;
}

.uk-align-left {
  margin-top: 0;
  margin-right: 30px;
  float: left;
}

.uk-align-right {
  margin-top: 0;
  margin-left: 30px;
  float: right;
}

@media (min-width: 640px) {
  .uk-align-left\@s {
    margin-top: 0;
    margin-right: 30px;
    float: left;
  }

  .uk-align-right\@s {
    margin-top: 0;
    margin-left: 30px;
    float: right;
  }
}
@media (min-width: 960px) {
  .uk-align-left\@m {
    margin-top: 0;
    margin-right: 30px;
    float: left;
  }

  .uk-align-right\@m {
    margin-top: 0;
    margin-left: 30px;
    float: right;
  }
}
@media (min-width: 1200px) {
  .uk-align-left\@l {
    margin-top: 0;
    float: left;
  }

  .uk-align-right\@l {
    margin-top: 0;
    float: right;
  }

  .uk-align-left, .uk-align-left\@l, .uk-align-left\@m, .uk-align-left\@s {
    margin-right: 40px;
  }

  .uk-align-right, .uk-align-right\@l, .uk-align-right\@m, .uk-align-right\@s {
    margin-left: 40px;
  }
}
@media (min-width: 1600px) {
  .uk-align-left\@xl {
    margin-top: 0;
    margin-right: 40px;
    float: left;
  }

  .uk-align-right\@xl {
    margin-top: 0;
    margin-left: 40px;
    float: right;
  }
}
.uk-svg, .uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
  fill: currentcolor;
}

.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
  stroke: currentcolor;
}

.uk-svg {
  transform: translate(0, 0);
}

.uk-panel {
  display: flow-root;
  position: relative;
  box-sizing: border-box;
}

.uk-panel > :last-child {
  margin-bottom: 0;
}

.uk-panel-scrollable {
  height: 170px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  resize: both;
}

.uk-clearfix::before {
  content: "";
  display: table-cell;
}

.uk-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.uk-float-left {
  float: left;
}

.uk-float-right {
  float: right;
}

[class*=uk-float-] {
  max-width: 100%;
}

.uk-overflow-hidden {
  overflow: hidden;
}

.uk-overflow-auto {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.uk-overflow-auto > :last-child {
  margin-bottom: 0;
}

.uk-resize {
  resize: both;
}

.uk-resize-vertical {
  resize: vertical;
}

.uk-display-block {
  display: block !important;
}

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

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

[class*=uk-inline] {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
}

.uk-inline-clip {
  overflow: hidden;
}

.uk-preserve-width, .uk-preserve-width canvas, .uk-preserve-width img, .uk-preserve-width svg, .uk-preserve-width video {
  max-width: none;
}

.uk-responsive-height, .uk-responsive-width {
  box-sizing: border-box;
}

.uk-responsive-width {
  max-width: 100% !important;
  height: auto;
}

.uk-responsive-height {
  max-height: 100%;
  width: auto;
  max-width: none;
}

[data-uk-responsive], [uk-responsive] {
  max-width: 100%;
}

.uk-object-cover {
  object-fit: cover;
}

.uk-object-contain {
  object-fit: contain;
}

.uk-object-fill {
  object-fit: fill;
}

.uk-object-none {
  object-fit: none;
}

.uk-object-scale-down {
  object-fit: scale-down;
}

.uk-object-top-left {
  object-position: 0 0;
}

.uk-object-top-center {
  object-position: 50% 0;
}

.uk-object-top-right {
  object-position: 100% 0;
}

.uk-object-center-left {
  object-position: 0 50%;
}

.uk-object-center-center {
  object-position: 50% 50%;
}

.uk-object-center-right {
  object-position: 100% 50%;
}

.uk-object-bottom-left {
  object-position: 0 100%;
}

.uk-object-bottom-center {
  object-position: 50% 100%;
}

.uk-object-bottom-right {
  object-position: 100% 100%;
}

.uk-border-circle {
  border-radius: 50%;
}

.uk-border-pill {
  border-radius: 500px;
}

.uk-border-rounded {
  border-radius: 5px;
}

.uk-inline-clip[class*=uk-border-] {
  -webkit-transform: translateZ(0);
}

.uk-box-shadow-small {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-medium {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-large {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-box-shadow-xlarge {
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}

[class*=uk-box-shadow-hover] {
  transition: box-shadow 0.1s ease-in-out;
}

.uk-box-shadow-hover-small:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-hover-medium:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-hover-large:hover {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-box-shadow-hover-xlarge:hover {
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}

@supports (filter: blur(0)) {
  .uk-box-shadow-bottom {
    display: inline-block;
    position: relative;
    z-index: 0;
    max-width: 100%;
    vertical-align: middle;
  }

  .uk-box-shadow-bottom::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 30px;
    border-radius: 100%;
    background: #444;
    filter: blur(20px);
    will-change: filter;
  }
}
.uk-dropcap::first-letter, .uk-dropcap > p:first-of-type::first-letter {
  display: block;
  margin-right: 10px;
  float: left;
  font-size: 4.5em;
  line-height: 1;
  margin-bottom: -2px;
}

@-moz-document url-prefix() {
  .uk-dropcap::first-letter, .uk-dropcap > p:first-of-type::first-letter {
    margin-top: 1.1%;
  }
}
.uk-logo {
  font-size: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #333;
  text-decoration: none;
}

.uk-logo:hover {
  color: #333;
  text-decoration: none;
}

.uk-logo > :where(img, svg, video) {
  display: block;
}

.uk-logo-inverse {
  display: none;
}

.uk-disabled {
  pointer-events: none;
}

.uk-drag, .uk-drag * {
  cursor: move;
}

.uk-drag iframe {
  pointer-events: none;
}

.uk-dragover {
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
}

.uk-blend-multiply {
  mix-blend-mode: multiply;
}

.uk-blend-screen {
  mix-blend-mode: screen;
}

.uk-blend-overlay {
  mix-blend-mode: overlay;
}

.uk-blend-darken {
  mix-blend-mode: darken;
}

.uk-blend-lighten {
  mix-blend-mode: lighten;
}

.uk-blend-color-dodge {
  mix-blend-mode: color-dodge;
}

.uk-blend-color-burn {
  mix-blend-mode: color-burn;
}

.uk-blend-hard-light {
  mix-blend-mode: hard-light;
}

.uk-blend-soft-light {
  mix-blend-mode: soft-light;
}

.uk-blend-difference {
  mix-blend-mode: difference;
}

.uk-blend-exclusion {
  mix-blend-mode: exclusion;
}

.uk-blend-hue {
  mix-blend-mode: hue;
}

.uk-blend-saturation {
  mix-blend-mode: saturation;
}

.uk-blend-color {
  mix-blend-mode: color;
}

.uk-blend-luminosity {
  mix-blend-mode: luminosity;
}

.uk-transform-center {
  transform: translate(-50%, -50%);
}

.uk-transform-origin-top-left {
  transform-origin: 0 0;
}

.uk-transform-origin-top-center {
  transform-origin: 50% 0;
}

.uk-transform-origin-top-right {
  transform-origin: 100% 0;
}

.uk-transform-origin-center-left {
  transform-origin: 0 50%;
}

.uk-transform-origin-center-right {
  transform-origin: 100% 50%;
}

.uk-transform-origin-bottom-left {
  transform-origin: 0 100%;
}

.uk-transform-origin-bottom-center {
  transform-origin: 50% 100%;
}

.uk-transform-origin-bottom-right {
  transform-origin: 100% 100%;
}

.uk-flex {
  display: flex;
}

.uk-flex-inline {
  display: inline-flex;
}

.uk-flex-left {
  justify-content: flex-start;
}

.uk-flex-center {
  justify-content: center;
}

.uk-flex-right {
  justify-content: flex-end;
}

.uk-flex-between {
  justify-content: space-between;
}

.uk-flex-around {
  justify-content: space-around;
}

@media (min-width: 640px) {
  .uk-flex-left\@s {
    justify-content: flex-start;
  }

  .uk-flex-center\@s {
    justify-content: center;
  }

  .uk-flex-right\@s {
    justify-content: flex-end;
  }

  .uk-flex-between\@s {
    justify-content: space-between;
  }

  .uk-flex-around\@s {
    justify-content: space-around;
  }
}
@media (min-width: 960px) {
  .uk-flex-left\@m {
    justify-content: flex-start;
  }

  .uk-flex-center\@m {
    justify-content: center;
  }

  .uk-flex-right\@m {
    justify-content: flex-end;
  }

  .uk-flex-between\@m {
    justify-content: space-between;
  }

  .uk-flex-around\@m {
    justify-content: space-around;
  }
}
@media (min-width: 1200px) {
  .uk-flex-left\@l {
    justify-content: flex-start;
  }

  .uk-flex-center\@l {
    justify-content: center;
  }

  .uk-flex-right\@l {
    justify-content: flex-end;
  }

  .uk-flex-between\@l {
    justify-content: space-between;
  }

  .uk-flex-around\@l {
    justify-content: space-around;
  }
}
@media (min-width: 1600px) {
  .uk-flex-left\@xl {
    justify-content: flex-start;
  }

  .uk-flex-center\@xl {
    justify-content: center;
  }

  .uk-flex-right\@xl {
    justify-content: flex-end;
  }

  .uk-flex-between\@xl {
    justify-content: space-between;
  }

  .uk-flex-around\@xl {
    justify-content: space-around;
  }
}
.uk-flex-stretch {
  align-items: stretch;
}

.uk-flex-top {
  align-items: flex-start;
}

.uk-flex-middle {
  align-items: center;
}

.uk-flex-bottom {
  align-items: flex-end;
}

.uk-flex-row {
  flex-direction: row;
}

.uk-flex-row-reverse {
  flex-direction: row-reverse;
}

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

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

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

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

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

.uk-flex-wrap-stretch {
  align-content: stretch;
}

.uk-flex-wrap-top {
  align-content: flex-start;
}

.uk-flex-wrap-middle {
  align-content: center;
}

.uk-flex-wrap-bottom {
  align-content: flex-end;
}

.uk-flex-wrap-between {
  align-content: space-between;
}

.uk-flex-wrap-around {
  align-content: space-around;
}

.uk-flex-first {
  order: -1;
}

.uk-flex-last {
  order: 99;
}

@media (min-width: 640px) {
  .uk-flex-first\@s {
    order: -1;
  }

  .uk-flex-last\@s {
    order: 99;
  }
}
@media (min-width: 960px) {
  .uk-flex-first\@m {
    order: -1;
  }

  .uk-flex-last\@m {
    order: 99;
  }
}
@media (min-width: 1200px) {
  .uk-flex-first\@l {
    order: -1;
  }

  .uk-flex-last\@l {
    order: 99;
  }
}
@media (min-width: 1600px) {
  .uk-flex-first\@xl {
    order: -1;
  }

  .uk-flex-last\@xl {
    order: 99;
  }
}
.uk-flex-none {
  flex: none;
}

.uk-flex-auto {
  flex: auto;
}

.uk-flex-1 {
  flex: 1;
}

.uk-margin {
  margin-bottom: 20px;
}

* + .uk-margin {
  margin-top: 20px !important;
}

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

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

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

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

.uk-margin-small {
  margin-bottom: 10px;
}

* + .uk-margin-small {
  margin-top: 10px !important;
}

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

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

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

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

.uk-margin-medium {
  margin-bottom: 40px;
}

* + .uk-margin-medium {
  margin-top: 40px !important;
}

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

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

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

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

.uk-margin-large {
  margin-bottom: 40px;
}

* + .uk-margin-large {
  margin-top: 40px !important;
}

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

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

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

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

@media (min-width: 1200px) {
  .uk-margin-large {
    margin-bottom: 70px;
  }

  * + .uk-margin-large {
    margin-top: 70px !important;
  }

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

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

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

  .uk-margin-large-right {
    margin-right: 70px !important;
  }
}
.uk-margin-xlarge {
  margin-bottom: 70px;
}

* + .uk-margin-xlarge {
  margin-top: 70px !important;
}

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

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

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

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

@media (min-width: 1200px) {
  .uk-margin-xlarge {
    margin-bottom: 140px;
  }

  * + .uk-margin-xlarge {
    margin-top: 140px !important;
  }

  .uk-margin-xlarge-top {
    margin-top: 140px !important;
  }

  .uk-margin-xlarge-bottom {
    margin-bottom: 140px !important;
  }

  .uk-margin-xlarge-left {
    margin-left: 140px !important;
  }

  .uk-margin-xlarge-right {
    margin-right: 140px !important;
  }
}
.uk-margin-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

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

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

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

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

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

@media (min-width: 640px) {
  .uk-margin-auto\@s {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .uk-margin-auto-left\@s {
    margin-left: auto !important;
  }

  .uk-margin-auto-right\@s {
    margin-right: auto !important;
  }
}
@media (min-width: 960px) {
  .uk-margin-auto\@m {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .uk-margin-auto-left\@m {
    margin-left: auto !important;
  }

  .uk-margin-auto-right\@m {
    margin-right: auto !important;
  }
}
@media (min-width: 1200px) {
  .uk-margin-auto\@l {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .uk-margin-auto-left\@l {
    margin-left: auto !important;
  }

  .uk-margin-auto-right\@l {
    margin-right: auto !important;
  }
}
@media (min-width: 1600px) {
  .uk-margin-auto\@xl {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .uk-margin-auto-left\@xl {
    margin-left: auto !important;
  }

  .uk-margin-auto-right\@xl {
    margin-right: auto !important;
  }
}
.uk-margin-remove {
  margin: 0 !important;
}

.uk-margin-remove-top {
  margin-top: 0 !important;
}

.uk-margin-remove-bottom {
  margin-bottom: 0 !important;
}

.uk-margin-remove-left {
  margin-left: 0 !important;
}

.uk-margin-remove-right {
  margin-right: 0 !important;
}

.uk-margin-remove-vertical {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.uk-margin-remove-adjacent + *, .uk-margin-remove-first-child > :first-child {
  margin-top: 0 !important;
}

.uk-margin-remove-last-child > :last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 640px) {
  .uk-margin-remove-left\@s {
    margin-left: 0 !important;
  }

  .uk-margin-remove-right\@s {
    margin-right: 0 !important;
  }
}
@media (min-width: 960px) {
  .uk-margin-remove-left\@m {
    margin-left: 0 !important;
  }

  .uk-margin-remove-right\@m {
    margin-right: 0 !important;
  }
}
@media (min-width: 1200px) {
  .uk-margin-remove-left\@l {
    margin-left: 0 !important;
  }

  .uk-margin-remove-right\@l {
    margin-right: 0 !important;
  }
}
@media (min-width: 1600px) {
  .uk-margin-remove-left\@xl {
    margin-left: 0 !important;
  }

  .uk-margin-remove-right\@xl {
    margin-right: 0 !important;
  }
}
.uk-padding {
  padding: 30px;
}

@media (min-width: 1200px) {
  .uk-padding {
    padding: 40px;
  }
}
.uk-padding-small {
  padding: 15px;
}

.uk-padding-large {
  padding: 40px;
}

@media (min-width: 1200px) {
  .uk-padding-large {
    padding: 70px;
  }
}
.uk-padding-remove {
  padding: 0 !important;
}

.uk-padding-remove-top {
  padding-top: 0 !important;
}

.uk-padding-remove-bottom {
  padding-bottom: 0 !important;
}

.uk-padding-remove-left {
  padding-left: 0 !important;
}

.uk-padding-remove-right {
  padding-right: 0 !important;
}

.uk-padding-remove-vertical {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.uk-padding-remove-horizontal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:root {
  --uk-position-margin-offset:0px;
}

[class*=uk-position-bottom], [class*=uk-position-center], [class*=uk-position-left], [class*=uk-position-right], [class*=uk-position-top] {
  position: absolute !important;
  max-width: calc(100% - var(--uk-position-margin-offset) * 2);
  box-sizing: border-box;
}

.uk-position-top {
  top: 0;
  left: 0;
  right: 0;
}

.uk-position-bottom {
  bottom: 0;
  left: 0;
  right: 0;
}

.uk-position-left {
  top: 0;
  bottom: 0;
  left: 0;
}

.uk-position-right {
  top: 0;
  bottom: 0;
  right: 0;
}

.uk-position-top-left {
  top: 0;
  left: 0;
}

.uk-position-top-right {
  top: 0;
  right: 0;
}

.uk-position-bottom-left {
  bottom: 0;
  left: 0;
}

.uk-position-bottom-right {
  bottom: 0;
  right: 0;
}

.uk-position-center {
  top: calc(50% - var(--uk-position-margin-offset));
  left: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-x:-50%;
  --uk-position-translate-y:-50%;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
  width: max-content;
}

[class*=uk-position-center-left], [class*=uk-position-center-right] {
  top: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-y:-50%;
  transform: translate(0, var(--uk-position-translate-y));
}

.uk-position-center-left {
  left: 0;
}

.uk-position-center-right {
  right: 0;
}

.uk-position-center-left-out {
  right: 100%;
  width: max-content;
}

.uk-position-center-right-out {
  left: 100%;
  width: max-content;
}

.uk-position-bottom-center, .uk-position-top-center {
  left: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-x:-50%;
  transform: translate(var(--uk-position-translate-x), 0);
  width: max-content;
}

.uk-position-top-center {
  top: 0;
}

.uk-position-bottom-center {
  bottom: 0;
}

.uk-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.uk-position-small {
  margin: 15px;
  --uk-position-margin-offset:15px;
}

.uk-position-medium {
  margin: 30px;
  --uk-position-margin-offset:30px;
}

.uk-position-large {
  margin: 30px;
  --uk-position-margin-offset:30px;
}

@media (min-width: 1200px) {
  .uk-position-large {
    margin: 50px;
    --uk-position-margin-offset:50px;
  }
}
.uk-position-relative {
  position: relative !important;
}

.uk-position-absolute {
  position: absolute !important;
}

.uk-position-fixed {
  position: fixed !important;
}

.uk-position-sticky {
  position: sticky !important;
}

.uk-position-z-index {
  z-index: 1;
}

.uk-position-z-index-negative {
  z-index: -1;
}

:where(.uk-transition-fade), :where([class*=uk-transition-scale]), :where([class*=uk-transition-slide]) {
  --uk-position-translate-x:0;
  --uk-position-translate-y:0;
}

.uk-transition-fade, [class*=uk-transition-scale], [class*=uk-transition-slide] {
  --uk-translate-x:0;
  --uk-translate-y:0;
  --uk-scale-x:1;
  --uk-scale-y:1;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)) translate(var(--uk-translate-x), var(--uk-translate-y)) scale(var(--uk-scale-x), var(--uk-scale-y));
  transition: 0.3s ease-out;
  transition-property: opacity, transform, filter;
  opacity: 0;
}

.uk-transition-active.uk-active .uk-transition-fade, .uk-transition-toggle .uk-transition-fade:focus-within, .uk-transition-toggle:focus .uk-transition-fade, .uk-transition-toggle:hover .uk-transition-fade {
  opacity: 1;
}

[class*=uk-transition-scale] {
  -webkit-backface-visibility: hidden;
}

.uk-transition-scale-up {
  --uk-scale-x:1;
  --uk-scale-y:1;
}

.uk-transition-scale-down {
  --uk-scale-x:1.03;
  --uk-scale-y:1.03;
}

.uk-transition-active.uk-active .uk-transition-scale-up, .uk-transition-toggle .uk-transition-scale-up:focus-within, .uk-transition-toggle:focus .uk-transition-scale-up, .uk-transition-toggle:hover .uk-transition-scale-up {
  --uk-scale-x:1.03;
  --uk-scale-y:1.03;
  opacity: 1;
}

.uk-transition-active.uk-active .uk-transition-scale-down, .uk-transition-toggle .uk-transition-scale-down:focus-within, .uk-transition-toggle:focus .uk-transition-scale-down, .uk-transition-toggle:hover .uk-transition-scale-down {
  --uk-scale-x:1;
  --uk-scale-y:1;
  opacity: 1;
}

.uk-transition-slide-top {
  --uk-translate-y:-100%;
}

.uk-transition-slide-bottom {
  --uk-translate-y:100%;
}

.uk-transition-slide-left {
  --uk-translate-x:-100%;
}

.uk-transition-slide-right {
  --uk-translate-x:100%;
}

.uk-transition-slide-top-small {
  --uk-translate-y:calc(-1 * 10px);
}

.uk-transition-slide-bottom-small {
  --uk-translate-y:10px;
}

.uk-transition-slide-left-small {
  --uk-translate-x:calc(-1 * 10px);
}

.uk-transition-slide-right-small {
  --uk-translate-x:10px;
}

.uk-transition-slide-top-medium {
  --uk-translate-y:calc(-1 * 50px);
}

.uk-transition-slide-bottom-medium {
  --uk-translate-y:50px;
}

.uk-transition-slide-left-medium {
  --uk-translate-x:calc(-1 * 50px);
}

.uk-transition-slide-right-medium {
  --uk-translate-x:50px;
}

.uk-transition-active.uk-active [class*=uk-transition-slide], .uk-transition-toggle [class*=uk-transition-slide]:focus-within, .uk-transition-toggle:focus [class*=uk-transition-slide], .uk-transition-toggle:hover [class*=uk-transition-slide] {
  --uk-translate-x:0;
  --uk-translate-y:0;
  opacity: 1;
}

.uk-transition-opaque {
  opacity: 1;
}

.uk-transition-slow {
  transition-duration: 0.7s;
}

.uk-hidden, [hidden] {
  display: none !important;
}

@media (min-width: 640px) {
  .uk-hidden\@s {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .uk-hidden\@m {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .uk-hidden\@l {
    display: none !important;
  }
}
@media (min-width: 1600px) {
  .uk-hidden\@xl {
    display: none !important;
  }
}
@media (max-width: 639px) {
  .uk-visible\@s {
    display: none !important;
  }
}
@media (max-width: 959px) {
  .uk-visible\@m {
    display: none !important;
  }
}
@media (max-width: 1199px) {
  .uk-visible\@l {
    display: none !important;
  }
}
@media (max-width: 1599px) {
  .uk-visible\@xl {
    display: none !important;
  }
}
.uk-invisible {
  visibility: hidden !important;
}

.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
  opacity: 0 !important;
}

@media (hover: none) {
  .uk-hidden-touch {
    display: none !important;
  }
}
@media (hover) {
  .uk-hidden-notouch {
    display: none !important;
  }
}
.uk-card-primary.uk-card-body, .uk-card-primary > :not([class*=uk-card-media]), .uk-card-secondary.uk-card-body, .uk-card-secondary > :not([class*=uk-card-media]), .uk-light, .uk-offcanvas-bar, .uk-overlay-primary, .uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color), .uk-tile-primary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color) {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-link, .uk-card-primary.uk-card-body a, .uk-card-primary > :not([class*=uk-card-media]) .uk-link, .uk-card-primary > :not([class*=uk-card-media]) a, .uk-card-secondary.uk-card-body .uk-link, .uk-card-secondary.uk-card-body a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link, .uk-card-secondary > :not([class*=uk-card-media]) a, .uk-light .uk-link, .uk-light a, .uk-offcanvas-bar .uk-link, .uk-offcanvas-bar a, .uk-overlay-primary .uk-link, .uk-overlay-primary a, .uk-section-primary:not(.uk-preserve-color) .uk-link, .uk-section-primary:not(.uk-preserve-color) a, .uk-section-secondary:not(.uk-preserve-color) .uk-link, .uk-section-secondary:not(.uk-preserve-color) a, .uk-tile-primary:not(.uk-preserve-color) .uk-link, .uk-tile-primary:not(.uk-preserve-color) a, .uk-tile-secondary:not(.uk-preserve-color) .uk-link, .uk-tile-secondary:not(.uk-preserve-color) a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link, .uk-card-primary.uk-card-body .uk-link:hover, .uk-card-primary.uk-card-body a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link, .uk-card-primary > :not([class*=uk-card-media]) .uk-link:hover, .uk-card-primary > :not([class*=uk-card-media]) a:hover, .uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link, .uk-card-secondary.uk-card-body .uk-link:hover, .uk-card-secondary.uk-card-body a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link:hover, .uk-card-secondary > :not([class*=uk-card-media]) a:hover, .uk-light .uk-link-toggle:hover .uk-link, .uk-light .uk-link:hover, .uk-light a:hover, .uk-offcanvas-bar .uk-link-toggle:hover .uk-link, .uk-offcanvas-bar .uk-link:hover, .uk-offcanvas-bar a:hover, .uk-overlay-primary .uk-link-toggle:hover .uk-link, .uk-overlay-primary .uk-link:hover, .uk-overlay-primary a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link, .uk-section-primary:not(.uk-preserve-color) .uk-link:hover, .uk-section-primary:not(.uk-preserve-color) a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link, .uk-section-secondary:not(.uk-preserve-color) .uk-link:hover, .uk-section-secondary:not(.uk-preserve-color) a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link, .uk-tile-primary:not(.uk-preserve-color) .uk-link:hover, .uk-tile-primary:not(.uk-preserve-color) a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-link:hover, .uk-tile-secondary:not(.uk-preserve-color) a:hover {
  color: #fff;
}

.uk-card-primary.uk-card-body :not(pre) > code, .uk-card-primary.uk-card-body :not(pre) > kbd, .uk-card-primary.uk-card-body :not(pre) > samp, .uk-card-primary > :not([class*=uk-card-media]) :not(pre) > code, .uk-card-primary > :not([class*=uk-card-media]) :not(pre) > kbd, .uk-card-primary > :not([class*=uk-card-media]) :not(pre) > samp, .uk-card-secondary.uk-card-body :not(pre) > code, .uk-card-secondary.uk-card-body :not(pre) > kbd, .uk-card-secondary.uk-card-body :not(pre) > samp, .uk-card-secondary > :not([class*=uk-card-media]) :not(pre) > code, .uk-card-secondary > :not([class*=uk-card-media]) :not(pre) > kbd, .uk-card-secondary > :not([class*=uk-card-media]) :not(pre) > samp, .uk-light :not(pre) > code, .uk-light :not(pre) > kbd, .uk-light :not(pre) > samp, .uk-offcanvas-bar :not(pre) > code, .uk-offcanvas-bar :not(pre) > kbd, .uk-offcanvas-bar :not(pre) > samp, .uk-overlay-primary :not(pre) > code, .uk-overlay-primary :not(pre) > kbd, .uk-overlay-primary :not(pre) > samp, .uk-section-primary:not(.uk-preserve-color) :not(pre) > code, .uk-section-primary:not(.uk-preserve-color) :not(pre) > kbd, .uk-section-primary:not(.uk-preserve-color) :not(pre) > samp, .uk-section-secondary:not(.uk-preserve-color) :not(pre) > code, .uk-section-secondary:not(.uk-preserve-color) :not(pre) > kbd, .uk-section-secondary:not(.uk-preserve-color) :not(pre) > samp, .uk-tile-primary:not(.uk-preserve-color) :not(pre) > code, .uk-tile-primary:not(.uk-preserve-color) :not(pre) > kbd, .uk-tile-primary:not(.uk-preserve-color) :not(pre) > samp, .uk-tile-secondary:not(.uk-preserve-color) :not(pre) > code, .uk-tile-secondary:not(.uk-preserve-color) :not(pre) > kbd, .uk-tile-secondary:not(.uk-preserve-color) :not(pre) > samp {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.uk-card-primary.uk-card-body em, .uk-card-primary > :not([class*=uk-card-media]) em, .uk-card-secondary.uk-card-body em, .uk-card-secondary > :not([class*=uk-card-media]) em, .uk-light em, .uk-offcanvas-bar em, .uk-overlay-primary em, .uk-section-primary:not(.uk-preserve-color) em, .uk-section-secondary:not(.uk-preserve-color) em, .uk-tile-primary:not(.uk-preserve-color) em, .uk-tile-secondary:not(.uk-preserve-color) em {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-h1, .uk-card-primary.uk-card-body .uk-h2, .uk-card-primary.uk-card-body .uk-h3, .uk-card-primary.uk-card-body .uk-h4, .uk-card-primary.uk-card-body .uk-h5, .uk-card-primary.uk-card-body .uk-h6, .uk-card-primary.uk-card-body .uk-heading-2xlarge, .uk-card-primary.uk-card-body .uk-heading-large, .uk-card-primary.uk-card-body .uk-heading-medium, .uk-card-primary.uk-card-body .uk-heading-small, .uk-card-primary.uk-card-body .uk-heading-xlarge, .uk-card-primary.uk-card-body h1, .uk-card-primary.uk-card-body h2, .uk-card-primary.uk-card-body h3, .uk-card-primary.uk-card-body h4, .uk-card-primary.uk-card-body h5, .uk-card-primary.uk-card-body h6, .uk-card-primary > :not([class*=uk-card-media]) .uk-h1, .uk-card-primary > :not([class*=uk-card-media]) .uk-h2, .uk-card-primary > :not([class*=uk-card-media]) .uk-h3, .uk-card-primary > :not([class*=uk-card-media]) .uk-h4, .uk-card-primary > :not([class*=uk-card-media]) .uk-h5, .uk-card-primary > :not([class*=uk-card-media]) .uk-h6, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-2xlarge, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-large, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-medium, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-small, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-xlarge, .uk-card-primary > :not([class*=uk-card-media]) h1, .uk-card-primary > :not([class*=uk-card-media]) h2, .uk-card-primary > :not([class*=uk-card-media]) h3, .uk-card-primary > :not([class*=uk-card-media]) h4, .uk-card-primary > :not([class*=uk-card-media]) h5, .uk-card-primary > :not([class*=uk-card-media]) h6, .uk-card-secondary.uk-card-body .uk-h1, .uk-card-secondary.uk-card-body .uk-h2, .uk-card-secondary.uk-card-body .uk-h3, .uk-card-secondary.uk-card-body .uk-h4, .uk-card-secondary.uk-card-body .uk-h5, .uk-card-secondary.uk-card-body .uk-h6, .uk-card-secondary.uk-card-body .uk-heading-2xlarge, .uk-card-secondary.uk-card-body .uk-heading-large, .uk-card-secondary.uk-card-body .uk-heading-medium, .uk-card-secondary.uk-card-body .uk-heading-small, .uk-card-secondary.uk-card-body .uk-heading-xlarge, .uk-card-secondary.uk-card-body h1, .uk-card-secondary.uk-card-body h2, .uk-card-secondary.uk-card-body h3, .uk-card-secondary.uk-card-body h4, .uk-card-secondary.uk-card-body h5, .uk-card-secondary.uk-card-body h6, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h1, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h2, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h3, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h4, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h5, .uk-card-secondary > :not([class*=uk-card-media]) .uk-h6, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-2xlarge, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-large, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-medium, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-small, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-xlarge, .uk-card-secondary > :not([class*=uk-card-media]) h1, .uk-card-secondary > :not([class*=uk-card-media]) h2, .uk-card-secondary > :not([class*=uk-card-media]) h3, .uk-card-secondary > :not([class*=uk-card-media]) h4, .uk-card-secondary > :not([class*=uk-card-media]) h5, .uk-card-secondary > :not([class*=uk-card-media]) h6, .uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6, .uk-light .uk-heading-2xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge, .uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6, .uk-offcanvas-bar .uk-h1, .uk-offcanvas-bar .uk-h2, .uk-offcanvas-bar .uk-h3, .uk-offcanvas-bar .uk-h4, .uk-offcanvas-bar .uk-h5, .uk-offcanvas-bar .uk-h6, .uk-offcanvas-bar .uk-heading-2xlarge, .uk-offcanvas-bar .uk-heading-large, .uk-offcanvas-bar .uk-heading-medium, .uk-offcanvas-bar .uk-heading-small, .uk-offcanvas-bar .uk-heading-xlarge, .uk-offcanvas-bar h1, .uk-offcanvas-bar h2, .uk-offcanvas-bar h3, .uk-offcanvas-bar h4, .uk-offcanvas-bar h5, .uk-offcanvas-bar h6, .uk-overlay-primary .uk-h1, .uk-overlay-primary .uk-h2, .uk-overlay-primary .uk-h3, .uk-overlay-primary .uk-h4, .uk-overlay-primary .uk-h5, .uk-overlay-primary .uk-h6, .uk-overlay-primary .uk-heading-2xlarge, .uk-overlay-primary .uk-heading-large, .uk-overlay-primary .uk-heading-medium, .uk-overlay-primary .uk-heading-small, .uk-overlay-primary .uk-heading-xlarge, .uk-overlay-primary h1, .uk-overlay-primary h2, .uk-overlay-primary h3, .uk-overlay-primary h4, .uk-overlay-primary h5, .uk-overlay-primary h6, .uk-section-primary:not(.uk-preserve-color) .uk-h1, .uk-section-primary:not(.uk-preserve-color) .uk-h2, .uk-section-primary:not(.uk-preserve-color) .uk-h3, .uk-section-primary:not(.uk-preserve-color) .uk-h4, .uk-section-primary:not(.uk-preserve-color) .uk-h5, .uk-section-primary:not(.uk-preserve-color) .uk-h6, .uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-primary:not(.uk-preserve-color) .uk-heading-large, .uk-section-primary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-primary:not(.uk-preserve-color) .uk-heading-small, .uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-primary:not(.uk-preserve-color) h1, .uk-section-primary:not(.uk-preserve-color) h2, .uk-section-primary:not(.uk-preserve-color) h3, .uk-section-primary:not(.uk-preserve-color) h4, .uk-section-primary:not(.uk-preserve-color) h5, .uk-section-primary:not(.uk-preserve-color) h6, .uk-section-secondary:not(.uk-preserve-color) .uk-h1, .uk-section-secondary:not(.uk-preserve-color) .uk-h2, .uk-section-secondary:not(.uk-preserve-color) .uk-h3, .uk-section-secondary:not(.uk-preserve-color) .uk-h4, .uk-section-secondary:not(.uk-preserve-color) .uk-h5, .uk-section-secondary:not(.uk-preserve-color) .uk-h6, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-large, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-small, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-secondary:not(.uk-preserve-color) h1, .uk-section-secondary:not(.uk-preserve-color) h2, .uk-section-secondary:not(.uk-preserve-color) h3, .uk-section-secondary:not(.uk-preserve-color) h4, .uk-section-secondary:not(.uk-preserve-color) h5, .uk-section-secondary:not(.uk-preserve-color) h6, .uk-tile-primary:not(.uk-preserve-color) .uk-h1, .uk-tile-primary:not(.uk-preserve-color) .uk-h2, .uk-tile-primary:not(.uk-preserve-color) .uk-h3, .uk-tile-primary:not(.uk-preserve-color) .uk-h4, .uk-tile-primary:not(.uk-preserve-color) .uk-h5, .uk-tile-primary:not(.uk-preserve-color) .uk-h6, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-large, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-small, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-tile-primary:not(.uk-preserve-color) h1, .uk-tile-primary:not(.uk-preserve-color) h2, .uk-tile-primary:not(.uk-preserve-color) h3, .uk-tile-primary:not(.uk-preserve-color) h4, .uk-tile-primary:not(.uk-preserve-color) h5, .uk-tile-primary:not(.uk-preserve-color) h6, .uk-tile-secondary:not(.uk-preserve-color) .uk-h1, .uk-tile-secondary:not(.uk-preserve-color) .uk-h2, .uk-tile-secondary:not(.uk-preserve-color) .uk-h3, .uk-tile-secondary:not(.uk-preserve-color) .uk-h4, .uk-tile-secondary:not(.uk-preserve-color) .uk-h5, .uk-tile-secondary:not(.uk-preserve-color) .uk-h6, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-tile-secondary:not(.uk-preserve-color) h1, .uk-tile-secondary:not(.uk-preserve-color) h2, .uk-tile-secondary:not(.uk-preserve-color) h3, .uk-tile-secondary:not(.uk-preserve-color) h4, .uk-tile-secondary:not(.uk-preserve-color) h5, .uk-tile-secondary:not(.uk-preserve-color) h6 {
  color: #fff;
}

.uk-card-primary.uk-card-body blockquote, .uk-card-primary > :not([class*=uk-card-media]) blockquote, .uk-card-secondary.uk-card-body blockquote, .uk-card-secondary > :not([class*=uk-card-media]) blockquote, .uk-light blockquote, .uk-offcanvas-bar blockquote, .uk-overlay-primary blockquote, .uk-section-primary:not(.uk-preserve-color) blockquote, .uk-section-secondary:not(.uk-preserve-color) blockquote, .uk-tile-primary:not(.uk-preserve-color) blockquote, .uk-tile-secondary:not(.uk-preserve-color) blockquote {
  color: #fff;
}

.uk-card-primary.uk-card-body blockquote footer, .uk-card-primary > :not([class*=uk-card-media]) blockquote footer, .uk-card-secondary.uk-card-body blockquote footer, .uk-card-secondary > :not([class*=uk-card-media]) blockquote footer, .uk-light blockquote footer, .uk-offcanvas-bar blockquote footer, .uk-overlay-primary blockquote footer, .uk-section-primary:not(.uk-preserve-color) blockquote footer, .uk-section-secondary:not(.uk-preserve-color) blockquote footer, .uk-tile-primary:not(.uk-preserve-color) blockquote footer, .uk-tile-secondary:not(.uk-preserve-color) blockquote footer {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-hr, .uk-card-primary.uk-card-body hr, .uk-card-primary > :not([class*=uk-card-media]) .uk-hr, .uk-card-primary > :not([class*=uk-card-media]) hr, .uk-card-secondary.uk-card-body .uk-hr, .uk-card-secondary.uk-card-body hr, .uk-card-secondary > :not([class*=uk-card-media]) .uk-hr, .uk-card-secondary > :not([class*=uk-card-media]) hr, .uk-light .uk-hr, .uk-light hr, .uk-offcanvas-bar .uk-hr, .uk-offcanvas-bar hr, .uk-overlay-primary .uk-hr, .uk-overlay-primary hr, .uk-section-primary:not(.uk-preserve-color) .uk-hr, .uk-section-primary:not(.uk-preserve-color) hr, .uk-section-secondary:not(.uk-preserve-color) .uk-hr, .uk-section-secondary:not(.uk-preserve-color) hr, .uk-tile-primary:not(.uk-preserve-color) .uk-hr, .uk-tile-primary:not(.uk-preserve-color) hr, .uk-tile-secondary:not(.uk-preserve-color) .uk-hr, .uk-tile-secondary:not(.uk-preserve-color) hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body :focus, .uk-card-primary > :not([class*=uk-card-media]) :focus, .uk-card-secondary.uk-card-body :focus, .uk-card-secondary > :not([class*=uk-card-media]) :focus, .uk-light :focus, .uk-offcanvas-bar :focus, .uk-overlay-primary :focus, .uk-section-primary:not(.uk-preserve-color) :focus, .uk-section-secondary:not(.uk-preserve-color) :focus, .uk-tile-primary:not(.uk-preserve-color) :focus, .uk-tile-secondary:not(.uk-preserve-color) :focus {
  outline-color: #fff;
}

.uk-card-primary.uk-card-body :focus-visible, .uk-card-primary > :not([class*=uk-card-media]) :focus-visible, .uk-card-secondary.uk-card-body :focus-visible, .uk-card-secondary > :not([class*=uk-card-media]) :focus-visible, .uk-light :focus-visible, .uk-offcanvas-bar :focus-visible, .uk-overlay-primary :focus-visible, .uk-section-primary:not(.uk-preserve-color) :focus-visible, .uk-section-secondary:not(.uk-preserve-color) :focus-visible, .uk-tile-primary:not(.uk-preserve-color) :focus-visible, .uk-tile-secondary:not(.uk-preserve-color) :focus-visible {
  outline-color: #fff;
}

.uk-card-primary.uk-card-body .uk-link-muted a, .uk-card-primary.uk-card-body a.uk-link-muted, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-muted a, .uk-card-primary > :not([class*=uk-card-media]) a.uk-link-muted, .uk-card-secondary.uk-card-body .uk-link-muted a, .uk-card-secondary.uk-card-body a.uk-link-muted, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-muted a, .uk-card-secondary > :not([class*=uk-card-media]) a.uk-link-muted, .uk-light .uk-link-muted a, .uk-light a.uk-link-muted, .uk-offcanvas-bar .uk-link-muted a, .uk-offcanvas-bar a.uk-link-muted, .uk-overlay-primary .uk-link-muted a, .uk-overlay-primary a.uk-link-muted, .uk-section-primary:not(.uk-preserve-color) .uk-link-muted a, .uk-section-primary:not(.uk-preserve-color) a.uk-link-muted, .uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted, .uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-link-muted a:hover, .uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-muted, .uk-card-primary.uk-card-body a.uk-link-muted:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-muted a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-muted, .uk-card-primary > :not([class*=uk-card-media]) a.uk-link-muted:hover, .uk-card-secondary.uk-card-body .uk-link-muted a:hover, .uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-muted, .uk-card-secondary.uk-card-body a.uk-link-muted:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-muted a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-muted, .uk-card-secondary > :not([class*=uk-card-media]) a.uk-link-muted:hover, .uk-light .uk-link-muted a:hover, .uk-light .uk-link-toggle:hover .uk-link-muted, .uk-light a.uk-link-muted:hover, .uk-offcanvas-bar .uk-link-muted a:hover, .uk-offcanvas-bar .uk-link-toggle:hover .uk-link-muted, .uk-offcanvas-bar a.uk-link-muted:hover, .uk-overlay-primary .uk-link-muted a:hover, .uk-overlay-primary .uk-link-toggle:hover .uk-link-muted, .uk-overlay-primary a.uk-link-muted:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-muted a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted, .uk-section-primary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-link-text a:hover, .uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-text, .uk-card-primary.uk-card-body a.uk-link-text:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-text a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-text, .uk-card-primary > :not([class*=uk-card-media]) a.uk-link-text:hover, .uk-card-secondary.uk-card-body .uk-link-text a:hover, .uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-text, .uk-card-secondary.uk-card-body a.uk-link-text:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-text a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-text, .uk-card-secondary > :not([class*=uk-card-media]) a.uk-link-text:hover, .uk-light .uk-link-text a:hover, .uk-light .uk-link-toggle:hover .uk-link-text, .uk-light a.uk-link-text:hover, .uk-offcanvas-bar .uk-link-text a:hover, .uk-offcanvas-bar .uk-link-toggle:hover .uk-link-text, .uk-offcanvas-bar a.uk-link-text:hover, .uk-overlay-primary .uk-link-text a:hover, .uk-overlay-primary .uk-link-toggle:hover .uk-link-text, .uk-overlay-primary a.uk-link-text:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-text a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text, .uk-section-primary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-text a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-text a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-text a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-text:hover {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-link-heading a:hover, .uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-heading, .uk-card-primary.uk-card-body a.uk-link-heading:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-heading a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-heading, .uk-card-primary > :not([class*=uk-card-media]) a.uk-link-heading:hover, .uk-card-secondary.uk-card-body .uk-link-heading a:hover, .uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-heading, .uk-card-secondary.uk-card-body a.uk-link-heading:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-heading a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-link-toggle:hover .uk-link-heading, .uk-card-secondary > :not([class*=uk-card-media]) a.uk-link-heading:hover, .uk-light .uk-link-heading a:hover, .uk-light .uk-link-toggle:hover .uk-link-heading, .uk-light a.uk-link-heading:hover, .uk-offcanvas-bar .uk-link-heading a:hover, .uk-offcanvas-bar .uk-link-toggle:hover .uk-link-heading, .uk-offcanvas-bar a.uk-link-heading:hover, .uk-overlay-primary .uk-link-heading a:hover, .uk-overlay-primary .uk-link-toggle:hover .uk-link-heading, .uk-overlay-primary a.uk-link-heading:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-heading a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading, .uk-section-primary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-heading a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-heading a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-heading a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-heading:hover {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-heading-divider, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-divider, .uk-card-secondary.uk-card-body .uk-heading-divider, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-divider, .uk-light .uk-heading-divider, .uk-offcanvas-bar .uk-heading-divider, .uk-overlay-primary .uk-heading-divider, .uk-section-primary:not(.uk-preserve-color) .uk-heading-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-divider {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-heading-bullet::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-bullet::before, .uk-card-secondary.uk-card-body .uk-heading-bullet::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-bullet::before, .uk-light .uk-heading-bullet::before, .uk-offcanvas-bar .uk-heading-bullet::before, .uk-overlay-primary .uk-heading-bullet::before, .uk-section-primary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-bullet::before {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-heading-line > ::after, .uk-card-primary.uk-card-body .uk-heading-line > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-line > ::after, .uk-card-primary > :not([class*=uk-card-media]) .uk-heading-line > ::before, .uk-card-secondary.uk-card-body .uk-heading-line > ::after, .uk-card-secondary.uk-card-body .uk-heading-line > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-line > ::after, .uk-card-secondary > :not([class*=uk-card-media]) .uk-heading-line > ::before, .uk-light .uk-heading-line > ::after, .uk-light .uk-heading-line > ::before, .uk-offcanvas-bar .uk-heading-line > ::after, .uk-offcanvas-bar .uk-heading-line > ::before, .uk-overlay-primary .uk-heading-line > ::after, .uk-overlay-primary .uk-heading-line > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::after, .uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::after, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::after, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::before {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-divider-icon, .uk-card-primary > :not([class*=uk-card-media]) .uk-divider-icon, .uk-card-secondary.uk-card-body .uk-divider-icon, .uk-card-secondary > :not([class*=uk-card-media]) .uk-divider-icon, .uk-light .uk-divider-icon, .uk-offcanvas-bar .uk-divider-icon, .uk-overlay-primary .uk-divider-icon, .uk-section-primary:not(.uk-preserve-color) .uk-divider-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.2%29%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-card-primary.uk-card-body .uk-divider-icon::after, .uk-card-primary.uk-card-body .uk-divider-icon::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-divider-icon::after, .uk-card-primary > :not([class*=uk-card-media]) .uk-divider-icon::before, .uk-card-secondary.uk-card-body .uk-divider-icon::after, .uk-card-secondary.uk-card-body .uk-divider-icon::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-divider-icon::after, .uk-card-secondary > :not([class*=uk-card-media]) .uk-divider-icon::before, .uk-light .uk-divider-icon::after, .uk-light .uk-divider-icon::before, .uk-offcanvas-bar .uk-divider-icon::after, .uk-offcanvas-bar .uk-divider-icon::before, .uk-overlay-primary .uk-divider-icon::after, .uk-overlay-primary .uk-divider-icon::before, .uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::after, .uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::after, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::after, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::before {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-divider-small::after, .uk-card-primary > :not([class*=uk-card-media]) .uk-divider-small::after, .uk-card-secondary.uk-card-body .uk-divider-small::after, .uk-card-secondary > :not([class*=uk-card-media]) .uk-divider-small::after, .uk-light .uk-divider-small::after, .uk-offcanvas-bar .uk-divider-small::after, .uk-overlay-primary .uk-divider-small::after, .uk-section-primary:not(.uk-preserve-color) .uk-divider-small::after, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-small::after, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-small::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-small::after {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-divider-vertical, .uk-card-primary > :not([class*=uk-card-media]) .uk-divider-vertical, .uk-card-secondary.uk-card-body .uk-divider-vertical, .uk-card-secondary > :not([class*=uk-card-media]) .uk-divider-vertical, .uk-light .uk-divider-vertical, .uk-offcanvas-bar .uk-divider-vertical, .uk-overlay-primary .uk-divider-vertical, .uk-section-primary:not(.uk-preserve-color) .uk-divider-vertical, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-vertical, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-vertical, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-vertical {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-list-muted > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-list-muted > ::before, .uk-card-secondary.uk-card-body .uk-list-muted > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-muted > ::before, .uk-light .uk-list-muted > ::before, .uk-offcanvas-bar .uk-list-muted > ::before, .uk-overlay-primary .uk-list-muted > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-muted > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-muted > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-muted > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-muted > ::before {
  color: rgba(255, 255, 255, 0.5) !important;
}

.uk-card-primary.uk-card-body .uk-list-emphasis > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-list-emphasis > ::before, .uk-card-secondary.uk-card-body .uk-list-emphasis > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-emphasis > ::before, .uk-light .uk-list-emphasis > ::before, .uk-offcanvas-bar .uk-list-emphasis > ::before, .uk-overlay-primary .uk-list-emphasis > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-emphasis > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-emphasis > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-emphasis > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-emphasis > ::before {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-list-primary > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-list-primary > ::before, .uk-card-secondary.uk-card-body .uk-list-primary > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-primary > ::before, .uk-light .uk-list-primary > ::before, .uk-offcanvas-bar .uk-list-primary > ::before, .uk-overlay-primary .uk-list-primary > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-primary > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-primary > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-primary > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-primary > ::before {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-list-secondary > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-list-secondary > ::before, .uk-card-secondary.uk-card-body .uk-list-secondary > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-secondary > ::before, .uk-light .uk-list-secondary > ::before, .uk-offcanvas-bar .uk-list-secondary > ::before, .uk-overlay-primary .uk-list-secondary > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-secondary > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-secondary > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-secondary > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-secondary > ::before {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-list-bullet > ::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-list-bullet > ::before, .uk-card-secondary.uk-card-body .uk-list-bullet > ::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-bullet > ::before, .uk-light .uk-list-bullet > ::before, .uk-offcanvas-bar .uk-list-bullet > ::before, .uk-overlay-primary .uk-list-bullet > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-bullet > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-bullet > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-bullet > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-bullet > ::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-list-divider > :nth-child(n+2), .uk-card-primary > :not([class*=uk-card-media]) .uk-list-divider > :nth-child(n+2), .uk-card-secondary.uk-card-body .uk-list-divider > :nth-child(n+2), .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-divider > :nth-child(n+2), .uk-light .uk-list-divider > :nth-child(n+2), .uk-offcanvas-bar .uk-list-divider > :nth-child(n+2), .uk-overlay-primary .uk-list-divider > :nth-child(n+2), .uk-section-primary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2), .uk-section-secondary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2), .uk-tile-primary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2), .uk-tile-secondary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2) {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-list-striped > :nth-of-type(odd), .uk-card-primary > :not([class*=uk-card-media]) .uk-list-striped > :nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-list-striped > :nth-of-type(odd), .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-striped > :nth-of-type(odd), .uk-light .uk-list-striped > :nth-of-type(odd), .uk-offcanvas-bar .uk-list-striped > :nth-of-type(odd), .uk-overlay-primary .uk-list-striped > :nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd) {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-list-striped > :nth-of-type(odd), .uk-card-primary > :not([class*=uk-card-media]) .uk-list-striped > :nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-list-striped > :nth-of-type(odd), .uk-card-secondary > :not([class*=uk-card-media]) .uk-list-striped > :nth-of-type(odd), .uk-light .uk-list-striped > :nth-of-type(odd), .uk-offcanvas-bar .uk-list-striped > :nth-of-type(odd), .uk-overlay-primary .uk-list-striped > :nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.uk-card-primary.uk-card-body .uk-table th, .uk-card-primary > :not([class*=uk-card-media]) .uk-table th, .uk-card-secondary.uk-card-body .uk-table th, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table th, .uk-light .uk-table th, .uk-offcanvas-bar .uk-table th, .uk-overlay-primary .uk-table th, .uk-section-primary:not(.uk-preserve-color) .uk-table th, .uk-section-secondary:not(.uk-preserve-color) .uk-table th, .uk-tile-primary:not(.uk-preserve-color) .uk-table th, .uk-tile-secondary:not(.uk-preserve-color) .uk-table th {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-table caption, .uk-card-primary > :not([class*=uk-card-media]) .uk-table caption, .uk-card-secondary.uk-card-body .uk-table caption, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table caption, .uk-light .uk-table caption, .uk-offcanvas-bar .uk-table caption, .uk-overlay-primary .uk-table caption, .uk-section-primary:not(.uk-preserve-color) .uk-table caption, .uk-section-secondary:not(.uk-preserve-color) .uk-table caption, .uk-tile-primary:not(.uk-preserve-color) .uk-table caption, .uk-tile-secondary:not(.uk-preserve-color) .uk-table caption {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-table tbody tr.uk-active, .uk-card-primary.uk-card-body .uk-table > tr.uk-active, .uk-card-primary > :not([class*=uk-card-media]) .uk-table tbody tr.uk-active, .uk-card-primary > :not([class*=uk-card-media]) .uk-table > tr.uk-active, .uk-card-secondary.uk-card-body .uk-table tbody tr.uk-active, .uk-card-secondary.uk-card-body .uk-table > tr.uk-active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table tbody tr.uk-active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table > tr.uk-active, .uk-light .uk-table tbody tr.uk-active, .uk-light .uk-table > tr.uk-active, .uk-offcanvas-bar .uk-table tbody tr.uk-active, .uk-offcanvas-bar .uk-table > tr.uk-active, .uk-overlay-primary .uk-table tbody tr.uk-active, .uk-overlay-primary .uk-table > tr.uk-active, .uk-section-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active, .uk-section-primary:not(.uk-preserve-color) .uk-table > tr.uk-active, .uk-section-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active, .uk-section-secondary:not(.uk-preserve-color) .uk-table > tr.uk-active, .uk-tile-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active, .uk-tile-primary:not(.uk-preserve-color) .uk-table > tr.uk-active, .uk-tile-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active, .uk-tile-secondary:not(.uk-preserve-color) .uk-table > tr.uk-active {
  background: rgba(255, 255, 255, 0.08);
}

.uk-card-primary.uk-card-body .uk-table-divider > :first-child > tr:not(:first-child), .uk-card-primary.uk-card-body .uk-table-divider > :not(:first-child) > tr, .uk-card-primary.uk-card-body .uk-table-divider > tr:not(:first-child), .uk-card-primary > :not([class*=uk-card-media]) .uk-table-divider > :first-child > tr:not(:first-child), .uk-card-primary > :not([class*=uk-card-media]) .uk-table-divider > :not(:first-child) > tr, .uk-card-primary > :not([class*=uk-card-media]) .uk-table-divider > tr:not(:first-child), .uk-card-secondary.uk-card-body .uk-table-divider > :first-child > tr:not(:first-child), .uk-card-secondary.uk-card-body .uk-table-divider > :not(:first-child) > tr, .uk-card-secondary.uk-card-body .uk-table-divider > tr:not(:first-child), .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-divider > :first-child > tr:not(:first-child), .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-divider > :not(:first-child) > tr, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-divider > tr:not(:first-child), .uk-light .uk-table-divider > :first-child > tr:not(:first-child), .uk-light .uk-table-divider > :not(:first-child) > tr, .uk-light .uk-table-divider > tr:not(:first-child), .uk-offcanvas-bar .uk-table-divider > :first-child > tr:not(:first-child), .uk-offcanvas-bar .uk-table-divider > :not(:first-child) > tr, .uk-offcanvas-bar .uk-table-divider > tr:not(:first-child), .uk-overlay-primary .uk-table-divider > :first-child > tr:not(:first-child), .uk-overlay-primary .uk-table-divider > :not(:first-child) > tr, .uk-overlay-primary .uk-table-divider > tr:not(:first-child), .uk-section-primary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child), .uk-section-primary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr, .uk-section-primary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child), .uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child), .uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr, .uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child), .uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child), .uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr, .uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr, .uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-primary.uk-card-body .uk-table-striped > tr:nth-of-type(odd), .uk-card-primary > :not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-primary > :not([class*=uk-card-media]) .uk-table-striped > tr:nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-table-striped > tr:nth-of-type(odd), .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-striped > tr:nth-of-type(odd), .uk-light .uk-table-striped tbody tr:nth-of-type(odd), .uk-light .uk-table-striped > tr:nth-of-type(odd), .uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(odd), .uk-offcanvas-bar .uk-table-striped > tr:nth-of-type(odd), .uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(odd), .uk-overlay-primary .uk-table-striped > tr:nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-table-hover tbody tr:hover, .uk-card-primary.uk-card-body .uk-table-hover > tr:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-table-hover tbody tr:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-table-hover > tr:hover, .uk-card-secondary.uk-card-body .uk-table-hover tbody tr:hover, .uk-card-secondary.uk-card-body .uk-table-hover > tr:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-hover tbody tr:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-hover > tr:hover, .uk-light .uk-table-hover tbody tr:hover, .uk-light .uk-table-hover > tr:hover, .uk-offcanvas-bar .uk-table-hover tbody tr:hover, .uk-offcanvas-bar .uk-table-hover > tr:hover, .uk-overlay-primary .uk-table-hover tbody tr:hover, .uk-overlay-primary .uk-table-hover > tr:hover, .uk-section-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover, .uk-section-primary:not(.uk-preserve-color) .uk-table-hover > tr:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-table-hover > tr:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-table-hover > tr:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover > tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

.uk-card-primary.uk-card-body .uk-icon-link, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-link, .uk-card-secondary.uk-card-body .uk-icon-link, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-link, .uk-light .uk-icon-link, .uk-offcanvas-bar .uk-icon-link, .uk-overlay-primary .uk-icon-link, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-icon-link:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-link:hover, .uk-card-secondary.uk-card-body .uk-icon-link:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-link:hover, .uk-light .uk-icon-link:hover, .uk-offcanvas-bar .uk-icon-link:hover, .uk-overlay-primary .uk-icon-link:hover, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-active > .uk-icon-link, .uk-card-primary.uk-card-body .uk-icon-link:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-active > .uk-icon-link, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-link:active, .uk-card-secondary.uk-card-body .uk-active > .uk-icon-link, .uk-card-secondary.uk-card-body .uk-icon-link:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-active > .uk-icon-link, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-link:active, .uk-light .uk-active > .uk-icon-link, .uk-light .uk-icon-link:active, .uk-offcanvas-bar .uk-active > .uk-icon-link, .uk-offcanvas-bar .uk-icon-link:active, .uk-overlay-primary .uk-active > .uk-icon-link, .uk-overlay-primary .uk-icon-link:active, .uk-section-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link:active, .uk-section-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:active, .uk-tile-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:active {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-icon-button, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-button, .uk-card-secondary.uk-card-body .uk-icon-button, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-button, .uk-light .uk-icon-button, .uk-offcanvas-bar .uk-icon-button, .uk-overlay-primary .uk-icon-button, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-icon-button:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-button:hover, .uk-card-secondary.uk-card-body .uk-icon-button:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-button:hover, .uk-light .uk-icon-button:hover, .uk-offcanvas-bar .uk-icon-button:hover, .uk-overlay-primary .uk-icon-button:hover, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-icon-button:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-icon-button:active, .uk-card-secondary.uk-card-body .uk-icon-button:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-icon-button:active, .uk-light .uk-icon-button:active, .uk-offcanvas-bar .uk-icon-button:active, .uk-overlay-primary .uk-icon-button:active, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button:active, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:active, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:active {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-input, .uk-card-primary.uk-card-body .uk-select, .uk-card-primary.uk-card-body .uk-textarea, .uk-card-primary > :not([class*=uk-card-media]) .uk-input, .uk-card-primary > :not([class*=uk-card-media]) .uk-select, .uk-card-primary > :not([class*=uk-card-media]) .uk-textarea, .uk-card-secondary.uk-card-body .uk-input, .uk-card-secondary.uk-card-body .uk-select, .uk-card-secondary.uk-card-body .uk-textarea, .uk-card-secondary > :not([class*=uk-card-media]) .uk-input, .uk-card-secondary > :not([class*=uk-card-media]) .uk-select, .uk-card-secondary > :not([class*=uk-card-media]) .uk-textarea, .uk-light .uk-input, .uk-light .uk-select, .uk-light .uk-textarea, .uk-offcanvas-bar .uk-input, .uk-offcanvas-bar .uk-select, .uk-offcanvas-bar .uk-textarea, .uk-overlay-primary .uk-input, .uk-overlay-primary .uk-select, .uk-overlay-primary .uk-textarea, .uk-section-primary:not(.uk-preserve-color) .uk-input, .uk-section-primary:not(.uk-preserve-color) .uk-select, .uk-section-primary:not(.uk-preserve-color) .uk-textarea, .uk-section-secondary:not(.uk-preserve-color) .uk-input, .uk-section-secondary:not(.uk-preserve-color) .uk-select, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea, .uk-tile-primary:not(.uk-preserve-color) .uk-input, .uk-tile-primary:not(.uk-preserve-color) .uk-select, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea, .uk-tile-secondary:not(.uk-preserve-color) .uk-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-select, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-input:focus, .uk-card-primary.uk-card-body .uk-select:focus, .uk-card-primary.uk-card-body .uk-textarea:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-input:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-select:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-textarea:focus, .uk-card-secondary.uk-card-body .uk-input:focus, .uk-card-secondary.uk-card-body .uk-select:focus, .uk-card-secondary.uk-card-body .uk-textarea:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-input:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-select:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-textarea:focus, .uk-light .uk-input:focus, .uk-light .uk-select:focus, .uk-light .uk-textarea:focus, .uk-offcanvas-bar .uk-input:focus, .uk-offcanvas-bar .uk-select:focus, .uk-offcanvas-bar .uk-textarea:focus, .uk-overlay-primary .uk-input:focus, .uk-overlay-primary .uk-select:focus, .uk-overlay-primary .uk-textarea:focus, .uk-section-primary:not(.uk-preserve-color) .uk-input:focus, .uk-section-primary:not(.uk-preserve-color) .uk-select:focus, .uk-section-primary:not(.uk-preserve-color) .uk-textarea:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-input:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-select:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-input:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-select:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-input:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-select:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-input::placeholder, .uk-card-primary > :not([class*=uk-card-media]) .uk-input::placeholder, .uk-card-secondary.uk-card-body .uk-input::placeholder, .uk-card-secondary > :not([class*=uk-card-media]) .uk-input::placeholder, .uk-light .uk-input::placeholder, .uk-offcanvas-bar .uk-input::placeholder, .uk-overlay-primary .uk-input::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-textarea::placeholder, .uk-card-primary > :not([class*=uk-card-media]) .uk-textarea::placeholder, .uk-card-secondary.uk-card-body .uk-textarea::placeholder, .uk-card-secondary > :not([class*=uk-card-media]) .uk-textarea::placeholder, .uk-light .uk-textarea::placeholder, .uk-offcanvas-bar .uk-textarea::placeholder, .uk-overlay-primary .uk-textarea::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-select:not([multiple]):not([size]), .uk-card-primary > :not([class*=uk-card-media]) .uk-select:not([multiple]):not([size]), .uk-card-secondary.uk-card-body .uk-select:not([multiple]):not([size]), .uk-card-secondary > :not([class*=uk-card-media]) .uk-select:not([multiple]):not([size]), .uk-light .uk-select:not([multiple]):not([size]), .uk-offcanvas-bar .uk-select:not([multiple]):not([size]), .uk-overlay-primary .uk-select:not([multiple]):not([size]), .uk-section-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-section-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-tile-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-tile-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-card-primary.uk-card-body .uk-input[list]:focus, .uk-card-primary.uk-card-body .uk-input[list]:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-input[list]:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-input[list]:hover, .uk-card-secondary.uk-card-body .uk-input[list]:focus, .uk-card-secondary.uk-card-body .uk-input[list]:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-input[list]:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-input[list]:hover, .uk-light .uk-input[list]:focus, .uk-light .uk-input[list]:hover, .uk-offcanvas-bar .uk-input[list]:focus, .uk-offcanvas-bar .uk-input[list]:hover, .uk-overlay-primary .uk-input[list]:focus, .uk-overlay-primary .uk-input[list]:hover, .uk-section-primary:not(.uk-preserve-color) .uk-input[list]:focus, .uk-section-primary:not(.uk-preserve-color) .uk-input[list]:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:hover {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-card-primary.uk-card-body .uk-checkbox, .uk-card-primary.uk-card-body .uk-radio, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox, .uk-card-primary > :not([class*=uk-card-media]) .uk-radio, .uk-card-secondary.uk-card-body .uk-checkbox, .uk-card-secondary.uk-card-body .uk-radio, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox, .uk-card-secondary > :not([class*=uk-card-media]) .uk-radio, .uk-light .uk-checkbox, .uk-light .uk-radio, .uk-offcanvas-bar .uk-checkbox, .uk-offcanvas-bar .uk-radio, .uk-overlay-primary .uk-checkbox, .uk-overlay-primary .uk-radio, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox, .uk-section-primary:not(.uk-preserve-color) .uk-radio, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox, .uk-section-secondary:not(.uk-preserve-color) .uk-radio, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox, .uk-tile-primary:not(.uk-preserve-color) .uk-radio, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-checkbox:focus, .uk-card-primary.uk-card-body .uk-radio:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-radio:focus, .uk-card-secondary.uk-card-body .uk-checkbox:focus, .uk-card-secondary.uk-card-body .uk-radio:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-radio:focus, .uk-light .uk-checkbox:focus, .uk-light .uk-radio:focus, .uk-offcanvas-bar .uk-checkbox:focus, .uk-offcanvas-bar .uk-radio:focus, .uk-overlay-primary .uk-checkbox:focus, .uk-overlay-primary .uk-radio:focus, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:focus, .uk-section-primary:not(.uk-preserve-color) .uk-radio:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-checkbox:checked, .uk-card-primary.uk-card-body .uk-checkbox:indeterminate, .uk-card-primary.uk-card-body .uk-radio:checked, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:checked, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate, .uk-card-primary > :not([class*=uk-card-media]) .uk-radio:checked, .uk-card-secondary.uk-card-body .uk-checkbox:checked, .uk-card-secondary.uk-card-body .uk-checkbox:indeterminate, .uk-card-secondary.uk-card-body .uk-radio:checked, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:checked, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate, .uk-card-secondary > :not([class*=uk-card-media]) .uk-radio:checked, .uk-light .uk-checkbox:checked, .uk-light .uk-checkbox:indeterminate, .uk-light .uk-radio:checked, .uk-offcanvas-bar .uk-checkbox:checked, .uk-offcanvas-bar .uk-checkbox:indeterminate, .uk-offcanvas-bar .uk-radio:checked, .uk-overlay-primary .uk-checkbox:checked, .uk-overlay-primary .uk-checkbox:indeterminate, .uk-overlay-primary .uk-radio:checked, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked {
  background-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-checkbox:checked:focus, .uk-card-primary.uk-card-body .uk-checkbox:indeterminate:focus, .uk-card-primary.uk-card-body .uk-radio:checked:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:checked:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-radio:checked:focus, .uk-card-secondary.uk-card-body .uk-checkbox:checked:focus, .uk-card-secondary.uk-card-body .uk-checkbox:indeterminate:focus, .uk-card-secondary.uk-card-body .uk-radio:checked:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:checked:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-radio:checked:focus, .uk-light .uk-checkbox:checked:focus, .uk-light .uk-checkbox:indeterminate:focus, .uk-light .uk-radio:checked:focus, .uk-offcanvas-bar .uk-checkbox:checked:focus, .uk-offcanvas-bar .uk-checkbox:indeterminate:focus, .uk-offcanvas-bar .uk-radio:checked:focus, .uk-overlay-primary .uk-checkbox:checked:focus, .uk-overlay-primary .uk-checkbox:indeterminate:focus, .uk-overlay-primary .uk-radio:checked:focus, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked:focus {
  background-color: #fff;
}

.uk-card-primary.uk-card-body .uk-radio:checked, .uk-card-primary > :not([class*=uk-card-media]) .uk-radio:checked, .uk-card-secondary.uk-card-body .uk-radio:checked, .uk-card-secondary > :not([class*=uk-card-media]) .uk-radio:checked, .uk-light .uk-radio:checked, .uk-offcanvas-bar .uk-radio:checked, .uk-overlay-primary .uk-radio:checked, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-checkbox:checked, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:checked, .uk-card-secondary.uk-card-body .uk-checkbox:checked, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:checked, .uk-light .uk-checkbox:checked, .uk-offcanvas-bar .uk-checkbox:checked, .uk-overlay-primary .uk-checkbox:checked, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-card-primary.uk-card-body .uk-checkbox:indeterminate, .uk-card-primary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate, .uk-card-secondary.uk-card-body .uk-checkbox:indeterminate, .uk-card-secondary > :not([class*=uk-card-media]) .uk-checkbox:indeterminate, .uk-light .uk-checkbox:indeterminate, .uk-offcanvas-bar .uk-checkbox:indeterminate, .uk-overlay-primary .uk-checkbox:indeterminate, .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, .uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-form-label, .uk-card-primary > :not([class*=uk-card-media]) .uk-form-label, .uk-card-secondary.uk-card-body .uk-form-label, .uk-card-secondary > :not([class*=uk-card-media]) .uk-form-label, .uk-light .uk-form-label, .uk-offcanvas-bar .uk-form-label, .uk-overlay-primary .uk-form-label, .uk-section-primary:not(.uk-preserve-color) .uk-form-label, .uk-section-secondary:not(.uk-preserve-color) .uk-form-label, .uk-tile-primary:not(.uk-preserve-color) .uk-form-label, .uk-tile-secondary:not(.uk-preserve-color) .uk-form-label {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-form-icon, .uk-card-primary > :not([class*=uk-card-media]) .uk-form-icon, .uk-card-secondary.uk-card-body .uk-form-icon, .uk-card-secondary > :not([class*=uk-card-media]) .uk-form-icon, .uk-light .uk-form-icon, .uk-offcanvas-bar .uk-form-icon, .uk-overlay-primary .uk-form-icon, .uk-section-primary:not(.uk-preserve-color) .uk-form-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-form-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-form-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-form-icon:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-form-icon:hover, .uk-card-secondary.uk-card-body .uk-form-icon:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-form-icon:hover, .uk-light .uk-form-icon:hover, .uk-offcanvas-bar .uk-form-icon:hover, .uk-overlay-primary .uk-form-icon:hover, .uk-section-primary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-button-default, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-default, .uk-card-secondary.uk-card-body .uk-button-default, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default, .uk-light .uk-button-default, .uk-offcanvas-bar .uk-button-default, .uk-overlay-primary .uk-button-default, .uk-section-primary:not(.uk-preserve-color) .uk-button-default, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-button-default:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-default:hover, .uk-card-secondary.uk-card-body .uk-button-default:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default:hover, .uk-light .uk-button-default:hover, .uk-offcanvas-bar .uk-button-default:hover, .uk-overlay-primary .uk-button-default:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-default.uk-active, .uk-card-primary.uk-card-body .uk-button-default:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-default.uk-active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-default:active, .uk-card-secondary.uk-card-body .uk-button-default.uk-active, .uk-card-secondary.uk-card-body .uk-button-default:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default.uk-active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default:active, .uk-light .uk-button-default.uk-active, .uk-light .uk-button-default:active, .uk-offcanvas-bar .uk-button-default.uk-active, .uk-offcanvas-bar .uk-button-default:active, .uk-overlay-primary .uk-button-default.uk-active, .uk-overlay-primary .uk-button-default:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-default.uk-active, .uk-section-primary:not(.uk-preserve-color) .uk-button-default:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default.uk-active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default.uk-active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default.uk-active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:active {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-primary, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-primary, .uk-card-secondary.uk-card-body .uk-button-primary, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-primary, .uk-light .uk-button-primary, .uk-offcanvas-bar .uk-button-primary, .uk-overlay-primary .uk-button-primary, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary {
  background-color: #fff;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-primary:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-primary:hover, .uk-card-secondary.uk-card-body .uk-button-primary:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-primary:hover, .uk-light .uk-button-primary:hover, .uk-offcanvas-bar .uk-button-primary:hover, .uk-overlay-primary .uk-button-primary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover {
  background-color: #f2f2f2;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-primary.uk-active, .uk-card-primary.uk-card-body .uk-button-primary:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-primary.uk-active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-primary:active, .uk-card-secondary.uk-card-body .uk-button-primary.uk-active, .uk-card-secondary.uk-card-body .uk-button-primary:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-primary.uk-active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-primary:active, .uk-light .uk-button-primary.uk-active, .uk-light .uk-button-primary:active, .uk-offcanvas-bar .uk-button-primary.uk-active, .uk-offcanvas-bar .uk-button-primary:active, .uk-overlay-primary .uk-button-primary.uk-active, .uk-overlay-primary .uk-button-primary:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary.uk-active, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary.uk-active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:active {
  background-color: #e6e6e6;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-secondary, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-secondary, .uk-card-secondary.uk-card-body .uk-button-secondary, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-secondary, .uk-light .uk-button-secondary, .uk-offcanvas-bar .uk-button-secondary, .uk-overlay-primary .uk-button-secondary, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary {
  background-color: #fff;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-secondary:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-secondary:hover, .uk-card-secondary.uk-card-body .uk-button-secondary:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-secondary:hover, .uk-light .uk-button-secondary:hover, .uk-offcanvas-bar .uk-button-secondary:hover, .uk-overlay-primary .uk-button-secondary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:hover {
  background-color: #f2f2f2;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-secondary.uk-active, .uk-card-primary.uk-card-body .uk-button-secondary:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-secondary.uk-active, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-secondary:active, .uk-card-secondary.uk-card-body .uk-button-secondary.uk-active, .uk-card-secondary.uk-card-body .uk-button-secondary:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-secondary.uk-active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-secondary:active, .uk-light .uk-button-secondary.uk-active, .uk-light .uk-button-secondary:active, .uk-offcanvas-bar .uk-button-secondary.uk-active, .uk-offcanvas-bar .uk-button-secondary:active, .uk-overlay-primary .uk-button-secondary.uk-active, .uk-overlay-primary .uk-button-secondary:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:active {
  background-color: #e6e6e6;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-button-text, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-text, .uk-card-secondary.uk-card-body .uk-button-text, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-text, .uk-light .uk-button-text, .uk-offcanvas-bar .uk-button-text, .uk-overlay-primary .uk-button-text, .uk-section-primary:not(.uk-preserve-color) .uk-button-text, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-text::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-text::before, .uk-card-secondary.uk-card-body .uk-button-text::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-text::before, .uk-light .uk-button-text::before, .uk-offcanvas-bar .uk-button-text::before, .uk-overlay-primary .uk-button-text::before, .uk-section-primary:not(.uk-preserve-color) .uk-button-text::before, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text::before, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text::before {
  border-bottom-color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-text:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-text:hover, .uk-card-secondary.uk-card-body .uk-button-text:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-text:hover, .uk-light .uk-button-text:hover, .uk-offcanvas-bar .uk-button-text:hover, .uk-overlay-primary .uk-button-text:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-text:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:hover {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-text:disabled, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-text:disabled, .uk-card-secondary.uk-card-body .uk-button-text:disabled, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-text:disabled, .uk-light .uk-button-text:disabled, .uk-offcanvas-bar .uk-button-text:disabled, .uk-overlay-primary .uk-button-text:disabled, .uk-section-primary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:disabled {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-button-link, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-link, .uk-card-secondary.uk-card-body .uk-button-link, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-link, .uk-light .uk-button-link, .uk-offcanvas-bar .uk-button-link, .uk-overlay-primary .uk-button-link, .uk-section-primary:not(.uk-preserve-color) .uk-button-link, .uk-section-secondary:not(.uk-preserve-color) .uk-button-link, .uk-tile-primary:not(.uk-preserve-color) .uk-button-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-link {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-button-link:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-button-link:hover, .uk-card-secondary.uk-card-body .uk-button-link:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-button-link:hover, .uk-light .uk-button-link:hover, .uk-offcanvas-bar .uk-button-link:hover, .uk-overlay-primary .uk-button-link:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-link:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-link:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-link:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-link:hover {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body.uk-card-badge, .uk-card-primary > :not([class*=uk-card-media]).uk-card-badge, .uk-card-secondary.uk-card-body.uk-card-badge, .uk-card-secondary > :not([class*=uk-card-media]).uk-card-badge, .uk-light.uk-card-badge, .uk-offcanvas-bar.uk-card-badge, .uk-overlay-primary.uk-card-badge, .uk-section-primary:not(.uk-preserve-color).uk-card-badge, .uk-section-secondary:not(.uk-preserve-color).uk-card-badge, .uk-tile-primary:not(.uk-preserve-color).uk-card-badge, .uk-tile-secondary:not(.uk-preserve-color).uk-card-badge {
  background-color: #fff;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-close, .uk-card-primary > :not([class*=uk-card-media]) .uk-close, .uk-card-secondary.uk-card-body .uk-close, .uk-card-secondary > :not([class*=uk-card-media]) .uk-close, .uk-light .uk-close, .uk-offcanvas-bar .uk-close, .uk-overlay-primary .uk-close, .uk-section-primary:not(.uk-preserve-color) .uk-close, .uk-section-secondary:not(.uk-preserve-color) .uk-close, .uk-tile-primary:not(.uk-preserve-color) .uk-close, .uk-tile-secondary:not(.uk-preserve-color) .uk-close {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-close:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-close:hover, .uk-card-secondary.uk-card-body .uk-close:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-close:hover, .uk-light .uk-close:hover, .uk-offcanvas-bar .uk-close:hover, .uk-overlay-primary .uk-close:hover, .uk-section-primary:not(.uk-preserve-color) .uk-close:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-close:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-close:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-close:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-totop, .uk-card-primary > :not([class*=uk-card-media]) .uk-totop, .uk-card-secondary.uk-card-body .uk-totop, .uk-card-secondary > :not([class*=uk-card-media]) .uk-totop, .uk-light .uk-totop, .uk-offcanvas-bar .uk-totop, .uk-overlay-primary .uk-totop, .uk-section-primary:not(.uk-preserve-color) .uk-totop, .uk-section-secondary:not(.uk-preserve-color) .uk-totop, .uk-tile-primary:not(.uk-preserve-color) .uk-totop, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-totop:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-totop:hover, .uk-card-secondary.uk-card-body .uk-totop:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-totop:hover, .uk-light .uk-totop:hover, .uk-offcanvas-bar .uk-totop:hover, .uk-overlay-primary .uk-totop:hover, .uk-section-primary:not(.uk-preserve-color) .uk-totop:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-totop:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-totop:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-totop:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-totop:active, .uk-card-secondary.uk-card-body .uk-totop:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-totop:active, .uk-light .uk-totop:active, .uk-offcanvas-bar .uk-totop:active, .uk-overlay-primary .uk-totop:active, .uk-section-primary:not(.uk-preserve-color) .uk-totop:active, .uk-section-secondary:not(.uk-preserve-color) .uk-totop:active, .uk-tile-primary:not(.uk-preserve-color) .uk-totop:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop:active {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-marker, .uk-card-primary > :not([class*=uk-card-media]) .uk-marker, .uk-card-secondary.uk-card-body .uk-marker, .uk-card-secondary > :not([class*=uk-card-media]) .uk-marker, .uk-light .uk-marker, .uk-offcanvas-bar .uk-marker, .uk-overlay-primary .uk-marker, .uk-section-primary:not(.uk-preserve-color) .uk-marker, .uk-section-secondary:not(.uk-preserve-color) .uk-marker, .uk-tile-primary:not(.uk-preserve-color) .uk-marker, .uk-tile-secondary:not(.uk-preserve-color) .uk-marker {
  background: #f8f8f8;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-marker:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-marker:hover, .uk-card-secondary.uk-card-body .uk-marker:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-marker:hover, .uk-light .uk-marker:hover, .uk-offcanvas-bar .uk-marker:hover, .uk-overlay-primary .uk-marker:hover, .uk-section-primary:not(.uk-preserve-color) .uk-marker:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-marker:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-marker:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-marker:hover {
  color: #666;
}

.uk-card-primary.uk-card-body .uk-badge, .uk-card-primary > :not([class*=uk-card-media]) .uk-badge, .uk-card-secondary.uk-card-body .uk-badge, .uk-card-secondary > :not([class*=uk-card-media]) .uk-badge, .uk-light .uk-badge, .uk-offcanvas-bar .uk-badge, .uk-overlay-primary .uk-badge, .uk-section-primary:not(.uk-preserve-color) .uk-badge, .uk-section-secondary:not(.uk-preserve-color) .uk-badge, .uk-tile-primary:not(.uk-preserve-color) .uk-badge, .uk-tile-secondary:not(.uk-preserve-color) .uk-badge {
  background-color: #fff;
  color: #666 !important;
}

.uk-card-primary.uk-card-body .uk-label, .uk-card-primary > :not([class*=uk-card-media]) .uk-label, .uk-card-secondary.uk-card-body .uk-label, .uk-card-secondary > :not([class*=uk-card-media]) .uk-label, .uk-light .uk-label, .uk-offcanvas-bar .uk-label, .uk-overlay-primary .uk-label, .uk-section-primary:not(.uk-preserve-color) .uk-label, .uk-section-secondary:not(.uk-preserve-color) .uk-label, .uk-tile-primary:not(.uk-preserve-color) .uk-label, .uk-tile-secondary:not(.uk-preserve-color) .uk-label {
  background-color: #fff;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-article-meta, .uk-card-primary > :not([class*=uk-card-media]) .uk-article-meta, .uk-card-secondary.uk-card-body .uk-article-meta, .uk-card-secondary > :not([class*=uk-card-media]) .uk-article-meta, .uk-light .uk-article-meta, .uk-offcanvas-bar .uk-article-meta, .uk-overlay-primary .uk-article-meta, .uk-section-primary:not(.uk-preserve-color) .uk-article-meta, .uk-section-secondary:not(.uk-preserve-color) .uk-article-meta, .uk-tile-primary:not(.uk-preserve-color) .uk-article-meta, .uk-tile-secondary:not(.uk-preserve-color) .uk-article-meta {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-search-input, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-input, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-input, .uk-light .uk-search-input, .uk-offcanvas-bar .uk-search-input, .uk-overlay-primary .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-search-input::placeholder, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-input::placeholder, .uk-card-secondary.uk-card-body .uk-search-input::placeholder, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-input::placeholder, .uk-light .uk-search-input::placeholder, .uk-offcanvas-bar .uk-search-input::placeholder, .uk-overlay-primary .uk-search-input::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-search .uk-search-icon, .uk-card-primary > :not([class*=uk-card-media]) .uk-search .uk-search-icon, .uk-card-secondary.uk-card-body .uk-search .uk-search-icon, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search .uk-search-icon, .uk-light .uk-search .uk-search-icon, .uk-offcanvas-bar .uk-search .uk-search-icon, .uk-overlay-primary .uk-search .uk-search-icon, .uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-search .uk-search-icon:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-search .uk-search-icon:hover, .uk-card-secondary.uk-card-body .uk-search .uk-search-icon:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search .uk-search-icon:hover, .uk-light .uk-search .uk-search-icon:hover, .uk-offcanvas-bar .uk-search .uk-search-icon:hover, .uk-overlay-primary .uk-search .uk-search-icon:hover, .uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-search-default .uk-search-input, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-default .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-default .uk-search-input, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-default .uk-search-input, .uk-light .uk-search-default .uk-search-input, .uk-offcanvas-bar .uk-search-default .uk-search-input, .uk-overlay-primary .uk-search-default .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-search-default .uk-search-input:focus, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-default .uk-search-input:focus, .uk-card-secondary.uk-card-body .uk-search-default .uk-search-input:focus, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-default .uk-search-input:focus, .uk-light .uk-search-default .uk-search-input:focus, .uk-offcanvas-bar .uk-search-default .uk-search-input:focus, .uk-overlay-primary .uk-search-default .uk-search-input:focus, .uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

.uk-card-primary.uk-card-body .uk-search-navbar .uk-search-input, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-navbar .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-navbar .uk-search-input, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-navbar .uk-search-input, .uk-light .uk-search-navbar .uk-search-input, .uk-offcanvas-bar .uk-search-navbar .uk-search-input, .uk-overlay-primary .uk-search-navbar .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input {
  background-color: transparent;
}

.uk-card-primary.uk-card-body .uk-search-large .uk-search-input, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-large .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-large .uk-search-input, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-large .uk-search-input, .uk-light .uk-search-large .uk-search-input, .uk-offcanvas-bar .uk-search-large .uk-search-input, .uk-overlay-primary .uk-search-large .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input {
  background-color: transparent;
}

.uk-card-primary.uk-card-body .uk-search-toggle, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-toggle, .uk-card-secondary.uk-card-body .uk-search-toggle, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-toggle, .uk-light .uk-search-toggle, .uk-offcanvas-bar .uk-search-toggle, .uk-overlay-primary .uk-search-toggle, .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle, .uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle, .uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-search-toggle:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-search-toggle:hover, .uk-card-secondary.uk-card-body .uk-search-toggle:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-search-toggle:hover, .uk-light .uk-search-toggle:hover, .uk-offcanvas-bar .uk-search-toggle:hover, .uk-overlay-primary .uk-search-toggle:hover, .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-accordion-title, .uk-card-primary > :not([class*=uk-card-media]) .uk-accordion-title, .uk-card-secondary.uk-card-body .uk-accordion-title, .uk-card-secondary > :not([class*=uk-card-media]) .uk-accordion-title, .uk-light .uk-accordion-title, .uk-offcanvas-bar .uk-accordion-title, .uk-overlay-primary .uk-accordion-title, .uk-section-primary:not(.uk-preserve-color) .uk-accordion-title, .uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title, .uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title, .uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-accordion-title:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-accordion-title:hover, .uk-card-secondary.uk-card-body .uk-accordion-title:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-accordion-title:hover, .uk-light .uk-accordion-title:hover, .uk-offcanvas-bar .uk-accordion-title:hover, .uk-overlay-primary .uk-accordion-title:hover, .uk-section-primary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-grid-divider > :not(.uk-first-column)::before, .uk-light .uk-grid-divider > :not(.uk-first-column)::before, .uk-offcanvas-bar .uk-grid-divider > :not(.uk-first-column)::before, .uk-overlay-primary .uk-grid-divider > :not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-secondary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-light .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-offcanvas-bar .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-overlay-primary .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-section-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-parent-icon > .uk-parent > a::after, .uk-light .uk-nav-parent-icon > .uk-parent > a::after, .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after, .uk-overlay-primary .uk-nav-parent-icon > .uk-parent > a::after, .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-light .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-overlay-primary .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-nav-default > li > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default > li > a, .uk-card-secondary.uk-card-body .uk-nav-default > li > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default > li > a, .uk-light .uk-nav-default > li > a, .uk-offcanvas-bar .uk-nav-default > li > a, .uk-overlay-primary .uk-nav-default > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default > li > a:hover, .uk-card-secondary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default > li > a:hover, .uk-light .uk-nav-default > li > a:hover, .uk-offcanvas-bar .uk-nav-default > li > a:hover, .uk-overlay-primary .uk-nav-default > li > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-nav-default > li.uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-default > li.uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default > li.uk-active > a, .uk-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar .uk-nav-default > li.uk-active > a, .uk-overlay-primary .uk-nav-default > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-header, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-header, .uk-light .uk-nav-default .uk-nav-header, .uk-offcanvas-bar .uk-nav-default .uk-nav-header, .uk-overlay-primary .uk-nav-default .uk-nav-header, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-divider, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-divider, .uk-light .uk-nav-default .uk-nav-divider, .uk-offcanvas-bar .uk-nav-default .uk-nav-divider, .uk-overlay-primary .uk-nav-default .uk-nav-divider, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a, .uk-light .uk-nav-default .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a, .uk-overlay-primary .uk-nav-default .uk-nav-sub a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a:hover, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a:hover, .uk-light .uk-nav-default .uk-nav-sub a:hover, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover, .uk-overlay-primary .uk-nav-default .uk-nav-sub a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-light .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-overlay-primary .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav-primary > li > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary > li > a, .uk-card-secondary.uk-card-body .uk-nav-primary > li > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary > li > a, .uk-light .uk-nav-primary > li > a, .uk-offcanvas-bar .uk-nav-primary > li > a, .uk-overlay-primary .uk-nav-primary > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-nav-primary > li > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary > li > a:hover, .uk-card-secondary.uk-card-body .uk-nav-primary > li > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary > li > a:hover, .uk-light .uk-nav-primary > li > a:hover, .uk-offcanvas-bar .uk-nav-primary > li > a:hover, .uk-overlay-primary .uk-nav-primary > li > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-nav-primary > li.uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-primary > li.uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary > li.uk-active > a, .uk-light .uk-nav-primary > li.uk-active > a, .uk-offcanvas-bar .uk-nav-primary > li.uk-active > a, .uk-overlay-primary .uk-nav-primary > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-header, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-header, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-header, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-header, .uk-light .uk-nav-primary .uk-nav-header, .uk-offcanvas-bar .uk-nav-primary .uk-nav-header, .uk-overlay-primary .uk-nav-primary .uk-nav-header, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-divider, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-divider, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-divider, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-divider, .uk-light .uk-nav-primary .uk-nav-divider, .uk-offcanvas-bar .uk-nav-primary .uk-nav-divider, .uk-overlay-primary .uk-nav-primary .uk-nav-divider, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub a, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub a, .uk-light .uk-nav-primary .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a, .uk-overlay-primary .uk-nav-primary .uk-nav-sub a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub a:hover, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub a:hover, .uk-light .uk-nav-primary .uk-nav-sub a:hover, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a:hover, .uk-overlay-primary .uk-nav-primary .uk-nav-sub a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-light .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-overlay-primary .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-card-primary > :not([class*=uk-card-media]) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-card-secondary.uk-card-body .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-card-secondary > :not([class*=uk-card-media]) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-light .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-offcanvas-bar .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-overlay-primary .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-section-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-section-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-tile-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider), .uk-tile-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-navbar-nav > li > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a, .uk-light .uk-navbar-nav > li > a, .uk-offcanvas-bar .uk-navbar-nav > li > a, .uk-overlay-primary .uk-navbar-nav > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-navbar-nav > li:hover > a, .uk-card-primary.uk-card-body .uk-navbar-nav > li > a[aria-expanded=true], .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-nav > li:hover > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a[aria-expanded=true], .uk-card-secondary.uk-card-body .uk-navbar-nav > li:hover > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li > a[aria-expanded=true], .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-nav > li:hover > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a[aria-expanded=true], .uk-light .uk-navbar-nav > li:hover > a, .uk-light .uk-navbar-nav > li > a[aria-expanded=true], .uk-offcanvas-bar .uk-navbar-nav > li:hover > a, .uk-offcanvas-bar .uk-navbar-nav > li > a[aria-expanded=true], .uk-overlay-primary .uk-navbar-nav > li:hover > a, .uk-overlay-primary .uk-navbar-nav > li > a[aria-expanded=true], .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded=true], .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded=true], .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded=true], .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded=true] {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-navbar-nav > li > a:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a:active, .uk-card-secondary.uk-card-body .uk-navbar-nav > li > a:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-nav > li > a:active, .uk-light .uk-navbar-nav > li > a:active, .uk-offcanvas-bar .uk-navbar-nav > li > a:active, .uk-overlay-primary .uk-navbar-nav > li > a:active, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-navbar-nav > li.uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-nav > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li.uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-nav > li.uk-active > a, .uk-light .uk-navbar-nav > li.uk-active > a, .uk-offcanvas-bar .uk-navbar-nav > li.uk-active > a, .uk-overlay-primary .uk-navbar-nav > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-navbar-item, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-item, .uk-card-secondary.uk-card-body .uk-navbar-item, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-item, .uk-light .uk-navbar-item, .uk-offcanvas-bar .uk-navbar-item, .uk-overlay-primary .uk-navbar-item, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-item, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-item, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-item, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-item {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-navbar-toggle, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-toggle, .uk-card-secondary.uk-card-body .uk-navbar-toggle, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-toggle, .uk-light .uk-navbar-toggle, .uk-offcanvas-bar .uk-navbar-toggle, .uk-overlay-primary .uk-navbar-toggle, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-navbar-toggle:hover, .uk-card-primary.uk-card-body .uk-navbar-toggle[aria-expanded=true], .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-toggle:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-navbar-toggle[aria-expanded=true], .uk-card-secondary.uk-card-body .uk-navbar-toggle:hover, .uk-card-secondary.uk-card-body .uk-navbar-toggle[aria-expanded=true], .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-toggle:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-navbar-toggle[aria-expanded=true], .uk-light .uk-navbar-toggle:hover, .uk-light .uk-navbar-toggle[aria-expanded=true], .uk-offcanvas-bar .uk-navbar-toggle:hover, .uk-offcanvas-bar .uk-navbar-toggle[aria-expanded=true], .uk-overlay-primary .uk-navbar-toggle:hover, .uk-overlay-primary .uk-navbar-toggle[aria-expanded=true], .uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded=true], .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded=true], .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded=true], .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded=true] {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-subnav > * > :first-child, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav > * > :first-child, .uk-card-secondary.uk-card-body .uk-subnav > * > :first-child, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav > * > :first-child, .uk-light .uk-subnav > * > :first-child, .uk-offcanvas-bar .uk-subnav > * > :first-child, .uk-overlay-primary .uk-subnav > * > :first-child, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-subnav > * > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav > * > a:hover, .uk-card-secondary.uk-card-body .uk-subnav > * > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav > * > a:hover, .uk-light .uk-subnav > * > a:hover, .uk-offcanvas-bar .uk-subnav > * > a:hover, .uk-overlay-primary .uk-subnav > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-subnav > .uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav > .uk-active > a, .uk-card-secondary.uk-card-body .uk-subnav > .uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav > .uk-active > a, .uk-light .uk-subnav > .uk-active > a, .uk-offcanvas-bar .uk-subnav > .uk-active > a, .uk-overlay-primary .uk-subnav > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-light .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-offcanvas-bar .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-overlay-primary .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-subnav-pill > * > :first-child, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav-pill > * > :first-child, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > :first-child, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav-pill > * > :first-child, .uk-light .uk-subnav-pill > * > :first-child, .uk-offcanvas-bar .uk-subnav-pill > * > :first-child, .uk-overlay-primary .uk-subnav-pill > * > :first-child, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-subnav-pill > * > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav-pill > * > a:hover, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav-pill > * > a:hover, .uk-light .uk-subnav-pill > * > a:hover, .uk-offcanvas-bar .uk-subnav-pill > * > a:hover, .uk-overlay-primary .uk-subnav-pill > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-subnav-pill > * > a:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav-pill > * > a:active, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav-pill > * > a:active, .uk-light .uk-subnav-pill > * > a:active, .uk-offcanvas-bar .uk-subnav-pill > * > a:active, .uk-overlay-primary .uk-subnav-pill > * > a:active, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-subnav-pill > .uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav-pill > .uk-active > a, .uk-card-secondary.uk-card-body .uk-subnav-pill > .uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav-pill > .uk-active > a, .uk-light .uk-subnav-pill > .uk-active > a, .uk-offcanvas-bar .uk-subnav-pill > .uk-active > a, .uk-overlay-primary .uk-subnav-pill > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a {
  background-color: #fff;
  color: #666;
}

.uk-card-primary.uk-card-body .uk-subnav > .uk-disabled > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-subnav > .uk-disabled > a, .uk-card-secondary.uk-card-body .uk-subnav > .uk-disabled > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-subnav > .uk-disabled > a, .uk-light .uk-subnav > .uk-disabled > a, .uk-offcanvas-bar .uk-subnav > .uk-disabled > a, .uk-overlay-primary .uk-subnav > .uk-disabled > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-breadcrumb > * > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-breadcrumb > * > *, .uk-card-secondary.uk-card-body .uk-breadcrumb > * > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-breadcrumb > * > *, .uk-light .uk-breadcrumb > * > *, .uk-offcanvas-bar .uk-breadcrumb > * > *, .uk-overlay-primary .uk-breadcrumb > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > * {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-breadcrumb > * > :hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-breadcrumb > * > :hover, .uk-card-secondary.uk-card-body .uk-breadcrumb > * > :hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-breadcrumb > * > :hover, .uk-light .uk-breadcrumb > * > :hover, .uk-offcanvas-bar .uk-breadcrumb > * > :hover, .uk-overlay-primary .uk-breadcrumb > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-breadcrumb > :last-child > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-breadcrumb > :last-child > *, .uk-card-secondary.uk-card-body .uk-breadcrumb > :last-child > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-breadcrumb > :last-child > *, .uk-light .uk-breadcrumb > :last-child > *, .uk-offcanvas-bar .uk-breadcrumb > :last-child > *, .uk-overlay-primary .uk-breadcrumb > :last-child > *, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > * {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-light .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-offcanvas-bar .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-overlay-primary .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-pagination > * > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-pagination > * > *, .uk-card-secondary.uk-card-body .uk-pagination > * > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-pagination > * > *, .uk-light .uk-pagination > * > *, .uk-offcanvas-bar .uk-pagination > * > *, .uk-overlay-primary .uk-pagination > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > * {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-pagination > * > :hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-pagination > * > :hover, .uk-card-secondary.uk-card-body .uk-pagination > * > :hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-pagination > * > :hover, .uk-light .uk-pagination > * > :hover, .uk-offcanvas-bar .uk-pagination > * > :hover, .uk-overlay-primary .uk-pagination > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-pagination > .uk-active > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-pagination > .uk-active > *, .uk-card-secondary.uk-card-body .uk-pagination > .uk-active > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-pagination > .uk-active > *, .uk-light .uk-pagination > .uk-active > *, .uk-offcanvas-bar .uk-pagination > .uk-active > *, .uk-overlay-primary .uk-pagination > .uk-active > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > * {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-pagination > .uk-disabled > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-pagination > .uk-disabled > *, .uk-card-secondary.uk-card-body .uk-pagination > .uk-disabled > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-pagination > .uk-disabled > *, .uk-light .uk-pagination > .uk-disabled > *, .uk-offcanvas-bar .uk-pagination > .uk-disabled > *, .uk-overlay-primary .uk-pagination > .uk-disabled > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > * {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-tab::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-tab::before, .uk-card-secondary.uk-card-body .uk-tab::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-tab::before, .uk-light .uk-tab::before, .uk-offcanvas-bar .uk-tab::before, .uk-overlay-primary .uk-tab::before, .uk-section-primary:not(.uk-preserve-color) .uk-tab::before, .uk-section-secondary:not(.uk-preserve-color) .uk-tab::before, .uk-tile-primary:not(.uk-preserve-color) .uk-tab::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab::before {
  border-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-tab > * > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-tab > * > a, .uk-card-secondary.uk-card-body .uk-tab > * > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-tab > * > a, .uk-light .uk-tab > * > a, .uk-offcanvas-bar .uk-tab > * > a, .uk-overlay-primary .uk-tab > * > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-tab > * > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-tab > * > a:hover, .uk-card-secondary.uk-card-body .uk-tab > * > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-tab > * > a:hover, .uk-light .uk-tab > * > a:hover, .uk-offcanvas-bar .uk-tab > * > a:hover, .uk-overlay-primary .uk-tab > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-tab > .uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-tab > .uk-active > a, .uk-card-secondary.uk-card-body .uk-tab > .uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-tab > .uk-active > a, .uk-light .uk-tab > .uk-active > a, .uk-offcanvas-bar .uk-tab > .uk-active > a, .uk-overlay-primary .uk-tab > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a {
  color: #fff;
  border-color: #fff;
}

.uk-card-primary.uk-card-body .uk-tab > .uk-disabled > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-tab > .uk-disabled > a, .uk-card-secondary.uk-card-body .uk-tab > .uk-disabled > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-tab > .uk-disabled > a, .uk-light .uk-tab > .uk-disabled > a, .uk-offcanvas-bar .uk-tab > .uk-disabled > a, .uk-overlay-primary .uk-tab > .uk-disabled > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-slidenav, .uk-card-primary > :not([class*=uk-card-media]) .uk-slidenav, .uk-card-secondary.uk-card-body .uk-slidenav, .uk-card-secondary > :not([class*=uk-card-media]) .uk-slidenav, .uk-light .uk-slidenav, .uk-offcanvas-bar .uk-slidenav, .uk-overlay-primary .uk-slidenav, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-slidenav:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-slidenav:hover, .uk-card-secondary.uk-card-body .uk-slidenav:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-slidenav:hover, .uk-light .uk-slidenav:hover, .uk-offcanvas-bar .uk-slidenav:hover, .uk-overlay-primary .uk-slidenav:hover, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:hover {
  color: rgba(255, 255, 255, 0.95);
}

.uk-card-primary.uk-card-body .uk-slidenav:active, .uk-card-primary > :not([class*=uk-card-media]) .uk-slidenav:active, .uk-card-secondary.uk-card-body .uk-slidenav:active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-slidenav:active, .uk-light .uk-slidenav:active, .uk-offcanvas-bar .uk-slidenav:active, .uk-overlay-primary .uk-slidenav:active, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:active, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:active, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:active {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-dotnav > * > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-dotnav > * > *, .uk-card-secondary.uk-card-body .uk-dotnav > * > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-dotnav > * > *, .uk-light .uk-dotnav > * > *, .uk-offcanvas-bar .uk-dotnav > * > *, .uk-overlay-primary .uk-dotnav > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > * {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.9);
}

.uk-card-primary.uk-card-body .uk-dotnav > * > :hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-dotnav > * > :hover, .uk-card-secondary.uk-card-body .uk-dotnav > * > :hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-dotnav > * > :hover, .uk-light .uk-dotnav > * > :hover, .uk-offcanvas-bar .uk-dotnav > * > :hover, .uk-overlay-primary .uk-dotnav > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

.uk-card-primary.uk-card-body .uk-dotnav > * > :active, .uk-card-primary > :not([class*=uk-card-media]) .uk-dotnav > * > :active, .uk-card-secondary.uk-card-body .uk-dotnav > * > :active, .uk-card-secondary > :not([class*=uk-card-media]) .uk-dotnav > * > :active, .uk-light .uk-dotnav > * > :active, .uk-offcanvas-bar .uk-dotnav > * > :active, .uk-overlay-primary .uk-dotnav > * > :active, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}

.uk-card-primary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-primary > :not([class*=uk-card-media]) .uk-dotnav > .uk-active > *, .uk-card-secondary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-secondary > :not([class*=uk-card-media]) .uk-dotnav > .uk-active > *, .uk-light .uk-dotnav > .uk-active > *, .uk-offcanvas-bar .uk-dotnav > .uk-active > *, .uk-overlay-primary .uk-dotnav > .uk-active > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > * {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

.uk-card-primary.uk-card-body .uk-iconnav > * > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-iconnav > * > a, .uk-card-secondary.uk-card-body .uk-iconnav > * > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-iconnav > * > a, .uk-light .uk-iconnav > * > a, .uk-offcanvas-bar .uk-iconnav > * > a, .uk-overlay-primary .uk-iconnav > * > a, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-iconnav > * > a:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-iconnav > * > a:hover, .uk-card-secondary.uk-card-body .uk-iconnav > * > a:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-iconnav > * > a:hover, .uk-light .uk-iconnav > * > a:hover, .uk-offcanvas-bar .uk-iconnav > * > a:hover, .uk-overlay-primary .uk-iconnav > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-iconnav > .uk-active > a, .uk-card-primary > :not([class*=uk-card-media]) .uk-iconnav > .uk-active > a, .uk-card-secondary.uk-card-body .uk-iconnav > .uk-active > a, .uk-card-secondary > :not([class*=uk-card-media]) .uk-iconnav > .uk-active > a, .uk-light .uk-iconnav > .uk-active > a, .uk-offcanvas-bar .uk-iconnav > .uk-active > a, .uk-overlay-primary .uk-iconnav > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-text-lead, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-lead, .uk-card-secondary.uk-card-body .uk-text-lead, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-lead, .uk-light .uk-text-lead, .uk-offcanvas-bar .uk-text-lead, .uk-overlay-primary .uk-text-lead, .uk-section-primary:not(.uk-preserve-color) .uk-text-lead, .uk-section-secondary:not(.uk-preserve-color) .uk-text-lead, .uk-tile-primary:not(.uk-preserve-color) .uk-text-lead, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-lead {
  color: rgba(255, 255, 255, 0.7);
}

.uk-card-primary.uk-card-body .uk-text-meta, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-meta, .uk-card-secondary.uk-card-body .uk-text-meta, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-meta, .uk-light .uk-text-meta, .uk-offcanvas-bar .uk-text-meta, .uk-overlay-primary .uk-text-meta, .uk-section-primary:not(.uk-preserve-color) .uk-text-meta, .uk-section-secondary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-primary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-meta {
  color: rgba(255, 255, 255, 0.5);
}

.uk-card-primary.uk-card-body .uk-text-muted, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-muted, .uk-card-secondary.uk-card-body .uk-text-muted, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-muted, .uk-light .uk-text-muted, .uk-offcanvas-bar .uk-text-muted, .uk-overlay-primary .uk-text-muted, .uk-section-primary:not(.uk-preserve-color) .uk-text-muted, .uk-section-secondary:not(.uk-preserve-color) .uk-text-muted, .uk-tile-primary:not(.uk-preserve-color) .uk-text-muted, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

.uk-card-primary.uk-card-body .uk-text-emphasis, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-emphasis, .uk-card-secondary.uk-card-body .uk-text-emphasis, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-emphasis, .uk-light .uk-text-emphasis, .uk-offcanvas-bar .uk-text-emphasis, .uk-overlay-primary .uk-text-emphasis, .uk-section-primary:not(.uk-preserve-color) .uk-text-emphasis, .uk-section-secondary:not(.uk-preserve-color) .uk-text-emphasis, .uk-tile-primary:not(.uk-preserve-color) .uk-text-emphasis, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-emphasis {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-text-primary, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-primary, .uk-card-secondary.uk-card-body .uk-text-primary, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-primary, .uk-light .uk-text-primary, .uk-offcanvas-bar .uk-text-primary, .uk-overlay-primary .uk-text-primary, .uk-section-primary:not(.uk-preserve-color) .uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-text-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-primary {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-text-secondary, .uk-card-primary > :not([class*=uk-card-media]) .uk-text-secondary, .uk-card-secondary.uk-card-body .uk-text-secondary, .uk-card-secondary > :not([class*=uk-card-media]) .uk-text-secondary, .uk-light .uk-text-secondary, .uk-offcanvas-bar .uk-text-secondary, .uk-overlay-primary .uk-text-secondary, .uk-section-primary:not(.uk-preserve-color) .uk-text-secondary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-secondary, .uk-tile-primary:not(.uk-preserve-color) .uk-text-secondary, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-secondary {
  color: #fff !important;
}

.uk-card-primary.uk-card-body .uk-column-divider, .uk-card-primary > :not([class*=uk-card-media]) .uk-column-divider, .uk-card-secondary.uk-card-body .uk-column-divider, .uk-card-secondary > :not([class*=uk-card-media]) .uk-column-divider, .uk-light .uk-column-divider, .uk-offcanvas-bar .uk-column-divider, .uk-overlay-primary .uk-column-divider, .uk-section-primary:not(.uk-preserve-color) .uk-column-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-column-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-column-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-column-divider {
  column-rule-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-logo, .uk-card-primary > :not([class*=uk-card-media]) .uk-logo, .uk-card-secondary.uk-card-body .uk-logo, .uk-card-secondary > :not([class*=uk-card-media]) .uk-logo, .uk-light .uk-logo, .uk-offcanvas-bar .uk-logo, .uk-overlay-primary .uk-logo, .uk-section-primary:not(.uk-preserve-color) .uk-logo, .uk-section-secondary:not(.uk-preserve-color) .uk-logo, .uk-tile-primary:not(.uk-preserve-color) .uk-logo, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-logo:hover, .uk-card-primary > :not([class*=uk-card-media]) .uk-logo:hover, .uk-card-secondary.uk-card-body .uk-logo:hover, .uk-card-secondary > :not([class*=uk-card-media]) .uk-logo:hover, .uk-light .uk-logo:hover, .uk-offcanvas-bar .uk-logo:hover, .uk-overlay-primary .uk-logo:hover, .uk-section-primary:not(.uk-preserve-color) .uk-logo:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-logo:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-logo:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo:hover {
  color: #fff;
}

.uk-card-primary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-primary > :not([class*=uk-card-media]) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-secondary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-secondary > :not([class*=uk-card-media]) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-light .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-offcanvas-bar .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-overlay-primary .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) {
  display: none;
}

.uk-card-primary.uk-card-body .uk-logo-inverse, .uk-card-primary > :not([class*=uk-card-media]) .uk-logo-inverse, .uk-card-secondary.uk-card-body .uk-logo-inverse, .uk-card-secondary > :not([class*=uk-card-media]) .uk-logo-inverse, .uk-light .uk-logo-inverse, .uk-offcanvas-bar .uk-logo-inverse, .uk-overlay-primary .uk-logo-inverse, .uk-section-primary:not(.uk-preserve-color) .uk-logo-inverse, .uk-section-secondary:not(.uk-preserve-color) .uk-logo-inverse, .uk-tile-primary:not(.uk-preserve-color) .uk-logo-inverse, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo-inverse {
  display: block;
}

.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-card-primary.uk-card-body .uk-table-striped > tr:nth-of-type(even):last-child, .uk-card-primary > :not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-card-primary > :not([class*=uk-card-media]) .uk-table-striped > tr:nth-of-type(even):last-child, .uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-card-secondary.uk-card-body .uk-table-striped > tr:nth-of-type(even):last-child, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-card-secondary > :not([class*=uk-card-media]) .uk-table-striped > tr:nth-of-type(even):last-child, .uk-light .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-light .uk-table-striped > tr:nth-of-type(even):last-child, .uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-offcanvas-bar .uk-table-striped > tr:nth-of-type(even):last-child, .uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-overlay-primary .uk-table-striped > tr:nth-of-type(even):last-child, .uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-section-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child, .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child, .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-card-primary.uk-card-body .uk-accordion-title::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-accordion-title::before, .uk-card-secondary.uk-card-body .uk-accordion-title::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-accordion-title::before, .uk-light .uk-accordion-title::before, .uk-offcanvas-bar .uk-accordion-title::before, .uk-overlay-primary .uk-accordion-title::before, .uk-section-primary:not(.uk-preserve-color) .uk-accordion-title::before, .uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title::before, .uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-card-primary.uk-card-body .uk-open > .uk-accordion-title::before, .uk-card-primary > :not([class*=uk-card-media]) .uk-open > .uk-accordion-title::before, .uk-card-secondary.uk-card-body .uk-open > .uk-accordion-title::before, .uk-card-secondary > :not([class*=uk-card-media]) .uk-open > .uk-accordion-title::before, .uk-light .uk-open > .uk-accordion-title::before, .uk-offcanvas-bar .uk-open > .uk-accordion-title::before, .uk-overlay-primary .uk-open > .uk-accordion-title::before, .uk-section-primary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before, .uk-section-secondary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before, .uk-tile-primary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

@media print {
  *, ::after, ::before {
    background: 0 0 !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  blockquote, pre {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  img, tr {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  h2, h3, p {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }
}
/*
*
*
* カラー変数定義
*
*
*/
/*** CHANGE全体共通カラー ***/
/*** 発電所一覧 ***/
/*** グリーンワット ***/
/*** ANA ***/
/*** JAL ***/
/*** SNS ***/
/****** APF ******/
/*
 *
 * CHANGE 全体共通CSS
 *
 */
/*---------- 基本 ----------*/
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  font-weight: 500;
  color: #333333;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  /*font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", system-ui, sans-serif;*/
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

h1 {
  color: #ffffff;
}

h1,
h2,
h3 {
  font-weight: bold;
}

b,
strong {
  font-weight: bold;
}

ul,
ol {
  list-style: none;
}

ol.order-list {
  list-style: decimal;
  padding-left: 1.3em;
}

.original-list {
  list-style: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.disc-list {
  list-style: disc;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.uk-table th,
.uk-description-list > dt {
  text-transform: none;
}

/*---------- コンテンツ枠 ----------*/
#main {
  margin-top: 2em;
  margin-bottom: 2em;
}

.container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.container-w {
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
}

.wrap-960 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.wrap-880 {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

.wrap-800 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.wrap-560 {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

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

.flex-content2 {
  width: 49%;
  align-self: center;
  margin: 20px 0;
}

.flex-reverse {
  flex-direction: row-reverse;
}

@media screen and (max-width: 640px) {
  .flex-content2 {
    width: 100% !important;
  }
}
/*---------- endコンテンツ枠 ----------*/
/*---------- コンテンツ余白 ----------*/
.padding-l {
  padding: 80px 0;
}

.padding-m {
  padding: 40px 0;
}

.padding-s {
  padding: 20px;
}

@media screen and (max-width: 640px) {
  .padding-l {
    padding: 40px 0;
  }

  .padding-m {
    padding: 20px 0;
  }

  .padding-s {
    padding: 10px;
  }
}
/*---------- endコンテンツ余白 ----------*/
pointtail {
  font-size: 50%;
}

.pointtail {
  display: inline;
  font-size: 50%;
}

input[readonly],
input[readonly]:focus {
  background-color: #ccc;
}

input:-moz-read-only {
  background-color: #ccc;
}

a,
button {
  cursor: pointer;
}

.notes1 {
  position: relative;
  padding-left: 1.5em;
}

.notes2 {
  position: relative;
  padding-left: 2.5em;
}

.notes-span {
  position: absolute;
  top: 0;
  left: 0;
}

.note-gray {
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  color: #666666;
  padding: 20px;
}

/* 銀振り待ち */
.note-bank {
  border: solid 2px #FFA41C;
  background-color: #fdf1dc;
  color: #666666;
}

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/*---------- end基本 ----------*/
/*---------- テキスト・装飾 ----------*/
.font-s {
  font-size: 0.8em;
}

.font-m {
  font-size: 1.3em;
}

.font-l {
  font-size: 1.8em;
}

.marker-yellow {
  background: linear-gradient(transparent 65%, #fff100 0%);
  padding-bottom: 5px;
  font-weight: bold;
}

.font-main {
  color: #0095ff;
}

.font-text {
  color: #333333;
}

.font-main2 {
  color: #0055b2;
}

.font-navy {
  color: #002d7f;
}

.font-error {
  color: #e20000;
}

.font-white {
  color: #ffffff;
}

.font-muted {
  color: #666666;
}

.word-wrap {
  white-space: nowrap;
}

sub.co2-sub {
  bottom: 0;
}

.font-attention {
  max-width: 500px;
  width: 100%;
  margin: 0 auto 40px;
  border: solid 2px #0086ff;
  border-radius: 3px;
  padding: 8px;
  background-color: #fff;
}
.font-attention img {
  width: 14px;
  margin-bottom: 4px;
}

/*---------- endテキスト・装飾 ----------*/
/*---------- aタグ ----------*/
a:hover {
  text-decoration: none;
  opacity: 0.7;
}

a.underline {
  text-decoration: underline;
}

a.icon-tri {
  position: relative;
}
a.icon-tri:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #0095ff;
  display: inline-block;
  margin-right: 5px;
}

a.icon-tri-wh:before {
  border-color: transparent transparent transparent #ffffff;
}

.anchor-shadow {
  display: block;
  padding: 4px;
  cursor: pointer;
}
.anchor-shadow img {
  box-shadow: 1px 1px 4px #999999;
}

a.shadow {
  box-shadow: 1px 1px 4px #999999;
}

/*---------- パンくず ----------*/
.breadcrumb {
  color: #333333;
  padding: 0;
  font-size: 0.8em;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: #333333;
  text-decoration: underline;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb li:after {
  content: ">";
  display: inline-block;
  margin: 0 3px;
}
.breadcrumb li:first-child img {
  width: 1em;
  vertical-align: text-bottom;
}
.breadcrumb li:last-child:after {
  content: none;
}

/*---------- 背景 ----------*/
.bg-b1 {
  background-color: #f5f9ff;
}

.bg-wh {
  background-color: #ffffff;
}

.bg-black {
  background-color: #282828;
  color: #ffffff;
}

.shadow-wrap {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

/*---------- 見出し ----------*/
h1#mv-title {
  width: 100%;
  height: 220px;
  color: #ffffff;
  margin: 0 auto 20px !important;
  text-align: center;
}

.h-left-blue {
  border-left: 5px solid #0095ff;
  padding-left: 10px;
}

.h-left-red {
  border-left: 5px solid #e20000;
  padding-left: 10px;
}

.h-left-white {
  border-left: 5px solid #ffffff;
  padding-left: 10px;
}

.h-bottom-blue {
  text-align: center;
  display: block;
}

.h-bottom-blue:after {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background-color: #0095ff;
  margin: 5px auto 10px;
}

.h-bottom-blue-left {
  display: block;
}

.h-bottom-blue-left:after {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background-color: #0095ff;
  margin: 5px 0 10px;
}

.h-top-blue {
  text-align: center;
  display: block;
}

.h-top-blue:before {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background-color: #0095ff;
  margin: 5px auto 10px;
}

.h-bottom-white {
  text-align: center;
  display: block;
}

.h-bottom-white:after {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background-color: #ffffff;
  margin: 5px auto 10px;
}

/*---------- ボタン ----------*/
button {
  border-width: 0;
}

/** ボタンサイズ **/
.btn-s,
.btn-m,
.btn-l {
  display: inline-block;
  text-align: center;
  width: 100%;
  font-weight: bold;
  font-size: 1em;
  position: relative;
  cursor: pointer;
}

.btn-s {
  border-radius: 20px;
  padding: 6px;
  max-width: 120px;
}
.btn-s span {
  position: absolute;
  right: 0.2em;
  padding-top: 3px;
}
.btn-s.font-s {
  font-size: 0.8em;
}

.btn-m {
  border-radius: 25px;
  padding: 8px;
  max-width: 220px;
}
.btn-m span {
  position: absolute;
  right: 0.2em;
  padding-top: 3px;
}
.btn-m .icon-left {
  position: absolute;
  left: 0.5em;
  right: auto;
}

.btn-l {
  border-radius: 24px;
  padding: 10px;
  max-width: 280px;
}
.btn-l span {
  position: absolute;
  right: 1em;
  padding-top: 3px;
}
.btn-l .icon-left {
  position: absolute;
  left: 1em;
  right: auto;
}

/* ソーシャルログイン */
.btn-social .icon-social {
  right: auto;
}
.btn-social .icon-chevron {
  right: 1em;
}

.btn-light {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  padding-left: 20px;
}
.btn-light .icon-social {
  top: 4px;
  left: 2px;
  width: 38px;
  height: 38px;
}
.btn-light:hover {
  color: #000000;
  opacity: 0.5;
}

.btn-line {
  background-color: #06c755;
  color: #ffffff !important;
  padding-left: 20px;
}
.btn-line .icon-social {
  top: 4px;
  left: 2px;
  width: 38px;
  height: 38px;
}
.btn-line:hover {
  color: #ffffff;
  opacity: 0.9;
}

/** コンバージョンボタン **/
.btn-cv {
  color: #ffffff;
  background-color: #FFA41C;
  border: 1px solid #FF8F00;
}
.btn-cv:hover {
  background-color: #FA8900;
  color: #ffffff;
  border: 1px solid #E3931E;
  opacity: 1;
}

.btn-cv-secondary {
  color: #FFA41C;
  border: solid 1px #FFA41C;
  background-color: white;
}
.btn-cv-secondary:hover {
  background-color: #FFA41C;
  color: white;
  opacity: 1;
}

/** リンクボタン **/
.btn-main {
  background-color: #0095ff;
  color: #ffffff;
  border: 1px solid #0095ff;
}
.btn-main:hover {
  background-color: #ffffff;
  color: #0095ff;
  border: 1px solid #0095ff;
  opacity: 1;
}

.btn-main2 {
  border: 1px solid #0095ff;
  color: #0095ff;
  background-color: #ffffff;
}
.btn-main2:hover {
  border: 1px solid #0095ff;
  background-color: #f5f9ff;
  opacity: 1;
}
.btn-main2:hover a {
  color: #ffffff;
}

.btn-trp {
  color: #ffffff;
  border: 1px solid #ffffff;
}

.btn-lp {
  max-width: 520px;
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 35px;
  padding: 12px;
  box-shadow: 1px 1px 4px #999999;
}

.btn-black {
  border: 1px solid #000000;
  color: #000000;
  background-color: #ffffff;
}

.btn-back {
  color: #666666;
  background-color: #dddddd;
  border: 1px solid #dddddd;
}
.btn-back:hover {
  background-color: #ffffff;
  color: #666666;
  border: 1px solid #666666;
  opacity: 1;
}

.btn-disable {
  color: #dddddd;
  border: 1px solid #dddddd;
  cursor: default;
}

.btn-center2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-center2 .btn-m {
  margin: 0 20px 20px;
}

/* 数量入力ボタン */
.button-sum {
  background-color: #999999;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.3em;
}

/* 数量入力ボタン(MAX) */
.button-max {
  background-color: #ffae00;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.3em;
}

.js-toggle-button-group button {
  background-color: #dddddd;
  color: #333333;
  font-weight: bold;
}
.js-toggle-button-group .active {
  background-color: #0095ff;
  color: #ffffff;
}
.js-toggle-button-group .active:focus {
  background-color: #0095ff;
  color: #ffffff;
}

/*---------- endボタン ----------*/
/*---------- フォーム ----------*/
#mail_form form h2 {
  margin-bottom: 0;
}

.label-block {
  display: block;
  cursor: pointer;
  padding: 20px;
}

#cv-btn {
  margin-bottom: 15px;
}
#cv-btn .cv-text {
  color: #FFA41C;
  font-size: 0.9em;
}
#cv-btn .regist-wrap {
  max-width: 800px;
}

.account-divide {
  text-align: center;
  position: relative;
  color: #333333;
}
.account-divide::before, .account-divide::after {
  border-bottom: 1px solid #333333;
  content: "";
  position: absolute;
  top: 0.2em;
  height: 0.5em;
  width: calc(50% - 4em);
}
.account-divide::before {
  left: 0;
}
.account-divide::after {
  right: 0;
}

/*---------- endフォーム ----------*/
/*---------- リスト ----------*/
dl dd {
  text-align: right;
}

/*---------- youtube動画埋め込み ----------*/
.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /*aspect-ratio: 16 / 9;*/
}
.youtube-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*---------- 吹き出し ----------*/
.db-balloon {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5em;
  padding: 15px 0;
  width: 100%;
  color: #555;
  font-size: 16px;
  border-radius: 3px 3px 0 0;
}

.db-balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
}

.db-balloon p {
  margin: 0;
  padding: 0;
  color: #ffffff;
}

.db-red {
  background-color: #e20000;
}

.db-red:before {
  border-top: 15px solid #e20000;
}

.db-blue {
  background-color: #0095ff;
}

.db-blue:before {
  border-top: 15px solid #0095ff;
}

.db-green {
  background-color: #50cf96;
}

.db-green:before {
  border-top: 15px solid #50cf96;
}

/*---------- end吹き出し ----------*/
/*---------- ヘッダ ----------*/
header {
  width: 100% !important;
  font-size: 14px;
  position: relative;
}
header .hd-sp {
  display: none;
}
header .hd-note {
  text-align: center;
}
header #ie-user {
  display: none;
  background-color: #ffd7d7;
  color: #e20000;
  padding: 10px;
}
header [class^=btn-] img,
header [class^=btn-] svg,
header [class*=btn-] img,
header [class*=btn-] svg {
  height: 1.2em;
}
header #hd-apf {
  position: relative;
  padding-bottom: 4px;
}
header #hd-apf::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  margin: auto;
}
header #hd-apf .container {
  padding-top: 8px;
  padding-bottom: 8px;
}
header #hd-apf #apf-logo {
  color: #231815;
}
header #hd-apf #apf-logo img {
  max-width: 120px;
  width: 100%;
}
header #hd-apf .hd-apf-right {
  max-width: 350px;
  width: 32%;
  align-items: center;
}
header #hd-apf .hd-apf-right #hd-search-open {
  max-width: 35px;
  width: 100%;
  height: 35px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: white;
  border: solid 1px #231815;
  border-radius: 20px;
}
header #hd-apf .hd-apf-right #hd-search-open .icon-search {
  padding: 7px;
}
header #hd-apf .hd-apf-right #hd-search-open .icon-search svg {
  color: #231815;
}
header #hd-apf .hd-apf-right #hd-search-open:hover {
  background-color: #231815;
  border: solid 1px #231815;
  opacity: 0.7;
}
header #hd-apf .hd-apf-right #hd-search-open:hover .icon-search svg {
  color: white;
}
header #hd-apf .hd-apf-left {
  flex: 1;
}
header #hd-apf .hd-apf-center {
  max-width: 165px;
  min-width: 100px;
  width: 20%;
}
header #hd-apf .btn-s span {
  position: initial;
}
header #hd-apf .btn-hd-primary {
  color: #231815;
  background-color: white;
  border: solid 1px #231815;
}
header #hd-apf .btn-hd-primary .cls-1 {
  fill: #231815;
}
header #hd-apf .btn-hd-primary:hover {
  background-color: #231815;
  color: white;
}
header #hd-apf .btn-hd-primary:hover .cls-1 {
  fill: white;
}
header #hd-apf .btn-back .cls-1 {
  fill: #666666;
}
header #hd-top {
  padding-top: 16px;
  padding-bottom: 16px;
}
header #hd-top #hd-logo {
  max-width: 260px;
  width: 100%;
  margin: 0;
}
header #hd-btn {
  margin: 0 0 0 auto;
  flex: 1;
}
header #hd-btn .btn-ss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 50%;
  margin-left: 4px;
}
header #hd-btn .btn-ss.btn-mypage {
  max-width: 60px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 24px;
}
header #hd-btn .btn-ss.btn-mypage img {
  width: 30px;
  height: auto;
}
header #hd-btn .btn-ss img,
header #hd-btn .btn-ss svg {
  height: 1.3em;
}

header.uk-sticky.uk-active {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

header.activate-hd #hd-top {
  margin-bottom: 0;
  border-bottom: none;
}

header#change-hd {
  background-color: #0095ff;
  color: #ffffff;
}
header#change-hd .message-notify {
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 2px;
  left: 20px;
}
header#change-hd .container {
  overflow: visible;
}
header#change-hd #hd-top {
  overflow: hidden;
}
header#change-hd nav {
  border-top: 1px solid #ffffff;
  padding: 10px 0;
}
header#change-hd nav #g-menu {
  width: 100%;
  max-width: 1100px;
  position: relative;
}
header#change-hd nav li {
  margin: 0 0 0 1.5em !important;
  padding-left: 0 !important;
  float: left;
}
header#change-hd nav li a {
  color: #ffffff !important;
}
header#change-hd nav li:first-child {
  margin: 0 !important;
  padding: 0 !important;
}
header#change-hd nav li.menu-contact {
  position: absolute;
  right: 0;
}
header#change-hd nav .sub-menu {
  background-color: #0055b2;
  padding: 10px;
}
header#change-hd nav .sub-menu ul {
  background-color: #ffffff;
}
header#change-hd nav .sub-menu ul li {
  margin: 0 !important;
  border-top: 1px solid #0055b2;
  float: none;
}
header#change-hd nav .sub-menu ul li a {
  padding: 5px;
  color: #0055b2 !important;
}

#sp-menu-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #333333;
  top: 0;
  right: -100%;
  z-index: 1000;
  overflow-y: auto;
  transition: all 0.6s ease;
}
#sp-menu-wrap.active {
  visibility: hidden;
  right: 0;
}
#sp-menu-wrap #sp-menu-close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  color: #ffffff;
  z-index: 1001;
}
#sp-menu-wrap #spmenu-content {
  max-width: 400px;
  margin: 0 auto;
}
#sp-menu-wrap ul li a {
  display: block;
  border-bottom: solid 1px #ffffff;
  padding: 8px 0;
  color: white;
}
#sp-menu-wrap ul .sp-menu-sub a {
  font-size: 0.8em;
  border-bottom: none;
  padding: 5px 0;
}
#sp-menu-wrap ul .sp-menu-sub #sp-search-wrap a {
  display: inline;
  border-bottom: none;
  padding: 0;
}
#sp-menu-wrap #mypage-menu {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
}
#sp-menu-wrap #mypage-menu li {
  width: 50%;
}
#sp-menu-wrap #mypage-menu a {
  padding: 0;
  margin-bottom: 5px;
}
#sp-menu-wrap #mypage-menu a:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #ffffff;
  display: inline-block;
  margin-right: 5px;
}

/*---------- endヘッダ ----------*/
/*---------- フッター ----------*/
footer {
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  background-color: #ffffff;
}
footer #ft-top {
  color: #ffffff;
  padding: 60px 0;
}
footer #ft-top h2 {
  color: #ffffff;
  font-weight: bold;
}
footer #ft-top h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0;
}
footer #ft-top #ft-catch img {
  max-width: 510px;
  width: 100%;
}
footer #ft-top #ft-regist {
  align-self: center;
}
footer #ft-top #ft-regist h3 span {
  color: #ffae00;
  font-size: 0.9em;
}
footer #ft-top #ft-regist p {
  margin: 10px auto;
  line-height: 1.6;
}
footer #ft-mdl {
  background-color: #0095ff;
}
footer #ft-mdl #ft-link {
  background-color: #0095ff;
  padding: 0 15px 0 0;
  width: 100%;
}
footer #ft-mdl #ft-link #ft-logo a {
  display: block;
  max-width: 180px;
}
footer #ft-mdl #ft-link #ft-logo p {
  color: #ffffff;
  margin: 0 auto;
  font-size: 0.85em;
}
footer #ft-mdl #ft-link #ft-btn {
  width: 280px;
}
footer #ft-mdl #ft-link #ft-btn a {
  display: inline-block;
}
footer #ft-mdl #ft-app {
  background-color: #0055b2;
  width: 30%;
}
footer #ft-mdl #ft-app ul {
  width: 255px;
  margin: 0 auto;
  font-size: 0;
  text-align: right;
}
footer #ft-mdl #ft-app ul li {
  display: inline-block;
}
footer #ft-mdl #ft-app ul li:first-child {
  margin-right: 5px;
}
footer #ft-menu .ft-menu-block a {
  color: #ffffff;
}
footer #ft-menu .ft-menu-block p {
  margin: 0 0 10px 0;
  border-bottom: 1px solid #ffffff;
  font-weight: bold;
  padding: 3px 0;
}
footer #ft-menu .ft-menu-block p a {
  display: block;
}
footer #ft-menu .ft-menu-block ul {
  list-style: none;
  padding-left: 0;
}
footer #ft-menu .ft-menu-block ul li {
  margin-bottom: 5px;
  font-size: 0.9em;
}
footer #ft-menu .ft-menu-block ul li a:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #ffffff;
  display: inline-block;
  margin-right: 5px;
}
footer #ft-btm {
  background-color: #ffffff;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer #ft-btm #ft-company {
  padding: 15px 0;
  max-width: 500px;
  font-size: 0.9em;
  align-items: center;
}
footer #ft-btm #ft-company h3 {
  color: #666666;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
}
footer #ft-btm #ft-company .company-name {
  font-weight: bold;
  font-size: 1.2em;
}
footer #ft-btm #ft-company img {
  max-width: 200px;
  margin-bottom: 10px;
}
footer #ft-btm #ft-company p {
  line-height: 1.4;
  border-left: 1px solid #666666;
  padding-left: 10px;
}
footer #ft-btm #ft-company .font-s {
  font-size: 0.8em;
}
footer #ft-btm a {
  color: #666666;
}
footer #ft-btm #ft-right #ft-terms {
  margin: 0;
  justify-content: flex-end;
}
footer #ft-btm #ft-right #ft-terms li {
  margin-left: 1em;
}
footer #ft-btm #ft-right #ft-terms li a {
  font-size: 0.7em;
}
footer #ft-btm #ft-right #ft-terms li a:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #666666;
  display: inline-block;
  margin-right: 5px;
}
footer #ft-btm #ft-right #ft-mark {
  justify-content: flex-end;
  margin: 0;
}
footer #ft-btm #ft-right #ft-mark li {
  width: 80px;
  padding: 8px;
}
footer #ft-btm .copyright {
  font-size: 12px;
  text-align: right;
}
footer #ft-bottom-nav {
  display: none;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 60px;
  box-shadow: 0 0 6px rgba(28, 26, 26, 0.6);
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding-bottom: 4px;
  z-index: 1000;
}
footer #ft-bottom-nav #ft-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn {
  width: 20%;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active * {
  color: #ffae00;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #mypage1-1-2,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #equipment1-2,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #news1-1,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #news1-2 {
  fill: #ffae00 !important;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #mypage1-3,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #mypage1-1-3,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #news1-1,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #news1-2 {
  stroke: #ffae00 !important;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #mypage1-2 {
  stroke: transparent !important;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive * {
  color: #9fa0a0;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #mypage1-1-2,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #equipment1-2,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #news1-1,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #news1-2 {
  fill: inherit;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #mypage1-2,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #mypage1-3,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #mypage1-1-3,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #news1-1,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-inactive #news1-2 {
  stroke: inherit;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn#ft-bottom-close * {
  color: #ffae00;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn#ft-bottom-close #close1-1-2-3 {
  fill: #ffae00 !important;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn img,
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn svg {
  width: auto;
  height: 36px;
  padding: 4px 4px 6px 4px;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn p {
  text-align: center;
  font-weight: bold;
  font-size: 0.6em;
  letter-spacing: 0;
  color: #9fa0a0;
  line-height: 1;
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn a .ft-btn-notify {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ff1815;
  border-radius: 50%;
  top: -5px;
  right: calc(100% - 34px);
}
footer #ft-bottom-nav #ft-bottom .ft-bottom-btn a:hover {
  opacity: 1;
}

footer.activate-ft {
  padding-bottom: 0;
  background-color: #0095ff;
  color: #ffffff;
}

/*---------- endフッター ----------*/
/*---------- バナー ----------*/
#banner a .banner-wrap img {
  border: 1px solid #dddddd;
}
#banner a .banner-wrap:hover {
  opacity: 0.8;
}

/*---------- endバナー ----------*/
/*---------- 動画 ----------*/
.mv-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /*アスペクト比16:9*/
  height: 0;
  overflow: hidden;
}
.mv-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv-modal {
  position: relative;
  padding-bottom: 33.75%;
  width: 60%;
  height: 0;
}
.mv-modal .uk-close {
  color: #ffffff;
  background-color: #000000;
  border-radius: 50%;
  border: 1px solid #ffffff;
  top: -30px;
  right: -15px;
}
.mv-modal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*---------- end動画 ----------*/
/*---------- 購入／売却ステップ ----------*/
.step-indicator {
  list-style: none;
  max-width: 600px;
  margin: 15px auto;
  padding: 0;
  text-align: center;
}
.step-indicator li {
  display: inline-block;
  width: 22%;
  height: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 1.2em;
  position: relative;
  padding: 0 10px;
}
.step-indicator li span {
  padding-left: 10px;
  width: 100%;
}
.step-indicator li:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.step-indicator li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 10px solid #ffffff;
}
.step-indicator li:nth-child(1) {
  z-index: 4;
}
.step-indicator li:nth-child(1) span {
  padding-left: 0;
}
.step-indicator li:nth-child(2) {
  z-index: 3;
}
.step-indicator li:nth-child(3) {
  z-index: 2;
}
.step-indicator li:nth-child(4) {
  z-index: 1;
}
.step-indicator li:first-child:before {
  content: none;
}
.step-indicator li.step-incomplete {
  background-color: #dddddd;
}
.step-indicator li.step-incomplete:after {
  border-left: 10px solid #dddddd;
}
.step-indicator li.step-active {
  background-color: #0095ff;
}
.step-indicator li.step-active:after {
  border-left: 10px solid #0095ff;
}
.step-indicator li.step-complete {
  background-color: #999999;
}
.step-indicator li.step-complete:after {
  border-left: 10px solid #999999;
}

/*---------- end購入／売却ステップ ----------*/
/*---------- Q&A ----------*/
.qa-list dt {
  padding: 10px 30px 10px 45px;
  margin-top: 10px;
  position: relative;
}
.qa-list dt:before {
  content: "";
  width: 25px;
  height: 25px;
  display: inline-block;
  background: url(/img/docs/icon-q.png) center top no-repeat;
  background-size: contain;
  vertical-align: bottom;
  margin-right: 0.5em;
  position: absolute;
  top: 10px;
  left: 10px;
}
.qa-list dt.close-a:after {
  content: "+";
  color: #0095ff;
  position: absolute;
  top: 10px;
  right: 10px;
}
.qa-list dt.open-a:after {
  content: "−";
  color: #0095ff;
  position: absolute;
  top: 10px;
  right: 10px;
}
.qa-list dd {
  padding: 10px 10px 10px 45px;
  text-align: left;
  position: relative;
}
.qa-list dd:before {
  content: "";
  width: 25px;
  height: 25px;
  display: inline-block;
  background: url(/img/docs/icon-a.png) center top no-repeat;
  background-size: contain;
  vertical-align: bottom;
  margin-right: 0.5em;
  position: absolute;
  top: 10px;
  left: 10px;
}

/*---------- endQ&A ----------*/
/*---------- 購入画面ヘッダ ----------*/
#buy-hd .container {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
#buy-hd h1 {
  text-shadow: 3px 3px 5px #000000;
}
#buy-hd h1 .hd-category {
  border: 1px solid #ffffff;
  padding: 5px;
  display: inline-block;
}
#buy-hd h1 span {
  font-size: 0.4em;
  display: block;
  margin: 10px 0;
}
#buy-hd #equip-data {
  max-width: 250px;
  width: 100%;
  align-self: flex-end;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  padding: 20px 0 0 10px;
}
#buy-hd #equip-data dl {
  background-color: #313131;
  padding: 25px 10px 10px;
}
#buy-hd .data-wrap {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
  align-items: flex-end;
  padding: 5px 0;
}
#buy-hd .data-wrap dd {
  font-size: 2rem;
  line-height: 1.3;
}
#buy-hd .data-wrap dd span {
  font-size: 1rem;
}
#buy-hd .data-wrap .block {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
}
#buy-hd .equip-status {
  background-color: #fff100;
  color: #000000;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  padding-top: 8px;
  position: absolute;
  top: 10px;
  left: 15px;
}
#buy-hd .equip-status span {
  display: block;
  width: 100%;
  font-size: 70%;
}
#buy-hd .equip-status .open {
  padding-top: 10px;
  font-size: 90%;
}

.divider-list {
  padding: 10px;
  border: 1px solid #999999;
  background-color: #ffffff;
  margin: 0 auto;
}
.divider-list .data-wrap {
  overflow: hidden;
  border-bottom: 1px solid #999999;
}
.divider-list .data-wrap dt {
  float: left;
  padding: 5px;
}
.divider-list .data-wrap dd {
  float: right;
  padding: 5px;
}
.divider-list .data-wrap:last-child {
  border-bottom: none;
}

@media screen and (max-width: 680px) {
  #buy-hd .container {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #buy-hd h1 {
    font-size: 1.8rem;
    width: 100%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 420px) {
  #buy-hd h1 {
    font-size: 1.4rem;
  }
}
/*---------- end購入画面ヘッダ ----------*/
/*---------- ワット保有証明書 ----------*/
.button-certificate a {
  width: 90%;
  max-width: 500px;
  display: block;
  border: 3px solid #b9a88b;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  padding: 5px;
  margin: 40px auto 0;
  background-color: #ffffff;
}
.button-certificate a span {
  border: 1px solid #b9a88b;
  display: block;
}
.button-certificate a span img {
  max-width: 300px;
  width: 70%;
}
.button-certificate a span:before {
  content: "";
  background: url(/img/certificate/certificate_logo.png) center top no-repeat;
  width: 70px;
  height: 70px;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}

/*---------- endワット保有証明書  ----------*/
/*------ 利用規約  ------*/
.uk-modal-dialog .terms-common h2 {
  border-left: none;
  padding-left: 0;
}

.terms-common h1 {
  font-size: 2em;
}
.terms-common h2 {
  font-size: 1.3em;
  border-left: 5px solid #0095ff;
  padding-left: 10px;
}
.terms-common h3,
.terms-common h4 {
  font-weight: bold;
  font-size: 1.1em;
}
.terms-common h5 {
  font-weight: bold;
  font-size: 1em;
}
.terms-common ol {
  list-style: decimal;
}
.terms-common ul {
  list-style: disc;
}
.terms-common .breadcrumb {
  list-style: none;
}
@media screen and (max-width: 640px) {
  .terms-common h1#mv-title {
    font-size: 1.4em;
  }
}

/*------ パスワードリアルタイムチェック  ------*/
#pm-indicator {
  margin: 20px 0 0;
  padding: 0.5em;
  color: #222222;
  font-size: 13px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #e4e4e4;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#pm-indicator.very-weak,
#pm-indicator.not-match {
  border-color: #be1d30;
  background-color: #ffc3cf;
}

#pm-indicator.weak {
  border-color: #ff787d;
  background-color: #ffe6e5;
}

#pm-indicator.average {
  border-color: #e8a714;
  background-color: #fdddaa;
}

#pm-indicator.strong {
  border-color: #78bc42;
  background-color: #bceea6;
}

#pm-indicator.very-strong {
  border-color: #4f85a7;
  background-color: #a0e8f5;
}

/*------ endパスワードリアルタイムチェック  ------*/
#mail-filter {
  font-size: 0.7em;
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  color: #666666;
  padding: 0.5em;
  margin-top: 30px;
}

/*---------- レスポンシブ ----------*/
@media screen and (max-width: 1249px) {
  .container-w {
    padding: 0 15px;
  }
}
@media screen and (max-width: 1139px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  header#change-hd nav li {
    margin: 0 0 0 1em !important;
  }
}
@media (max-width: 960px) {
  header .logout,
header .hd-pc {
    display: none;
  }
  header .hd-sp {
    display: inline-block;
  }
  header #sp-menu {
    width: 40px;
    margin-left: 6px;
  }
  header #hd-apf #apf-logo img {
    max-width: 80px;
  }
  header #hd-apf #apf-logo .hd-apf-copy {
    display: none;
  }
  header #hd-apf .btn-s {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  header #hd-apf .btn-s span {
    display: none;
  }
  header #hd-apf .hd-apf-left {
    flex: none;
  }
  header #hd-top #hd-logo {
    max-width: 160px;
  }
  header #hd-btn .btn-ss {
    width: 40px;
    height: 40px;
  }
  header #hd-btn .btn-ss.btn-mypage {
    max-width: 40px;
    padding: 4px;
  }

  #sp-menu-wrap.active {
    visibility: visible;
  }

  header#change-hd #hd-top #hd-btn .message-notify {
    top: -5px;
    right: 10px;
    left: auto;
  }

  footer #ft-mdl {
    background: #0095ff;
  }
  footer #ft-mdl .container-w {
    display: block !important;
    padding: 0;
  }
  footer #ft-mdl #ft-link {
    width: 100%;
    padding: 0 15px;
  }
  footer #ft-mdl #ft-app {
    width: 100% !important;
    display: block !important;
    padding: 30px 15px;
  }
  footer #ft-mdl #ft-app .uk-position-center {
    transform: none;
    position: static !important;
    max-width: 300px;
    margin: 0 auto;
  }
}
@media (max-width: 820px) {
  h1#mv-title {
    height: 150px;
  }

  footer #ft-btm {
    display: block;
    padding: 0 10px;
  }
  footer #ft-btm .uk-flex {
    display: block;
  }
  footer #ft-btm #ft-company {
    margin: 15px auto;
    max-width: 360px;
  }
  footer #ft-btm #ft-company h3 {
    font-size: 1.5em;
    text-align: center;
    padding-top: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    margin: 0 auto 0.5em !important;
  }
  footer #ft-btm #ft-company .company-name {
    font-size: 1.5em;
  }
  footer #ft-btm #ft-company p {
    border-top: 1px solid #757575;
    border-left: none;
    text-align: center;
    padding: 1.5em 0 0;
    width: 100%;
  }
  footer #ft-btm #ft-right {
    margin: 0 auto 10px;
  }
  footer #ft-btm #ft-right #ft-mark {
    justify-content: center;
  }
  footer #ft-btm #ft-right #ft-terms {
    justify-content: center;
  }
  footer #ft-btm .copyright {
    text-align: center;
    padding: 0.5em 0;
  }
  footer #ft-btm .copyright ul {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .form-chackbox:checked {
    background-color: #ffae00;
  }

  .form-chackbox:focus {
    background-color: #ffae00;
  }

  footer.activate-ft #ft-btm #ft-company p {
    border-top: 1px solid #ffffff;
    border-left: none;
  }
}
@media screen and (max-width: 640px) {
  .padding-remove-s {
    padding: 0;
    box-shadow: none;
  }

  .boxshadow-wrap-s {
    box-shadow: none;
  }

  .bg-wh-s {
    background-color: #ffffff !important;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  header .hd-note {
    text-align: left;
  }
  header .container {
    padding: 0 10px;
  }
  header #hd-apf .hd-apf-right {
    width: auto;
  }
  header #hd-apf #apf-logo p {
    display: none;
  }
  header #hd-apf .hd-apf-left {
    margin: 0 auto;
  }
  header #hd-apf .hd-apf-center {
    max-width: 100px;
    width: 100%;
  }
  header #hd-apf .hd-apf-right {
    display: none;
  }
  header #hd-top #hd-logo {
    margin: 0 auto;
  }
  header #hd-top #hd-btn {
    display: none !important;
  }

  #sp-menu-wrap {
    top: inherit;
    right: inherit;
    bottom: -100%;
    left: 0;
    padding-bottom: 75px;
  }
  #sp-menu-wrap.active {
    right: inherit;
    bottom: 0;
  }
  #sp-menu-wrap #spmenu-content {
    padding: 0 10px;
  }

  footer {
    padding-bottom: 60px;
  }
  footer #ft-bottom-nav {
    display: flex;
  }
  footer #ft-top h2,
footer #ft-top #ft-regist {
    padding-left: 0;
  }
  footer #ft-top h3 {
    font-size: 1.4em;
  }
  footer #ft-mdl #ft-link .ft-link-wrap #ft-logo {
    float: none;
    text-align: center;
  }
  footer #ft-mdl #ft-link .ft-link-wrap #ft-logo a {
    margin: 0 auto;
  }
  footer #ft-mdl #ft-link .ft-link-wrap .uk-flex {
    display: block;
    text-align: center;
    float: none;
    margin: 0;
  }
  footer #ft-mdl #ft-link #ft-btn {
    margin: 20px auto 30px;
    text-align: center !important;
  }
  footer #ft-btm .copyright {
    font-size: 11px;
  }

  .button-certificate a span:before {
    width: 60px;
    height: 60px;
  }

  .step-indicator li {
    font-size: 0.9em;
    font-weight: bold;
    padding: 0 5px;
    height: 30px;
  }
  .step-indicator li:after {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
  .step-indicator li:before {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  .sidebar .side-main ul li {
    width: 100%;
    float: none;
  }
  .sidebar .side-main ul li:nth-child(odd) {
    border-right: none;
  }

  h1#mv-title {
    height: 120px;
    font-size: 1.7em;
  }
}
/*---------- endレスポンシブ ----------*/
.js-dc-guard button[type=submit]:disabled {
  background-color: #dddddd;
  border: 1px solid #dddddd;
  color: #ffffff;
}
.js-dc-guard button[type=submit]:disabled:hover {
  cursor: default;
  border: 1px solid #dddddd;
}

.uk-link,
a {
  color: #0095ff;
}

.uk-card-default {
  color: #333333;
}

.uk-label-default {
  background: #f5f5f5;
  color: #666666;
}

.uk-form-label {
  color: #333333;
}

.uk-alert-warning {
  background: #fdf1dc;
  color: #ee702e;
}

.uk-alert-danger {
  background: #ffd7d7;
  color: #e20000;
}

@media print {
  header,
footer {
    display: none;
  }
}
.js-question-marker {
  cursor: pointer;
  vertical-align: text-bottom;
}

.question-marker-wh {
  color: #ffffff;
}

.question-marker-blk {
  color: #333333;
}

.question-answer {
  transition-property: opacity;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  display: block;
  width: 30%;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 8px;
  font-size: 0.85em;
  text-align: left;
  padding: 15px;
  border-radius: 10px;
  z-index: -50;
}
.question-answer h3 {
  font-size: 1.1em;
}
.question-answer .flex {
  align-items: center;
}
.question-answer .flex img {
  max-width: 200px;
  width: 50%;
  margin-right: 20px;
}
.question-answer .flex p {
  width: calc(100% - 220px);
}
@media screen and (max-width: 640px) {
  .question-answer .flex {
    flex-direction: column;
  }
  .question-answer .flex img {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .question-answer .flex p {
    width: 100%;
  }
}

/*---------- ワットプラスがある場合の詳細表示 ----------*/
.btn-detail {
  background-color: transparent;
  border-radius: 5px;
  font-size: 12px;
  vertical-align: text-bottom;
  display: inline-block;
  padding: 0 4px;
}

.btn-detail-wh {
  color: #ffffff;
  border: 1px solid #ffffff;
}

.btn-detail-blk {
  color: #333333;
  border: 1px solid #333333;
}

.own-detail-drop {
  width: 280px;
  transition-property: opacity;
  transition-duration: 0.5s;
  font-size: 14px;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 8px;
  border-radius: 10px;
  display: none;
  padding: 14px;
}
.own-detail-drop dl.own-detail-dl {
  background-color: #ffffff;
  padding: 0;
  border-top: none;
  margin: 0;
}
.own-detail-drop dl.own-detail-dl .flex {
  justify-content: space-between;
  flex-wrap: wrap;
}
.own-detail-drop dl.own-detail-dl dt,
.own-detail-drop dl.own-detail-dl dd {
  color: #333333;
  font-size: 1em;
  padding: 5px 0;
  font-weight: bold;
}
.own-detail-drop dl.own-detail-dl .border-top {
  border-top: 1px solid #dddddd;
}
.own-detail-drop p {
  text-align: left;
  font-size: 0.8em;
}

/*
.distributed-wrap{
  max-width: 300px;
  .question-answer{
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding:0 8px 8px 0;
    overflow: hidden;
    max-width: 300px;
    .wrap{
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 8px;
      border-radius: 10px;
      max-width: 300px;
      width: 100%;
      padding:10px;
      float: right;
    }
  }
}
.distributed-btn.question-marker-wh,
.equip-list .equip-wrap span.distributed-btn.question-marker-wh{
  border: 1px solid $base-white;
  color: $base-white;
}
.distributed-btn.question-marker-blk,
.equip-list .equip-wrap span.distributed-btn.question-marker-blk{
  border: 1px solid $text-black;
  color: $text-black;
}
.distributed-btn,
.equip-list .equip-wrap span.distributed-btn{
  background: transparent;
  border-radius: 5px;
  font-size: 0.65em;
  vertical-align: text-bottom;
  display: inline-block;
  padding:0 2px;
}
.own-detail dl,
.equip-wrap .own-detail dl{
  border-top:none;
  background: $base-white;
  padding:0;
  dt,dd{
    color: $text-black;
  }
  .border-top{
    border-top:1px solid $line-gray;
  }
  .flex{
    justify-content: space-between;
  }
}
.own-detail{
  color: $text-black;
}*/
/**** ページネーション ****/
.uk-pagination a {
  display: inline-block;
  padding: 5px 8px;
  margin: 0 5px;
  margin-bottom: 8px;
  border: 1px solid #0095ff;
  background-color: #ffffff;
  color: #0095ff;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.uk-pagination a:hover {
  background-color: #0095ff;
  color: #ffffff;
}
.uk-pagination .uk-disabled {
  padding-left: 0;
}
.uk-pagination .uk-disabled a {
  background-color: #0095ff;
  color: #ffffff;
  box-shadow: none;
}

/**** リキャプチャ ****/
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-txt {
  font-size: 11px;
  color: #999999;
  margin: 10px 0;
}
.recaptcha-txt a {
  text-decoration: underline;
  color: #999999;
}

/*---------- googleカスタム検索 ----------*/
.search-box .gsc-control-searchbox-only,
.search-box .gsc-control-cse {
  margin: 0px;
  padding: 0px;
  border: 1px solid #231815;
  background-color: white;
}
.search-box .gsc-search-box {
  margin: 0px;
}
.search-box .gsc-input-box {
  padding: 0;
  border: none;
}
.search-box .gsib_a {
  padding-left: 10px;
}
.search-box .gsib_b {
  display: none;
}
.search-box .gsc-search-button-v2 {
  margin: 0px;
  padding-right: 12px;
  padding-left: 6px;
  background-color: transparent;
  color: #231815;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
.search-box .gsc-search-button-v2 svg {
  max-width: initial;
  fill: #231815;
}
.search-box .gsc-search-button-v2:hover {
  border-color: initial;
  background-color: initial;
}
.search-box .gsc-results-wrapper-overlay {
  width: 90%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#hd-search-container {
  display: none;
  position: absolute;
  max-width: 400px;
  width: 100%;
  z-index: 100;
  background-color: white;
}
#hd-search-container .search-box {
  width: 100%;
  flex: 1;
}
#hd-search-container #hd-search-close:hover {
  opacity: 0.7;
}

@media screen and (max-width: 960px) {
  #hd-search-open,
#hd-search-container {
    display: none !important;
  }
}
/****
*  dl-table mobile
****/
.dl-table {
  /**  <dl class="dl-table">  **/
  padding: 0;
}

.dl-child {
  /**  dlに入れ子dlをするときのclass  **/
  margin: 0;
}

dl.dl-table dt,
dl.dl-table dd {
  margin: 0;
}

dl.dl-table dt {
  padding: 0.1rem 0.1rem;
}

dl.dl-table dd {
  padding: 0.1rem;
}

/**  768px以上でパソコンの表示になる  **/
/****
*  dl-table PC
****/
dl.dl-table dt {
  clear: left;
  float: left;
  width: 45%;
  padding: 0.1rem;
}

dl.dl-table dd {
  margin-left: 45%;
  padding: 0.1rem 0.1rem 0;
}

dl.dl-table dd:after {
  content: "";
  display: table;
  clear: both;
  height: 0;
}

@media print {
  .dl-table {
    background-color: #ffffff;
    border: 0px;
  }

  dl.dl-table dt {
    clear: none;
    float: none;
    width: auto;
    padding: 0;
    font-weight: normal;
    border: 0px;
    background-color: #ffffff;
  }

  dl.dl-table dd {
    background-color: #ffffff;
    width: auto;
    padding: 0;
    font-weight: normal;
    border: 0px;
  }
}
#buy-history dl.dl-table dt {
  width: 5em;
}
#buy-history dl.dl-table dd {
  margin-left: 5em;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden;
  background-color: #0086ff;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  padding: 8px 0 8px 32px;
  position: absolute;
  top: 130px;
  right: 0px;
  width: 60%;
  z-index: 999;
}
#snackbar::before {
  width: 6px;
  height: 100%;
  content: "";
  background-color: #0068ff;
  position: absolute;
  left: -4px;
  top: 0;
  border-radius: 8px 0 0 8px;
}
#snackbar::after {
  content: "";
  background: url(/img/common/icon_snack_info.png) center center no-repeat;
  background-size: contain;
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  left: 8px;
  top: 10px;
}
#snackbar.warn {
  background-color: #f7945e;
}
#snackbar.warn::before {
  background-color: #ee702e;
}
#snackbar.warn::after {
  background: url(/img/common/icon_snack_error.png) center center no-repeat;
  background-size: contain;
}
#snackbar.error {
  background-color: #ff3833;
}
#snackbar.error::before {
  background-color: #e20000;
}
#snackbar.error::after {
  background: url(/img/common/icon_snack_error.png) center center no-repeat;
  background-size: contain;
}
#snackbar.show {
  visibility: visible;
  animation: slideIn 4.5s;
  animation-fill-mode: forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}
@media screen and (max-width: 640px) {
  #snackbar {
    width: 90%;
  }
}

/*
*
* sidebarありレイアウト
* sidebarのstyle詳細
*
*/
.col-side-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.col-side-wrap #main-s {
  width: 70%;
}
.col-side-wrap .sidebar,
.col-side-wrap #question-side {
  width: 28%;
}
.col-side-wrap .sidebar #side-hd,
.col-side-wrap #question-side #side-hd {
  background-color: #0095ff;
  color: #ffffff;
  padding: 16px;
  font-size: 1em;
}
.col-side-wrap .sidebar #side-hd a,
.col-side-wrap #question-side #side-hd a {
  text-decoration: underline;
  color: #ffffff;
}
.col-side-wrap .sidebar .side-main,
.col-side-wrap #question-side .side-main {
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-top: none;
}
.col-side-wrap .sidebar .side-main .side-menu li,
.col-side-wrap #question-side .side-main .side-menu li {
  border-bottom: 1px solid #dddddd;
}
.col-side-wrap .sidebar .side-main .side-menu a,
.col-side-wrap #question-side .side-main .side-menu a {
  display: block;
  color: #333333;
  padding: 5px 0;
  font-weight: bold;
}
.col-side-wrap .sidebar .side-main .side-menu a .uk-icon,
.col-side-wrap #question-side .side-main .side-menu a .uk-icon {
  float: right;
}
.col-side-wrap .sidebar .side-main .side-menu a .message-notify,
.col-side-wrap #question-side .side-main .side-menu a .message-notify {
  background-color: #ffae00;
  color: #ffffff;
  font-weight: bold;
  display: inline-block;
  padding: 0 4px;
  font-size: 0.6em;
}
.col-side-wrap .sidebar .side-main .side-menu a:hover,
.col-side-wrap #question-side .side-main .side-menu a:hover {
  color: #0095ff;
}
.col-side-wrap .sidebar .side-main #user-menu,
.col-side-wrap #question-side .side-main #user-menu {
  padding-left: 0.5em;
  font-size: 0.8em;
}
.col-side-wrap .sidebar .side-main #user-menu li,
.col-side-wrap #question-side .side-main #user-menu li {
  border-bottom: none;
}
@media (max-width: 960px) {
  .col-side-wrap {
    flex-direction: row;
  }
  .col-side-wrap #main-s {
    width: 100%;
    margin: 0 auto 40px;
  }
  .col-side-wrap .sidebar,
.col-side-wrap #question-side {
    max-width: 400px;
    width: 100%;
    margin: 0 auto 40px;
    float: none;
  }
  .col-side-wrap .sidebar.my-sidebar .side-main .side-list,
.col-side-wrap #question-side.my-sidebar .side-main .side-list {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 640px) {
  .col-side-wrap #main-s {
    width: 100%;
    float: none;
  }
  .col-side-wrap .sidebar.my-sidebar {
    width: 100%;
  }
  .col-side-wrap .sidebar.my-sidebar .side-main {
    padding: 10px;
  }
  .col-side-wrap .sidebar.my-sidebar .side-main .side-list {
    padding-right: 0;
    padding-left: 0;
  }
}

/*
*
* マイページsidebar
*
*/
#mypage-index {
  /**********************
    キロワッターズステータス
  **********************/
  /****************
    AMCステータス
  ****************/
  /****************
    ボーナスグッズ
  ****************/
  /******************
    本人確認ステータス
  ******************/
  /******************
    本人確認ステータス
  ******************/
  /****************
    発電所一覧導線
  ****************/
}
#mypage-index .kw-badge {
  width: 35px;
  margin-right: 4px;
}
#mypage-index .myside-sp {
  display: none;
}
@media screen and (max-width: 960px) {
  #mypage-index .myside-sp {
    display: block;
  }
}
#mypage-index #side-kw {
  color: #333333;
  font-weight: bold;
  display: block;
}
#mypage-index #side-kw a {
  color: #333333;
  font-weight: bold;
  display: block;
}
#mypage-index #side-kw #my-ranking {
  position: relative;
}
#mypage-index #side-kw #my-ranking .uk-icon {
  position: absolute;
  right: 0;
  top: 40%;
}
#mypage-index #side-kw #my-ranking .ranking-ttl:before {
  content: "";
  width: 20px;
  height: 17px;
  display: inline-block;
  margin-right: 4px;
  background: url(/img/common/icon_crown_secondary.png) center center no-repeat;
  background-size: cover;
}
#mypage-index #side-kw #my-ranking .rank-data {
  margin: 0 1em 0 0;
}
#mypage-index #side-kw #until-kw .flex {
  justify-content: space-between;
}
#mypage-index #side-kw #until-kw .text-wrap {
  width: calc(100% - 42px);
}
#mypage-index .mypage-mile {
  display: block;
  color: #ffffff;
  background-image: url(/img/ana/img-plane.png);
  background-position: left 8px bottom;
  background-repeat: no-repeat;
  background-size: 35px auto;
  padding: 13px;
  box-shadow: 1px 1px 4px #999999;
}
#mypage-index .mypage-mile.ana-wrap {
  background-color: #1a3d8e;
}
#mypage-index .mypage-mile.jal-wrap {
  background-color: #cc0100;
}
#mypage-index .mypage-mile.docomo-wrap {
  color: #d00f31;
  background-image: url(/img/common/logo_d.png);
  background-position: left 20px center;
  border: solid 1px #333;
}
#mypage-index .mypage-mile.ponta-wrap {
  background-color: #ff9123;
  background-image: url(/img/common/logo_ponta_b.png);
  background-size: 45px auto;
  background-position: left 20px center;
  padding: 20px 13px;
}
#mypage-index .amc-registered {
  padding: 10px 0 5px;
}
#mypage-index .amc-unapproved .none .amc-status {
  display: none;
}
#mypage-index .amc-txt {
  width: calc(100% - 38px);
  line-height: 1.2;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 0;
  margin-left: auto;
}
#mypage-index .amc-txt .error .error-msg {
  color: #ffffff;
  padding: 3px 0 0;
  display: inline-block;
  font-weight: bold;
  margin: 5px 0 0;
  font-size: 0.8em;
}
#mypage-index .amc-txt .error .amc-status {
  animation: flashing 1.5s ease infinite alternate;
}
@keyframes flashing {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#mypage-index .amc-txt .amc-status {
  margin: 5px 0 0 0;
}
#mypage-index .amc-txt a {
  color: #333333;
  display: block;
  padding: 10px 0 5px;
}
#mypage-index .amc-txt a .none .amc-status {
  border: 1px solid #333333;
}
#mypage-index .amc-txt a .uk-icon {
  width: 12px;
}
@media screen and (max-width: 640px) {
  #mypage-index .amc-txt {
    width: 100%;
    margin-left: 1em;
  }
  #mypage-index .amc-badge {
    margin: 0 16px;
    bottom: 0;
  }
}
#mypage-index .side-bonus p {
  margin: 10px 0 0 0;
  background-color: #333333;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.8em;
  padding: 4px 0;
  text-align: center;
}
#mypage-index #identification-kw #identification-badge {
  padding-left: 40px;
}
#mypage-index #identification-badge p {
  display: inline-block;
  line-height: 1;
  border-radius: 4px;
  padding: 2px 4px;
  color: #333333;
}
#mypage-index #identification-badge .font-s {
  font-size: 0.6em;
}
#mypage-index #identification-badge .done, #mypage-index #identification-badge .checking {
  border: solid 1px #ffffff;
  color: #ffffff;
}
#mypage-index #identification-badge .error {
  border: solid 1px #e20000;
  background: #e20000;
  color: #ffffff;
}
#mypage-index #friend-invite {
  border: 1px solid #dddddd;
}
#mypage-index #friend-invite .font-emphasis {
  font-size: 2em;
  font-weight: bold;
}
#mypage-index #friend-invite .invite-title {
  font-size: 1em;
  background-color: #0196FF;
  padding: 2px;
  color: #fff;
}
#mypage-index #friend-invite .invite-wrap {
  padding: 6px;
}
#mypage-index #friend-invite .invite-wrap img {
  width: 37px;
}
#mypage-index #friend-invite .inside-text {
  display: block;
  font-size: 0.9em;
}
#mypage-index .equipment-btn-wrap {
  max-width: 500px;
  margin-bottom: 15px;
  text-shadow: none;
}
#mypage-index .equipment-btn-wrap .equipment-btn {
  max-width: 350px;
  width: 98%;
  margin: 0 auto;
  color: #000000;
  background-color: white;
  box-shadow: 1px 1px 4px #999999;
}
#mypage-index .equipment-btn-wrap .equipment-btn .flex {
  align-items: center;
  line-height: 1;
}
#mypage-index .equipment-btn-wrap .equipment-btn .icon-equip {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
#mypage-index .equipment-btn-wrap .equipment-btn .icon-chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  margin: auto;
}

/*
*
* lp比較表
*
*/
#compare-table table {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
#compare-table table tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#compare-table table tr {
  width: calc((100% - 5em) / 7);
  border-left: 1px solid #999999;
}
#compare-table table #thead {
  width: 5em;
}
#compare-table table th,
#compare-table table td {
  display: block;
  padding: 10px 5px;
  border-bottom: 1px solid #999999;
  height: 50px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#compare-table table th {
  font-size: 0.9em;
  background-color: #f5f9ff;
}
#compare-table table .th-top {
  border-top: 1px solid #999999;
}
#compare-table table .row td .sp-hd {
  display: none;
}
#compare-table table .row td .line-red {
  display: inline;
  background: linear-gradient(transparent 80%, #e20000 0%);
}
#compare-table table .change-data th {
  border-right: 1px solid #999999;
}
#compare-table table .change-data th img {
  max-width: 100px;
  width: 100%;
}
#compare-table table .change-data td {
  border-right: 1px solid #999999;
}
#compare-table table .change-data td .line-orange {
  display: inline;
  background: linear-gradient(transparent 70%, #ffae00 0%);
}
@media screen and (max-width: 720px) {
  #compare-table table {
    max-width: 500px;
    margin: 0 auto 50px;
  }
  #compare-table table tbody {
    display: block;
  }
  #compare-table table #thead {
    display: none;
  }
  #compare-table table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #999999;
  }
  #compare-table table th {
    width: 100%;
  }
  #compare-table table th br {
    display: none;
  }
  #compare-table table .row td {
    display: inline-block;
    width: 25%;
    font-size: 1em;
    height: 60px;
    border-bottom: none;
  }
  #compare-table table .row td .sp-hd {
    display: block;
    color: #999999;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #compare-table table .change-data {
    border-bottom: 1px solid #999999;
  }
  #compare-table table .change-data th,
#compare-table table .change-data td {
    border-right: none;
  }
}
@media screen and (max-width: 480px) {
  #compare-table table .row td {
    width: 50%;
  }
}

/*
*
* AMC番号のステータス
*
*/
#mypage-index .mile-status,
#user-index .mile-status {
  border-radius: 15px;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  font-size: 0.8em;
  background-color: #ffffff;
}
#mypage-index .mile-msg,
#user-index .mile-msg {
  font-size: 0.8em;
}
#mypage-index .none .mile-status,
#user-index .none .mile-status {
  border: 1px solid #666666;
  color: #666666;
}
#mypage-index .confirmed .mile-status,
#user-index .confirmed .mile-status {
  border: 1px solid #0095ff;
  color: #0095ff;
}
#mypage-index .confirmed .mile-msg,
#user-index .confirmed .mile-msg {
  color: #0095ff;
}
#mypage-index .unconfirmed .mile-status,
#user-index .unconfirmed .mile-status {
  border: 1px solid #666666;
  color: #666666;
}
#mypage-index .unconfirmed .mile-msg,
#user-index .unconfirmed .mile-msg {
  color: #666666;
}
#mypage-index .error .mile-status,
#user-index .error .mile-status {
  border: 1px solid #e20000;
  background-color: #ffffff;
  color: #e20000;
  padding: 2px 5px 1px;
}
#mypage-index .error .mile-msg,
#user-index .error .mile-msg {
  color: #e20000;
}

/*
 *
 * docs/index用CSS
 *
 */
#docs-index {
  /*---------- メインビジュアル ----------*/
  /*---------- endメインビジュアル ----------*/
  /*---------- メインビジュアル（ログイン・ユーザー情報） ----------*/
  /*---------- endメインビジュアル（ログイン・ユーザー情報） ----------*/
  /*---------- 前日の発電情報 ----------*/
  /*---------- end前日の発電情報 ----------*/
  /*---------- バナー ----------*/
  /*---------- endバナー ----------*/
  /*---------- コンテンツ ----------*/
  /*---------- endコンテンツ ----------*/
  /*---------- バナー表示 ----------*/
  /*---------- endバナー表示 ----------*/
  /*---------- 発電所一覧導線表示 ----------*/
  /*---------- end発電所一覧導線表示 ----------*/
  /*---------- ワット売り ----------*/
  /*---------- endワット売り ----------*/
  /*---------- 使い方 ----------*/
  /*---------- end使い方 ----------*/
  /*---------- メリット ----------*/
  /*---------- endメリット ----------*/
  /*---------- 発電状況 ----------*/
  /*---------- end発電状況 ----------*/
  /*---------- 設備 ----------*/
  /*---------- end設備 ----------*/
  /*---------- ブログ ----------*/
  /*---------- endブログ ----------*/
  /*---------- Q&A ----------*/
  /*---------- endQ&A ----------*/
  /*---------- レスポンシブ ----------*/
  /*---------- endレスポンシブ ----------*/
}
#docs-index .hd-desc {
  color: #002d7f;
  font-weight: bold;
  font-size: 0.8em;
}
#docs-index .hd-navy {
  color: #002d7f;
}
#docs-index #main {
  margin-top: 0;
  margin-bottom: 0;
}
#docs-index #top-cover {
  background: #0095ff;
  padding-top: 80px;
}
#docs-index #top-cover .top-user {
  display: block;
}
#docs-index #top-cover .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-index #top-cover h1 {
  font-size: 2.6em;
}
#docs-index #top-cover h1 #span1 {
  display: block;
}
#docs-index #top-cover h1 #span3 {
  letter-spacing: -4px;
}
#docs-index #top-cover #mv-text {
  color: #ffffff;
  font-weight: bold;
  max-width: 500px;
}
#docs-index #top-cover #top-cover-text {
  width: 59%;
  text-shadow: 1px 1px 4px rgba(0, 45, 127, 0.75);
}
#docs-index .top-user input {
  border-radius: 5px;
}
#docs-index .top-user #regist-small {
  font-weight: bold;
  font-size: 0.8em;
  margin: 10px 0 0;
}
#docs-index .top-user #regist-small span {
  color: #ffae00;
  font-weight: bold;
}
#docs-index #mv-fam {
  width: 80%;
  margin: 20px auto 0;
}
#docs-index #mv-fam .flex {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
#docs-index #mv-fam .top-user {
  display: none;
}
#docs-index .mv-sp {
  display: none;
}
#docs-index #top-user {
  width: 38%;
  max-width: 500px;
}
#docs-index #top-user #user-bk {
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
}
#docs-index #top-user #user-bk .kw-txt {
  color: #666666;
}
#docs-index #top-user .user-tab li {
  width: 50%;
}
#docs-index #top-user .user-tab li a {
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 2px solid transparent;
}
#docs-index #top-user .user-tab .uk-active > a {
  border-color: #0095ff;
  color: #0095ff;
}
#docs-index #top-user input {
  border-radius: 5px;
}
#docs-index #top-user #regist-small {
  font-weight: bold;
  font-size: 0.8em;
  margin: 10px 0 0;
}
#docs-index #top-user #regist-small span {
  color: #ffae00;
  font-weight: bold;
}
#docs-index #top-user #top-loggedIn .flex {
  align-items: center;
  justify-content: center;
}
#docs-index #top-user #top-loggedIn .top-login-name a {
  color: #666666;
  border-bottom: solid 1px #666666;
  padding-bottom: 0.5px;
}
#docs-index #top-user #top-loggedIn #until-kw {
  margin-top: 10px;
}
#docs-index #top-user #top-loggedIn #until-kw .flex {
  justify-content: space-between;
  align-items: center;
}
#docs-index #top-user #top-loggedIn #until-kw .flex h2 {
  padding-top: 15px;
}
#docs-index #top-user #top-loggedIn #until-kw .flex h2 .font-s:nth-child(3) {
  font-size: 0.5em;
}
#docs-index #top-user #top-loggedIn #until-kw .kw-rank .kw-badge {
  padding: 10px 0 0;
}
#docs-index #top-user #top-loggedIn #until-kw .kw-rank p {
  align-self: center;
  color: #333333;
  padding-top: 12px;
}
#docs-index #top-user #top-loggedIn #until-kw h2 {
  font-size: 1.5em;
}
#docs-index #top-user #top-loggedIn #until-kw h2 .font-s {
  font-size: 0.7em;
}
#docs-index #top-user #top-loggedIn .kw-badge {
  max-width: 53px;
  margin-right: 8px;
}
#docs-index #top-user #top-loggedIn h4 {
  margin: 0;
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: bold;
}
#docs-index #top-user #top-own-data table {
  width: 100%;
  border-collapse: collapse;
  color: #333333;
  border-top: 1px solid #dddddd;
}
#docs-index #top-user #top-own-data table tr {
  border-bottom: 1px solid #dddddd;
}
#docs-index #top-user #top-own-data th {
  width: 110px;
  text-align: center;
  font-size: 0.8em;
}
#docs-index #top-user #top-own-data th img {
  width: 35px;
  display: block;
  margin: 0 auto;
}
#docs-index #top-user #top-own-data .kw-badge img {
  width: 50px;
}
#docs-index #top-user #top-own-data td {
  text-align: right;
  font-weight: bold;
  font-size: 1.4em;
  padding: 20px 0;
}
#docs-index #top-user #top-own-data td span {
  font-size: 0.7em;
}
#docs-index #top-user #top-own-data td .font-s {
  font-size: 0.6em;
}
#docs-index #top-user #top-own-data #bank-waiting {
  font-size: 0.8em;
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 0;
}
#docs-index #top-user #top-own-data #bank-waiting a {
  color: #666666;
  text-decoration: underline;
}
#docs-index #latest-info {
  background: #ffae00;
  color: #002d7f;
  width: 100%;
}
#docs-index #latest-info .container {
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  overflow: visible;
}
#docs-index #latest-info .flex {
  justify-content: space-between;
  align-items: flex-end;
}
#docs-index #latest-info .latest-wrap {
  width: calc(100% - 270px);
}
#docs-index #latest-info #gla {
  position: absolute;
  right: 0;
  bottom: -37px;
  width: 200px;
}
#docs-index #latest-info #gla img.pc-img {
  display: block;
}
#docs-index #latest-info #gla img.sp-img {
  display: none;
}
#docs-index #latest-info h4 {
  color: #002d7f;
  font-size: 1em;
  margin-bottom: 5px;
  font-size: 12px;
}
#docs-index #latest-info dl {
  border-top: 1px solid #002d7f;
  padding-top: 5px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}
#docs-index #latest-info dl .info-wrap {
  display: flex;
}
#docs-index #latest-info dl dt {
  font-weight: normal;
  font-size: 12px;
  padding: 7px 5px 0 0;
}
#docs-index #latest-info dl dd {
  font-weight: bold;
  margin-right: 0.8em;
  font-size: 1.2em;
}
#docs-index #latest-info dl dd span {
  font-size: 0.9em;
}
#docs-index #top-app {
  width: 250px;
}
#docs-index #top-app .text-wrap {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 8px;
  color: #002d7f;
}
#docs-index #top-app .flex {
  justify-content: center;
}
#docs-index #top-app .flex li:first-child {
  margin: 0 10px 0 0;
}
#docs-index #bnr-story li {
  width: 48%;
}
#docs-index #content ul {
  color: #ffffff;
}
#docs-index #content ul li {
  text-align: center;
  padding: 50px 20px;
  margin: 0 0 2% !important;
  border: 2px solid #002d7f;
}
#docs-index #content ul li:nth-child(2) {
  border-left: none;
  border-right: none;
}
#docs-index #content ul h3 {
  color: #002d7f;
  font-size: 1.8em;
  border-bottom: solid 2px #002d7f;
  display: inline-block;
}
#docs-index #content ul h3 img {
  display: block;
  margin: 0 auto;
  width: 105px;
  background: #002d7f;
  padding: 2px 5px;
}
#docs-index #content ul .content-img {
  margin: 0 auto 10px;
  max-width: 200px;
  width: 100%;
}
#docs-index #content ul p {
  text-align: left;
  max-width: 400px;
  margin: 20px auto;
  color: #333333;
}
#docs-index #banner2 {
  max-width: 1200px !important;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#docs-index #banner2 .banner-wrap {
  width: 46%;
  margin: 0 2%;
  max-width: 380px;
}
#docs-index #banner3 {
  max-width: 1200px !important;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-index #banner3 .banner-wrap {
  width: 32%;
}
#docs-index #campaign {
  /*max-width: 900px;*/
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-index #alliance a {
  width: 100%;
}
#docs-index #alliance .flex {
  justify-content: center;
}
#docs-index #alliance .flex a {
  display: block;
  width: 32%;
  margin: 5px;
}
#docs-index #alliance .notes1 {
  max-width: 30em;
  width: 100%;
  margin: 20px auto;
}
#docs-index .equipment-btn-wrap {
  max-width: 500px;
  margin-bottom: 15px;
  text-shadow: none;
}
#docs-index .equipment-btn-wrap .equipment-btn {
  max-width: 350px;
  margin: 0 auto;
  color: #000000;
  background-color: white;
  box-shadow: 1px 1px 4px #999999;
}
#docs-index .equipment-btn-wrap .equipment-btn .flex {
  align-items: center;
  line-height: 1;
}
#docs-index .equipment-btn-wrap .equipment-btn .icon-equip {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
#docs-index .equipment-btn-wrap .equipment-btn .icon-chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  margin: auto;
}
#docs-index #wat {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  font-weight: bold;
  border: 2px solid #002d7f;
  padding: 15px;
}
#docs-index #wat h2 {
  color: #002d7f;
  text-align: center;
  margin: 0 auto 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #002d7f;
}
#docs-index #wat #wat-main {
  justify-content: center;
}
#docs-index #wat #wat-main #wat-img {
  width: 160px;
}
#docs-index #wat #wat-main #wat-catch {
  max-width: 260px;
  padding: 0 15px;
  margin: 0;
  color: #002d7f;
  text-align: center;
  font-size: 1.1em;
}
#docs-index #wat #wat-main #wat-catch span {
  display: block;
}
#docs-index #wat #wat-main #wat-catch .catch-m strong {
  font-size: 1.3em;
}
#docs-index #wat #wat-main #wat-catch .catch-l {
  font-size: 2.5em;
  line-height: 1;
}
#docs-index #wat #wat-main #wat-text {
  width: calc(100% - 430px);
  max-width: 470px;
  font-size: 1.2em;
}
#docs-index #wat #wat-main #wat-text span {
  display: block;
}
#docs-index #wat #wat-main #wat-text a {
  margin: 10px 0;
}
#docs-index #wat #wat-main #wat-text a span {
  display: inline-block;
}
#docs-index #use {
  max-width: 1200px;
  background: url(/img/docs/top/use-bk.jpg) center center no-repeat;
  background-size: contain;
  color: #ffffff;
}
#docs-index #use #use-wrap {
  align-self: center;
}
#docs-index #use #use-text {
  max-width: 520px;
}
#docs-index #use #use-text p {
  letter-spacing: 0;
}
#docs-index #use h2 {
  color: #ffffff;
}
#docs-index #use h2 img {
  display: block;
  width: 88px;
}
#docs-index #use #use-img {
  max-width: 300px;
}
#docs-index #merit {
  background: #f5f9ff;
}
#docs-index #merit h2 {
  color: #002d7f;
}
#docs-index #merit h2 span {
  background: #fff100;
  display: inline-block;
  font-size: 30%;
  padding: 0.5em 1em;
}
#docs-index #merit ul {
  overflow: hidden;
}
#docs-index #merit ul li {
  color: #ffffff;
  width: 49%;
  float: left;
  margin-bottom: 2%;
}
#docs-index #merit ul li h3 {
  color: #ffffff;
  text-align: center;
}
#docs-index #merit ul li h3 span {
  display: block;
  color: #fff100;
  font-size: 2.3em;
  font-style: italic;
}
#docs-index #merit ul li p {
  max-width: 400px;
  margin: 20px auto 0;
}
#docs-index #merit ul li p a {
  color: #ffffff;
}
#docs-index #merit ul li:nth-child(1) {
  background: url(/img/docs/top/merit1.jpg) center top no-repeat;
  background-size: cover;
  margin-right: 2%;
}
#docs-index #merit ul li:nth-child(2) {
  background: url(/img/docs/top/merit2.jpg) center top no-repeat;
  background-size: cover;
}
#docs-index #merit ul li:nth-child(3) {
  background: url(/img/docs/top/merit3.jpg) center top no-repeat;
  background-size: cover;
  margin-right: 2%;
}
#docs-index #merit ul li:nth-child(4) {
  background: url(/img/docs/top/merit4.jpg) center top no-repeat;
  background-size: cover;
}
#docs-index #power {
  background: #f5f9ff;
}
#docs-index #power h2 {
  color: #002d7f;
}
#docs-index #power h2 img {
  display: block;
  width: 58px;
  margin-bottom: 0;
}
#docs-index #power canvas {
  background: #ffffff;
  padding: 10px;
}
#docs-index #power #power-rate {
  text-align: center;
}
#docs-index #power #power-rate dl {
  display: flex;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto 20px;
}
#docs-index #power #power-rate .rate-wrap {
  width: 48%;
  background: #0095ff;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  margin: 5px 1%;
}
#docs-index #power #power-rate .rate-wrap dd {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}
#docs-index #power #chart-wrap {
  position: relative;
  padding-top: 50px;
}
#docs-index #power .ul-flex-wrap {
  display: flex;
  justify-content: flex-end;
}
#docs-index #power #chart-switch {
  display: flex;
  align-items: center;
  border: 1px solid #0095ff;
  background-color: #fff;
  height: 36px;
  border-radius: 36px;
  padding: 2px;
}
#docs-index #power #chart-switch li {
  color: #999999;
  font-weight: bold;
  cursor: pointer;
  height: 30px;
  width: 86px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
#docs-index #power #chart-switch li.active {
  color: #fff;
  background-color: #0095ff;
}
#docs-index #facilities h2 {
  color: #002d7f;
}
#docs-index #facilities h2 img {
  display: block;
  width: 58px;
  margin-bottom: 0;
}
#docs-index #blog {
  background: #f5f9ff;
}
#docs-index #blog h2 {
  color: #002d7f;
}
#docs-index #blog .hd-desc {
  position: relative;
  width: 320px;
  margin: 0 auto;
}
#docs-index #blog .hd-desc br {
  display: none;
}
#docs-index #blog .hd-desc:before,
#docs-index #blog .hd-desc:after {
  border-bottom: 1px solid;
  content: "";
}
#docs-index #blog .hd-desc:before {
  position: absolute;
  top: 0.2em;
  left: -4em;
  height: 0.5em;
  width: 3em;
}
#docs-index #blog .hd-desc:after {
  position: absolute;
  top: 0.2em;
  right: -4em;
  height: 0.5em;
  width: 3em;
}
#docs-index #blog ul {
  overflow: hidden;
  padding: 2px;
}
#docs-index #blog ul li {
  background: #ffffff;
  width: 49%;
  float: left;
  margin-bottom: 2%;
  padding: 16px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
#docs-index #blog ul li .blog-wrap {
  display: flex;
}
#docs-index #blog ul li .blog-img {
  width: 32%;
  margin: 0;
}
#docs-index #blog ul li .blog-img img {
  width: 100%;
  border: 1px solid #dddddd;
  margin-bottom: 6px;
}
#docs-index #blog ul li .blog-img .blog-category {
  padding-left: 8px;
}
#docs-index #blog ul li .blog-img .blog-category span {
  display: inline-block;
  height: 20px;
  background: #0055b2;
  color: #ffffff;
  text-align: center;
  font-size: 0.7em;
  font-weight: bold;
  padding: 1px 4px 2px 7px;
  margin-right: 6px;
  position: relative;
}
#docs-index #blog ul li .blog-img .blog-category span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 10px 0;
  border-color: transparent #0055b2 transparent transparent;
}
#docs-index #blog ul li .blog-img .blog-category span::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #ffffff;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -2px;
}
#docs-index #blog ul li .blog-text {
  width: 67%;
  padding-left: 16px;
}
#docs-index #blog ul li .blog-text .blog-title {
  margin-bottom: 8px;
  font-size: 1em;
  line-height: 1.1em;
  color: #333333;
}
#docs-index #blog ul li .blog-text .blog-opening {
  font-size: 0.8em;
  margin: 0 0 8px;
  color: #333333;
}
#docs-index #blog ul li .blog-text .blog-more {
  color: #002d7f;
  font-weight: bold;
  font-size: 0.9em;
}
#docs-index #blog ul li:nth-child(odd) {
  margin-right: 2%;
}
#docs-index #qa h2 {
  color: #002d7f;
}
#docs-index #qa h2 img {
  display: block;
  width: 38px;
  margin-bottom: 0;
}
#docs-index #qa .qa-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-index #qa .qa-list dt:before {
  background: url(/img/docs/top/icon-q.png) center top no-repeat;
  background-size: contain;
}
#docs-index #qa .qa-wrap {
  margin-bottom: 2%;
  width: 49%;
  border: 1px solid #0055b2;
}
#docs-index #qa .qa-wrap dt {
  background: #0055b2;
  color: #ffffff;
  margin: 0;
  padding: 10px 10px 10px 45px;
}
#docs-index #qa .qa-wrap dd {
  font-size: 0.9em;
}
#docs-index #qa .qa-wrap dd .mk {
  background: linear-gradient(transparent 60%, #fff100 0%);
  display: inline;
}
#docs-index #qa .qa-wrap .font-s {
  font-size: 0.8em;
  line-height: 1.3;
  display: inline-block;
}
@media screen and (max-width: 1280px) {
  #docs-index #top-cover .flex {
    align-items: center;
  }
}
@media screen and (max-width: 1160px) {
  #docs-index #latest-info dl .info-wrap {
    display: block;
  }
  #docs-index #content ul h3 {
    font-size: 1.5em;
  }
  #docs-index #use {
    background-size: cover;
  }
  #docs-index #power {
    padding: 30px 0;
  }
  #docs-index #facilities {
    padding: 30px 0 0;
  }
  #docs-index #blog {
    padding: 30px 0 0;
  }
}
@media screen and (max-width: 1020px) {
  #docs-index #top-cover h1 {
    font-size: 2.5em;
  }
}
@media screen and (max-width: 960px) {
  #docs-index #top-cover {
    padding-top: 40px;
  }
  #docs-index #top-cover h1 #span3 {
    display: block;
    font-size: 1.5em;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex {
    display: block;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex h2 {
    padding-top: 0;
  }
  #docs-index #latest-info .flex {
    justify-content: center;
  }
  #docs-index #latest-info .latest-wrap {
    padding-right: 0;
    width: 100%;
  }
  #docs-index #latest-info #gla {
    bottom: auto;
    top: -120px;
    width: 160px;
  }
  #docs-index #latest-info #top-app {
    margin-top: 16px;
  }
  #docs-index #wat #wat-main #wat-catch {
    font-size: 1em;
    max-width: 220px;
  }
  #docs-index #wat #wat-main #wat-text {
    font-size: 1em;
    width: calc(100% - 320px);
  }
  #docs-index #wat #wat-main #wat-text span {
    display: inline;
  }
  #docs-index #merit h3 {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 820px) {
  #docs-index #latest-info dl .info-wrap {
    display: block;
  }
  #docs-index #content {
    padding: 0 20px 20px;
  }
  #docs-index #content ul li {
    width: 100%;
    text-align: left;
    padding: 20px;
    position: relative;
  }
  #docs-index #content ul li h3 {
    margin-left: 220px;
  }
  #docs-index #content ul li h3 img {
    margin: 0;
  }
  #docs-index #content ul li .content-img {
    max-width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
  }
  #docs-index #content ul li .content-img img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  #docs-index #content ul li p {
    max-width: calc(100% - 220px);
    margin: 0;
    margin-left: auto;
  }
  #docs-index #content ul li a {
    display: block;
    margin-top: 1em;
    margin-right: 0;
    margin-left: auto;
  }
  #docs-index #content ul li:nth-child(2) {
    border-left: 2px solid #002d7f;
    border-right: 2px solid #002d7f;
  }
  #docs-index #merit h2 span {
    margin-bottom: 0.5em;
  }
  #docs-index #merit ul li {
    width: 100%;
    float: none;
  }
  #docs-index #merit ul li h3 {
    position: relative;
    padding-left: 70px;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
  }
  #docs-index #merit ul li h3 span {
    position: absolute;
    left: 0;
  }
  #docs-index #blog ul li {
    width: 100%;
    float: none;
  }
  #docs-index #blog ul li .blog-img {
    width: 28%;
  }
  #docs-index #blog ul li .blog-text {
    width: 72%;
  }
  #docs-index #top-cover h1 {
    padding-top: 0;
  }
}
@media (max-width: 768px) {
  #docs-index #top-cover .container {
    background-size: 100%;
    background-repeat: repeat-y;
  }
  #docs-index #top-cover #top-cover-text {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    float: none;
  }
  #docs-index #top-cover #top-cover-text h1 #span3 {
    display: inline-block;
    font-size: 1em;
  }
  #docs-index .top-user {
    display: block;
  }
  #docs-index #top-user {
    width: 100%;
    float: none;
    margin: 60px auto 0;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex {
    display: flex;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex h2 {
    padding-top: 15px;
  }
  #docs-index #banner2 .banner-wrap,
#docs-index #banner3 .banner-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
  }
  #docs-index #banner3 .banner-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
  }
  #docs-index #qa .qa-wrap {
    width: 100%;
  }
}
@media (max-width: 680px) {
  #docs-index .mv-sp {
    display: block;
  }
  #docs-index .mv-pc {
    display: none;
  }
  #docs-index #top-user {
    margin-top: 20px;
    margin-bottom: 40px;
  }
  #docs-index #latest-info dl {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #docs-index #latest-info #gla {
    width: 200px;
    top: -40px;
  }
  #docs-index #latest-info #gla img.pc-img {
    display: none;
  }
  #docs-index #latest-info #gla img.sp-img {
    display: block;
  }
  #docs-index #wat #wat-main {
    max-width: 500px;
    margin: 0 auto;
    display: block;
  }
  #docs-index #wat #wat-main #wat-img {
    margin: 0 auto 10px;
    max-width: 50px;
  }
  #docs-index #wat #wat-main #wat-catch {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  #docs-index #wat #wat-main #wat-catch .catch-m {
    display: inline;
  }
  #docs-index #wat #wat-main #wat-catch .catch-l {
    display: inline;
    font-size: 1.5em;
  }
  #docs-index #wat #wat-main #wat-text {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}
@media (max-width: 640px) {
  #docs-index #content {
    padding: 0 10px;
  }
  #docs-index #content ul li {
    padding: 20px 10px !important;
  }
  #docs-index #content ul li h3 {
    margin: 40px 0 0 220px;
  }
  #docs-index #content ul li .content-img img {
    position: initial;
  }
  #docs-index #content ul li p {
    max-width: 100%;
    margin-top: 50px;
  }
  #docs-index #content ul li a {
    margin-right: auto;
  }
  #docs-index #content ul li:last-child .content-img {
    margin-top: 20px;
  }
  #docs-index #content ul li:last-child p {
    margin-top: 90px;
  }
  #docs-index #campaign .banner-wrap {
    max-width: 480px;
    margin: 0 auto 20px;
  }
  #docs-index #use {
    padding: 20px 10px;
  }
  #docs-index #use .uk-inline {
    padding-left: 0 !important;
  }
  #docs-index #use #use-text {
    position: static !important;
    transform: none !important;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  #docs-index #use #use-text p {
    text-align: left;
  }
  #docs-index #merit ul li.uk-padding {
    padding: 20px 10px;
  }
  #docs-index #wat {
    margin: 0 auto;
  }
}
@media (max-width: 520px) {
  #docs-index #top-cover h1 {
    font-size: 2.3em;
  }
  #docs-index #top-user #user-bk {
    border: none;
  }
  #docs-index #content ul li h3 {
    margin: 0;
    margin-left: 160px;
  }
  #docs-index #content ul li .content-img {
    max-width: 150px;
  }
  #docs-index #content ul li:last-child p {
    margin-top: 80px;
  }
  #docs-index #alliance .flex a {
    width: 100%;
  }
  #docs-index #merit .hd-desc br {
    display: none;
  }
  #docs-index #merit ul li h3 {
    padding-left: 0;
    text-align: center;
  }
  #docs-index #merit ul li h3 span {
    position: static;
    font-size: 2em;
  }
  #docs-index #power .container {
    padding-left: 0;
    padding-right: 0;
  }
  #docs-index #power #power-rate {
    padding: 0 5px;
  }
  #docs-index #power #power-rate .rate-wrap {
    padding: 10px 5px;
  }
  #docs-index #power #power-rate .rate-wrap dt {
    font-size: 0.8em;
  }
  #docs-index #power #power-rate .rate-wrap dd {
    font-size: 5.3vw;
  }
  #docs-index #power .padding-small-right-sp {
    padding-right: 5px;
  }
  #docs-index #power #chart-switch {
    right: 10px;
  }
  #docs-index #blog .hd-desc {
    width: 100%;
  }
  #docs-index #blog .hd-desc:before,
#docs-index #blog .hd-desc:after {
    content: none;
  }
  #docs-index #blog ul li .blog-wrap {
    display: block;
  }
  #docs-index #blog ul li .blog-img {
    width: 100%;
    text-align: center;
  }
  #docs-index #blog ul li .blog-img .blog-category {
    text-align: left;
  }
  #docs-index #blog ul li .blog-text {
    width: 100%;
    padding: 20px 0;
  }
  #docs-index #blog ul li .blog-text a {
    margin-bottom: 1em !important;
  }
}
@media (max-width: 480px) {
  #docs-index #top-cover h1 {
    font-size: 2em;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex {
    display: block;
  }
  #docs-index #top-user #top-loggedIn #until-kw .flex h2 {
    padding-top: 0;
  }
  #docs-index #content ul li h3 {
    font-size: 1.3em;
    margin-left: 130px;
  }
  #docs-index #content ul li .content-img {
    max-width: 120px;
  }
  #docs-index #content ul li p {
    margin-top: 30px;
  }
  #docs-index #content ul li:last-child .content-img {
    margin-top: 0;
    top: 8px;
  }
  #docs-index #content ul li:last-child p {
    margin-top: 50px;
  }
  #docs-index #wat h2 {
    font-size: 1.2em;
  }
  #docs-index #wat #wat-main #wat-catch .catch-m {
    display: block;
  }
  #docs-index #wat #wat-main #wat-catch .catch-l {
    font-size: 2.4em;
  }
  #docs-index #wat #wat-main #wat-text {
    font-size: 1em;
  }
  #docs-index #merit ul li h3 {
    font-size: 1.1em;
  }
  #docs-index #merit ul li h3 br {
    display: none;
  }
  #docs-index #blog .hd-desc br {
    display: block;
  }
}
@media (max-width: 404px) {
  #docs-index #top-cover #top-cover-text h1 {
    font-size: 1.8em;
  }
  #docs-index #top-cover #top-cover-text h1::after {
    width: 100px;
    height: 75px;
    margin-left: 6.2em;
  }
  #docs-index #content ul li:last-child p {
    margin-top: 20px;
  }
}
@media (max-width: 360px) {
  #docs-index #top-user #top-loggedIn .flex {
    justify-content: space-around;
  }
  #docs-index #top-user #top-loggedIn #top-kw h4 {
    font-size: 1em;
  }
  #docs-index #top-user #top-loggedIn #top-kw .kw-txt p {
    font-size: 0.8em;
  }
}

/*
 *
 * docs/中ページ用CSS
 *
 */
/*---------- 共通 ----------*/
.docs-wrap .hd-category {
  font-size: 0.4em;
  border: 1px solid #ffffff;
  padding: 5px;
  display: table;
  margin: 0 auto 2px;
}
.docs-wrap h2 {
  font-size: 2.5em;
}
.docs-wrap h3 {
  font-size: 1.3em;
}
.docs-wrap p {
  line-height: 1.8;
}
.docs-wrap .flex {
  justify-content: space-between;
}
.docs-wrap .width-1-2 {
  display: flex;
}
.docs-wrap .width-1-2 .width-l {
  width: 50%;
  padding-right: 2%;
}
.docs-wrap .width-1-2 .width-r {
  width: 50%;
  padding-left: 2%;
}
.docs-wrap .width-3-2 {
  display: flex;
}
.docs-wrap .width-3-2 .width-3 {
  width: 60%;
  padding-right: 2%;
}
.docs-wrap .width-3-2 .width-2 {
  width: 40%;
  padding-left: 2%;
}

/* docs共通のデザイン */
.docs-common .h-bottom-blue,
.docs-common .h-bottom-blue-left,
.docs-common .h-bottom-white {
  font-size: 0.4em;
}

/*---------- end共通 ----------*/
/*---------- はじめての方へ ----------*/
#docs-about #about-wattstore .text-wrap,
#docs-about #about-purpose .text-wrap {
  width: 58%;
}
#docs-about #about-wattstore .img-wrap,
#docs-about #about-purpose .img-wrap {
  width: 38%;
  text-align: center;
}
#docs-about #about-wattstore .img-wrap img,
#docs-about #about-purpose .img-wrap img {
  max-width: 340px;
  width: 100%;
}
#docs-about #about-feature h3 span {
  color: #0095ff;
  display: block;
  font-size: 0.7em;
}
#docs-about #about-feature ul li {
  margin-bottom: 30px;
}
#docs-about #about-feature ul li .text-wrap {
  width: 60%;
}
#docs-about #about-feature ul li .img-wrap {
  width: 36%;
}
#docs-about .about-wat .text-wrap {
  width: calc(96% - 300px);
}
#docs-about .about-wat .img-wrap {
  width: 300px;
  max-width: 300px;
  padding: 20px;
  margin: 0 auto;
}
#docs-about .about-wat .img-wrap p {
  font-size: 1.6em;
  font-weight: bold;
}
#docs-about #about-flow ol {
  display: flex;
  flex-wrap: wrap;
}
#docs-about #about-flow ol li {
  width: 23.5%;
  margin: 0 2% 2% 0;
  background-color: #ffffff;
  border: 1px solid #0095ff;
  border-radius: 5px;
  position: relative;
  padding: 40px 10px 40px 5px;
}
#docs-about #about-flow ol li img {
  max-width: 130px;
  max-height: 83px;
  margin: 0 auto;
  width: 100%;
  display: block;
}
#docs-about #about-flow ol li:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #0095ff;
  position: absolute;
  right: -11px;
  bottom: 70px;
}
#docs-about #about-flow ol li:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  right: -10px;
  bottom: 70px;
}
#docs-about #about-flow ol li:last-child {
  background-color: #0095ff;
  margin: 0 0 2% 0;
}
#docs-about #about-flow ol li:last-child:before,
#docs-about #about-flow ol li:last-child:after {
  content: none;
}

/*---------- endはじめての方へ ----------*/
/*---------- 太陽光発電投資について ----------*/
#docs-solar-index h3 {
  font-size: 1.1em;
}
#docs-solar-index #content-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 2px;
}
#docs-solar-index #content-list li {
  max-width: 550px;
  width: 32%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #dddddd;
  position: relative;
}
#docs-solar-index #content-list li .list-text {
  padding-bottom: 60px;
}
#docs-solar-index #content-list li .list-text .btn-wrap {
  position: absolute;
  width: 90%;
  bottom: 15px;
  left: 5%;
}

/*---------- end太陽光発電投資について ----------*/
/*---------- 太陽光発電投資のしくみ ----------*/
#docs-solar-structure .quote-wrap {
  padding: 2%;
}
#docs-solar-structure .quote {
  font-style: italic;
  padding: 3% 3% 1%;
  border: 1px solid #656565;
  color: #656565;
  position: relative;
  width: 96%;
  margin: 2%;
}
#docs-solar-structure .quote h3 {
  border-bottom: 2px solid #656565;
  color: #656565;
  font-size: 1.4em;
  display: inline-block;
  padding: 0 0.8em 5px;
  margin-bottom: 30px;
}
#docs-solar-structure .quote h4 {
  border-left: 5px solid #656565;
  color: #656565;
  padding-left: 10px;
  font-size: 1.2em;
  font-weight: bold;
}
#docs-solar-structure .quote h5 {
  color: #656565;
  font-weight: bold;
  margin: 10px 0;
}
#docs-solar-structure .quote p {
  font-size: 0.85em;
}
#docs-solar-structure .quote ul {
  padding-left: 0;
}
#docs-solar-structure .quote #saiene-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
#docs-solar-structure .quote #saiene-list li {
  width: 50%;
}
#docs-solar-structure .quote #charge-list li {
  margin-bottom: 0.5em;
  list-style: disc;
  margin-left: 1em;
  font-size: 0.85em;
}
#docs-solar-structure .quote:before,
#docs-solar-structure .quote:after {
  background-color: #ffffff;
  font-weight: bold;
  font-size: 40px;
  position: absolute;
  width: 0.7em;
  height: 1em;
  font-style: normal;
}
#docs-solar-structure .quote:before {
  content: "“";
  top: -1%;
  left: -1%;
  text-align: left;
}
#docs-solar-structure .quote:after {
  content: "”";
  bottom: -1%;
  right: -1%;
  text-align: right;
}
#docs-solar-structure #structure-04 .icon {
  width: 75px;
}

/*---------- end太陽光発電投資のしくみ ----------*/
/*---------- 安心保証 ----------*/
#docs-solar-guarantee #guarantee-01 h4 {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

/*---------- end安心保証 ----------*/
/*---------- CHANGEについて ----------*/
#docs-solar-change #change-structure .text-wrap {
  width: 60%;
}
#docs-solar-change #change-structure .img-wrap {
  width: 36%;
  max-width: 400px;
  margin: 0 auto;
}
#docs-solar-change #change-flow ul li {
  display: flex;
  align-items: center;
}
#docs-solar-change #change-flow ul li .flow-hd {
  position: relative;
}
#docs-solar-change #change-flow ul li .flow-hd h3 {
  width: 200px;
  color: #ffffff;
  text-align: center;
  padding: 65px 10px 0;
  margin: 0;
  font-size: 1.1em;
}
#docs-solar-change #change-flow ul li .flow-hd h3 img {
  max-width: 80px;
  width: 90%;
  margin: 5px auto;
}
#docs-solar-change #change-flow ul li .flow-hd h3 span {
  display: block;
}
#docs-solar-change #change-flow ul li .flow-hd h3 .span-y {
  color: #fff100;
  font-size: 0.8em;
}
#docs-solar-change #change-flow ul li .flow-hd h3:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  position: absolute;
  left: 0;
  bottom: -50px;
  z-index: 99;
}
#docs-solar-change #change-flow ul li .flow-text {
  padding: 40px 15px 0;
}
#docs-solar-change #change-flow ul li p {
  margin: 0;
  align-self: center;
}
#docs-solar-change #change-flow ul li:nth-child(1) .flow-hd {
  background-color: #97ccfb;
}
#docs-solar-change #change-flow ul li:nth-child(1) .flow-hd h3 {
  padding: 15px 10px 0;
}
#docs-solar-change #change-flow ul li:nth-child(1) .flow-hd h3:after {
  border-color: #97ccfb transparent transparent transparent;
}
#docs-solar-change #change-flow ul li:nth-child(2) .flow-hd {
  background-color: #7bbef9;
}
#docs-solar-change #change-flow ul li:nth-child(2) .flow-hd h3:after {
  border-color: #7bbef9 transparent transparent transparent;
}
#docs-solar-change #change-flow ul li:nth-child(3) {
  margin-bottom: 70px;
}
#docs-solar-change #change-flow ul li:nth-child(3) .flow-hd {
  background-color: #0095ff;
}
#docs-solar-change #change-flow ul li:nth-child(3) .flow-hd h3:after {
  border-color: #0095ff transparent transparent transparent;
}
#docs-solar-change #change-flow ul li:nth-child(4) .flow-hd {
  background-color: #0055b2 !important;
}
#docs-solar-change #change-flow ul li:nth-child(4) .flow-hd h3 {
  padding: 20px 15px;
}
#docs-solar-change #change-flow ul li:nth-child(4) .flow-hd h3:after {
  display: none;
}
#docs-solar-change #change-price .font-l {
  font-size: 1.5rem;
}
#docs-solar-change #change-price .flex {
  justify-content: space-between;
  flex-wrap: wrap;
}
#docs-solar-change #change-price #price-text {
  width: 60%;
}
#docs-solar-change #change-price #exp {
  width: 38%;
  font-size: 0.8em;
}
#docs-solar-change #change-price #exp dl {
  justify-content: flex-start;
  background-color: #ffffff;
  border: 1px solid #000;
  padding: 0 0.5em;
}
#docs-solar-change #change-price #exp dt {
  width: 8em;
  padding: 0.5em 0;
}
#docs-solar-change #change-price #exp dt::after {
  content: "：";
}
#docs-solar-change #change-price #exp dd {
  width: calc(100% - 8em);
  text-align: left;
  padding: 0.5em 0;
}
#docs-solar-change #change-price .chart-wrap h3,
#docs-solar-change #change-price .chart-wrap p {
  margin: 10px 0;
}
#docs-solar-change #change-price #price-ex ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}
#docs-solar-change #change-price #price-ex li {
  width: 31%;
  border: 1px solid #0055b2;
  background-color: #ffffff;
  border-radius: 15px;
}
#docs-solar-change #change-price #price-ex li h4 {
  padding: 10px;
  border-bottom: 1px solid #0055b2;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;
  text-align: center;
}
#docs-solar-change #change-price #price-ex li dl {
  padding: 10px;
  margin: 0;
}
#docs-solar-change #change-price #price-ex li dl dt {
  font-size: 0.8rem;
  margin-top: 5px;
  font-weight: normal;
  float: left;
}
#docs-solar-change #change-price #price-ex li dl dd {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 5px;
  font-weight: bold;
  word-break: keep-all;
}
#docs-solar-change #change-price #price-ex li dl dd:last-child {
  border-bottom: none;
}
#docs-solar-change #change-column #column-wrap {
  border: 1px solid #0055b2;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 30px 15px;
}
#docs-solar-change #change-column h2 img {
  width: 1.5em;
}
#docs-solar-change #change-column .column-main {
  margin-bottom: 80px;
}
#docs-solar-change #change-column .column-main img {
  width: 100%;
}
#docs-solar-change #change-column .h-border {
  border-bottom: 2px solid #333333;
  display: inline-block;
}
#docs-solar-change #change-column .sup {
  padding: 20px;
  font-size: 0.8em;
  background-color: #0055b2;
}
#docs-solar-change #change-column .sup h4 {
  color: #ffffff;
  font-weight: bold;
}
#docs-solar-change #change-column .sup .sup-wrap {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 15px 5px;
  margin: 1%;
  height: 98%;
}
#docs-solar-change #change-column .sup .sup-wrap p {
  font-size: 1em;
  margin-bottom: 0;
}

/*---------- endCHANGEについて ----------*/
/*---------- 地球にできること ----------*/
#docs-goals-index #content-list {
  padding: 0 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 150px;
}
#docs-goals-index #content-list li {
  width: 100%;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
}
#docs-goals-index #content-list li .list-text {
  width: 54%;
  color: #ffffff;
  position: relative;
  z-index: 99;
  padding-bottom: 70px;
}
#docs-goals-index #content-list li h3 {
  color: #ffffff;
}
#docs-goals-index #content-list li .list-img {
  margin-top: -3em;
}
#docs-goals-index #content-list li .btn-trp:hover {
  background-color: #ffffff;
  color: #0095ff;
  opacity: 1;
}
#docs-goals-index #content-list li:after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  content: "";
  width: 59%;
  height: 100%;
  background-color: rgba(0, 85, 178, 0.9);
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  -webkit-transform-origin: right top;
  transform-origin: right top;
}
#docs-goals-index #content-list li:nth-child(2) {
  flex-direction: row-reverse;
}
#docs-goals-index #content-list li:nth-child(2):after {
  right: -8%;
  left: auto;
  width: 63%;
}
#docs-goals-index #content-list .btn-wrap {
  width: 220px;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

/*---------- ソーラーシェアリング ----------*/
#docs-goals-sharing #sharing-02 h4 {
  font-weight: bold;
  display: flex;
  align-items: center;
}
#docs-goals-sharing #sharing-02 h4:before,
#docs-goals-sharing #sharing-02 h4:after {
  border-top: 1px solid #333333;
  content: "";
  flex-grow: 1;
}
#docs-goals-sharing #sharing-02 h4:before {
  margin-right: 1rem;
}
#docs-goals-sharing #sharing-02 h4:after {
  margin-left: 1rem;
}
#docs-goals-sharing #sharing-02 ul {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  justify-content: space-between;
}
#docs-goals-sharing #sharing-02 li {
  border-radius: 5px;
  padding: 15px;
  width: 32%;
  color: #ffffff;
  text-align: center;
}
#docs-goals-sharing #sharing-02 li h5 {
  color: #ffffff;
  font-weight: bold;
  margin: 10px 0;
}
#docs-goals-sharing #sharing-02 li img {
  width: 60px;
  height: 60px;
}
#docs-goals-sharing #sharing-02 li p {
  text-align: left;
  margin: 0;
  font-size: 13px;
}
#docs-goals-sharing #sharing-02 #merit li {
  background-color: #ffae00;
}
#docs-goals-sharing #sharing-02 #demerit li {
  background-color: #0095ff;
}
#docs-goals-sharing #sharing-03 .container {
  padding: 0;
}
#docs-goals-sharing #sharing-03 .width-3 {
  padding-right: 30px;
}
#docs-goals-sharing #sharing-03 .width-2 {
  background: url(/img/docs/goals/bg-sharing.jpg) center top no-repeat;
  background-size: auto 100%;
}

/*---------- endソーラーシェアリング ----------*/
/*---------- グリーンエネルギー環境 ----------*/
#docs-goals-greenenergy .quote {
  font-size: 0.7em;
  color: #999999;
}
#docs-goals-greenenergy .quote a {
  color: #999999;
}
#docs-goals-greenenergy #green-energy .width-3-2 {
  align-items: center;
}
#docs-goals-greenenergy #green-energy .img-wrap {
  max-width: 440px;
  margin: 20px auto 0;
}
#docs-goals-greenenergy #green-co2 .container {
  flex-direction: row-reverse;
}
#docs-goals-greenenergy #green-co2 .width-3-2 .width-3 {
  padding-right: 0;
  padding-left: 2%;
}
#docs-goals-greenenergy #green-co2 img {
  max-width: 400px;
  width: 100%;
}
#docs-goals-greenenergy #green-04 {
  background-color: #ffae00;
  color: #ffffff;
}
#docs-goals-greenenergy #green-04 h2,
#docs-goals-greenenergy #green-04 h3 {
  color: #ffffff;
}
#docs-goals-greenenergy #green-04 .width-r {
  display: flex;
  align-items: center;
}

/*---------- endグリーンエネルギー環境 ----------*/
/*---------- change ----------*/
#docs-goals-change #change-01 img {
  max-width: 280px;
  width: 40%;
}
#docs-goals-change #change-01 img.cross {
  width: 40px;
  margin: 4px;
  transform: rotate(45deg);
}
#docs-goals-change #change-01 #logo-apf {
  padding-top: 20px;
}
#docs-goals-change #change-02 .width-r {
  display: flex;
  align-items: center;
}
#docs-goals-change #change-sdgs h3 img {
  max-width: 350px;
  width: 100%;
}
#docs-goals-change #change-sdgs .width-1-2 {
  align-items: flex-end;
}
#docs-goals-change #change-sdgs ul#goals {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-goals-change #change-sdgs ul#goals li {
  width: 15%;
  margin-bottom: 2%;
}
#docs-goals-change #change-sdgs .target {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 2%;
}
#docs-goals-change #change-sdgs .target .target-img {
  width: 100px;
}
#docs-goals-change #change-sdgs .target p {
  width: calc(100% - 150px);
  text-align: left;
  align-self: center;
  margin-bottom: 1em;
}
#docs-goals-change #change-sdgs #sdgs-attempt h4 {
  font-size: 1.1em;
  color: #0095ff;
}
#docs-goals-change #change-sdgs #sdgs-attempt .uk-list-divider > :nth-child(n+2) {
  margin-top: 20px;
  padding-top: 22px;
}
#docs-goals-change #change-sdgs #sdgs-attempt li a {
  color: #333333;
}

/*---------- endCHANGE ----------*/
/*---------- ご利用の流れ----------*/
#docs-flow-index {
  background-color: #f5f9ff;
}
#docs-flow-index #content-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2px;
}
#docs-flow-index #content-list li {
  max-width: 540px;
  width: 48.5%;
  margin: 0 3% 3% 0;
  padding: 30px;
  background-color: #ffffff;
}
#docs-flow-index #content-list li .list-img {
  width: 46px;
  margin-bottom: 5px;
}
#docs-flow-index #content-list li:nth-child(even) {
  margin: 0 0 3% 0;
}

.docs-flow {
  background-color: #f5f9ff;
}
.docs-flow .pc-img {
  display: block;
}
.docs-flow .sp-img {
  display: none;
}
.docs-flow ol li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.docs-flow ol li h3 span {
  display: block;
  font-size: 0.6em;
  margin-bottom: 10px;
}
.docs-flow ol li .flow-text {
  width: 40%;
}
.docs-flow ol li .flow-text span {
  font-size: 85%;
}
.docs-flow ol li .flow-img {
  width: 57%;
  margin-left: 3%;
  padding: 30px;
  background-color: #ffffff;
}
.docs-flow ol li .flow-img img {
  border: 1px solid #dddddd;
}

/*---------- endご利用の流れ----------*/
/*---------- よくある質問 ----------*/
#docs-question {
  background-color: #f5f9ff;
}
#docs-question .col-side-wrap {
  flex-direction: row;
}
#docs-question #question-side #side-hd {
  padding: 20px;
}
#docs-question #question-side .side-main {
  background: #ffffff;
  padding: 20px;
}
#docs-question h3 {
  max-width: 100%;
}
#docs-question dt {
  background-color: #ffffff;
}
#docs-question dd {
  background-color: #ffffff;
}
@media (max-width: 960px) {
  #docs-question .sidebar #side-hd,
#docs-question .sidebar .side-main {
    padding: 10px;
  }
}
@media (max-width: 640px) {
  #docs-question .sidebar {
    width: 100%;
    float: none;
    margin: 0 auto 30px;
  }
  #docs-question .sidebar .side-main {
    padding: 10px;
  }
  #docs-question .sidebar .side-main ul {
    overflow: hidden;
    border: 1px solid #dddddd;
  }
  #docs-question .sidebar .side-main ul a {
    padding: 5px;
  }
  #docs-question .sidebar .side-main ul li {
    width: 50%;
    float: left;
  }
  #docs-question .sidebar .side-main ul li:nth-child(2) {
    border-top: none;
  }
  #docs-question .sidebar .side-main ul li:nth-child(odd) {
    border-right: 1px solid #dddddd;
  }
  #docs-question .sidebar .side-main ul li:last-child {
    border-bottom: none;
  }
}

/*---------- endよくある質問 ----------*/
/*---------- CHANGE建設サポーター ----------*/
#docs-supporter #supporter-icon {
  max-width: 100px;
  margin: 0 auto 1em;
}
#docs-supporter .ios-wrap {
  padding: 15px;
}

.ios-desc-ext #story-bn {
  display: none !important;
}

/*---------- endCHANGE建設サポーター ----------*/
/*---------- ソーシャルメディア ----------*/
#docs-sns #sns-icons {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
#docs-sns #sns-icons img {
  max-width: 60px;
  min-width: 30px;
  width: 50%;
}
#docs-sns #img {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
#docs-sns #img .balloon {
  color: #002d7f;
  font-weight: bold;
  border: 2px solid #002d7f;
  border-radius: 30px;
  padding: 1em;
  width: 100%;
  margin: 0 auto 30px;
  position: relative;
}
#docs-sns #img .balloon:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -14px;
  border: 14px solid transparent;
  border-top-color: #ffffff;
  z-index: 99;
}
#docs-sns #img .balloon:after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -14px;
  border: 14px solid transparent;
  border-top-color: #002d7f;
}

/*---------- end ソーシャルメディア ----------*/
/*---------- レスポンシブ ----------*/
@media screen and (max-width: 900px) {
  .docs-wrap h2 {
    font-size: 2.2em;
  }
  .docs-wrap .width-3-2 .width-3,
.docs-wrap .width-3-2 .width-2 {
    width: 50%;
  }

  #docs-goals-index #content-list li {
    width: 100%;
    margin-bottom: 1em;
  }

  #docs-solar-change #change-price .chart-wrap .uk-flex {
    display: block !important;
  }
  #docs-solar-change #change-price .chart-wrap .uk-flex p {
    text-align: right;
    max-width: initial;
  }
  #docs-solar-change #change-price .chart-wrap .uk-flex h3 {
    max-width: initial;
  }
}
@media screen and (max-width: 820px) {
  .docs-wrap .width-3-2 {
    display: block;
  }
  .docs-wrap .width-3-2 .width-3,
.docs-wrap .width-3-2 .width-2 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .docs-wrap .width-1-2 {
    display: block;
    padding: 0 !important;
  }
  .docs-wrap .width-1-2 .width-l,
.docs-wrap .width-1-2 .width-r {
    width: 100%;
    max-width: 550px;
  }
  .docs-wrap .width-1-2 .width-l {
    padding-right: 0;
    margin: 0 auto 20px;
  }
  .docs-wrap .width-1-2 .width-r {
    padding-left: 0;
    margin: 0 auto;
  }

  .docs-common h2 {
    text-align: center;
  }
  .docs-common h3,
.docs-common p {
    max-width: 560px;
    margin: 0 auto 20px;
  }
  .docs-common .h-bottom-blue-left:after {
    margin: 5px auto 10px;
    text-align: center;
  }
  .docs-common .img-wrap {
    text-align: center;
  }
  .docs-common .img-wrap img {
    position: static;
  }

  #docs-goals-sharing #sharing-03 .container {
    padding: 0 20px;
  }
  #docs-goals-sharing #sharing-03 .width-3 {
    padding-right: 0;
  }

  .docs-flow ol li .flow-text {
    width: 100%;
  }
  .docs-flow ol li .flow-img {
    width: 100%;
    margin-left: 0;
    padding: 15px;
  }
}
@media screen and (max-width: 720px) {
  #docs-flow-index #content-list li {
    width: 100%;
  }
  #docs-flow-index #content-list li {
    margin: 0 auto 20px !important;
  }

  #docs-solar-change #change-structure .flex-content2 {
    width: 100%;
  }
  #docs-solar-change #change-price #price-text {
    width: 100%;
  }
  #docs-solar-change #change-price #price-text p {
    max-width: 100%;
  }
  #docs-solar-change #change-price #exp {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 640px) {
  .docs-wrap h3 br {
    display: none;
  }

  #docs-about #about-flow ol li {
    width: 47%;
    padding: 20px 10px 20px 5px;
  }
  #docs-about #about-flow ol li:before,
#docs-about #about-flow ol li:after {
    bottom: 50px;
  }
  #docs-about #about-flow ol li:nth-child(odd) {
    margin: 0 4% 4% 0;
  }
  #docs-about #about-flow ol li:nth-child(even) {
    margin: 0 0 4% 0;
  }

  .docs-flow ol li .flow-img {
    max-width: 350px;
    width: 90%;
    margin: 0 auto !important;
  }
  .docs-flow ol li .pc-img {
    display: none;
  }
  .docs-flow ol li .sp-img {
    display: block;
  }

  #docs-solar-index #content-list li {
    width: 100%;
    margin: 0 auto 20px;
  }

  #docs-solar-structure .quote #saiene-list li {
    width: 100%;
  }

  #docs-solar-change #change-flow ul li .flow-hd h3 {
    width: 140px;
    font-size: 1em;
  }
  #docs-solar-change #change-flow ul li .flow-hd h3:after {
    border-width: 50px 70px 0 70px;
  }
  #docs-solar-change #change-kw .pc-img {
    display: none;
  }
  #docs-solar-change #change-kw .sp-img {
    display: block;
  }

  #docs-goals-index #content-list li .list-text {
    width: 100%;
  }
  #docs-goals-index #content-list li:before {
    content: "";
    width: 100%;
    background-color: rgba(0, 85, 178, 0.9);
    position: absolute;
    top: 0%;
    left: 0;
    height: 50%;
  }
  #docs-goals-index #content-list li:after, #docs-goals-index #content-list li:nth-child(2):after {
    width: 100%;
    background-color: rgba(0, 85, 178, 0.9);
    -webkit-transform: skew(-10deg);
    transform: skew(-50deg);
    top: 50%;
    left: 0;
    right: auto;
  }

  #docs-goals-change #change-01 img {
    max-width: 200px;
    width: 100%;
  }
  #docs-goals-change #change-01 img.cross {
    width: 30px;
  }
  #docs-goals-change #change-01 #goals-change-logo {
    flex-direction: column;
  }
  #docs-goals-change #change-01 #logo-apf {
    padding-top: 0;
  }
  #docs-goals-change #change-01 #logo-w {
    padding-top: 10px;
  }
}
@media screen and (max-width: 560px) {
  #docs-about #about-purpose h3 .text-block {
    display: inline;
  }

  #docs-solar-change #change-price #price-ex ul {
    display: block;
  }
  #docs-solar-change #change-price #price-ex li {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
  }
}
@media screen and (max-width: 480px) {
  .docs-wrap h2 {
    font-size: 1.5em;
  }
  .docs-wrap h3 {
    font-size: 1.2em;
  }

  .docs-common .h-bottom-blue,
.docs-common .h-bottom-blue-left {
    font-size: 0.6em;
  }
  .docs-common #about-feature h3 span {
    font-size: 0.8em;
  }

  #docs-solar-change #change-flow ul li {
    display: block;
    border: 1px solid #333333;
    margin-bottom: 30px !important;
  }
  #docs-solar-change #change-flow ul li:nth-child(1) .flow-hd h3 {
    padding: 15px 10px;
  }
  #docs-solar-change #change-flow ul li .flow-hd {
    background-color: #0095ff !important;
  }
  #docs-solar-change #change-flow ul li .flow-hd h3 {
    padding: 15px 10px;
    width: 100%;
  }
  #docs-solar-change #change-flow ul li .flow-hd h3 img {
    max-width: 60px;
  }
  #docs-solar-change #change-flow ul li .flow-hd h3:after {
    content: none;
  }
  #docs-solar-change #change-flow ul li .flow-text {
    padding: 10px;
  }
  #docs-solar-change #change-flow ul li:nth-child(3) {
    margin-bottom: 30px !important;
  }

  #docs-goals-sharing #sharing-02 li {
    width: 100%;
    margin: 0.5% 0;
  }

  #docs-goals-change #change-sdgs .target {
    display: block;
    clear: both;
    margin-bottom: 2em;
    min-height: 100px;
  }
  #docs-goals-change #change-sdgs .target .target-img {
    float: left;
    margin: 0 0.5em 0 0;
  }
  #docs-goals-change #change-sdgs .target p {
    width: 100%;
  }
}
/*---------- endレスポンシブ ----------*/
/*
 *
 * キロワッターズ
 *
 */
/**********************
    キロワッターズランク
**********************/
.kw-rank {
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  color: #333333;
}
.kw-rank:hover {
  color: #333333;
}
.kw-rank .kw-badge {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
}
.kw-rank .kw-badge img {
  width: 100%;
  align-self: center;
}
.kw-rank .kw-txt {
  width: calc(100% - 70px);
  line-height: 1.4;
  text-align: center;
  padding: 10px 0;
}
.kw-rank .about-kw .uk-icon {
  width: 12px;
}

/**********************
    キロワッターズページ
**********************/
#docs-kw-index {
  /* 見出し装飾共通 */
  /* end 見出し装飾共通 */
  /*** レスポンシブ ***/
}
#docs-kw-index .sp-br {
  display: none;
}
#docs-kw-index h3 {
  font-size: 1.6em;
}
#docs-kw-index #hd-wrap {
  text-align: center;
}
#docs-kw-index #hd-wrap .hd-top, #docs-kw-index #hd-wrap .hd-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#docs-kw-index #hd-wrap .hd-top::before, #docs-kw-index #hd-wrap .hd-top::after, #docs-kw-index #hd-wrap .hd-bottom::before, #docs-kw-index #hd-wrap .hd-bottom::after {
  content: "";
  background: linear-gradient(to right, #ffdaa4 0%, #9a5f09 8%, #7b4f12 14%, #ba7800 26%, #f6ca84 50%, #ce8c36 75%, #8c592a 87%, #b8782d 93%, #ffeca3 100%);
  width: calc(50% - 22px);
  height: 2px;
}
#docs-kw-index #hd-wrap .hd-top img, #docs-kw-index #hd-wrap .hd-bottom img {
  width: 32px;
  margin: 0 4px;
}
#docs-kw-index #hd-wrap .hd-bottom {
  position: relative;
}
#docs-kw-index #hd-wrap .hd-bottom::before, #docs-kw-index #hd-wrap .hd-bottom::after {
  height: 4px;
  position: absolute;
  top: -9px;
}
#docs-kw-index #hd-wrap .hd-bottom::before {
  left: 0;
}
#docs-kw-index #hd-wrap .hd-bottom::after {
  right: 0;
}
#docs-kw-index #hd-wrap .contents-hd {
  font-family: serif;
  color: white;
  margin: 20px 10px;
}
#docs-kw-index #hd-wrap .hd-line {
  position: relative;
}
#docs-kw-index #hd-wrap .hd-line::before, #docs-kw-index #hd-wrap .hd-line::after {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #ffdaa4 0%, #9a5f09 8%, #7b4f12 14%, #ba7800 26%, #f6ca84 50%, #ce8c36 75%, #8c592a 87%, #b8782d 93%, #ffeca3 100%);
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
}
#docs-kw-index #hd-wrap .hd-line::before {
  height: 4px;
}
#docs-kw-index #hd-wrap .hd-line::after {
  height: 2px;
  margin-top: 8px;
}
#docs-kw-index .flex {
  justify-content: space-between;
}
#docs-kw-index .font-m {
  font-size: 1.1em;
}
#docs-kw-index .color-yellow {
  color: #f2c800;
}
#docs-kw-index #mv {
  background: url(/img/kw/bg_mv.jpg) repeat-x;
  background-size: contain;
}
#docs-kw-index #mv .container {
  padding: 0;
}
#docs-kw-index #intro {
  background: url(/img/kw/bg_lace01.png), linear-gradient(to right, #6d1519 0%, #a90010 50%, #6d181a 100%);
  background-repeat: repeat;
}
#docs-kw-index #intro .flex {
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
}
#docs-kw-index #intro .intro-img {
  width: 30%;
}
#docs-kw-index #intro .intro-txt {
  width: calc(70% - 35px);
}
#docs-kw-index #intro .intro-txt p {
  color: white;
}
#docs-kw-index #intro .bnr-rank img {
  border: solid 1px white;
}
#docs-kw-index #kw {
  background: linear-gradient(to right, #e1b552 25%, #fbf193 57%, #d49832 77%, #d08f29 100%);
}
#docs-kw-index #kw #hd-wrap .hd-top::before, #docs-kw-index #kw #hd-wrap .hd-top::after, #docs-kw-index #kw #hd-wrap .hd-bottom::before, #docs-kw-index #kw #hd-wrap .hd-bottom::after, #docs-kw-index #kw #hd-wrap .hd-line::before, #docs-kw-index #kw #hd-wrap .hd-line::after {
  background: linear-gradient(to right, #3a270d 0, #705e41 50%, #3c290f 100%);
}
#docs-kw-index #kw #hd-wrap .contents-hd {
  color: #282525;
}
#docs-kw-index #kw .flex {
  padding-top: 50px;
}
#docs-kw-index #kw .kw-txt {
  max-width: calc(65% - 40px);
  color: #282525;
  font-size: 0.94em;
}
#docs-kw-index #kw .kw-img {
  width: 35%;
}
#docs-kw-index #detail {
  background: url(/img/kw/bg_lace02.png), linear-gradient(to right, #3a270d 0%, #705e41 50%, #3c290f 100%);
  background-repeat: repeat;
}
#docs-kw-index #detail #hd-wrap .contents-hd {
  text-shadow: 0px 0px 1px black;
}
#docs-kw-index #detail .lead {
  padding: 50px 0 42px;
  color: white;
}
#docs-kw-index #detail #rank-list li {
  width: 32%;
  text-align: center;
  font-weight: bold;
}
#docs-kw-index #detail #rank-list li .rank-wat {
  background-color: rgba(255, 255, 255, 0.67);
  color: #282525;
  padding: 20px 5px;
  font-size: 1.125em;
}
#docs-kw-index #detail #rank-list li .rank-badge {
  background-color: white;
  padding: 20px 10px 22px;
}
#docs-kw-index #detail #rank-list li .rank-badge img {
  max-width: 150px;
  width: 100%;
}
#docs-kw-index #detail #bonus {
  margin-top: 60px;
}
#docs-kw-index #detail #bonus .bonus-hd {
  background-color: rgba(255, 255, 255, 0.67);
  padding: 20px 10px 18px;
  position: relative;
}
#docs-kw-index #detail #bonus .bonus-hd img {
  max-width: 32px;
  width: 100%;
}
#docs-kw-index #detail #bonus .bonus-hd .uk-svg {
  vertical-align: baseline;
  margin-right: 2px;
}
#docs-kw-index #detail #bonus ul {
  background-color: white;
  padding: 0 35px;
}
#docs-kw-index #detail #bonus .bonus-list {
  padding: 35px 0;
  border-top: solid 1px #282525;
}
#docs-kw-index #detail #bonus .bonus-list:first-child {
  border-top: none;
}
#docs-kw-index #detail #bonus .bonus-category {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 20px;
}
#docs-kw-index #detail #bonus .bonus-category .flex {
  text-align: center;
}
#docs-kw-index #detail #bonus .cate-hd {
  display: inline;
  font-size: 0.7em;
}
#docs-kw-index #detail #bonus .bonus-no {
  background-color: #282525;
  border: solid 1px #282525;
  padding: 12px 12px 11px;
  color: white;
  margin-right: 4px;
}
#docs-kw-index #detail #bonus .bonus-rank {
  background-color: white;
  color: #282525;
}
#docs-kw-index #detail #bonus .bank-free {
  width: 32%;
  border: solid 1px #282525;
  background-color: white;
  font-size: 1.1em;
  font-weight: bold;
}
#docs-kw-index #detail #bonus .bank-free dt {
  font-size: 1.125em;
  text-align: center;
  padding: 10px 10px 7px;
}
#docs-kw-index #detail #bonus .bank-free dd {
  text-align: center;
  padding: 10px 10px 2px;
}
#docs-kw-index #detail #bonus .bank-free .font-l {
  font-size: 2.2em;
}
#docs-kw-index #detail #bonus .bank-gold dt {
  background: linear-gradient(to right, #b79a39, #e9d05d);
}
#docs-kw-index #detail #bonus .bank-pla dt {
  background: linear-gradient(to right, #868687, #d9dadb);
}
#docs-kw-index #detail #bonus .bank-dia dt {
  background: linear-gradient(to right, #9a918a, #dedcd7);
}
#docs-kw-index #detail #bonus .bonus-img {
  width: 100%;
  margin: 0 auto;
  max-width: 320px;
  margin: 0 auto;
}
#docs-kw-index #detail #bonus .bonus-status {
  background-color: #282525;
  padding: 10px 10px 8px;
  color: white;
  text-align: center;
}
#docs-kw-index #detail #bonus .bonus-status br {
  display: none;
}
#docs-kw-index #detail #bonus .notes1 {
  margin-top: 8px;
}
#docs-kw-index .rank-wrap {
  background: linear-gradient(to right, #e1b552 25%, #fbf193 57%, #d49832 77%, #d08f29 100%);
  padding: 30px;
  width: 100%;
  margin: 20px auto 0;
}
#docs-kw-index .rank-wrap ol {
  font-weight: bold;
}
#docs-kw-index .rank-wrap ol li {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 4px 10px 10px;
  text-align: left;
  font-size: 1.1em;
  color: #282525;
  position: relative;
}
#docs-kw-index .rank-wrap ol li::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #3a270d 0%, #705e41 50%, #3c290f 100%);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
#docs-kw-index .rank-wrap ol li .order {
  width: 60px;
  text-align: center;
}
#docs-kw-index .rank-wrap ol li .name {
  width: 40%;
  margin-left: 30px;
}
#docs-kw-index .rank-wrap ol li .pref {
  width: 20%;
}
#docs-kw-index .rank-wrap ol li .own-wat {
  width: 31%;
  text-align: right;
}
#docs-kw-index .rank-wrap ol li:nth-child(1) {
  font-size: 1.2em;
  padding: 0 10px 12px;
}
#docs-kw-index .rank-wrap ol li:nth-child(1) .order {
  background: url(/img/kw/no1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 55px;
  height: 38px;
  font-size: 0;
}
#docs-kw-index .rank-wrap ol li:nth-child(2) {
  font-size: 1.2em;
  padding: 8px 10px 12px;
}
#docs-kw-index .rank-wrap ol li:nth-child(2) .order {
  background: url(/img/kw/no2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 55px;
  height: 38px;
  font-size: 0;
}
#docs-kw-index .rank-wrap ol li:nth-child(3) {
  font-size: 1.2em;
  padding: 8px 10px 12px;
}
#docs-kw-index .rank-wrap ol li:nth-child(3) .order {
  background: url(/img/kw/no3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 55px;
  height: 38px;
  font-size: 0;
}
#docs-kw-index .rank-wrap ol li:nth-child(even) {
  background-color: #f4f4f4;
}
#docs-kw-index .rank-wrap ol li.rank-state:after {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
}
#docs-kw-index .rank-wrap ol li.rank-gold:after {
  background: url(/img/kw/gold_s.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#docs-kw-index .rank-wrap ol li.rank-platinum:after {
  background: url(/img/kw/platinum_s.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#docs-kw-index .rank-wrap ol li.rank-diamond:after {
  background: url(/img/kw/diamond_s.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#docs-kw-index .rank-wrap ol li:nth-child(n+31) {
  font-size: 0.8em;
}
#docs-kw-index .rank-wrap ol li:nth-child(n+31):nth-child(odd) {
  background-color: #EEEEEE;
}
#docs-kw-index .rank-wrap ol li:nth-child(n+31):after {
  height: 30px;
}
#docs-kw-index .rank-wrap .notes1 {
  margin-top: 8px;
}
#docs-kw-index .rank-wrap .bk {
  background-color: white;
  padding: 20px 30px;
}
#docs-kw-index .rank-wrap .rank-lead {
  text-align: center;
  font-weight: bold;
  color: #282525;
}
#docs-kw-index .rank-wrap .btn-m {
  padding: 8px 8px 6px;
}
#docs-kw-index .rank-wrap .btn-back {
  color: #282525;
}
#docs-kw-index .wrap-800 a:hover {
  color: white;
}
#docs-kw-index #rank {
  background: linear-gradient(to right, #6d1519 0%, #a90010 50%, #6d181a 100%);
}
#docs-kw-index #rank .rank-hd {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}
#docs-kw-index #rank .rank-hd::before, #docs-kw-index #rank .rank-hd::after {
  content: "";
  width: 1.5em;
  height: 2px;
  background-color: #f2c800;
}
#docs-kw-index #rank .rank-hd::before {
  transform: rotate(50deg);
}
#docs-kw-index #rank .rank-hd::after {
  transform: rotate(-50deg);
}
#docs-kw-index #rank .btn-rank100 {
  background-color: #a90010;
  border: solid 1px #a90010;
  color: white;
}
#docs-kw-index #rank .btn-rank100:hover {
  background-color: white;
  color: #a90010;
}
#docs-kw-index #rank .btn-wrap {
  background: linear-gradient(to right, #ffdaa4 0%, #9a5f09 8%, #7b4f12 14%, #ba7800 26%, #f6ca84 50%, #ce8c36 75%, #8c592a 87%, #b8782d 93%, #ffeca3 100%);
  max-width: 420px;
  margin: 0 auto 10px;
  border-radius: 50px;
  padding: 3px;
  box-shadow: 0 0 8px #4f070c;
}
#docs-kw-index #rank .btn-wrap .btn-bg {
  background: linear-gradient(to bottom, #0f0f0f, #282525);
  border-radius: 50px;
}
#docs-kw-index #rank .btn-wrap .btn-bg:hover {
  background-color: white;
}
#docs-kw-index #rank .btn-wrap .btn-l {
  max-width: 420px;
  font-size: 1.3em;
  padding: 14px 8px 10px;
  border-radius: 50px;
}
#docs-kw-index #rank .btn-wrap .btn-l span {
  padding-top: 5px;
}
#docs-kw-index #rank .btn-wrap .btn-gold {
  border: none;
  color: #f6ca84;
  background: -webkit-linear-gradient(0deg, #ffdaa4 0%, #9a5f09 8%, #7b4f12 14%, #ba7800 26%, #f6ca84 50%, #ce8c36 75%, #8c592a 87%, #b8782d 93%, #ffeca3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#docs-kw-index #rank .btn-wrap img {
  width: 28px;
  margin-right: 2px;
}
#docs-kw-index #rank-modal .uk-close {
  position: absolute;
  top: -10px;
  right: 0;
  color: #282525;
  font-weight: bold;
  padding: 8px;
}
#docs-kw-index #rank-modal .uk-modal-dialog {
  border-top: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  height: 95%;
}
#docs-kw-index #rank-modal .uk-modal-dialog .rank-wrap {
  height: 100%;
  overflow-y: scroll;
  margin: 0;
}
#docs-kw-index #rank-modal .rank-wrap {
  margin-top: 0;
  padding: 5px;
}
#docs-kw-index #rank-modal .rank-wrap .bk {
  padding: 12px 10px;
}
#docs-kw-index #rank-modal .rank-wrap ol {
  margin-bottom: 12px;
}
@media screen and (max-width: 840px) {
  #docs-kw-index #intro .intro-img {
    width: 35%;
  }
  #docs-kw-index #intro .intro-txt {
    width: calc(65% - 35px);
  }
}
@media screen and (max-width: 768px) {
  #docs-kw-index .sp-br {
    display: block;
  }
  #docs-kw-index #intro .color-yellow .sp-br {
    display: none;
  }
  #docs-kw-index #intro .flex {
    max-width: 568px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
  }
  #docs-kw-index #intro .intro-img {
    width: 50%;
    margin: 0 auto;
  }
  #docs-kw-index #intro .intro-txt {
    width: 100%;
    margin-top: 30px;
  }
  #docs-kw-index #kw .flex {
    flex-direction: column-reverse;
    max-width: 568px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
  }
  #docs-kw-index #kw .kw-txt {
    max-width: 100%;
    margin-top: 30px;
    font-size: 1em;
  }
  #docs-kw-index #kw .kw-img {
    width: 100%;
    text-align: center;
  }
  #docs-kw-index #kw .kw-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  #docs-kw-index #detail {
    padding-bottom: 40px;
  }
  #docs-kw-index #detail #hd-wrap .contents-hd .sp-br {
    display: none;
  }
  #docs-kw-index #detail #rank-list li .rank-wat {
    padding: 10px 5px 6px;
  }
  #docs-kw-index #detail #bonus {
    margin-top: 40px;
  }
  #docs-kw-index #detail #bonus ul {
    padding: 0 20px;
  }
  #docs-kw-index #detail #bonus .bonus-list {
    padding: 20px 0;
  }
  #docs-kw-index #detail #bonus .bonus-hd {
    padding: 10px 10px 8px;
  }
  #docs-kw-index #detail #bonus .bonus-category {
    font-size: 1em;
  }
  #docs-kw-index #detail #bonus .bonus-category .bonus-no {
    padding: 6px 4px;
  }
  #docs-kw-index .rank-wrap .rank-lead {
    font-size: 1.5em;
  }
  #docs-kw-index #rank #hd-wrap .contents-hd .sp-br {
    display: none;
  }
  #docs-kw-index #rank .rank-hd .sp-br {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  #docs-kw-index h3 {
    font-size: 1.3em;
  }
  #docs-kw-index #hd-wrap .contents-hd {
    font-size: 2em;
  }
  #docs-kw-index #intro .color-yellow {
    text-align: center;
  }
  #docs-kw-index #intro .intro-img {
    width: 60%;
  }
  #docs-kw-index #kw .kw-txt {
    max-width: 100%;
  }
  #docs-kw-index #detail #bonus .bonus-hd {
    font-size: 1.3em;
  }
  #docs-kw-index #detail #bonus .bonus-hd svg {
    width: 1em;
  }
  #docs-kw-index #detail #bonus .cate-hd {
    display: block;
    margin-bottom: 10px;
  }
  #docs-kw-index #detail #bonus .bonus1 .bonus-category {
    margin-bottom: 0;
  }
  #docs-kw-index #detail #bonus .bonus1 .notes1 {
    margin-top: 0;
  }
  #docs-kw-index .rank-wrap {
    padding: 30px 20px 20px;
  }
  #docs-kw-index .rank-wrap .bk {
    padding: 20px;
  }
  #docs-kw-index .rank-wrap .rank-lead {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 520px) {
  #docs-kw-index #intro .color-yellow .sp-br {
    display: block;
  }
  #docs-kw-index #detail #hd-wrap .contents-hd .sp-br {
    display: block;
  }
  #docs-kw-index #detail #rank-list li {
    width: 100%;
    display: flex;
    align-items: center;
  }
  #docs-kw-index #detail #rank-list li .rank-wat {
    width: 100%;
    align-self: stretch;
    position: relative;
  }
  #docs-kw-index #detail #rank-list li .rank-wat .rank-hd {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
  }
  #docs-kw-index #detail #rank-list li .rank-wat .sp-br {
    display: none;
  }
  #docs-kw-index #detail #rank-list li .rank-badge {
    padding: 10px;
  }
  #docs-kw-index #detail #rank-list li:nth-child(2) {
    border-top: solid 1px #282525;
    border-bottom: solid 1px #282525;
  }
  #docs-kw-index #detail #bonus .bank-free dt {
    font-size: 0.8em;
    padding: 10px 4px 7px;
  }
  #docs-kw-index #rank #hd-wrap .contents-hd .sp-br {
    display: block;
  }
  #docs-kw-index #rank .rank-hd {
    text-align: center;
    padding-top: 40px;
  }
  #docs-kw-index #rank .rank-hd::before, #docs-kw-index #rank .rank-hd::after {
    width: 2.5em;
  }
  #docs-kw-index #rank .rank-hd::before {
    transform: rotate(55deg);
  }
  #docs-kw-index #rank .rank-hd::after {
    transform: rotate(-55deg);
  }
  #docs-kw-index #rank .rank-hd .sp-br {
    display: block;
  }
  #docs-kw-index .rank-wrap {
    padding: 20px 10px;
  }
  #docs-kw-index .rank-wrap .rank-lead {
    font-size: 1em;
    margin-bottom: 10px;
  }
  #docs-kw-index .rank-wrap .bk {
    padding: 20px 10px;
  }
  #docs-kw-index .rank-wrap ol li {
    font-size: 0.8em;
  }
  #docs-kw-index .rank-wrap ol li .order {
    width: 45px;
  }
  #docs-kw-index .rank-wrap ol li .name {
    margin-left: 10px;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(1) {
    font-size: 1em;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(1) .order {
    width: 45px;
    height: 31px;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(1) .pref {
    font-size: 0.8em;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(2) {
    font-size: 1em;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(2) .order {
    width: 45px;
    height: 31px;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(2) .pref {
    font-size: 0.8em;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(3) {
    font-size: 1em;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(3) .order {
    width: 45px;
    height: 31px;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(3) .pref {
    font-size: 0.8em;
  }
  #docs-kw-index .rank-wrap ol li.rank-state::after {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 420px) {
  #docs-kw-index #hd-wrap .hd-top::before, #docs-kw-index #hd-wrap .hd-top::after {
    width: calc(50% - 16px);
  }
  #docs-kw-index #hd-wrap .hd-top img {
    width: 24px;
  }
  #docs-kw-index #hd-wrap .hd-bottom::before, #docs-kw-index #hd-wrap .hd-bottom::after {
    width: calc(50% - 16px);
    top: -6px;
  }
  #docs-kw-index #hd-wrap .contents-hd {
    margin: 10px;
    font-size: 1.8em;
  }
  #docs-kw-index #rank-modal .uk-modal-body {
    padding: 20px 5px;
  }
  #docs-kw-index #rank-modal .rank-wrap {
    padding: 5px;
  }
  #docs-kw-index #rank-modal .rank-wrap .bk {
    padding: 5px 5px 12px;
  }
  #docs-kw-index #rank-modal .rank-wrap ol li {
    padding: 4px 5px 10px;
  }
  #docs-kw-index #rank-modal .rank-wrap ol li:nth-child(1), #docs-kw-index #rank-modal .rank-wrap ol li:nth-child(2), #docs-kw-index #rank-modal .rank-wrap ol li:nth-child(3) {
    padding: 8px 5px 12px;
  }
  #docs-kw-index #rank-modal .rank-wrap ol li .order {
    width: 35px;
  }
}
@media screen and (max-width: 375px) {
  #docs-kw-index #hd-wrap .contents-hd {
    font-size: 1.5em;
  }
  #docs-kw-index #intro .intro-img {
    width: 80%;
  }
  #docs-kw-index #detail #rank-list li .rank-wat {
    font-size: 1em;
  }
  #docs-kw-index #detail #rank-list li .rank-badge img {
    max-width: 120px;
  }
  #docs-kw-index #detail #bonus ul {
    padding: 0 10px;
  }
  #docs-kw-index #detail #bonus .bank-free {
    font-size: 0.9em;
  }
  #docs-kw-index #rank .rank-hd {
    font-size: 1em;
  }
  #docs-kw-index #rank .btn-wrap .btn-l span {
    right: 8px;
  }
  #docs-kw-index .rank-wrap {
    padding: 20px 5px;
  }
  #docs-kw-index .rank-wrap .bk {
    padding: 12px 5px 20px;
  }
  #docs-kw-index .rank-wrap .rank-lead {
    font-size: 0.9em;
  }
  #docs-kw-index .rank-wrap ol li {
    padding: 4px 5px 10px;
  }
  #docs-kw-index .rank-wrap ol li:nth-child(1), #docs-kw-index .rank-wrap ol li:nth-child(2), #docs-kw-index .rank-wrap ol li:nth-child(3) {
    padding: 8px 5px 12px;
  }
}

/*
 *
 * 私たちの想い
 *
 */
/****** 一覧 ******/
#docs-story-index .font-s {
  font-size: 0.8em;
}
#docs-story-index .font-l {
  font-size: 1.2em;
}

/****** 一覧end ******/
/****** インタビューページ ******/
.story-wrap .wrap-720 {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.story-wrap .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.story-wrap .font-s {
  font-size: 0.8em;
}
.story-wrap .font-l {
  font-size: 1.2em;
}
.story-wrap .font-red {
  color: #fb3946;
}
.story-wrap a {
  color: #0095ff;
  text-decoration: underline;
}
.story-wrap .btn-l {
  color: #ffffff;
  text-decoration: none;
}
.story-wrap .btn-l:hover {
  color: #0095ff;
}
.story-wrap .note-wrap {
  position: relative;
  padding-left: 2.5em;
}
.story-wrap .note {
  position: absolute;
  top: 0;
  left: 0;
}
.story-wrap .icon-tri {
  position: relative;
}
.story-wrap .icon-tri:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #0095ff;
  display: inline-block;
  margin-right: 5px;
}
.story-wrap #mv {
  background-color: #0055b2;
}
.story-wrap #mv h1 {
  font-size: 2em;
}
.story-wrap #mv #mv-txt {
  width: 50%;
  max-width: 580px;
  color: #ffffff;
  padding: 100px 30px;
}
.story-wrap #mv #mv-txt p {
  line-height: 1.6;
}
.story-wrap #mv #mv-txt .hd-category {
  font-size: 0.4em;
  display: inline-block;
  color: #0055b2;
  background-color: #ffffff;
  padding: 6px 8px 4px;
  margin: 0 auto 10px;
}
.story-wrap #mv #mv-txt .uk-align-right {
  margin-left: 0;
}
.story-wrap #mv #mv-img {
  width: 50%;
  background-position: center;
}
.story-wrap #mv #mv-img img {
  display: none;
}
.story-wrap .article-info p {
  font-size: 0.7em;
  color: #666666;
  text-align: right;
}
.story-wrap .profile {
  background-color: #f5f5f5;
  padding: 1.5em;
}
.story-wrap .profile .profile-img {
  width: 150px;
  margin: 0 20px 0 0;
}
.story-wrap .profile .profile-img img {
  display: block;
  border-radius: 50%;
}
.story-wrap .profile .profile-txt {
  width: calc(100% - 170px);
}
.story-wrap .profile p {
  font-size: 0.8em;
}
.story-wrap .profile .name {
  font-weight: bold;
}
.story-wrap #desc .img-right {
  width: 50%;
  max-width: 290px;
  float: right;
  margin: 0 0 0 1em;
}
.story-wrap #desc .img-right p {
  margin: 1em 0;
  text-align: center;
}
.story-wrap #desc .img-wide {
  width: 100%;
  margin: 3em 0;
}
.story-wrap #desc .img-wide p {
  margin: 1em 0 0;
  text-align: center;
}
.story-wrap #desc h2 {
  color: #0055b2;
  font-size: 1.3em;
  text-align: left;
}
.story-wrap #desc h2:before {
  content: "";
  width: 2em;
  height: 3px;
  background-color: #0055b2;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}
.story-wrap #closing {
  border-top: 1px solid #dddddd;
  padding: 40px 0 0;
}
@media (max-width: 680px) {
  .story-wrap #mv {
    flex-direction: column-reverse;
  }
  .story-wrap #mv #mv-txt {
    width: 100%;
    padding: 15px;
  }
  .story-wrap #mv #mv-txt .uk-align-right {
    float: none;
  }
  .story-wrap #mv #mv-txt .font-s {
    font-size: 0.5em;
  }
  .story-wrap #mv #mv-img {
    width: 100%;
  }
  .story-wrap #mv #mv-img img {
    display: block;
  }
  .story-wrap #desc h2 {
    font-size: 1em;
  }
  .story-wrap #desc .img-right {
    width: 100%;
    float: none;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .story-wrap .profile.flex {
    display: block;
    padding: 1em;
  }
  .story-wrap .profile.flex .profile-img {
    margin: 0 auto 1em;
  }
  .story-wrap .profile.flex .profile-txt {
    width: 100%;
  }
}

/*** AKMさんインタビューページのみ ***/
#docs-story-14 #compare {
  color: #333333;
  font-weight: normal;
  margin: 3em 0;
}
#docs-story-14 #compare p {
  margin: 0.5em 0;
}
#docs-story-14 #compare table {
  width: 100%;
  text-align: center;
  font-weight: bold;
}
#docs-story-14 #compare table tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-story-14 #compare table tr {
  width: 15%;
  border-left: 1px solid #999999;
}
#docs-story-14 #compare table #thead {
  width: 10%;
}
#docs-story-14 #compare table th, #docs-story-14 #compare table td {
  display: block;
  padding: 10px 5px;
  border-bottom: 1px solid #999999;
  height: 50px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
}
#docs-story-14 #compare table th {
  font-size: 0.85em;
  background-color: #F7F8FA;
}
#docs-story-14 #compare table .th-top {
  border-top: 1px solid #999999;
}
#docs-story-14 #compare table .row td .sp-hd {
  display: none;
}
#docs-story-14 #compare table .row td .line-red {
  display: inline;
  background: linear-gradient(transparent 80%, #f33c3d 0%);
}
#docs-story-14 #compare table .change-data th {
  border-right: 1px solid #999999;
}
#docs-story-14 #compare table .change-data th img {
  max-width: 100px;
  width: 100%;
}
#docs-story-14 #compare table .change-data td {
  border-right: 1px solid #999999;
}
#docs-story-14 #compare table .change-data td .line-orange {
  display: inline;
  background: linear-gradient(transparent 70%, #FCAF3C 0%);
}
#docs-story-14 #closing .img-wide {
  width: 100%;
  margin: 3em 0;
}
#docs-story-14 #closing .img-wide p {
  margin: 1em 0 0;
  text-align: center;
}
@media (max-width: 680px) {
  #docs-story-14 #compare table {
    max-width: 500px;
    margin: 0 auto;
  }
  #docs-story-14 #compare table tbody {
    display: block;
  }
  #docs-story-14 #compare table #thead {
    display: none;
  }
  #docs-story-14 #compare table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #999999;
  }
  #docs-story-14 #compare table th {
    width: 100%;
  }
  #docs-story-14 #compare table th br {
    display: none;
  }
  #docs-story-14 #compare table .row td {
    display: inline-block;
    width: 33.3%;
    font-size: 1em;
    height: 60px;
    border-bottom: none;
  }
  #docs-story-14 #compare table .row td .sp-hd {
    display: block;
    color: #999999;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #docs-story-14 #compare table .change-data {
    border-bottom: 1px solid #999999;
  }
  #docs-story-14 #compare table .change-data th, #docs-story-14 #compare table .change-data td {
    border-right: none;
  }
}

/*** AKMさんインタビューページのみend ***/
/*** おすしさんインタビューページのみ ***/
#docs-story-16 .section2 img {
  width: 35%;
  float: right;
  padding: 10px;
}
@media screen and (max-width: 639px) {
  #docs-story-16 .section2 img {
    width: 80%;
    float: none;
  }
}
@media screen and (max-width: 420px) {
  #docs-story-16 .section2 img {
    width: 100%;
  }
}

/*** おすしさんインタビューページのみend ***/
/****** インタビューページend ******/
/****** インタビュー一覧（共通） ******/
.story-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.story-list li {
  width: 23.5%;
  overflow: hidden;
  border: 1px solid #dddddd;
  margin-bottom: 2%;
  margin-right: 2%;
}
.story-list li h2 {
  font-size: 1em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-list li a {
  color: #333333;
  display: block;
  position: relative;
  line-height: 1.4;
  text-decoration: none;
}
.story-list li a .list-img {
  position: relative;
}
.story-list li a .list-img img {
  width: 100%;
  display: block;
  transition: 0.5s;
}
.story-list li a .list-img .date {
  background-color: rgba(70, 70, 70, 0.7);
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.7em;
  padding: 2px 4px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.story-list li a .list-txt {
  background-color: #f5f9ff;
  position: relative;
  text-align: center;
  padding: 15px 5px;
}
.story-list li a .list-txt .list-wrap {
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
.story-list li a .list-txt .date {
  display: none;
}
.story-list li a .list-txt .name {
  margin: 10px 0 0;
}
.story-list li a .list-txt:before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  z-index: 0;
  width: 102%;
  height: 100%;
  background-color: #0055b2;
  transform: translate3d(-100%, 0, 0);
  transition: 0.3s;
}
.story-list li a:hover {
  opacity: 1;
}
.story-list li a:hover .list-img img {
  transform: scale(1.3, 1.3);
}
.story-list li a:hover .list-txt .h-top-blue:before {
  background-color: #ffffff;
}
.story-list li a:hover .list-txt:before {
  transform: translate3d(0, 0, 0);
}
.story-list li a:hover h2, .story-list li a:hover p.name {
  color: #ffffff;
}
.story-list li:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 800px) {
  .story-list {
    justify-content: space-between;
  }
  .story-list li {
    width: 49%;
    margin-right: 0;
  }
  .story-list li:nth-child(4n) {
    margin-right: 0;
  }
}
@media (max-width: 680px) {
  .story-list li {
    width: 100%;
  }
  .story-list li h2 {
    font-size: 0.9em;
    text-align: left;
    margin: 0;
  }
  .story-list li a {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f9ff;
  }
  .story-list li a:hover {
    background-color: #0055b2;
  }
  .story-list li a:hover .list-img img {
    transform: none;
  }
  .story-list li a:hover .list-txt .date {
    color: #ffffff;
  }
  .story-list li a .list-img {
    width: 110px;
  }
  .story-list li a .list-img .date {
    display: none;
  }
  .story-list li a .list-img img {
    height: 100%;
    object-fit: cover;
  }
  .story-list li a .list-txt {
    width: calc(100% - 110px);
    text-align: left;
    padding: 5px 5px 5px 10px;
    background: none;
    text-align: left;
  }
  .story-list li a .list-txt .date {
    display: inline-block;
    font-size: 0.7em;
    color: #999999;
    margin: 0;
  }
  .story-list li a .list-txt .h-top-blue:before {
    margin: 5px 0 0;
    height: 2px;
    width: 2em;
  }
  .story-list li a .list-txt .name {
    text-align: left;
    margin: 2px 0 0;
    line-height: 1.2;
  }
  .story-list li a .list-txt .name .font-s {
    font-size: 0.7em;
  }
  .story-list li a .list-txt .name .font-l {
    font-size: 0.9em;
  }
  .story-list li a .list-txt:before, .story-list li a .list-txt:after {
    content: none;
  }
}
@media (max-width: 360px) {
  .story-list li a .list-img {
    width: 100px;
  }
  .story-list li a .list-txt {
    width: calc(100% - 100px);
    font-size: 0.9em;
  }
}

/****** インタビュー一覧（共通）end ******/
/****** 相互リンク ******/
#mutual-link {
  border-top: solid 1px #333333;
  padding-top: 70px;
}
#mutual-link li:nth-child(n+9) {
  display: none;
}
@media (max-width: 640px) {
  #mutual-link h3 {
    font-size: 1.2em;
  }
}

/****** end相互リンク ******/
/*
 *
 * ユーザーインタビュー
 *
 */
.voice-wrap {
  color: #333333;
  background-color: #F7F7F7;
}
.voice-wrap .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.voice-wrap a {
  color: #0095ff;
  text-decoration: underline;
}
.voice-wrap .line-blue {
  background-image: url(/img/docs/voice/ookawa/line_blue_l.png), url(/img/docs/voice/ookawa/line_blue.png), url(/img/docs/voice/ookawa/line_blue_r.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left bottom, left 5px bottom, right bottom;
  background-size: 5px 10px, calc(100% - 10px) 10px, 5px 10px;
}
.voice-wrap .line-red {
  background-image: url(/img/docs/voice/ookawa/line_red_l.png), url(/img/docs/voice/ookawa/line_red.png), url(/img/docs/voice/ookawa/line_red_r.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left bottom, left 5px bottom, right bottom;
  background-size: 5px 10px, calc(100% - 10px) 10px, 5px 10px;
}
.voice-wrap #mv {
  background: url(/img/docs/voice/ookawa/bg.png) left top repeat;
  background-size: 150px;
  height: 750px;
}
.voice-wrap #mv #mv-wrap {
  max-width: 1300px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.voice-wrap #mv #mv-txt {
  max-width: 520px;
  width: 43%;
  position: absolute;
  z-index: 99;
  left: 20px;
  top: 30px;
  color: #ffffff;
  font-size: 1.1em;
  letter-spacing: 3px;
  font-weight: 400;
  line-height: 2.3;
}
.voice-wrap #mv #mv-txt h1 {
  width: 100%;
}
.voice-wrap #mv #mv-txt p {
  margin: 0;
  text-shadow: 1px 1px 2px #000;
}
.voice-wrap #mv #mv-owner #ookawa {
  max-width: 550px;
  width: 60%;
  position: absolute;
  z-index: 97;
  right: 280px;
  top: 150px;
}
.voice-wrap #mv #mv-owner .profile {
  background-color: #E86875;
  color: #ffffff;
  position: absolute;
  z-index: 98;
  width: 300px;
  right: 20px;
  bottom: 0;
  padding: 20px 20px 160px 20px;
}
.voice-wrap #mv #mv-owner .profile h3 {
  width: 289px;
  margin: -40px -20px auto auto;
}
.voice-wrap #mv #mv-owner .profile .name {
  font-weight: bold;
  font-size: 2em;
  margin-top: 80px;
}
.voice-wrap #mv #mv-owner .profile .job {
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 0 50px;
}
.voice-wrap #mv #mv-owner .profile p {
  margin: 0;
}
.voice-wrap #mv #mv-interviewer {
  background-color: #E8E26F;
  color: #333333;
  font-size: 0.8em;
  max-width: 850px;
  width: calc(100% - 60px);
  position: absolute;
  z-index: 96;
  left: 30px;
  bottom: -30px;
  padding: 20px;
}
.voice-wrap #mv #mv-interviewer h3 {
  width: 250px;
  margin: -40px auto 0 -40px;
}
.voice-wrap #mv #mv-interviewer .profile {
  width: calc(100% - 250px);
  justify-content: space-between;
  margin: -40px 0 0;
  padding: 0;
}
.voice-wrap #mv #mv-interviewer .profile li {
  width: 48%;
}
.voice-wrap #mv #mv-interviewer .profile li p {
  margin: 0;
}
.voice-wrap #mv #mv-interviewer .profile li .name {
  font-weight: bold;
}
.voice-wrap #mv #mv-interviewer .profile li .job {
  font-weight: bold;
  font-size: 0.8em;
  margin: 0 0 10px;
}
.voice-wrap #mv #mv-interviewer .profile li img {
  width: 150px;
  margin-bottom: 10px;
}
.voice-wrap #intro {
  border-bottom: 1px solid #707070;
  line-height: 2.3;
}
.voice-wrap .article-info p {
  font-size: 0.7em;
  color: #666666;
  text-align: right;
}
.voice-wrap .desc {
  letter-spacing: 3px;
}
.voice-wrap .desc .comment {
  margin-bottom: 40px;
  padding: 20px;
  position: relative;
}
.voice-wrap .desc .comment:after {
  content: "";
  display: block;
  width: 100px;
  height: 120px;
  position: absolute;
  top: 0;
}
.voice-wrap .desc .comment .balloon-wrap {
  background-color: #ffffff;
  padding: 20px;
  width: calc(100% - 145px);
  position: relative;
}
.voice-wrap .desc .comment .balloon-wrap:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 20px;
}
.voice-wrap .desc .comment .balloon-wrap:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 24px;
  border-style: solid;
}
.voice-wrap .desc .comment .balloon-wrap p {
  margin: 0;
}
.voice-wrap .desc .ookawa:after {
  left: 0;
  background: url(/img/docs/voice/ookawa/comment-ookawa.png) center top no-repeat;
  background-size: contain;
}
.voice-wrap .desc .ookawa .balloon-wrap {
  box-shadow: -4px 4px 0px #BCDCF8;
  margin: 0 0 0 auto;
}
.voice-wrap .desc .ookawa .balloon-wrap:after {
  border-width: 0px 50px 30px 0;
  border-color: transparent #ffffff transparent transparent;
  left: -50px;
}
.voice-wrap .desc .ookawa .balloon-wrap:before {
  left: -54px;
  border-width: 0px 50px 30px 0;
  border-color: transparent #BCDCF8 transparent transparent;
}
.voice-wrap .desc .hatch:after,
.voice-wrap .desc .yutty:after {
  right: 0;
}
.voice-wrap .desc .hatch .balloon-wrap,
.voice-wrap .desc .yutty .balloon-wrap {
  margin: 0 auto 0 0;
}
.voice-wrap .desc .hatch .balloon-wrap:after,
.voice-wrap .desc .yutty .balloon-wrap:after {
  border-width: 0px 0 30px 50px;
  border-color: transparent transparent transparent #ffffff;
  right: -50px;
}
.voice-wrap .desc .hatch:after {
  background: url(/img/docs/voice/ookawa/comment_hatch.png) center top no-repeat;
  background-size: contain;
}
.voice-wrap .desc .hatch .balloon-wrap {
  box-shadow: 4px 4px 0px #FDD5D5;
}
.voice-wrap .desc .hatch .balloon-wrap:before {
  right: -54px;
  border-style: solid;
  border-width: 0px 0 30px 50px;
  border-color: transparent transparent transparent #FDD5D5;
}
.voice-wrap .desc .yutty:after {
  background: url(/img/docs/voice/ookawa/comment_yutty.png) center top no-repeat;
  background-size: contain;
}
.voice-wrap .desc .yutty .balloon-wrap {
  box-shadow: 4px 4px 0px #E8E580;
}
.voice-wrap .desc .yutty .balloon-wrap:before {
  right: -54px;
  border-style: solid;
  border-width: 0px 0 30px 50px;
  border-color: transparent transparent transparent #E8E580;
}
.voice-wrap .desc .img-wide {
  width: 100%;
  margin: 3em 0;
}
.voice-wrap .desc .img-wide p {
  margin: 1em 0 0;
  text-align: center;
}
.voice-wrap .desc h2 {
  color: #ffffff;
  font-weight: 500;
  background: linear-gradient(to right, #333333 0%, #333333 50%, #F7F7F7 51%, #F7F7F7 100%);
  font-size: 1.8em;
  text-align: right;
  position: relative;
}
.voice-wrap .desc h2 .wrap-800 {
  background-color: #333333;
  padding: 15px;
}
.voice-wrap #solavege .img-wrap {
  width: 50%;
  background: url(/img/docs/voice/ookawa/sharing.jpg) center no-repeat;
  background-size: cover;
}
.voice-wrap #solavege .text-wrap {
  width: 50%;
  background-color: #51B6E8;
  color: #ffffff;
  line-height: 2;
  padding: 40px 0 40px 80px;
}
.voice-wrap #solavege .text-wrap #solavege-wrap {
  max-width: 480px;
  width: 100%;
}
.voice-wrap #solavege .text-wrap img {
  width: 160px;
  margin: 0 auto 1em;
  display: block;
}
.voice-wrap #closing {
  border-top: 1px solid #707070;
  padding: 40px 0 0;
}
@media (max-width: 1200px) {
  .voice-wrap #mv {
    height: 900px;
  }
  .voice-wrap #mv #mv-owner #ookawa {
    right: 200px;
    top: 200px;
  }
  .voice-wrap #mv #mv-owner .profile {
    bottom: auto;
    top: 250px;
  }
  .voice-wrap #mv #mv-interviewer {
    z-index: 99;
  }
  .voice-wrap #solavege .text-wrap {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 960px) {
  .voice-wrap #mv {
    height: 1000px;
  }
  .voice-wrap #mv #mv-owner #ookawa {
    top: 250px;
  }
  .voice-wrap #mv #mv-owner .profile {
    top: 300px;
  }
  .voice-wrap #mv #mv-owner .profile .name {
    margin-top: 40px;
  }
  .voice-wrap #mv #mv-interviewer {
    bottom: 30px;
  }
}
@media (max-width: 768px) {
  .voice-wrap #mv {
    height: 1050px;
  }
  .voice-wrap #mv #mv-txt {
    width: 100%;
  }
  .voice-wrap #mv #mv-txt h1 {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
  }
  .voice-wrap #mv #mv-owner #ookawa {
    top: 300px;
    right: auto;
    left: 30px;
  }
  .voice-wrap #mv #mv-owner .profile {
    top: 350px;
  }
  .voice-wrap #mv #mv-owner .profile h3 {
    width: 240px;
  }
  .voice-wrap #mv #mv-interviewer h3 {
    width: 200px;
  }
  .voice-wrap #mv #mv-interviewer .profile {
    width: calc(100% - 180px);
  }
  .voice-wrap .desc h2 {
    font-size: 1.5em;
  }
}
@media (max-width: 640px) {
  .voice-wrap #mv {
    height: auto;
    padding: 30px 10px;
  }
  .voice-wrap #mv #mv-wrap {
    max-width: 500px;
  }
  .voice-wrap #mv #mv-txt {
    position: static;
    max-width: 100%;
    margin: 0 auto 30px;
    letter-spacing: 0;
    font-size: 1em;
  }
  .voice-wrap #mv #mv-txt p {
    text-shadow: none;
  }
  .voice-wrap #mv #mv-owner {
    margin: 0 auto 50px;
  }
  .voice-wrap #mv #mv-owner #ookawa {
    position: static;
    width: 100%;
    margin: 0 auto 30px;
  }
  .voice-wrap #mv #mv-owner .profile {
    position: static;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px 0;
    padding: 20px;
  }
  .voice-wrap #mv #mv-owner .profile h3 {
    margin: -40px auto auto 0;
  }
  .voice-wrap #mv #mv-owner .profile .name {
    margin-top: 20px;
  }
  .voice-wrap #mv #mv-owner .profile .job {
    margin: 0 0 20px;
  }
  .voice-wrap #mv #mv-interviewer {
    position: static;
    width: 100%;
  }
  .voice-wrap #mv #mv-interviewer h3 {
    margin: -40px -30px 0 auto;
  }
  .voice-wrap #mv #mv-interviewer .profile {
    width: 100%;
    margin-top: 20px;
  }
  .voice-wrap .desc {
    letter-spacing: 1px;
  }
  .voice-wrap .desc h2 {
    font-size: 1.1em;
    text-align: left;
    font-weight: bold;
  }
  .voice-wrap .desc .comment {
    padding: 10px;
  }
  .voice-wrap .desc .comment .balloon-wrap {
    width: calc(100% - 85px);
    padding: 10px;
  }
  .voice-wrap .desc .comment .balloon-wrap::before {
    top: 12px;
  }
  .voice-wrap .desc .comment .balloon-wrap::after {
    top: 10px;
  }
  .voice-wrap .desc .comment::after {
    width: 70px;
    height: 84px;
  }
  .voice-wrap .desc .hatch .balloon-wrap::before,
.voice-wrap .desc .yutty .balloon-wrap::before {
    right: -27px;
    border-width: 0px 0 15px 25px;
  }
  .voice-wrap .desc .hatch .balloon-wrap::after,
.voice-wrap .desc .yutty .balloon-wrap::after {
    border-width: 0px 0 15px 25px;
    right: -25px;
  }
  .voice-wrap .desc .ookawa .balloon-wrap::before {
    left: -27px;
    border-width: 0px 25px 15px 0;
  }
  .voice-wrap .desc .ookawa .balloon-wrap::after {
    left: -25px;
    border-width: 0px 25px 15px 0;
  }
  .voice-wrap #solavege .img-wrap {
    width: 100%;
  }
  .voice-wrap #solavege .text-wrap {
    width: 100%;
  }
}

/*
 *
 * マイページ
 *
 */
#mypage-index {
  /****************
    本人確認
  ***************/
  /****************
    振込待ち
  ***************/
  /****************
    資産状況
  ***************/
  /**** 定期購入  ****/
  /****************
    環境貢献
  ***************/
  /****************
    保有発電所一覧
  ****************/
  /****************
    過去7日間の発電量
  ***************/
}
#mypage-index #mv-title {
  margin-bottom: 40px;
}
#mypage-index h2 {
  font-size: 1.7em;
}
#mypage-index .mute {
  color: #666666;
}
#mypage-index #identification-wrap .border {
  border: solid 2px;
}
#mypage-index #identification-wrap .border.warning {
  border-color: #e20000;
}
#mypage-index #identification-wrap .border.checking {
  border-color: #0068ff;
}
#mypage-index #identification-wrap .hd {
  padding: 0.5em 10px;
}
#mypage-index #identification-wrap .hd.warn-hd {
  background-color: #e20000;
}
#mypage-index #identification-wrap .hd.check-hd {
  background-color: #0068ff;
}
#mypage-index #identification-wrap .text-wrap {
  padding: 10px;
}
#mypage-index #identification-wrap .img-wrap {
  width: 120px;
}
#mypage-index #identification-wrap .flex p {
  width: calc(100% - 130px);
}
#mypage-index #identification-wrap .error-wrap {
  background-color: #ffd7d7;
}
#mypage-index #bank-waiting {
  font-size: 0.85em;
  padding: 10px;
  margin: 0 0 30px;
  color: #333333;
}
#mypage-index #bank-waiting h3 {
  border-bottom: 2px solid #333333;
  margin: 0 0 0.5em;
  font-size: 1.1em;
  padding-bottom: 5px;
}
#mypage-index #bank-waiting a {
  color: #333333;
  text-decoration: underline;
}
#mypage-index #bank-waiting .total-wrap {
  width: 50%;
  background-color: #ffffff;
  border: solid 1px #dddddd;
  padding: 8px 16px;
}
#mypage-index #bank-waiting .total-wrap .flex {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#mypage-index #bank-waiting .total-wrap .flex:first-child {
  border-bottom: dotted 1px #dddddd;
}
#mypage-index #bank-waiting .total-wrap .flex:last-child {
  margin-top: 8px;
}
#mypage-index #bank-waiting .total-wrap dd {
  font-size: 1.3em;
  font-weight: bold;
}
#mypage-index #bank-waiting .total-wrap dd .font-s {
  font-size: 0.6em;
}
#mypage-index #bank-waiting .flex {
  justify-content: space-between;
}
#mypage-index #bank-waiting #bank-info {
  width: 32%;
  border: solid 2px #333333;
  padding: 8px;
}
#mypage-index #bank-waiting #notes-wrap {
  width: 65%;
}
@media screen and (max-width: 768px) {
  #mypage-index #bank-waiting .total-wrap {
    width: 100%;
  }
  #mypage-index #bank-waiting #bank-info {
    width: 42%;
  }
  #mypage-index #bank-waiting #notes-wrap {
    width: 56%;
  }
}
@media screen and (max-width: 640px) {
  #mypage-index #bank-waiting #bank-info {
    width: 100%;
  }
  #mypage-index #bank-waiting #notes-wrap {
    width: 100%;
    margin-top: 20px;
  }
}
@media screen and (max-width: 420px) {
  #mypage-index #bank-waiting .total-wrap dd {
    width: 100%;
  }
}
#mypage-index .asset-wrap {
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 15px 10px;
}
#mypage-index .asset-wrap h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
}
#mypage-index .asset-wrap h3 img {
  display: block;
  height: 35px;
  margin: 0 auto;
}
#mypage-index .asset-wrap .asset-data {
  background-color: #282828;
  color: #ffffff;
  border-radius: 5px;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  min-height: 0px !important;
}
#mypage-index .asset-wrap .asset-data dt.asset-dt {
  font-weight: bold;
  font-size: 0.5em;
  width: 100%;
}
#mypage-index .asset-wrap .asset-data dd.asset-dd {
  width: 100%;
}
#mypage-index .asset-wrap .asset-data .dl-wrap {
  width: 100%;
}
#mypage-index .asset-wrap .asset-data .unit {
  font-size: 0.5em;
}
#mypage-index .asset-wrap .asset-data .border-top {
  border-top: 1px solid #f5f5f5;
}
#mypage-index #my-asset .font-xs {
  font-size: 12px;
}
#mypage-index #my-asset .display-items {
  font-size: 0.8em;
}
#mypage-index #my-asset .toggle-menu-contents dt {
  padding-top: 8px;
}
#mypage-index #my-asset .toggle-menu-contents dd {
  border-bottom: dashed 1px #fff;
}
#mypage-index #my-asset .toggle-menu-contents-title {
  font-size: 0.6em;
  background-color: #6B6B6B;
  margin: 8px 0px;
  padding: 4px 2px;
}
#mypage-index #my-asset .flex-with-toggle-icon {
  justify-content: flex-end;
  align-items: center;
}
#mypage-index #my-asset ul {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  gap: 15px 0;
}
#mypage-index #my-asset li {
  position: relative;
  width: 32%;
}
#mypage-index #my-asset li h3 .uk-icon-image {
  width: 1.1em;
  height: 1.1em;
}
#mypage-index #my-asset .asset-2c li {
  width: 49%;
}
#mypage-index #my-asset .asset-1c li {
  width: 100%;
}
#mypage-index #my-asset #wat-detail {
  width: 100%;
}
#mypage-index #my-asset .pl-hide {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#mypage-index #my-asset .pl-hide #asset-wat {
  width: 65%;
}
#mypage-index #my-asset .pl-hide #asset-row2 {
  width: 33%;
  margin: 0;
}
#mypage-index #my-asset #asset-wat .match-h {
  padding-bottom: 5px;
}
#mypage-index #my-asset #asset-wat .asset-data {
  justify-content: flex-end;
  align-content: space-between;
}
#mypage-index #my-asset #asset-wat dl.asset-dl {
  align-content: flex-start;
}
#mypage-index #my-asset #asset-wat #total-wat {
  padding: 0 0 8px 0;
}
#mypage-index #my-asset #asset-wat #detail-wat {
  border-right: 1px solid #f5f5f5;
  padding: 8px 8px 0 0;
}
#mypage-index #my-asset #asset-wat #detail-watplus {
  border-right: 1px solid #f5f5f5;
  padding: 8px 8px 0 0;
}
#mypage-index #my-asset #asset-wat #detail-specialwat {
  padding: 8px 0 0 8px;
}
#mypage-index #my-asset #asset-wat .asset-2c {
  width: 100%;
}
#mypage-index #my-asset #asset-wat .asset-2c .asset-dl {
  width: 33%;
}
#mypage-index #my-asset #asset-wat .btn-wrap {
  width: 49%;
}
#mypage-index #my-asset #asset-pl .text-s {
  display: block;
  text-align: left;
}
#mypage-index #my-asset dl.asset-dl {
  width: 100%;
  margin: 0;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
#mypage-index #my-asset .my-distributed-w {
  font-size: 0.6rem;
  text-align: left;
}
#mypage-index #my-asset .my-distributed-w a {
  display: block;
  border: 1px solid #ffffff;
  padding: 3px 10px 3px 3px;
  color: #ffffff;
  position: relative;
}
#mypage-index #my-asset .my-distributed-w a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent #ffffff;
  display: inline-block;
  margin-right: 5px;
  position: absolute;
  right: 0;
  top: calc(50% - 3px);
}
#mypage-index #my-asset .my-distributed-w a:hover {
  background-color: #ffffff;
  color: #333333;
}
#mypage-index #my-asset .my-distributed-w a:hover::before {
  border-color: transparent transparent transparent #333333;
}
#mypage-index #my-asset .my-distributed-w .font-l {
  font-size: 0.8rem;
  word-break: keep-all;
}
#mypage-index #my-asset .new-func {
  background-color: #ffae00;
  color: #ffffff;
  display: inline-block;
  padding: 0 2px;
  line-height: 1.4;
  font-size: 0.6em;
  position: static;
  vertical-align: super;
}
#mypage-index #my-asset .toggle-icon {
  transition: 0.4s;
}
#mypage-index #my-asset .toggle-icon polyline {
  stroke-width: 2 !important;
}
#mypage-index #my-asset .open {
  transform: rotate(180deg);
}
#mypage-index #my-asset #kanzai-table {
  border: solid 1px #e5e5e5;
}
#mypage-index #my-asset #kanzai-table thead * {
  font-weight: bold;
}
#mypage-index #my-asset #kanzai-table th, #mypage-index #my-asset #kanzai-table td {
  border: solid 1px #e5e5e5;
}
#mypage-index #my-asset #kanzai-table th {
  color: #000;
  vertical-align: top;
}
#mypage-index #my-asset #kanzai-table tbody th {
  width: 50%;
}
#mypage-index #my-asset #kanzai-table tbody td {
  width: 25%;
}
#mypage-index #my-asset #kanzai-table .unit {
  font-size: 0.9em;
}
@media screen and (max-width: 640px) {
  #mypage-index #my-asset ul {
    gap: 0;
  }
  #mypage-index #my-asset .pl-hide #asset-wat {
    width: 100%;
  }
  #mypage-index #my-asset .pl-hide #asset-row2 {
    width: 100%;
    margin: 20px 0;
  }
  #mypage-index #my-asset #asset-wat .btn-wrap .btn-m {
    padding: 8px 0;
  }
  #mypage-index #my-asset #asset-wat .asset-2c .asset-dl {
    width: 100%;
    border-right: none;
  }
  #mypage-index #my-asset #asset-wat .asset-2c dd {
    border-bottom: dashed 1px #fff;
  }
  #mypage-index #my-asset #asset-wat #detail-wat, #mypage-index #my-asset #asset-wat #detail-watplus {
    border-right: none;
  }
  #mypage-index #my-asset #asset-wat #detail-specialwat {
    padding: 8px 8px 0 0;
  }
  #mypage-index #my-asset .asset-2c li {
    width: 100%;
    margin-bottom: 20px;
  }
  #mypage-index #my-asset #kanzai-table {
    font-size: 0.9em;
  }
  #mypage-index #my-asset #kanzai-table tbody th {
    width: 40%;
    padding: 10px 6px;
  }
  #mypage-index #my-asset #kanzai-table tbody td {
    width: 30%;
    padding: 10px 6px;
  }
}
@media screen and (max-width: 480px) {
  #mypage-index #my-asset #asset-wat .btn-wrap {
    width: 100%;
  }
  #mypage-index #my-asset #asset-wat .btn-wrap:last-child {
    margin-top: 10px;
  }
}
#mypage-index #asset-subscription ul {
  padding-left: 0px;
}
#mypage-index #asset-subscription li {
  position: relative;
  width: 48%;
  background-color: #282828;
  border-radius: 5px;
  padding: 5px;
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 8px;
}
#mypage-index #asset-subscription li .unit {
  font-size: 0.5em;
}
#mypage-index #asset-subscription dl {
  margin: 0;
}
#mypage-index #asset-subscription dl dt {
  font-size: 0.5em;
}
#mypage-index #asset-subscription dl dd {
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  #mypage-index #asset-subscription li {
    width: 100%;
  }
}
#mypage-index #eco {
  background-color: #f5f5f5;
  background-image: url(/img/common/bg_eco.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left bottom;
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 20px 10px;
}
#mypage-index #eco h3 {
  font-size: 1.2em;
}
#mypage-index #eco h3 .uk-icon-image {
  width: 1.5em;
  height: 1.5em;
}
#mypage-index #eco ul {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}
#mypage-index #eco li {
  position: relative;
  width: 30%;
  background-color: #282828;
  border-radius: 5px;
  padding: 5px;
  color: #ffffff;
  font-size: 1.5em;
}
#mypage-index #eco dl {
  margin: 0;
}
#mypage-index #eco dl dt {
  font-size: 0.5em;
}
#mypage-index #eco dl dd {
  font-weight: bold;
}
#mypage-index #eco dl dd span {
  font-size: 0.5em;
}
#mypage-index #eco .notes1 {
  font-weight: bold;
}
@media screen and (max-width: 960px) {
  #mypage-index #eco {
    background-size: 100%;
    background-position: left 120%;
  }
  #mypage-index #eco li {
    width: 33%;
    margin-bottom: 2%;
  }
}
@media screen and (max-width: 820px) {
  #mypage-index #eco {
    background-position: left bottom;
  }
  #mypage-index #eco li {
    width: 48%;
  }
}
@media screen and (max-width: 640px) {
  #mypage-index #eco li {
    width: 100%;
  }
}
#mypage-index #my-equipment ul li {
  margin-bottom: 5px;
  font-weight: bold;
  align-items: flex-end;
}
#mypage-index #my-equipment .eq-wrap {
  background-color: #f5f5f5;
  width: 100%;
}
#mypage-index #my-equipment .eq-name {
  display: flex;
  align-items: center;
  padding: 3px 2px 3px 3px;
  width: 36%;
  background-color: #0095ff;
  color: #ffffff;
  font-size: 0.9em;
  border: 1px solid #dddddd;
}
#mypage-index #my-equipment .eq-name a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3px 2px 3px 3px;
  color: #ffffff;
  height: 100%;
}
#mypage-index #my-equipment .eq-name a:hover {
  background-color: #ffffff;
  color: #0095ff;
  opacity: 1;
}
#mypage-index #my-equipment .eq-name a .name {
  width: calc(100% - 20px);
}
#mypage-index #my-equipment dl {
  margin: 0;
  width: 64%;
  justify-content: flex-end;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
#mypage-index #my-equipment dl dt {
  font-weight: normal;
  font-size: 0.6em;
}
#mypage-index #my-equipment .eq-data {
  padding: 5px;
  width: 33%;
  height: 100%;
  align-self: flex-end;
}
#mypage-index #my-equipment .eq-own {
  width: 34%;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  padding: 5px;
  color: #ffffff;
  background-color: #282828;
}
#mypage-index #my-equipment .eq-own a {
  display: block;
  height: 100%;
  padding: 5px 20px 5px 5px;
  color: #ffffff;
  background-color: #282828;
  position: relative;
}
#mypage-index #my-equipment .eq-own a dd {
  line-height: 1.2;
}
#mypage-index #my-equipment .eq-own a .uk-icon {
  position: absolute;
  right: 0;
  top: calc(50% - 8px);
  width: 15px;
}
#mypage-index #my-equipment .eq-own a:hover {
  background-color: #ffffff;
  color: #282828;
}
#mypage-index #my-equipment .eq-own .plus-w {
  word-break: keep-all;
}
#mypage-index #my-equipment .btn-more {
  border: 1px solid #0095ff;
  background-color: #fff;
}
#mypage-index #my-equipment .btn-more polyline {
  stroke: #0095ff !important;
  stroke-width: 1.2;
}
#mypage-index #my-equipment .more-btn-icon {
  top: 50%;
  left: 80%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}
@media screen and (max-width: 640px) {
  #mypage-index #my-equipment ul li {
    border: 1px solid #282828;
    margin-bottom: 15px;
  }
  #mypage-index #my-equipment .eq-name {
    width: 100%;
    border: none;
  }
  #mypage-index #my-equipment dl {
    width: 100%;
    border: none;
  }
  #mypage-index #my-equipment .eq-data {
    width: 50%;
    height: auto;
  }
  #mypage-index #my-equipment .eq-own {
    width: 100%;
    border: none;
  }
}
#mypage-index #my-chart #chart-wrap {
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  padding: 15px;
  display: flex;
  align-items: center;
}
#mypage-index #my-chart #chart-div {
  width: 100%;
}
#mypage-index #my-chart #chart-info {
  background-color: #282828;
  color: #ffffff;
}
#mypage-index #my-chart #chart-info .my-data {
  padding: 23px 15px;
  border-bottom: 1px solid #BDBDBD;
}
#mypage-index #my-chart #chart-info #act-data {
  border-bottom: none;
}
#mypage-index #my-chart #chart-info dt {
  font-weight: normal;
  margin-bottom: 5px;
}
#mypage-index #my-chart #chart-info dt:before {
  content: "";
  background-color: #0095ff;
  width: 2px;
  height: 1.2em;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 5px;
}
#mypage-index #my-chart #chart-info #eq-name dd {
  text-align: left;
}
#mypage-index #my-chart #chart-info #eq-name dd li a {
  color: #333333;
  background-color: #ffffff;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.9em;
  margin-bottom: 3px;
  display: inline-block;
}
#mypage-index #my-chart #chart-info dd {
  font-weight: bold;
  text-align: right;
}
#mypage-index #my-chart #chart-info dd span {
  font-size: 2em;
}
@media screen and (max-width: 960px) {
  #mypage-index #my-chart #chart-wrap {
    padding: 10px;
  }
  #mypage-index #my-chart #chart-info .my-data {
    border-bottom: none;
  }
  #mypage-index #my-chart #chart-info #plan-data {
    width: 50%;
    float: left;
  }
  #mypage-index #my-chart #chart-info #act-data {
    width: 50%;
    float: right;
  }
}
@media screen and (max-width: 480px) {
  #mypage-index #my-chart #chart-info .my-data {
    padding: 10px;
  }
  #mypage-index #my-chart #chart-info #plan-data,
#mypage-index #my-chart #chart-info #act-data {
    width: 100%;
    float: none;
  }
}

/*
 *
 * /registration用 CSS
 *
 */
/*---------- 登録ステップ ----------*/
#regist-step.step-indicator {
  font-size: 0.6em;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 1.1;
}

#regist-step.step-indicator li {
  height: 50px;
  word-break: keep-all;
}

#regist-step.step-indicator li:before,
#regist-step.step-indicator li:after {
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

/*---------- 登録ステップ ----------*/
/* 送信完了 */
#registration-send .wrap-main {
  max-width: 900px;
  margin: 0 auto;
  color: #333333;
}
#registration-send .note {
  background-color: #ffe9e9;
  border: 2px solid #e20000;
  padding: 1em;
  margin-top: 50px;
}
@media screen and (max-width: 640px) {
  #registration-send h2.uk-card-title {
    font-size: 1.2em;
  }
}

/* アクティベーション */
#registration-activation h2 span {
  font-size: 80%;
  white-space: nowrap;
}
#registration-activation #snackbar {
  z-index: 999;
}

/* 送信完了 */
#registration-thanks .font-main {
  color: #0061B9;
}
#registration-thanks .hd-deco {
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#registration-thanks .hd-deco::before, #registration-thanks .hd-deco::after {
  content: "";
  width: 1.4em;
  height: 2px;
  background-color: #333333;
}
#registration-thanks .hd-deco::before {
  transform: rotate(60deg);
}
#registration-thanks .hd-deco::after {
  transform: rotate(-60deg);
}
#registration-thanks h3 {
  font-size: 1.1em;
}
#registration-thanks #thanks-main {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}
#registration-thanks #thanks-main img {
  max-width: 500px;
  width: 80%;
}
@media screen and (max-width: 640px) {
  #registration-thanks #thanks-main h2 {
    font-size: 1.3em;
  }
}
#registration-thanks #msg {
  font-size: 1.2em;
  background-color: #ffa440;
  color: #ffffff;
  font-weight: bold;
  padding: 15px;
}
#registration-thanks .font-orange {
  color: #fba440;
  font-weight: bold;
}
#registration-thanks #mypage-btn {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #fba440;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  font-size: 0.8em;
  padding-top: 25px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
  box-shadow: 0px 0px 4px #000;
}
#registration-thanks #mypage-btn img {
  width: 30px;
}
#registration-thanks .banner-wrap {
  width: 31%;
}
#registration-thanks .detail-wrap a {
  color: #333;
}
#registration-thanks a {
  cursor: pointer !important;
}
@media screen and (max-width: 780px) {
  #registration-thanks .hd-deco {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
  }
  #registration-thanks .hd-deco::before, #registration-thanks .hd-deco::after {
    width: 2em;
  }
  #registration-thanks .list-wrap br {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  #registration-thanks .hd-deco {
    font-size: 1.3em;
  }
  #registration-thanks .pc-disp {
    display: none;
  }
  #registration-thanks #thanks-main p {
    text-align: left;
  }
  #registration-thanks #msg {
    font-size: 1em;
  }
  #registration-thanks .banner-wrap {
    width: 100%;
    margin-bottom: 40px;
  }
}

#registration-thanks #flow h3,
#registration-afm #flow h3 {
  color: #002d7f;
  font-size: 2em;
}
#registration-thanks #flow .flow-bk,
#registration-afm #flow .flow-bk {
  background: linear-gradient(to right, #0095ff, #0055b2);
}
#registration-thanks #flow ol,
#registration-afm #flow ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}
#registration-thanks #flow ol li h4,
#registration-afm #flow ol li h4 {
  color: #ffffff;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 10px;
}
#registration-thanks #flow li,
#registration-afm #flow li {
  width: 33%;
  text-align: center;
}
#registration-thanks #flow li .list-wrap,
#registration-afm #flow li .list-wrap {
  background-color: #ffffff;
  padding: 25px 15px 5px;
  font-weight: bold;
  position: relative;
}
#registration-thanks #flow li .list-wrap img,
#registration-afm #flow li .list-wrap img {
  height: 60px;
}
#registration-thanks #flow li .list-wrap::before,
#registration-afm #flow li .list-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -10px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
#registration-thanks #flow li:nth-child(1) .list-wrap::before,
#registration-afm #flow li:nth-child(1) .list-wrap::before {
  border-top: 10px solid #388bea;
}
#registration-thanks #flow li:nth-child(2) .list-wrap::before,
#registration-afm #flow li:nth-child(2) .list-wrap::before {
  border-top: 10px solid #2e77d2;
}
#registration-thanks #flow li:nth-child(3) .list-wrap::before,
#registration-afm #flow li:nth-child(3) .list-wrap::before {
  border-top: 10px solid #2462b9;
}
@media screen and (max-width: 640px) {
  #registration-thanks #flow,
#registration-afm #flow {
    /*ol{
      background: linear-gradient(to bottom, #74c1f5, #0f64a7);
    }*/
  }
  #registration-thanks #flow h3,
#registration-afm #flow h3 {
    font-size: 1.5em;
  }
  #registration-thanks #flow .flow-bk,
#registration-afm #flow .flow-bk {
    background: linear-gradient(to bottom, #0095ff, #0055b2);
  }
  #registration-thanks #flow li,
#registration-afm #flow li {
    width: 100%;
  }
  #registration-thanks #flow li:nth-child(1),
#registration-thanks #flow li:nth-child(2),
#registration-afm #flow li:nth-child(1),
#registration-afm #flow li:nth-child(2) {
    margin-bottom: 10px;
  }
}

/* access from media */
#registration-afm .flex {
  justify-content: space-between;
}
#registration-afm #flow li {
  width: 25%;
  text-align: center;
}
#registration-afm #flow li p {
  font-size: 0.8em;
}
#registration-afm #flow li:nth-child(1) .list-wrap::before {
  border-top: 10px solid #028CF4;
}
#registration-afm #flow li:nth-child(2) .list-wrap::before {
  border-top: 10px solid #007DE1;
}
#registration-afm #flow li:nth-child(3) .list-wrap::before {
  border-top: 10px solid #026CCF;
}
#registration-afm #flow li:nth-child(4) .list-wrap::before {
  border-top: 10px solid #005DBB;
}
#registration-afm #mail-filter {
  font-size: 0.8em;
  padding: 1em;
}
@media screen and (max-width: 800px) {
  #registration-afm #form {
    width: 100%;
  }
  #registration-afm #app {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  #registration-afm #flow ol {
    background: linear-gradient(to bottom, #74c1f5, #0f64a7);
  }
  #registration-afm #flow li {
    width: calc(50% - 1px);
  }
  #registration-afm #flow li:nth-child(1) .list-wrap::before,
#registration-afm #flow li:nth-child(3) .list-wrap::before {
    border-top: 10px solid #0284EB;
  }
  #registration-afm #flow li:nth-child(2) .list-wrap::before,
#registration-afm #flow li:nth-child(4) .list-wrap::before {
    border-top: 10px solid #0264C5;
  }
  #registration-afm #flow li:nth-child(1),
#registration-afm #flow li:nth-child(2) {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 640px) {
  #registration-afm #flow li:nth-child(1) .list-wrap::before,
#registration-afm #flow li:nth-child(2) .list-wrap::before {
    border-top: 10px solid #008DF5;
  }
  #registration-afm #flow li:nth-child(3) .list-wrap::before,
#registration-afm #flow li:nth-child(4) .list-wrap::before {
    border-top: 10px solid #006DD0;
  }
}

#corporate-regist {
  display: block;
  max-width: 190px;
  width: 100%;
  border: 1px solid #dddddd;
  float: right;
  padding: 10px 10px 8px;
  color: #333333;
}
#corporate-regist img {
  height: 1.3em;
  vertical-align: sub;
}
@media screen and (max-width: 420px) {
  #corporate-regist {
    max-width: calc(100% - 30px);
    float: initial;
    margin: 0 auto;
  }
}

#login-resendpincode .flex {
  justify-content: space-between;
}
#login-resendpincode #form-resendpincode li {
  width: 48%;
  position: relative;
}
#login-resendpincode #form-resendpincode label {
  display: inline-block;
  width: 100%;
  padding: 20px 20px 20px 40px;
  cursor: pointer;
  border: 2px solid #dddddd;
  font-weight: bold;
}
#login-resendpincode #form-resendpincode label:hover {
  background: #fff6e8;
  border: 2px solid #f9e5c5;
}
#login-resendpincode #form-resendpincode input:checked + label {
  background: #fff6e8;
  border: 2px solid #f9e5c5;
}
#login-resendpincode #form-resendpincode .uk-radio {
  background-color: #ffffff;
  position: absolute;
  top: 28px;
  left: 10px;
}
#login-resendpincode #form-resendpincode .uk-radio:checked {
  background-color: #fbb03b;
}

.cc-wrap {
  border: 2px solid #0095ff;
}
.cc-wrap dt {
  padding: 5px 10px;
  background-color: #0095ff;
  text-align: left;
  font-weight: bold;
  color: #ffffff;
}
.cc-wrap dd {
  background-color: #ffffff;
  padding: 10px;
}
.cc-wrap dd.flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.cc-wrap .cc {
  font-size: 30px;
  font-weight: bold;
  color: #333333;
}
.cc-wrap .cc span {
  font-size: 20px;
}
.cc-wrap .cc img {
  width: 30px;
  display: inline-block;
}
.cc-wrap #realize-btn {
  width: 250px;
}

#point-history .font-s {
  font-size: 0.8em;
}
#point-history .history-table th,
#point-history .history-table td {
  padding: 10px;
  vertical-align: bottom;
  border: 1px solid #dddddd;
}
#point-history .history-table .date {
  background-color: #f5f9ff;
}
#point-history .history-table .hist-cc,
#point-history .history-table .realize-cc {
  font-weight: bold;
}
#point-history .history-table .hist-cc span,
#point-history .history-table .realize-cc span {
  display: none;
  font-weight: normal;
}
#point-history .history-table .request-status .label {
  display: inline-block;
  width: 7em;
  font-size: 0.8em;
  padding: 3px 0;
  border-radius: 15px;
  font-weight: bold;
}
#point-history .history-table .request-status .cancelrequest {
  background-color: #ffffff;
  border: 1px solid #999999;
  color: #999999;
}
#point-history .history-table .request-status .cancelrequest:hover {
  color: #ffffff;
  background-color: #999999;
}
#point-history .history-table .request-status .canceled {
  border: 1px solid #0086ff;
  color: #0086ff;
  background-color: #ffffff;
}
#point-history .history-table .request-status .done {
  background-color: #e5e5e5;
}
@media (max-width: 640px) {
  #point-history #realize-btn {
    width: 100%;
    margin: 20px auto 0;
  }
  #point-history .history-table {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  #point-history .history-table .table-th {
    display: none;
  }
  #point-history .history-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    border-top: 1px solid #e5e5e5;
  }
  #point-history .history-table td {
    display: block;
    border: none;
  }
  #point-history .history-table .history-wrap {
    position: relative;
  }
  #point-history .history-table .history-wrap .request-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
  }
  #point-history .history-table .date {
    background-color: #f5f9ff;
    width: 100%;
  }
  #point-history .history-table .date p {
    padding-right: 1em;
  }
  #point-history .history-table .hist-detail {
    width: 100%;
  }
  #point-history .history-table .hist-cc {
    width: 50%;
  }
  #point-history .history-table .hist-cc span {
    display: inline;
  }
  #point-history .history-table .realize-cc {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
  }
  #point-history .history-table .realize-cc span {
    display: inline;
  }
}

#form-realize h2 {
  font-size: 1em;
  color: rgb(148, 138, 138);
}
#form-realize .font-s {
  font-size: 0.8em;
}
#form-realize #select-realize {
  justify-content: space-between;
}
#form-realize #select-realize li {
  width: 48%;
  position: relative;
}
#form-realize #select-realize #amagif-image {
  max-width: 250px;
  width: 100%;
}
#form-realize #select-realize label {
  display: inline-block;
  width: 100%;
  padding: 20px 20px 20px 40px;
  cursor: pointer;
  border: 2px solid #dddddd;
  font-weight: bold;
}
#form-realize #select-realize label:hover {
  background-color: #fff6e8;
  border: 2px solid #f9e5c5;
}
#form-realize #select-realize input {
  position: absolute;
  top: 45%;
  left: 10px;
  background-color: #ffffff;
}
#form-realize #select-realize input:checked + label {
  background-color: #fff6e8;
  border: 2px solid #f9e5c5;
}
#form-realize #select-realize .uk-radio:checked {
  background-color: #fbb03b;
}
#form-realize .strike {
  text-decoration: line-through;
}
#form-realize #bank-free {
  border-bottom: 1px solid #fb9b01;
  color: #fb9b01;
  display: inline;
}
#form-realize #kw-bonus {
  margin: 0;
  font-size: 0.8em;
}
#form-realize #bank-wrap {
  position: relative;
}
#form-realize #bank-wrap img#kw-ribbon {
  position: absolute;
  top: 0;
  right: 20px;
  width: 20%;
  max-width: 80px;
}
@media screen and (max-width: 780px) {
  #form-realize #select-realize li {
    width: 100%;
  }
  #form-realize #select-realize li:first-child {
    margin-bottom: 20px;
  }
}

/*
 *
 * 売買履歴
 *
 */
#trade-history .font-s {
  font-size: 0.8em;
}
#trade-history #history-table {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
#trade-history #history-table th {
  padding: 10px 5px;
}
#trade-history #history-table td {
  padding: 10px;
}
#trade-history #history-table .detail-cell {
  vertical-align: top;
}
#trade-history #history-table .traded {
  font-size: 0.7em;
  border: 1px solid;
  display: inline-block;
  padding: 3px 3px;
  line-height: 1.2;
  font-weight: bold;
}
#trade-history #history-table .history-cancel {
  background-color: #e5e5e5;
}
#trade-history .detail-btn {
  color: #ffffff;
  background-color: #0055b2;
  border-radius: 5px;
  display: block;
  text-align: center;
  min-width: 60px;
  max-width: 100px;
  margin: 0 auto;
  font-size: 0.9em;
  position: relative;
  padding-right: 5px;
}
#trade-history .detail-btn .uk-icon {
  position: absolute;
  right: 0;
  top: 4px;
  width: 15px;
}
#trade-history .sp-detail {
  max-width: 120px;
  font-size: 1em;
  margin: 0 auto;
}
@media (max-width: 880px) {
  #trade-history #history-table td {
    display: block;
  }
  #trade-history #history-table .date {
    padding-bottom: 0;
  }
  #trade-history #history-table .history-wrap {
    position: relative;
    display: block;
  }
  #trade-history #history-table .history-wrap .detail-cell {
    position: absolute;
    top: 0;
    right: 0;
  }
  #trade-history #history-table .history-wrap:nth-child(odd) {
    background-color: #f5f9ff;
  }
}
@media (max-width: 640px) {
  #trade-history #trade-hist-wrap {
    background-color: transparent;
  }
  #trade-history #history-table {
    border: 1px solid #dddddd;
  }
}

/*
 *
 * 売買詳細
 *
 */
#trade-detail, #point-detail {
  /*#buy-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }*/
}
#trade-detail h2 .h-bottom-blue, #point-detail h2 .h-bottom-blue {
  font-size: 0.4em;
}
#trade-detail span.hd-icon, #point-detail span.hd-icon {
  position: relative;
  padding-left: 1.1em;
}
#trade-detail span.hd-icon:before, #point-detail span.hd-icon:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 1.1em;
  height: 1.1em;
}
#trade-detail span.icon-buy:before, #point-detail span.icon-buy:before {
  background: url(/img/common/icon_buy.png) center bottom no-repeat;
  background-size: auto 100%;
}
#trade-detail span.icon-sell:before, #point-detail span.icon-sell:before {
  background: url(/img/common/icon_sell.png) center bottom no-repeat;
  background-size: auto 100%;
}
#trade-detail .card-wrap, #point-detail .card-wrap {
  /* width:48%;*/
  background-color: #f5f9ff;
  margin: 0 auto 30px;
  padding: 20px;
}
#trade-detail .bank-wrap, #point-detail .bank-wrap {
  padding: 10px;
  border: 2px solid #999999;
  background-color: #f9f9f9;
  margin: 10px 0;
}
#trade-detail .card-wrap .data-wrap, #point-detail .card-wrap .data-wrap {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
#trade-detail .card-wrap .data-wrap:nth-child(odd), #point-detail .card-wrap .data-wrap:nth-child(odd) {
  background-color: #ffffff;
}
@media screen and (max-width: 679px) {
  #trade-detail #buy-data, #point-detail #buy-data {
    display: block;
  }
  #trade-detail .card-wrap, #point-detail .card-wrap {
    width: 100%;
  }
  #trade-detail #distribution-breakdown .data-wrap, #point-detail #distribution-breakdown .data-wrap {
    display: block;
  }
  #trade-detail #distribution-breakdown dt, #point-detail #distribution-breakdown dt {
    margin-bottom: 10px;
  }
  #trade-detail .delivery-note, #point-detail .delivery-note {
    flex-direction: column;
  }
  #trade-detail .delivery-note-before, #point-detail .delivery-note-before {
    margin-bottom: 32px;
  }
}

/*
 *
 * 領収書
 *
 */
#trade-receipt #print-btn {
  display: block;
  background-color: #333333;
  color: #ffffff;
  width: 160px;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
  margin: 0 0 20px auto;
  cursor: pointer;
}
#trade-receipt .main-wrap {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
}
#trade-receipt .receipt-wrap {
  border: 1px solid #dddddd;
  padding: 20px;
  font-weight: bold;
}
#trade-receipt .receipt-wrap h2 {
  font-size: 1.6em;
  width: 200px;
}
#trade-receipt .receipt-wrap dl {
  margin: 0;
}
#trade-receipt .receipt-hd {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#trade-receipt .receipt-hd dl {
  font-size: 0.8em;
  width: 200px;
}
#trade-receipt .receipt-hd .data-wrap {
  display: flex;
  justify-content: space-between;
}
#trade-receipt .receipt-main {
  max-width: 400px;
  margin: 30px auto;
}
#trade-receipt .receipt-main p {
  margin: 0;
}
#trade-receipt .receipt-name {
  font-size: 1.8em;
  text-align: center;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  padding: 10px 0;
}
#trade-receipt .receipt-main dl {
  margin-bottom: 10px;
}
#trade-receipt .receipt-main .data-wrap {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
}
#trade-receipt .receipt-main span.amount {
  font-size: 1.5em;
}
#trade-receipt .receipt-ft {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  font-size: 0.8em;
}
#trade-receipt .receipt-ft p {
  margin: 0;
}
#trade-receipt .receipt-ft .receipt-note {
  font-weight: normal;
  font-size: 0.7em;
  width: 100%;
  max-width: 300px;
  margin-top: 0.5em;
}
#trade-receipt .receipt-company {
  font-weight: bold;
  font-size: 0.5em;
  width: 165px;
}
#trade-receipt .trade-detail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#trade-receipt .detail-wrap {
  width: 48%;
}
#trade-receipt .trade-detail .data-wrap {
  margin-bottom: 10px;
  clear: both;
  font-size: 0.9em;
}
#trade-receipt .trade-detail .data-wrap dt {
  float: left;
  margin-right: 1em;
  font-weight: normal;
}
#trade-receipt h3 {
  border-bottom: 2px solid #333333;
  font-size: 1.1em;
}
#trade-receipt a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
@media screen and (max-width: 639px) {
  #trade-receipt .main-wrap {
    font-size: 13px;
  }
  #trade-receipt .receipt-wrap h2 {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 420px) {
  #trade-receipt .detail-wrap {
    width: 100%;
  }
}
@media print {
  #trade-receipt a[href]:after {
    content: "" !important;
  }
  #trade-receipt abbr[title]:after {
    content: "" !important;
  }
  #trade-receipt main {
    padding: 0px 15px !important;
    margin: 0 !important;
  }
  #trade-receipt #print-btn {
    display: none;
  }
  #trade-receipt .trade-detail {
    margin-top: 30px !important;
  }
}

/*
 *
 * equipment共通CSS
 *
 */
/*---------- 早期割引 ----------*/
.price-down {
  color: #ff1744;
  border: 1px solid #ff1744;
  background-color: #ffffff;
  font-size: 0.6em;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  padding: 0 3px;
  margin: 0 5px 0 0;
  vertical-align: text-bottom;
}

.discout-price {
  color: #ff1744;
}

.selling-price {
  color: #999999;
}

.discount {
  display: inline-block;
  color: #898989;
  position: relative;
  font-weight: normal;
}
.discount::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 45%;
  left: 0;
  background-color: rgba(206, 206, 206, 0.7);
}

.caution-text {
  text-align: center;
  color: #e20000;
  border: 2px solid #e20000;
  background-color: #ffffff;
  padding: 1em 0.5em;
  font-weight: bold;
}

.selling-permit {
  color: #e20000;
  border: 2px solid #e20000;
  background-color: #ffffff;
  padding: 1em 0.5em;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .caution-text {
    text-align: left;
  }
}
/*---------- 一覧 ----------*/
#equip-all-own {
  padding: 0 2% 2%;
}
#equip-all-own .btn-wrap button {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
}

#equipment-index #eq-container {
  overflow: visible;
}
#equipment-index .eq-tab {
  display: flex;
  align-items: flex-end;
  padding-left: 0;
  margin: 0;
  /* 使ってない？ */
}
#equipment-index .eq-tab li {
  margin-right: 10px;
}
#equipment-index .eq-tab li a {
  display: block;
  background-color: #0055b2;
  color: #ffffff;
  padding: 10px 0;
  width: 140px;
  border-radius: 8px 8px 0 0/8px 8px 0 0;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
}
#equipment-index .eq-tab li a:before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  margin-right: 5px;
  vertical-align: text-bottom;
  background-color: #ffffff;
}
#equipment-index .eq-tab li a:hover {
  opacity: 0.8;
}
#equipment-index .eq-tab li.active a {
  background-color: #ffffff;
  color: #333333;
}
#equipment-index .eq-tab li.active a:before {
  background-color: #333333;
}
#equipment-index .eq-tab #all-tab a:before {
  -webkit-mask-image: url(/img/common/icon_list.svg);
  mask-image: url(/img/common/icon_list.svg);
  -webkit-mask-size: 1.2em 1.2em;
  mask-size: 1.2em 1.2em;
}
#equipment-index .eq-tab #own-tab a:before {
  -webkit-mask-image: url(/img/common/icon_regist.svg);
  mask-image: url(/img/common/icon_regist.svg);
  -webkit-mask-size: 1.2em 1.2em;
  mask-size: 1.2em 1.2em;
}
#equipment-index #list-bk {
  padding: 20px;
  background-color: #ffffff;
}
#equipment-index #chart-switch {
  display: flex;
  align-items: center;
  border: 1px solid #0095ff;
  background-color: #fff;
  height: 36px;
  border-radius: 36px;
  padding: 2px;
}
#equipment-index #chart-switch li {
  color: #999999;
  font-weight: bold;
  cursor: pointer;
  height: 30px;
  width: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
#equipment-index #chart-switch li.active {
  color: #fff;
  background-color: #0095ff;
}

/*---------- フィルター機能 ----------*/
#equip-filter .equip-filter-select select {
  border-color: #c8c8c8;
  box-shadow: 1px 1px 3px grey;
}
#equip-filter .equip-filter-wrap-sp {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
#equip-filter .setting-text-wrap {
  box-shadow: 1px 1px 3px grey;
}
#equip-filter .toggle-icon {
  position: absolute;
  right: 2%;
  top: 55%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#equip-filter .toggle-icon svg {
  transition: transform 0.4s;
}
#equip-filter .display-setting-wrap {
  color: #333;
  background-color: #eee;
  width: 50%;
  border: solid 1px #787878;
  z-index: 10;
  transition: 0.4s;
  padding: 10px;
  cursor: pointer;
}
#equip-filter .display-setting-wrap svg {
  color: #0095ff;
}
#equip-filter .display-setting-wrap.active {
  color: #0095ff;
  background-color: #fff;
  border-bottom: solid 1px transparent;
}
#equip-filter .display-setting-wrap.active .toggle-icon svg {
  transform: rotate(180deg);
}
#equip-filter .display-setting-wrap:first-child {
  border-left: none;
}
#equip-filter .display-setting-wrap:last-child {
  border-right: none;
}
#equip-filter .filter-btn-wrap .apply-btn {
  width: 200px;
  margin-left: 32px;
}
#equip-filter .filter-wrap {
  position: absolute;
  background-color: #fff;
  z-index: 1;
  width: 100%;
  top: calc(100% - 1px);
  left: 0;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  padding: 24px 16px;
}
#equip-filter .filter-wrap .flex-right {
  width: 62%;
}
#equip-filter .filter-wrap select {
  width: 100%;
}
#equip-filter .sort-contents {
  padding: 0;
}
#equip-filter .sort-contents a {
  display: block;
  color: #333;
  border-top: 1px solid #ddd;
  padding: 10px;
}
#equip-filter .sort-contents a:last-child {
  border-bottom: 1px solid #ddd;
}
#equip-filter .sort-contents .sort-selected {
  color: #0095ff;
}
#equip-filter .bg-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#equip-filter .setting-btn-wrap {
  padding: 0 20px;
}
#equip-filter .setting-btn-wrap select,
#equip-filter .setting-btn-wrap label {
  cursor: pointer;
}
#equip-filter .equip-sort-type-select {
  max-width: 200px;
}
#equip-filter .equip-sort-type-select select {
  height: 30px;
  color: #333;
  font-weight: bold;
  border: solid 1px #dedcd7;
  border-radius: 5px;
  background-color: #f5f5f5;
  box-shadow: 1px 1px 3px grey;
}
#equip-filter .equip-filter-wrap-pc {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 20px;
}
#equip-filter .equip-filter-wrap-pc .filters-wrap {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 1em;
}
#equip-filter .equip-filter-wrap-pc .filter-btn-wrap {
  width: 100%;
  margin-top: 23px;
}
#equip-filter .equip-filter-wrap-pc .filter-btn-wrap .apply-btn {
  width: 60%;
  margin-left: 0;
}
@media screen and (max-width: 640px) {
  #equip-filter .setting-btn-wrap {
    padding: 0px;
  }
}

.filter-font-s {
  font-size: 0.9em;
}

/*---------- 価格表示／実績表示 ----------*/
#view-switch {
  padding: 0px;
}
#view-switch li label {
  cursor: pointer;
}
#view-switch li:first-child {
  margin-right: 0.7em;
}

/*---------- 販売ステータス ----------*/
#btn-eq-status {
  color: #999999;
  border: solid 1px #999999;
  background-color: white;
  padding: 2px 8px;
  max-width: 220px;
}
#btn-eq-status:hover {
  opacity: 0.8;
}
#btn-eq-status svg circle:nth-child(1) {
  fill: #0095ff;
  stroke: #0095ff;
}
#btn-eq-status svg circle:nth-child(2) {
  fill: white;
}
#btn-eq-status svg path {
  stroke: white;
  stroke-width: 1.5;
}
#btn-eq-status .btn-icon {
  position: absolute;
  padding: 0;
  left: 7%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#eq-sale-status.container {
  max-width: 1100px !important;
  border-radius: 10px;
}
#eq-sale-status .flex-left {
  width: 32%;
}
#eq-sale-status .flex-right {
  width: 68%;
}
#eq-sale-status .flex-wrap {
  max-width: 160px;
  margin-left: 12px;
}
#eq-sale-status .flex-wrap img {
  width: 160px;
}
#eq-sale-status #eq-status-discount {
  border-top: solid 1px #dddddd;
  border-bottom: solid 1px #dddddd;
  margin: 20px 0;
  padding: 40px 0;
}
#eq-sale-status #eq-type-solar .flex-left {
  width: calc(100% - 172px);
}
#eq-sale-status #eq-type-solar .flex-right {
  width: 160px;
}
#eq-sale-status #eq-type-solar .flex-wrap {
  width: 100%;
}
@media screen and (max-width: 960px) {
  #eq-sale-status .flex-left {
    width: 36%;
  }
  #eq-sale-status .flex-right {
    width: 64%;
  }
  #eq-sale-status #eq-type-solar .flex-right {
    width: auto;
  }
}
@media screen and (max-width: 640px) {
  #eq-sale-status .flex-wrap {
    max-width: 140px;
    width: 48%;
    margin-left: 0;
    margin-top: 20px;
  }
  #eq-sale-status .flex-wrap:nth-child(even) {
    margin-left: 2%;
  }
  #eq-sale-status .flex-wrap:nth-child(n+3) {
    margin-top: 0;
  }
  #eq-sale-status .flex-wrap img {
    max-width: 120px;
    width: 100%;
  }
  #eq-sale-status .flex-left,
#eq-sale-status .flex-right {
    width: 100%;
  }
  #eq-sale-status .flex-right {
    max-width: 330px;
    margin: 0 auto;
  }
  #eq-sale-status #eq-type-solar .flex-left,
#eq-sale-status #eq-type-solar .flex-right {
    width: 100%;
  }
}

/*---------- 設備一覧 ----------*/
.equip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 6px;
}
.equip-list .equip-list-wrap {
  width: 32%;
  margin: 0 0 20px;
  border-radius: 10px;
  padding-bottom: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  /**** ステータス表示（見出とワッペン） ****/
  /**** イメージ画像 ****/
  /*** 早割 ***/
}
.equip-list .equip-list-wrap.open h3.eq-name {
  color: #333333;
  background-color: #fff100;
}
.equip-list .equip-list-wrap.open .equip-status-circle {
  padding-top: 16px;
  color: #333333;
  background-color: #fff100;
  border-color: #fff100;
}
.equip-list .equip-list-wrap.open .btn-main {
  background-color: #fff100;
  color: #333333;
  border: 1px solid #fff100;
}
.equip-list .equip-list-wrap.open .btn-main:hover {
  background-color: white;
  border: 1px solid #fff100;
}
.equip-list .equip-list-wrap.stop h3.eq-name {
  background-color: #898989;
}
.equip-list .equip-list-wrap.stop .equip-status-circle {
  padding-top: 16px;
  background-color: #898989;
}
.equip-list .equip-list-wrap.stop .sold-preorder {
  padding-top: 16px;
  border: solid 2px #0095ff;
}
.equip-list .equip-list-wrap.stop .sold {
  padding-top: 16px;
  border: solid 2px #fff100;
}
.equip-list .equip-list-wrap.stop .btn-main {
  background-color: #898989;
  color: white;
  border: 1px solid #898989;
}
.equip-list .equip-list-wrap.stop .btn-main:hover {
  background-color: white;
  color: #898989;
  border: 1px solid #898989;
}
.equip-list .equip-list-wrap h3.eq-name {
  color: #ffffff;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  background-color: #0095ff;
  padding: 0.5em 5px;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.equip-list .equip-list-wrap h3.eq-name img {
  width: 1.5em;
}
.equip-list .equip-list-wrap .equip-status-circle {
  background-color: #0095ff;
  border: 2px solid #0095ff;
  color: #ffffff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  padding-top: 8px;
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
}
.equip-list .equip-list-wrap .equip-status-circle span {
  display: block;
  font-size: 70%;
  margin-top: 2px;
}
.equip-list .equip-list-wrap .equip-img {
  position: relative;
  display: block;
}
.equip-list .equip-list-wrap .equip-img .img-note {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  font-size: 0.6em;
  margin: 0;
}
.equip-list .equip-list-wrap .equip-img .eq-icon-solarhouse {
  position: absolute;
  max-width: 80px;
  width: 100%;
  right: 10px;
  bottom: 5px;
}
.equip-list .equip-list-wrap .equip-img .eq-icon-solarhouse.equip-discount {
  bottom: 50px;
}
.equip-list .equip-list-wrap .equip-pre-discount {
  font-weight: bold;
  color: #ffffff;
  background-color: #ff1744;
  width: 100%;
  text-align: center;
  padding: 2px;
  font-size: 0.9em;
}
.equip-list .equip-list-wrap .equip-pre-discount span {
  background-color: #ffffff;
  color: #ff1744;
  padding: 2px;
}
.equip-list .equip-list-wrap dl {
  margin: 0;
  padding: 0 8px;
}
.equip-list .equip-list-wrap dl .eq-detail-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #BDBDBD;
}
.equip-list .equip-list-wrap dl dt {
  padding: 5px 0;
  margin-right: 10px;
  color: #999999;
}
.equip-list .equip-list-wrap dl dd {
  padding: 5px 0;
  margin-left: auto;
  font-weight: bold;
}
.equip-list .equip-list-wrap .own-info {
  font-weight: bold;
  color: #ffae00;
}
.equip-list .equip-list-wrap .own-info span {
  font-size: 0.8em;
  font-weight: normal;
  display: block;
}
.equip-list .equip-list-wrap .chart-wrap .height-match {
  background-color: #ffffff;
  border: 1px solid #282828;
}
.equip-list .equip-list-wrap .performance-data dt {
  font-weight: normal;
  font-size: 0.9em;
  margin-top: 0.4em;
}
.equip-list .equip-list-wrap .performance-data dd {
  padding: 0;
}
.equip-list .equip-list-wrap .performance-data dd span {
  font-size: 1.5em;
}
.equip-list .equip-list-wrap .performance-data dd.hr {
  border-bottom: 1px solid #282828;
}
.equip-list .equip-list-wrap .chart-content .daily-out-chart {
  width: 100%;
  display: flex;
  align-items: center;
}
.equip-list .equip-list-wrap .chart-content .daily-out-chart .chart-div {
  padding: 5px;
  background-color: #ffffff;
  width: 100%;
}
.equip-list .equip-list-wrap .chart-content .no-chart {
  width: 100%;
  height: 210px;
  padding: 40px 10px 10px;
  margin: 0;
  text-align: center;
  background-color: #ffffff;
}
.equip-list .equip-list-wrap .weather-date {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #282828;
}
.equip-list .equip-list-wrap .weather-date li {
  width: 20%;
  padding: 5px 10px;
  font-size: 0.8em;
}
.equip-list .equip-list-wrap .weather-date li img {
  width: 40px;
}
.equip-list .equip-list-wrap .btn-wrap {
  padding: 10px 0 0;
}
.equip-list .equip-list-wrap .btn-wrap li {
  width: 50%;
}
.equip-list .equip-list-wrap #equip-btn-list .btn-main2 {
  color: #333333;
  border: solid 1px #333333;
}
.equip-list .equip-list-wrap #equip-btn-list .btn-main2:hover {
  color: #0095ff;
  border: solid 1px #0095ff;
  background-color: white;
}
.equip-list .equip-list-wrap #equip-btn-list .btn-disable {
  color: #666666;
  border: solid 1px #666666;
}
.equip-list::after {
  content: "";
  display: block;
  width: 32%;
}

/*---------- end一覧 ----------*/
/*---------- 設備詳細 ----------*/
/* 設備詳細情報共通*/
.equip-info {
  background-color: #f5f9ff;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}
.equip-info .equip-data-wrap:nth-child(odd) {
  background-color: #ffffff;
}

.equip-data-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.equip-data-wrap dt {
  padding: 10px;
}
.equip-data-wrap dd {
  padding: 10px;
  flex-grow: 1;
}
.equip-data-wrap dd .discount {
  color: #666666;
}
.equip-data-wrap dd .discount::before {
  content: "";
  background-color: #666666;
}
.equip-data-wrap .own-panel-detail {
  padding: 0;
  margin: 0;
  width: 100%;
}
.equip-data-wrap .own-panel-detail span {
  display: inline-block;
  padding: 0 2px;
}
.equip-data-wrap .own-panel-detail .trade-stop {
  opacity: 0.5;
}

/******* 発電所詳細 ******/
#equipment-detail {
  /******* TOP設備画像 ******/
  /******* TOP設備スライダー ******/
  /******* TOP設備情報 ******/
  /******* 設備詳細のお知らせ ******/
  /*** ソーラーシェアリング ***/
  /*------ ソーラーハウス ------*/
  /*------ end ソーラーハウス ------*/
  /*------ メディカルネット ------*/
  /*------ モデルケース ------*/
  /*------ 建設サポーター ------*/
  /*------ 発電実績 ------*/
  /*------ レビュー ------*/
  /*------ わっと売り ------*/
}
#equipment-detail h1 {
  color: #333333;
  font-size: 1.7em;
}
#equipment-detail #equip-detail-top .flex {
  justify-content: space-between;
}
#equipment-detail span.h-bottom-blue,
#equipment-detail span.h-bottom-blue-left {
  font-size: 0.4em;
}
#equipment-detail #equip-detail-img {
  width: 49%;
}
#equipment-detail #equip-detail-img .equip-img-wrap {
  width: 100%;
  position: relative;
}
#equipment-detail #equip-detail-img .equip-img-wrap .img-note {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #ffffff;
  font-size: 0.8em;
  margin: 0;
}
#equipment-detail #slidenav-wrap {
  margin-top: 12px;
}
#equipment-detail #slidenav-wrap .uk-slider-items li {
  display: block !important;
  width: 100%;
  max-width: 100px;
  margin-right: 10px;
}
#equipment-detail #slidenav-wrap .uk-slider-items li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#equipment-detail #slidenav-wrap .uk-slider-items li:hover {
  cursor: pointer;
}
#equipment-detail #slidenav-wrap .uk-slider-items li::before {
  content: "";
  display: block;
  padding-top: 100%;
}
#equipment-detail #slidenav-wrap .uk-slider-items li.slide-cam-img img {
  object-fit: contain;
}
#equipment-detail #slidenav-wrap .slidenav-btn {
  display: block;
  width: clamp(40px, 7.5vw, 100px);
  height: 100%;
}
#equipment-detail #slidenav-wrap .slidenav-btn .uk-slidenav {
  color: #333333;
  background-color: white;
  height: 100%;
}
#equipment-detail #slidenav-wrap .slidenav-btn .uk-slidenav:hover {
  color: #333333;
  opacity: 1;
}
@media screen and (max-width: 640px) {
  #equipment-detail #slidenav-wrap .uk-slider-items li {
    width: 20%;
  }
}
#equipment-detail #equip-detail-info {
  width: 49%;
  padding: 0 6px;
}
#equipment-detail #equip-detail-info .equip-list {
  display: block;
  padding: 0;
}
#equipment-detail #equip-detail-info .equip-list .equip-list-wrap {
  width: 100%;
}
#equipment-detail #equip-detail-info .equip-list .equip-list-wrap .bg-gray {
  background-color: #898989;
  color: #ffffff;
}
#equipment-detail #equip-detail-info .equip-list .equip-list-wrap .bg-blue {
  background-color: #0095ff;
  color: #ffffff;
}
#equipment-detail #equip-detail-info .equip-list .equip-list-wrap .bg-yellow {
  background-color: #fff100;
  color: #333333;
}
#equipment-detail #equip-detail-info .equip-list .equip-list-wrap .equip-status-detail {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 5px;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
}
#equipment-detail #share-button {
  text-align: right;
}
#equipment-detail .equip-notification h3 {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 5px;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: white;
  background-color: #0095ff;
}
#equipment-detail .equip-notification .equip-notification-info {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: solid 1px #999999;
}
#equipment-detail .equip-notification .equip-notification-info time {
  color: #0095ff;
  line-height: 21px;
}
#equipment-detail .equip-feature {
  text-align: center;
  font-weight: bold;
  padding: 4px;
  border-bottom: 1px solid #BDBDBD;
  color: #0095ff;
}
#equipment-detail .equip-feature img {
  width: 1.5em;
}
#equipment-detail .equip-feature-sharing {
  color: #7eab37;
}
#equipment-detail #bottom-button {
  display: none;
  background: #ffffff;
  width: 100%;
  box-shadow: 0 0 6px rgba(28, 26, 26, 0.6);
  padding: 8px 0;
  /** safariのアドレスバー対応 **/
  top: auto !important;
  bottom: 0 !important;
}
@media screen and (max-width: 720px) {
  #equipment-detail #equip-detail-img {
    width: 100%;
    margin-bottom: 20px;
  }
  #equipment-detail #equip-detail-info {
    width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #equipment-detail footer #ft-bottom-nav {
    display: none;
  }
  #equipment-detail #bottom-button {
    display: block;
  }
}
#equipment-detail .solar-house-detail-wrap .flex-left {
  width: 50%;
}
#equipment-detail .solar-house-detail-wrap .flex-left img {
  width: 100%;
  max-width: 400px;
}
#equipment-detail .solar-house-detail-wrap .flex-right {
  font-size: 1.2em;
  width: 50%;
}
#equipment-detail .solar-house-blueberry-wrap .flex-right {
  padding: 10px 0;
  width: 40%;
}
@media screen and (max-width: 640px) {
  #equipment-detail .solar-house-detail-wrap .flex-left {
    width: 100%;
  }
  #equipment-detail .solar-house-detail-wrap .flex-right {
    width: 100%;
  }
  #equipment-detail .solar-house-blueberry-wrap .flex-right {
    max-width: 400px;
    margin: 0 auto;
  }
}
#equipment-detail #detail-medicalnet .hd-deco {
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#equipment-detail #detail-medicalnet .hd-deco::before, #equipment-detail #detail-medicalnet .hd-deco::after {
  content: "";
  width: 1.3em;
  height: 3px;
  background-color: #333;
}
#equipment-detail #detail-medicalnet .hd-deco::before {
  transform: rotate(60deg);
}
#equipment-detail #detail-medicalnet .hd-deco::after {
  transform: rotate(-60deg);
}
#equipment-detail #detail-medicalnet .logo-container {
  background-color: white;
}
#equipment-detail #detail-medicalnet .logo-container img {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
#equipment-detail #detail-medicalnet .logo-container .times {
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1;
  -webkit-text-stroke: 2px #333;
}
@media screen and (max-width: 640px) {
  #equipment-detail #detail-medicalnet .hd-deco::before, #equipment-detail #detail-medicalnet .hd-deco::after {
    display: none;
  }
  #equipment-detail #detail-medicalnet .logo-container .times {
    margin-bottom: 10px;
  }
}
#equipment-detail .income-table h3 {
  margin-bottom: 5px;
  font-size: 1.2em;
}
#equipment-detail .income-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#equipment-detail .income-table th,
#equipment-detail .income-table td {
  border: 1px solid #dddddd;
  padding: 5px;
}
#equipment-detail .income-table thead th {
  background-color: #0095ff;
  color: #ffffff;
  text-align: center;
}
#equipment-detail a.buy-badge {
  background-color: #FFA41C;
  padding: 0px 10px;
}
#equipment-detail .equipment-desc-ext {
  border: 1px solid #dddddd;
}
#equipment-detail .equipment-desc-ext .supporters {
  font-weight: bold;
  font-size: 1.2em;
}
#equipment-detail .equipment-desc-ext .supporters img {
  width: 1.5em;
}
#equipment-detail .equipment-desc-ext .supporters-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
#equipment-detail .equipment-desc-ext .supporters-info .supporters-logo {
  width: 35%;
  max-width: 300px;
  text-align: center;
  padding: 10px;
}
#equipment-detail .equipment-desc-ext .supporters-info .supporters-txt {
  width: 65%;
  word-break: break-all;
}
#equipment-detail .equipment-desc-ext .supporters-info .supporters-txt h4 {
  border-bottom: 2px solid #333333;
  font-weight: bold;
}
#equipment-detail .equipment-desc-ext .supporters-info .supporters-txt h4 span {
  font-size: 0.6em;
}
#equipment-detail .equipment-desc-ext #story-bn {
  display: flex;
  flex-wrap: wrap;
  background-color: #276db3;
  color: #ffffff;
  width: 100%;
}
#equipment-detail .equipment-desc-ext #story-bn #story-img {
  width: 35%;
}
#equipment-detail .equipment-desc-ext #story-bn #story-txt {
  width: 65%;
  padding: 2em;
  position: relative;
}
#equipment-detail .equipment-desc-ext #story-bn #story-txt h4 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.6em;
}
#equipment-detail .equipment-desc-ext #story-bn #story-txt .uk-icon {
  position: absolute;
  top: 46%;
  display: block;
  right: 20px;
}
#equipment-detail .equipment-desc-ext #supporter-btn {
  border-radius: 24px;
  padding: 10px 5px 10px 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}
#equipment-detail .equipment-desc-ext #supporter-btn img {
  width: 0.9em;
  margin-left: 2px;
}
#equipment-detail #chart-div canvas {
  background-color: #ffffff;
  padding: 10px;
}
#equipment-detail #detailreview header {
  background-color: transparent;
}
#equipment-detail .slide-btn {
  background-color: rgba(0, 0, 0, 0.5);
}
#equipment-detail .uk-dotnav * * {
  border: none;
}
#equipment-detail .uk-dotnav li a {
  background-color: #999999;
}
#equipment-detail .uk-dotnav li.uk-active a {
  background-color: #0095ff;
}
#equipment-detail #sell-here {
  color: #0055b2;
  font-weight: bold;
  margin: 0 auto 8px;
}
#equipment-detail #sell-here img {
  width: 1.5em;
}
#equipment-detail #rate-of-retern {
  font-size: 1.5rem;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #dddddd;
}
#equipment-detail #rate-of-retern span {
  font-size: 80%;
}
#equipment-detail #chart-notify {
  transition: all 0.5s;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.9);
  z-index: 1;
  text-align: center;
  padding: 100px 10px;
  box-sizing: border-box;
  color: #999999;
  font-size: 1.5em;
  opacity: 0;
}
#equipment-detail #planActualAccuChart {
  display: none;
}

/*---------- end設備詳細 ----------*/
/*---------- 発電実績 ----------*/
.equipment-actual main h3 {
  color: #333333;
}
.equipment-actual main h3 span {
  font-size: 70%;
}
.equipment-actual #daily-out-table-app table,
.equipment-actual #monthly-out-table-app table,
.equipment-actual #annual-out-table-app table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.equipment-actual #daily-out-table-app thead,
.equipment-actual #monthly-out-table-app thead,
.equipment-actual #annual-out-table-app thead {
  background-color: #0055b2;
  color: #ffffff;
  font-size: 90%;
}
.equipment-actual #daily-out-table-app tbody th,
.equipment-actual #monthly-out-table-app tbody th,
.equipment-actual #annual-out-table-app tbody th {
  width: 20%;
  font-weight: normal;
  font-size: 90%;
  color: #666666;
}
.equipment-actual #daily-out-table-app tbody td,
.equipment-actual #monthly-out-table-app tbody td,
.equipment-actual #annual-out-table-app tbody td {
  width: 40%;
  text-align: right;
}
.equipment-actual #daily-out-table-app th,
.equipment-actual #daily-out-table-app td,
.equipment-actual #monthly-out-table-app th,
.equipment-actual #monthly-out-table-app td,
.equipment-actual #annual-out-table-app th,
.equipment-actual #annual-out-table-app td {
  padding: 5px;
  border: 1px solid #666666;
}
.equipment-actual #daily-out-table-app .bg-f5,
.equipment-actual #monthly-out-table-app .bg-f5,
.equipment-actual #annual-out-table-app .bg-f5 {
  background-color: #f5f9ff;
}
.equipment-actual #dailyoutput-table tr:nth-child(odd),
.equipment-actual #monthlyoutput-table tr:nth-child(odd),
.equipment-actual #annualoutput-table tr:nth-child(odd) {
  background: #f5f9ff;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}
.equipment-actual #dailyoutput-table tr:last-child,
.equipment-actual #monthlyoutput-table tr:last-child,
.equipment-actual #annualoutput-table tr:last-child {
  border-bottom: 1px solid #dddddd;
}
.equipment-actual #power-rate {
  text-align: center;
  margin: 30px auto;
}
.equipment-actual #power-rate .rate-wrap {
  width: 90%;
  max-width: 220px;
  display: block;
  background-color: #0095ff;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  margin: 0 auto;
}
.equipment-actual #power-rate .rate-wrap dd {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}
.equipment-actual .change-buttons {
  display: flex;
  align-items: flex-end;
  padding-left: 0;
  margin: 0;
}
.equipment-actual .change-buttons button {
  display: block;
  background-color: #0055b2;
  color: #ffffff;
  padding: 10px 0;
  margin-right: 10px;
  width: 140px;
  border-radius: 8px 8px 0 0/8px 8px 0 0;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
}
.equipment-actual .change-buttons button:hover {
  opacity: 0.8;
}
.equipment-actual .change-buttons button.active {
  background-color: #ffffff;
  color: #333333;
}
.equipment-actual #chart-notify {
  transition: all 0.5s;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.9);
  z-index: 1;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  color: darkgray;
  font-size: 2em;
  padding: 70px;
  opacity: 0;
}
@media screen and (max-width: 640px) {
  .equipment-actual .change-buttons button {
    width: 6.5em;
  }
}

/*---------- グリーンワット発電計画 ----------*/
.green-equipment-actual {
  background-color: #f1f5f5;
}
.green-equipment-actual main h3 {
  color: #232323;
}
.green-equipment-actual main h3 span {
  font-size: 70%;
}
.green-equipment-actual .green-actual-wrap {
  border-radius: 0 16px 16px 16px;
  filter: drop-shadow(0 0 5px rgba(206, 206, 206, 0.75));
  transform: translateZ(0);
  overflow: hidden;
  margin: 0 5px 5px 5px;
}
.green-equipment-actual #daily-out-table-app table,
.green-equipment-actual #monthly-out-table-app table,
.green-equipment-actual #annual-out-table-app table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.green-equipment-actual #daily-out-table-app thead,
.green-equipment-actual #monthly-out-table-app thead,
.green-equipment-actual #annual-out-table-app thead {
  background-color: #276db3;
  color: #fff;
  font-size: 90%;
}
.green-equipment-actual #daily-out-table-app tbody th,
.green-equipment-actual #monthly-out-table-app tbody th,
.green-equipment-actual #annual-out-table-app tbody th {
  width: 20%;
  font-weight: normal;
  font-size: 90%;
  color: #232323;
}
.green-equipment-actual #daily-out-table-app tbody td,
.green-equipment-actual #monthly-out-table-app tbody td,
.green-equipment-actual #annual-out-table-app tbody td {
  width: 40%;
  text-align: right;
}
.green-equipment-actual #daily-out-table-app th,
.green-equipment-actual #daily-out-table-app td,
.green-equipment-actual #monthly-out-table-app th,
.green-equipment-actual #monthly-out-table-app td,
.green-equipment-actual #annual-out-table-app th,
.green-equipment-actual #annual-out-table-app td {
  padding: 5px;
  border: 1px solid #d3d3d3;
}
.green-equipment-actual #daily-out-table-app tbody tr,
.green-equipment-actual #monthly-out-table-app tbody tr,
.green-equipment-actual #annual-out-table-app tbody tr {
  color: #232323;
}
.green-equipment-actual #daily-out-table-app .bg-f5,
.green-equipment-actual #monthly-out-table-app .bg-f5,
.green-equipment-actual #annual-out-table-app .bg-f5 {
  background-color: #f5f9ff;
}
.green-equipment-actual #dailyoutput-table tr:nth-child(odd),
.green-equipment-actual #monthlyoutput-table tr:nth-child(odd),
.green-equipment-actual #annualoutput-table tr:nth-child(odd) {
  background-color: #f9f9f9;
  border-bottom: 1px solid #d3d3d3;
  border-top: 1px solid #d3d3d3;
}
.green-equipment-actual #dailyoutput-table tr:last-child,
.green-equipment-actual #monthlyoutput-table tr:last-child,
.green-equipment-actual #annualoutput-table tr:last-child {
  border-bottom: 1px solid #d3d3d3;
}
.green-equipment-actual #power-rate {
  text-align: center;
  margin: 30px auto;
}
.green-equipment-actual #power-rate .rate-wrap {
  width: 90%;
  max-width: 220px;
  display: block;
  background-color: #81c725;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0 auto;
}
.green-equipment-actual #power-rate .rate-wrap dd {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}
.green-equipment-actual .change-buttons {
  display: flex;
  align-items: flex-end;
  padding-left: 0;
  margin: 0;
}
.green-equipment-actual .change-buttons button {
  display: block;
  background-color: #00b3a3;
  color: #fff;
  padding: 10px 0;
  margin: 5px 10px 0 5px;
  width: 140px;
  border-radius: 8px 8px 0 0/8px 8px 0 0;
  box-shadow: 0 -2px 5px rgba(206, 206, 206, 0.75);
  text-align: center;
  font-weight: bold;
}
.green-equipment-actual .change-buttons button:hover {
  opacity: 0.8;
}
.green-equipment-actual .change-buttons button.active {
  background-color: #fff;
  color: #232323;
}
.green-equipment-actual #chart-notify {
  transition: all 0.5s;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.9);
  z-index: 1;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  color: #232323;
  font-size: 2em;
  padding: 70px;
  opacity: 0;
}
@media screen and (max-width: 640px) {
  .green-equipment-actual .uk-padding {
    padding: 20px 10px;
  }
  .green-equipment-actual #daily-out-table-app .uk-card-default,
.green-equipment-actual #monthly-out-table-app .uk-card-default,
.green-equipment-actual #annual-out-table-app .uk-card-default {
    box-shadow: none;
  }
  .green-equipment-actual #daily-out-table-app thead,
.green-equipment-actual #monthly-out-table-app thead,
.green-equipment-actual #annual-out-table-app thead {
    background-color: #81c725;
  }
  .green-equipment-actual #daily-out-table-app .bg-f5,
.green-equipment-actual #monthly-out-table-app .bg-f5,
.green-equipment-actual #annual-out-table-app .bg-f5 {
    background-color: #f9f9f9;
  }
  .green-equipment-actual .change-buttons button {
    width: 6.5em;
    margin: 5px 2px 0 5px;
  }
}

/*-------- end グリーンワット発電計画 --------*/
.actual-note {
  font-size: 0.6em;
  text-align: right;
  margin: 1em;
  padding: 0;
}

/*---------- ワット保有証明書 ----------*/
#equipment-certificate #main {
  background: #bebebf;
  background: -moz-linear-gradient(top, #ffffff 0%, #bebebf 50%, #ffffff 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #bebebf 50%, #ffffff 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #bebebf 50%, #ffffff 100%);
  padding: 50px 0;
  margin-top: 0;
}
#equipment-certificate .certificate-list {
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  width: 100%;
}
#equipment-certificate .certificate-list li {
  border: 1px solid #eee;
  padding: 15px;
  margin: 0 10px 50px;
  max-width: 90%;
  background: #eefcf6 !important;
  background: -moz-linear-gradient(top, #f6fefb 20%, #eefcf6 100%) !important;
  background: -webkit-linear-gradient(top, #f6fefb 20%, #eefcf6 100%) !important;
  background: linear-gradient(to bottom, #f6fefb 20%, #eefcf6 100%) !important;
}
#equipment-certificate .certificate-list .certificate-bk {
  padding: 5px;
  border: 3px solid #b9a88b;
}
#equipment-certificate .certificate-list .certificate-wrap {
  padding: 15px;
  border: 1px solid #b9a88b;
}
#equipment-certificate .certificate-list h2 img.logo-img {
  width: 18%;
  display: block;
  margin: 20px auto;
}
#equipment-certificate .certificate-list h2 img.title-img {
  max-width: 300px;
  width: 80%;
  margin-bottom: 20px;
}
#equipment-certificate .certificate-list .user-name {
  font-size: 2.5rem;
  border-bottom: 1px solid #b9a88b;
  margin-bottom: 70px;
}
#equipment-certificate .certificate-list .user-name span {
  font-size: 2rem;
}
#equipment-certificate .certificate-list dl {
  margin-bottom: 80px;
  overflow: hidden;
}
#equipment-certificate .certificate-list dl dt {
  width: 8em;
  float: left;
  clear: both;
}
#equipment-certificate .certificate-list dl dd:before {
  content: "：";
}
#equipment-certificate .certificate-list dl dd {
  text-align: left;
}
#equipment-certificate .certificate-list #issue-info {
  max-width: 288px;
  width: 100%;
  margin-right: 0;
  margin-left: auto;
}
#equipment-certificate .certificate-list #issue-info .font-s {
  font-size: 0.7em;
}
#equipment-certificate .certificate-list #issue-info .company-name {
  position: relative;
}
#equipment-certificate .certificate-list #issue-info .company-name::after {
  content: "";
  position: absolute;
  background: url(/img/certificate/certificate_stamp.png) no-repeat;
  background-size: contain;
  width: 60px;
  height: 60px;
  right: 0;
  top: -1em;
  opacity: 0.7;
}
#equipment-certificate .certificate-list #issue-info .sign {
  padding-left: 1em;
}
#equipment-certificate .certificate-list #issue-info .sign p {
  display: inline-block;
}
#equipment-certificate .certificate-list #issue-info .sign img {
  width: calc(100% - 9em);
  position: relative;
  z-index: 10;
}
#equipment-certificate .slide-nav svg {
  width: 30px;
  height: 36px;
}
#equipment-certificate .slide-nav polyline {
  stroke-width: 5;
  stroke: #ccc;
}

/*---------- 発電計画 ----------*/
#equipment-plan #vue-plan-contents,
#equipment-green_plan #vue-plan-contents {
  width: 100%;
}
#equipment-plan .change-buttons,
#equipment-green_plan .change-buttons {
  display: flex;
  align-items: flex-end;
  padding-left: 0;
  margin: 0;
}
#equipment-plan .change-buttons button,
#equipment-green_plan .change-buttons button {
  display: block;
  background-color: #0055b2;
  color: #ffffff;
  padding: 10px 0;
  margin-right: 10px;
  width: 140px;
  height: 40px;
  border-radius: 8px 8px 0 0/8px 8px 0 0;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
}
#equipment-plan .change-buttons button:hover,
#equipment-green_plan .change-buttons button:hover {
  opacity: 0.8;
}
#equipment-plan .change-buttons button.active,
#equipment-green_plan .change-buttons button.active {
  background-color: #ffffff;
  color: #333333;
}
#equipment-plan #years-plan-table th,
#equipment-green_plan #years-plan-table th {
  vertical-align: top;
  text-align: center;
  padding: 16px 5px;
}
#equipment-plan #years-plan-table td,
#equipment-green_plan #years-plan-table td {
  padding: 16px 5px;
}
#equipment-plan .year-plan-s h5,
#equipment-green_plan .year-plan-s h5 {
  padding: 10px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}
#equipment-plan .year-plan-s .dl-table,
#equipment-green_plan .year-plan-s .dl-table {
  padding: 15px;
  margin: 0;
}
#equipment-plan .bg-f5,
#equipment-green_plan .bg-f5 {
  background-color: #f5f9ff;
}
#equipment-plan .plan-month,
#equipment-green_plan .plan-month {
  padding: 3px;
}
#equipment-plan .plan-month:nth-child(odd),
#equipment-green_plan .plan-month:nth-child(odd) {
  background-color: #ffffff;
}

#equipment-plan #years-plan-table tr:nth-child(odd) {
  background-color: #f5f9ff;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}
#equipment-plan #years-plan-table tr:last-child {
  border-bottom: 1px solid #dddddd;
}
#equipment-plan #years-plan-table td {
  text-align: right;
}
#equipment-plan .year-plan-s h5 {
  background-color: #6e9ece;
}

#equipment-green_plan #years-plan-table tr:nth-child(odd) {
  background-color: #f9f9f9;
  border-bottom: 1px solid #d3d3d3;
  border-top: 1px solid #d3d3d3;
}
#equipment-green_plan #years-plan-table tr:last-child {
  border-bottom: 1px solid #d3d3d3;
}
#equipment-green_plan .year-plan-s h5 {
  background-color: #00b3a3;
}

#change-month-btn,
#change-year-btn {
  z-index: 99;
}

.eq-note {
  font-size: 0.7rem;
  text-align: left;
  margin: 4px 0;
  font-weight: normal;
}

/*---------- 発電所 お知らせ ----------*/
#equipment-notification h1 {
  font-size: 1.7em;
  color: #333333;
  margin: 20px 0 20px 0;
}
#equipment-notification #notification-list {
  background-color: #f5f9ff;
}
#equipment-notification #notification-list h2 {
  font-size: 1.4em;
  color: white;
  background-color: #0095ff;
}
#equipment-notification #notification-list .notification-detail {
  background-color: white;
}
#equipment-notification #notification-list .notification-detail time {
  color: #0095ff;
}
#equipment-notification #notification-list .notification-detail h3 {
  font-size: 1.3em;
  color: #333333;
}

/*---------- レスポンシブ ----------*/
@media screen and (max-width: 1020px) {
  .equip-list .equip-list-wrap {
    width: 48%;
  }
}
@media screen and (max-width: 959px) {
  #detail01 .uk-padding {
    padding-top: 0;
  }
  #detail01 .equipment-desc-ext {
    padding: 20px;
  }
}
@media screen and (max-width: 880px) {
  #equipment-detail #mv-equip {
    height: auto;
    padding: 10px 0;
  }
  #equipment-detail #mv-equip .container {
    overflow: visible;
  }
  #equipment-detail #mv-equip h1 {
    position: static;
    text-align: center;
    font-size: 1.8em;
    padding: 0;
    margin: 0;
  }
  #equipment-detail #mv-equip h1 span {
    font-size: 0.5em;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt h4 {
    font-size: 1.4em;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt .uk-icon {
    display: none;
  }
}
@media screen and (max-width: 680px) {
  .equip-list {
    justify-content: center;
  }
  .equip-list .equip-list-wrap {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #equipment-index #list-bk {
    padding: 10px;
  }
  #equipment-index .eq-tab li a {
    font-size: 0.9em;
  }
  #equipment-index .eq-tab li a .uk-icon-image {
    width: 15px;
    height: 15px;
  }

  #equipment-detail .income-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #dddddd;
  }
  #equipment-detail .income-table th {
    display: block;
    background: #0095ff;
    color: #ffffff;
    text-align: center !important;
    border: none;
  }
  #equipment-detail .income-table .income-th-sp {
    float: left;
    font-weight: bold;
    display: block !important;
  }
  #equipment-detail .income-table td {
    display: block;
    border-top: 1px solid #dddddd;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  #equipment-detail .income-table thead {
    display: none;
  }
  #equipment-detail .equipment-desc-ext {
    font-size: 0.9em;
  }
  #equipment-detail .equipment-desc-ext .supporters-info .supporters-logo {
    width: 100%;
    margin: 0 auto 1em;
  }
  #equipment-detail .equipment-desc-ext .supporters-info .supporters-txt {
    width: 100%;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt {
    padding: 1em;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt h4 {
    font-size: 1.1em;
  }

  #equipment-certificate .certificate-list h2 img.logo-img {
    max-width: 32px;
    width: 100%;
    margin: 10px auto;
  }
  #equipment-certificate .certificate-list h2 img.title-img {
    max-width: 200px;
  }
  #equipment-certificate .certificate-list .user-name {
    font-size: 1.1em;
    margin-bottom: 30px;
  }
  #equipment-certificate .certificate-list .user-name span {
    font-size: 0.8em;
  }
  #equipment-certificate .certificate-list p:not(.company-name) {
    font-size: 0.8em;
  }
  #equipment-certificate .certificate-list dl {
    margin-bottom: 30px;
  }
  #equipment-certificate .certificate-list dl dt {
    float: none;
    font-size: 0.85em;
  }
  #equipment-certificate .certificate-list dl dd:before {
    content: "";
  }
  #equipment-certificate .certificate-list dl dd {
    margin-bottom: 0.8em;
    font-size: 0.9em;
  }
}
@media screen and (max-width: 480px) {
  #equipment-detail .info-wrap .equip-data-wrap dt {
    float: none;
    padding: 5px 5px 0;
  }
  #equipment-detail .info-wrap .equip-data-wrap dd {
    padding: 0 5px 5px;
  }
}
@media screen and (max-width: 420px) {
  #switch p {
    font-size: 0.8em;
  }

  #equipment-detail .equipment-desc-ext #supporter-btn {
    font-size: 0.9em;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-img {
    width: 100%;
    height: 150px;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt {
    width: 100%;
  }
  #equipment-detail .equipment-desc-ext #story-bn #story-txt h4 {
    font-size: 1em;
  }

  #equipment-certificate .certificate-list .certificate-wrap {
    padding: 0 10px;
  }
  #equipment-certificate .certificate-list p {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #equipment-certificate .certificate-list h2 {
    margin-bottom: 0;
  }
  #equipment-certificate .certificate-list h2 .user-name {
    font-size: 0.9em;
    margin-bottom: 0;
  }
  #equipment-certificate .certificate-list dl {
    margin: 0;
  }
  #equipment-certificate .certificate-list #issue-info {
    max-width: 216px;
    margin-right: auto;
  }
  #equipment-certificate .certificate-list #issue-info .date-issue span {
    display: block;
  }
  #equipment-certificate .certificate-list #issue-info .company-name {
    font-size: 0.8em;
  }
  #equipment-certificate .certificate-list #issue-info .company-name::after {
    width: 50px;
    height: 50px;
    bottom: -10px;
  }
  #equipment-certificate .certificate-list #issue-info .sign img {
    width: calc(100% - 7em);
  }
  #equipment-certificate .certificate-list #issue-info .company-logo {
    margin-top: 20px;
  }
}
/*---------- endレスポンシブ ----------*/
@media print {
  #equipment-certificate *,
#equipment-certificate *:before,
#equipment-certificate *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  #equipment-certificate * {
    color: #666666 !important;
  }
  #equipment-certificate main {
    width: 172mm;
    /*height: 251mm;*/
    margin: 0 auto;
    padding: 0 !important;
  }
  #equipment-certificate .certificate-list {
    transform: none !important;
    flex-wrap: wrap !important;
    display: table-cell;
  }
  #equipment-certificate .certificate-list li {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    page-break-after: always !important;
    margin-top: 50px;
  }
  #equipment-certificate .certificate-list li:last-child {
    margin-bottom: 0 !important;
  }
  #equipment-certificate .certificate-list h2 img.logo-img {
    width: 12%;
  }
  #equipment-certificate .certificate-list h2 img.title-img {
    width: 60%;
  }
  #equipment-certificate .slide-nav,
#equipment-certificate .uk-slider-nav {
    display: none;
  }
}
/*---------- endコンテンツ ----------*/
/*
*
*　売買画面
*
*/
.bs-table {
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
}
.bs-table .bs-wrap {
  overflow: hidden;
}
.bs-table .bs-wrap dt {
  float: left;
  padding: 10px;
}
.bs-table .bs-wrap dd {
  float: right;
  padding: 10px;
}
.bs-table .bs-wrap:nth-child(odd) {
  background-color: #f5f9ff;
}
.bs-table .del-price {
  color: #666666;
}
.bs-table .del-price span {
  position: relative;
}
.bs-table .del-price span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #666666;
  right: 0;
  top: 45%;
}
.bs-table .del-price + .fix-price {
  color: #ff1744;
  font-weight: bold;
}
.bs-table .bs-coupon {
  background-color: #ffd7d7;
}

#amounts-detail .bs-wrap {
  border-bottom: dotted 1px #999999;
}
#amounts-detail .bs-wrap.border-top {
  border-top: dotted 1px #999999;
}
#amounts-detail .bs-wrap.border-bottom-none {
  border-bottom: none;
}
#amounts-detail .bs-wrap:nth-child(odd) {
  background-color: transparent;
}
#amounts-detail .bs-wrap:nth-child(odd).bs-coupon {
  background-color: #ffd7d7;
}
#amounts-detail .total-amount {
  border-top: solid 3px #0055b2;
  border-bottom: none;
  background-color: #e5f1ff !important;
  font-size: 1.2em;
  color: #0055b2;
  font-weight: bold;
}
#amounts-detail .prospect-income {
  border-top: solid 3px #ffffff;
  border-bottom: none;
  background-color: #dddddd !important;
}

.bs-hd {
  font-weight: bold;
  color: #333333;
  padding-bottom: 3px;
}

.buy-amc-status {
  margin-top: 10px;
}

#buy-index input {
  width: 100%;
}
#buy-index #kw {
  background: linear-gradient(to bottom right, #696767, #000 70%);
  border: 2px solid #000;
  color: #ffffff;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
#buy-index #kw span {
  font-size: 1.5em;
}
#buy-index .sp-br {
  display: none;
}
@media screen and (max-width: 639px) {
  #buy-index .banner-wrap img {
    border: solid 1px #ccc;
  }
}
@media screen and (max-width: 440px) {
  #buy-index .uk-card-body {
    padding: 15px;
  }
  #buy-index .sp-br {
    display: block;
  }
}

#buy-payment {
  /** マイル登録 **/
}
#buy-payment #main {
  margin-top: 0;
  margin-bottom: 0;
}
#buy-payment input[type=text] {
  width: 100%;
}
#buy-payment #bank-bonus .bonus-text {
  border: solid 2px #ffae00;
  color: #ffae00;
  text-align: center;
  font-size: 0.82em;
  line-height: 1.3;
  padding: 4px;
  margin-bottom: 4px;
}
#buy-payment dd {
  padding-left: 1em;
}
#buy-payment #my-equipment .font-l {
  font-size: 1.2em;
  font-weight: bold;
}
#buy-payment #my-equipment .eq-wrap {
  margin-bottom: 10px;
  border: 1px solid #333333;
  position: relative;
}
#buy-payment #my-equipment .eq-wrap .eq-name {
  background-color: #333333;
  color: #ffffff;
  padding: 20px 5px;
  font-weight: bold;
}
#buy-payment #my-equipment .eq-wrap dl {
  border-bottom: 1px solid #333333;
}
#buy-payment #my-equipment .eq-wrap dl .eq-data {
  padding: 5px 10px;
  width: 50%;
}
#buy-payment #my-equipment .eq-wrap dl .eq-data dt {
  font-size: 0.8em;
  font-weight: normal;
}
#buy-payment #my-equipment .eq-wrap dl .eq-data dd {
  font-weight: bold;
}
#buy-payment #my-equipment .eq-wrap dl .eq-data:first-child {
  border-right: 1px solid #333333;
}
#buy-payment #my-equipment .eq-wrap .eq-own {
  padding: 5px;
  font-size: 0.8em;
}
#buy-payment #my-equipment .eq-wrap .eq-btn {
  width: 120px;
  margin: 0 auto 10px;
}
#buy-payment #my-equipment p#lack-note {
  color: #fb453b;
  font-size: 0.7em;
  font-weight: normal;
}
#buy-payment #my-equipment .eq-dis-selected {
  position: absolute;
  right: 0;
  top: 0;
  color: #ffffff;
  font-weight: bold;
  font-weight: bold;
  background-color: transparent;
  font-size: 1.5em;
  line-height: 1;
}
#buy-payment #mile-wrap {
  border: 1px solid #eee;
}
#buy-payment #mile-wrap h4 {
  background-color: #2355b2;
  color: #ffffff;
  padding: 20px 10px;
  font-size: 1em;
  font-weight: bold;
}
#buy-payment #mile-wrap h4 br {
  display: none;
}
#buy-payment #mile-wrap #select-mile {
  background-color: #ffffff;
  padding: 1em;
  margin: 0;
}
#buy-payment #mile-wrap #select-mile .btn-m {
  color: #ffffff;
}
#buy-payment #mile-wrap #select-mile .btn-ana {
  background-color: #063d8f;
  border: 2px solid #063d8f;
}
#buy-payment #mile-wrap #select-mile .btn-ana:hover {
  background-color: #ffffff;
  color: #063d8f;
}
#buy-payment #mile-wrap #select-mile .btn-jal {
  background-color: #cc0100;
  border: 2px solid #cc0100;
}
#buy-payment #mile-wrap #select-mile .btn-jal:hover {
  background-color: #ffffff;
  color: #cc0100;
}
#buy-payment #mile-wrap #select-mile .btn-docomo {
  background-color: #d00f31;
  border: 2px solid #d00f31;
}
#buy-payment #mile-wrap #select-mile .btn-docomo:hover {
  background-color: #ffffff;
  color: #d00f31;
}
#buy-payment #mile-wrap #select-mile .btn-ponta {
  background-color: #ff9123;
  border: 2px solid #ff9123;
}
#buy-payment #mile-wrap #select-mile .btn-ponta:hover {
  background-color: #ffffff;
  color: #ff9123;
}
#buy-payment #mile-wrap #select-mile .mile-alert {
  font-size: 0.7em;
  color: #fb453b;
  margin-bottom: 0.5em;
}
#buy-payment #mile-wrap #modal-ponta h4 {
  background-color: #ff9123;
}
#buy-payment .mileage-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(107, 107, 107, 0.8);
  z-index: 999;
}
#buy-payment .mileage-modal .flex {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#buy-payment .mileage-modal .mileage-form {
  background-color: #ffffff;
  width: 90%;
  max-width: 720px;
  border-radius: 15px;
  padding: 40px 20px;
}
#buy-payment .mileage-modal .mileage-form h4 {
  font-weight: bold;
  align-items: flex-start;
  display: flex;
  justify-content: center;
}
#buy-payment .mileage-modal .mileage-form h4 .code-blue {
  background-color: #0095ff;
  color: #ffffff;
  font-size: 0.5em;
  border-radius: 10px;
}
#buy-payment .mileage-modal .mileage-form .mileage-text {
  list-style: disc;
  width: 100%;
  margin: 0 auto;
}
#buy-payment .mileage-modal .mileage-form .mileage-text li {
  margin-bottom: 1em;
}
#buy-payment .mileage-modal .mileage-form .note-gray {
  width: 100%;
  margin: 0 auto 1em;
}
#buy-payment .mileage-modal .mileage-form input[type=text] {
  width: 300px;
  display: block;
  margin: 0 auto 20px;
  font-size: 2em;
  border: 1px solid #999999;
}
#buy-payment .mileage-modal .mileage-form .mileage-error {
  display: none;
  text-align: center;
  margin-bottom: 1em;
}
#buy-payment .mileage-modal .mileage-form button {
  margin: 1em 1em 0;
}
#buy-payment .mileage-modal .mileage-form .mileage-done {
  display: none;
}
#buy-payment .mileage-modal .mileage-form .mileage-done p {
  text-align: center;
}
#buy-payment #amc-registered #amc-num {
  background-color: #ffffff;
  color: #666666;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  padding: 10px;
  font-weight: bold;
  margin: 0;
  font-size: 0.9em;
}
#buy-payment #amc-registered .font-s {
  font-size: 0.8em;
  margin: 10px 0 0;
}
#buy-payment #amc-registered .amc-status {
  border-radius: 15px;
  border: 1px solid #666666;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  font-size: 0.8em;
}
@media screen and (max-width: 640px) {
  #buy-payment .mileage-modal {
    font-size: 0.8em;
  }
  #buy-payment .mileage-modal .mileage-form h4 {
    display: block;
    font-size: 1.2em;
  }
}
@media screen and (max-width: 440px) {
  #buy-payment #mile-wrap h4 br {
    display: block;
  }
}

#buy-confirm #equip-data-table .equip-data-wrap:nth-child(odd), #coupon-confirm #equip-data-table .equip-data-wrap:nth-child(odd) {
  background-color: #f5f9ff;
}
#buy-confirm .terms-wrap, #coupon-confirm .terms-wrap {
  background-color: #f5f5f5;
  padding: 10px;
}
#buy-confirm .buy-terms, #coupon-confirm .buy-terms {
  height: 240px;
  overflow-y: scroll;
  font-size: 80%;
  margin-top: 20px;
  border: 1px solid #dddddd;
  padding: 10px;
  background-color: #ffffff;
}
#buy-confirm .buy-terms h2, #coupon-confirm .buy-terms h2 {
  font-size: 110%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-left: none;
  padding-left: 0;
}
#buy-confirm .buy-terms h3, #coupon-confirm .buy-terms h3 {
  font-size: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
#buy-confirm .buy-terms p, #coupon-confirm .buy-terms p {
  margin-bottom: 10px;
}
#buy-confirm .check-text, #coupon-confirm .check-text {
  margin-bottom: 10px;
  font-size: 90%;
}
#buy-confirm .modal-button, #coupon-confirm .modal-button {
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
}
#buy-confirm .terms-checkbox-wrap, #coupon-confirm .terms-checkbox-wrap {
  justify-content: center;
}
#buy-confirm .terms-checkbox:first-child, #coupon-confirm .terms-checkbox:first-child {
  margin-right: 16px;
}
@media screen and (max-width: 640px) {
  #buy-confirm .terms-checkbox-wrap, #coupon-confirm .terms-checkbox-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  #buy-confirm .terms-checkbox:first-child, #coupon-confirm .terms-checkbox:first-child {
    margin-bottom: 16px;
    margin-right: 0;
  }
}

#buy-thanks, #coupon-thanks {
  /***** 購入完了アニメーション *****/
  /** 通常 **/
  /** キロワッターズ **/
  /*** 紙吹雪 ****/
  /***** end購入完了アニメーション *****/
  /***** 購入完了時に保有ワット表示 *****/
  /***** end購入完了時に保有ワット表示 *****/
}
#buy-thanks #thanks-text, #coupon-thanks #thanks-text {
  font-weight: bold;
}
#buy-thanks #thanks-text h2, #coupon-thanks #thanks-text h2 {
  font-size: 1.3em;
}
#buy-thanks #thanks-img, #coupon-thanks #thanks-img {
  width: 200px;
  padding: 30px;
  margin: 0 auto;
}
#buy-thanks #thanks-img img, #coupon-thanks #thanks-img img {
  position: relative;
  z-index: 99;
}
#buy-thanks #wat, #coupon-thanks #wat {
  animation: ani 2s ease-in;
}
@keyframes ani {
  0% {
    transform: rotateY(0deg) translate(0px, 0px);
  }
  50% {
    transform: rotateY(450deg) translate(0px, 0px);
  }
  100% {
    transform: rotateY(360deg) translate(0px, 0px);
  }
}
#buy-thanks .shine, #coupon-thanks .shine {
  position: relative;
}
#buy-thanks .shine:before, #coupon-thanks .shine:before {
  position: absolute;
  z-index: 98;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  top: -20%;
  background-image: url("/img/common/shine.png"), url("/img/common/shine.png");
  background-size: 0, 0;
  background-position: 20% 90%, 80% 20%;
  background-repeat: no-repeat;
  animation: shine 0.6s ease;
  animation-delay: 2s;
}
@keyframes shine {
  0% {
    background-size: 0, 0;
  }
  10% {
    background-size: 10% auto, 20% auto;
  }
  80% {
    background-size: 10% auto, 20% auto;
  }
  100% {
    background-size: 0, 0;
  }
}
#buy-thanks .reflect-img, #coupon-thanks .reflect-img {
  position: relative;
  overflow: hidden;
}
#buy-thanks .reflect, #coupon-thanks .reflect {
  z-index: 100;
  height: 100%;
  width: 10px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #ffffff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 2.3s ease-in-out;
}
@keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
#buy-thanks .circle-gold .circle, #coupon-thanks .circle-gold .circle {
  background: linear-gradient(to top, #eed03a 48%, #ad8804);
}
#buy-thanks .circle-platinum .circle, #coupon-thanks .circle-platinum .circle {
  background: linear-gradient(to top, #636363 48%, #c4c5c5);
}
#buy-thanks .circle-diamond .circle, #coupon-thanks .circle-diamond .circle {
  background: linear-gradient(to top left, #2b1a0a 15%, #e5d0bd);
}
#buy-thanks .rank-up, #coupon-thanks .rank-up {
  opacity: 0;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  animation: rank-up 0.5s 3s ease-in;
  animation-fill-mode: forwards;
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  z-index: 99;
  margin-bottom: 0;
}
@keyframes rank-up {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    bottom: -20px;
  }
}
#buy-thanks .circle-wrap, #coupon-thanks .circle-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
}
#buy-thanks .circle-wrap .inner, #coupon-thanks .circle-wrap .inner {
  width: 190px;
  height: 190px;
  position: absolute;
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  text-align: center;
}
#buy-thanks .circle-wrap .inner img, #coupon-thanks .circle-wrap .inner img {
  width: 90%;
  height: auto;
  padding: 15%;
  opacity: 0;
  animation: rank 2s 1s ease-in;
  animation-fill-mode: forwards;
}
@keyframes rank {
  0% {
    transform: rotateY(0deg) translate(0px, 0px);
  }
  50% {
    transform: rotateY(450deg) translate(0px, 0px);
    opacity: 1;
  }
  100% {
    transform: rotateY(360deg) translate(0px, 0px);
    opacity: 1;
  }
}
#buy-thanks .circle-wrap .circle, #coupon-thanks .circle-wrap .circle {
  width: 220px;
  height: 220px;
  border-radius: 110px;
}
#buy-thanks .circle-wrap .circle-r, #coupon-thanks .circle-wrap .circle-r {
  position: absolute;
  left: 110px;
  width: 110px;
  height: 220px;
  overflow: hidden;
}
#buy-thanks .circle-wrap .circle-r .hidden, #coupon-thanks .circle-wrap .circle-r .hidden {
  position: relative;
  left: -110px;
  width: 110px;
  height: 220px;
  overflow: hidden;
  transform: rotate(0deg);
  transform-origin: 100% 50%;
  animation: rotateRight 1s linear 1;
  animation-fill-mode: forwards;
}
@keyframes rotateRight {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
#buy-thanks .circle-wrap .circle-l, #coupon-thanks .circle-wrap .circle-l {
  width: 110px;
  height: 220px;
  overflow: hidden;
}
#buy-thanks .circle-wrap .circle-l .hidden, #coupon-thanks .circle-wrap .circle-l .hidden {
  position: relative;
  left: 110px;
  width: 110px;
  height: 220px;
  overflow: hidden;
  transform: rotate(0deg);
  transform-origin: 0% 50%;
  animation: rotateLeft 1s linear 1;
  animation-fill-mode: forwards;
}
#buy-thanks .circle-wrap .circle-l .circle, #coupon-thanks .circle-wrap .circle-l .circle {
  position: relative;
  left: -110px;
}
@keyframes rotateLeft {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
#buy-thanks .confetti, #coupon-thanks .confetti {
  display: block;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
#buy-thanks .confetti .paper, #coupon-thanks .confetti .paper {
  opacity: 0;
  position: absolute;
}
#buy-thanks .confetti .paper:nth-child(odd), #coupon-thanks .confetti .paper:nth-child(odd) {
  animation: confetti1 3.5s ease-in;
}
#buy-thanks .confetti .paper:nth-child(even), #coupon-thanks .confetti .paper:nth-child(even) {
  animation: confetti2 3.5s ease-in;
}
#buy-thanks .confetti .paper.c1, #coupon-thanks .confetti .paper.c1 {
  background-color: #79bf7f;
}
#buy-thanks .confetti .paper.c2, #coupon-thanks .confetti .paper.c2 {
  background-color: #51aef1;
}
#buy-thanks .confetti .paper.c3, #coupon-thanks .confetti .paper.c3 {
  background-color: #ffab54;
}
#buy-thanks .confetti .paper.c4, #coupon-thanks .confetti .paper.c4 {
  background-color: #f15383;
}
#buy-thanks .confetti .paper.c5, #coupon-thanks .confetti .paper.c5 {
  background-color: #ac5ab7;
}
@keyframes confetti1 {
  0% {
    opacity: 0;
    transform: translate(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(500%, -1000%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-500%, 2500%) rotate(720deg);
  }
}
@keyframes confetti2 {
  0% {
    opacity: 0;
    transform: translateY(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(-500%, -1800%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(500%, 2500%) rotate(720deg);
  }
}
#buy-thanks .thanks-own-watt, #coupon-thanks .thanks-own-watt {
  background: linear-gradient(45deg, #2352fb, #173383);
  color: #ffffff;
  max-width: 400px;
  width: 100%;
  margin: 0 auto 2em;
  font-weight: bold;
}
#buy-thanks .thanks-own-watt p, #coupon-thanks .thanks-own-watt p {
  margin: 0;
}
#buy-thanks .thanks-own-watt img, #coupon-thanks .thanks-own-watt img {
  position: relative;
  top: -3px;
  width: 30px;
}
#buy-thanks #buy-data, #coupon-thanks #buy-data {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#buy-thanks .card-wrap, #coupon-thanks .card-wrap {
  width: 49%;
}
#buy-thanks .bank-wrap, #coupon-thanks .bank-wrap {
  padding: 10px;
  border: 2px solid #999999;
  background-color: #f9f9f9;
  margin: 10px 0;
}
#buy-thanks .buy-terms h2, #coupon-thanks .buy-terms h2 {
  font-size: 1.3em;
}
#buy-thanks .buy-terms h3, #coupon-thanks .buy-terms h3 {
  font-size: 1.1em;
}
@media screen and (max-width: 680px) {
  #buy-thanks #buy-data, #coupon-thanks #buy-data {
    display: block;
  }
  #buy-thanks .card-wrap, #coupon-thanks .card-wrap {
    width: 100%;
    padding: 15px;
  }
}
@media print {
  #buy-thanks .print-none,
#buy-thanks .main-nav, #coupon-thanks .print-none,
#coupon-thanks .main-nav {
    display: none;
  }
  #buy-thanks h2, #coupon-thanks h2 {
    border-left: solid 5px #359bf2;
    padding-left: 10px;
  }
  #buy-thanks .bs-table .bs-wrap, #coupon-thanks .bs-table .bs-wrap {
    border-bottom: dotted 1px #999999;
  }
  #buy-thanks .bs-table .bs-wrap:last-child, #buy-thanks .bs-table .bs-wrap:nth-last-child(3), #coupon-thanks .bs-table .bs-wrap:last-child, #coupon-thanks .bs-table .bs-wrap:nth-last-child(3) {
    border: none;
  }
}

#layouts-parts-buy_terms .buy-terms-detail {
  max-width: calc(100% - 40px);
  margin: 40px auto;
}

#sell-index #equip-data-table .equip-data-wrap:nth-child(odd),
#sell-confirm #equip-data-table .equip-data-wrap:nth-child(odd) {
  background-color: #f5f9ff;
}
#sell-index #own-w,
#sell-confirm #own-w {
  border: 1px solid #999999;
}
#sell-index #own-w .own-wrap,
#sell-confirm #own-w .own-wrap {
  padding: 5px;
}
#sell-index #own-w .border-top,
#sell-confirm #own-w .border-top {
  border-top: 1px solid #999999;
}
#sell-index #bank-free,
#sell-confirm #bank-free {
  border-bottom: 1px solid #FB9B01;
  color: #FB9B01;
  display: inline;
}
#sell-index #kw-bonus,
#sell-confirm #kw-bonus {
  margin: 0;
  font-size: 0.8em;
}
#sell-index #bank-wrap,
#sell-confirm #bank-wrap {
  position: relative;
}
#sell-index #bank-wrap img#kw-ribbon,
#sell-confirm #bank-wrap img#kw-ribbon {
  position: absolute;
  top: 0;
  right: 20px;
  width: 20%;
  max-width: 80px;
}
@media screen and (max-width: 440px) {
  #sell-index .uk-card-body,
#sell-confirm .uk-card-body {
    padding: 15px;
  }
}

/****************
  ワットプラス売却
***************/
#wattplus-sell #sell-input .flex {
  justify-content: space-between;
}
#wattplus-sell #sell-input .column {
  width: 48%;
  margin-bottom: 20px;
}
#wattplus-sell #sell-input .own-watplus {
  background-color: #282828;
  color: #ffffff;
  padding: 8px;
}
#wattplus-sell #sell-input .own-watplus dd {
  font-weight: bold;
  font-size: 1.2em;
}
@media screen and (max-width: 640px) {
  #wattplus-sell h3 {
    font-size: 1.2em;
  }
  #wattplus-sell #sell-input .column {
    width: 100%;
  }
}

#report-index .report-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
#report-index .report-list li {
  width: 46%;
  border: 1px solid #333333;
  padding: 50px 20px;
  text-align: center;
  margin: 1%;
}
#report-index .report-list h2 {
  font-size: 1.2em;
}
@media screen and (max-width: 840px) {
  #report-index .report-list li {
    width: 100%;
  }
}

#report-annual h1, #report-corporate_annual h1 {
  font-size: 1.8em;
  color: #333333;
  margin-bottom: 80px;
}
#report-annual h2, #report-corporate_annual h2 {
  font-size: 1.4em;
}
#report-annual .notes-span, #report-corporate_annual .notes-span {
  position: absolute;
  top: auto;
  left: 0;
}
#report-annual .notes-top, #report-corporate_annual .notes-top {
  font-size: 0.9em;
  color: #ff0000;
}
#report-annual .font-s, #report-corporate_annual .font-s {
  font-size: 0.8em;
}
#report-annual .report-company, #report-corporate_annual .report-company {
  font-weight: bold;
  font-size: 0.5em;
  width: 170px;
}
#report-annual .report-company p, #report-corporate_annual .report-company p {
  margin: 0;
}
#report-annual #report-name, #report-corporate_annual #report-name {
  margin: 20px 0;
  font-size: 1.5em;
}
#report-annual #report-span, #report-corporate_annual #report-span {
  margin: 20px 0;
}
#report-annual #report-span dt, #report-corporate_annual #report-span dt {
  font-weight: normal;
  margin-right: 1em;
}
#report-annual .uk-table, #report-corporate_annual .uk-table {
  margin-bottom: 10px;
}
#report-annual .uk-table th, #report-corporate_annual .uk-table th {
  vertical-align: top;
  text-align: center;
  font-weight: normal;
  color: #333333;
}
#report-annual .uk-table-striped, #report-corporate_annual .uk-table-striped {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
#report-annual .uk-table-striped th, #report-annual .uk-table-striped td, #report-corporate_annual .uk-table-striped th, #report-corporate_annual .uk-table-striped td {
  border-left: 1px solid #e5e5e5;
}
#report-annual #summary-table, #report-corporate_annual #summary-table {
  font-weight: bold;
  table-layout: fixed;
}
#report-annual #summary-table th, #report-corporate_annual #summary-table th {
  padding: 16px 5px;
}
#report-annual #detail-table, #report-corporate_annual #detail-table {
  overflow: auto;
  white-space: nowrap;
}
#report-annual #detail-table th, #report-corporate_annual #detail-table th {
  font-size: 1em;
}
#report-annual #detail-table .unit, #report-corporate_annual #detail-table .unit {
  text-align: right;
}
#report-annual ::-webkit-scrollbar, #report-corporate_annual ::-webkit-scrollbar {
  width: 10px;
}
#report-annual ::-webkit-scrollbar-track, #report-corporate_annual ::-webkit-scrollbar-track {
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: inset 0 0 2px #777;
}
#report-annual ::-webkit-scrollbar-thumb, #report-corporate_annual ::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
  box-shadow: none;
}
@media screen and (max-width: 680px) {
  #report-annual .report-hd, #report-corporate_annual .report-hd {
    display: block;
  }
}
@media print {
  #report-annual header,
#report-annual footer, #report-corporate_annual header,
#report-corporate_annual footer {
    display: none;
  }
  #report-annual main, #report-corporate_annual main {
    padding: 0 !important;
  }
  #report-annual #detail-table, #report-corporate_annual #detail-table {
    overflow: hidden;
    white-space: normal;
  }
  #report-annual #detail-table th, #report-corporate_annual #detail-table th {
    font-size: 0.6em;
  }
  #report-annual .equipmentName, #report-corporate_annual .equipmentName {
    width: 18em;
    font-size: 0.8em;
  }
}

/*
*
*　定期購入
*
*/
/*------ 定期購入説明 and cam2118共通------*/
#docs-subscription .padding-holizontal,
.page-subsc .padding-holizontal {
  padding-right: 30px;
  padding-left: 30px;
}
#docs-subscription .frame-blue,
.page-subsc .frame-blue {
  border: solid 3px #0095ff;
  background-color: white;
}
#docs-subscription .sp-br, #docs-subscription .sp-img,
.page-subsc .sp-br,
.page-subsc .sp-img {
  display: none;
}
#docs-subscription .marker-yellow,
.page-subsc .marker-yellow {
  background: linear-gradient(transparent 70%, #fff100 0%);
  padding-bottom: 2px;
}
#docs-subscription .notes-wrap,
.page-subsc .notes-wrap {
  border: solid 2px #262626;
}
#docs-subscription .notes-wrap h3,
.page-subsc .notes-wrap h3 {
  background-color: #262626;
  padding: 4px;
  font-size: 1.1em;
}
#docs-subscription .notes-wrap ul,
.page-subsc .notes-wrap ul {
  background-color: white;
  padding: 20px;
}
#docs-subscription #intro h3,
.page-subsc #intro h3 {
  font-size: 1.8em;
}
#docs-subscription #intro #intro1 .img-wrap, #docs-subscription #intro #intro2 .img-wrap,
.page-subsc #intro #intro1 .img-wrap,
.page-subsc #intro #intro2 .img-wrap {
  height: 304px;
}
#docs-subscription #intro #intro1,
.page-subsc #intro #intro1 {
  position: relative;
}
#docs-subscription #intro #intro1 h3,
.page-subsc #intro #intro1 h3 {
  position: absolute;
  top: 0;
  left: 0;
}
#docs-subscription #intro #intro1 .img-wrap,
.page-subsc #intro #intro1 .img-wrap {
  margin-left: 70%;
}
#docs-subscription #intro #intro1 .text-wrap,
.page-subsc #intro #intro1 .text-wrap {
  position: absolute;
  top: calc(1.8em + 20px);
  left: 0;
  margin-right: 32%;
}
#docs-subscription #intro #intro2,
.page-subsc #intro #intro2 {
  position: relative;
  padding-top: 60px;
}
#docs-subscription #intro #intro2 h3,
.page-subsc #intro #intro2 h3 {
  position: absolute;
  top: 60px;
  left: 0;
  margin-left: 50%;
}
#docs-subscription #intro #intro2 .img-wrap,
.page-subsc #intro #intro2 .img-wrap {
  margin-right: 52%;
}
#docs-subscription #intro #intro2 .text-wrap,
.page-subsc #intro #intro2 .text-wrap {
  position: absolute;
  top: calc(1.8em + 80px);
  left: 0;
  margin-left: 50%;
}
#docs-subscription #recommend .flex,
.page-subsc #recommend .flex {
  justify-content: space-between;
}
#docs-subscription #recommend .rec-wrap,
.page-subsc #recommend .rec-wrap {
  max-width: calc(33.3333333333% - 20px);
  width: 100%;
}
#docs-subscription #recommend .rec-wrap p,
.page-subsc #recommend .rec-wrap p {
  font-size: 1.1em;
  font-weight: bold;
  width: 17em;
  margin: 0 auto;
}
#docs-subscription #simulation .text-wrap,
.page-subsc #simulation .text-wrap {
  padding: 0 16px;
  margin-bottom: 20px;
}
#docs-subscription #step .flex,
.page-subsc #step .flex {
  justify-content: space-between;
}
#docs-subscription #step .step-wrap,
.page-subsc #step .step-wrap {
  max-width: calc(33.3333333333% - 20px);
  width: 100%;
  padding: 48px 16px 16px;
  margin-top: 40px;
  position: relative;
}
#docs-subscription #step .step-wrap::before,
.page-subsc #step .step-wrap::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  left: 0;
  right: 0;
  margin: auto;
  top: -40px;
}
#docs-subscription #step .step1::before,
.page-subsc #step .step1::before {
  background: url(/img/docs/step_01.png) no-repeat;
  background-size: contain;
}
#docs-subscription #step .step2::before,
.page-subsc #step .step2::before {
  background: url(/img/docs/step_02.png) no-repeat;
  background-size: contain;
}
#docs-subscription #step .step3::before,
.page-subsc #step .step3::before {
  background: url(/img/docs/step_03.png) no-repeat;
  background-size: contain;
}
#docs-subscription #step .text-wrap,
.page-subsc #step .text-wrap {
  margin-top: 20px;
}
#docs-subscription #question .font-blue,
.page-subsc #question .font-blue {
  color: #0095ff;
}
#docs-subscription #question .q-hd,
.page-subsc #question .q-hd {
  font-size: 1.8em;
}
#docs-subscription #question .qa-card,
.page-subsc #question .qa-card {
  width: 49%;
  padding: 30px 24px;
  margin-bottom: 20px;
}
#docs-subscription #question .question,
.page-subsc #question .question {
  position: relative;
}
#docs-subscription #question .question img,
.page-subsc #question .question img {
  position: absolute;
  left: 0;
  width: 1.8em;
}
#docs-subscription #question .question .q-ttl,
.page-subsc #question .question .q-ttl {
  font-size: 1.3em;
  display: inline-block;
  padding-left: 34px;
}
#docs-subscription #question .answer,
.page-subsc #question .answer {
  text-align: left;
  margin-top: 20px;
}
#docs-subscription #question .notes-wrap,
.page-subsc #question .notes-wrap {
  border-color: #e20000;
}
#docs-subscription #question .notes-wrap h3,
.page-subsc #question .notes-wrap h3 {
  background-color: #e20000;
}
@media screen and (max-width: 1120px) {
  #docs-subscription #intro h3,
.page-subsc #intro h3 {
    font-size: 1.5em;
  }
  #docs-subscription #intro #intro1 .text-wrap,
.page-subsc #intro #intro1 .text-wrap {
    top: calc(1.5em + 20px);
  }
  #docs-subscription #intro #intro2 .text-wrap,
.page-subsc #intro #intro2 .text-wrap {
    top: calc(1.5em + 80px);
  }
}
@media screen and (max-width: 960px) {
  #docs-subscription .padding-holizontal,
.page-subsc .padding-holizontal {
    padding-right: 10px;
    padding-left: 10px;
  }
  #docs-subscription #intro h3,
.page-subsc #intro h3 {
    font-size: 1.3em;
  }
  #docs-subscription #recommend .rec-wrap p,
.page-subsc #recommend .rec-wrap p {
    width: 100%;
  }
  #docs-subscription #recommend .rec-wrap p .pc-br,
.page-subsc #recommend .rec-wrap p .pc-br {
    display: none;
  }
  #docs-subscription #step .step-wrap,
.page-subsc #step .step-wrap {
    max-width: calc(33.3333333333% - 10px);
  }
}
@media screen and (max-width: 820px) {
  #docs-subscription .docs-common h3, #docs-subscription .docs-common p,
.page-subsc .docs-common h3,
.page-subsc .docs-common p {
    max-width: 100%;
    margin: revert;
  }
}
@media screen and (max-width: 768px) {
  #docs-subscription #intro h3,
.page-subsc #intro h3 {
    text-align: center;
    font-size: 1.5em;
  }
  #docs-subscription #intro #intro1, #docs-subscription #intro #intro2,
.page-subsc #intro #intro1,
.page-subsc #intro #intro2 {
    position: initial;
  }
  #docs-subscription #intro #intro1 h3, #docs-subscription #intro #intro1 .img-wrap, #docs-subscription #intro #intro1 .text-wrap, #docs-subscription #intro #intro2 h3, #docs-subscription #intro #intro2 .img-wrap, #docs-subscription #intro #intro2 .text-wrap,
.page-subsc #intro #intro1 h3,
.page-subsc #intro #intro1 .img-wrap,
.page-subsc #intro #intro1 .text-wrap,
.page-subsc #intro #intro2 h3,
.page-subsc #intro #intro2 .img-wrap,
.page-subsc #intro #intro2 .text-wrap {
    position: initial;
    height: auto;
  }
  #docs-subscription #intro #intro1 h3, #docs-subscription #intro #intro2 h3,
.page-subsc #intro #intro1 h3,
.page-subsc #intro #intro2 h3 {
    margin: auto;
  }
  #docs-subscription #intro #intro1 .text-wrap, #docs-subscription #intro #intro2 .text-wrap,
.page-subsc #intro #intro1 .text-wrap,
.page-subsc #intro #intro2 .text-wrap {
    max-width: 520px;
    width: 100%;
    margin: auto;
  }
  #docs-subscription #intro #intro1 .text-wrap p, #docs-subscription #intro #intro2 .text-wrap p,
.page-subsc #intro #intro1 .text-wrap p,
.page-subsc #intro #intro2 .text-wrap p {
    width: 100%;
  }
  #docs-subscription #intro #intro1 .img-wrap,
.page-subsc #intro #intro1 .img-wrap {
    max-width: 220px;
    width: 100%;
    margin: 20px auto;
  }
  #docs-subscription #intro #intro2 .img-wrap,
.page-subsc #intro #intro2 .img-wrap {
    max-width: 520px;
    width: 100%;
    margin: 20px auto;
  }
  #docs-subscription #step h3,
.page-subsc #step h3 {
    margin-top: 0;
  }
  #docs-subscription #step h3 br,
.page-subsc #step h3 br {
    display: none;
  }
  #docs-subscription #step .step-wrap,
.page-subsc #step .step-wrap {
    max-width: 520px;
    width: 100%;
    margin: 0 auto 60px;
  }
  #docs-subscription #step .img-wrap,
.page-subsc #step .img-wrap {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #docs-subscription .pc-img,
.page-subsc .pc-img {
    display: none;
  }
  #docs-subscription .sp-img,
.page-subsc .sp-img {
    max-width: 480px;
    width: 100%;
    display: block;
  }
  #docs-subscription .padding-l,
.page-subsc .padding-l {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #docs-subscription #recommend .rec-wrap,
.page-subsc #recommend .rec-wrap {
    max-width: 320px;
    width: 100%;
    margin: 0 auto 20px;
  }
  #docs-subscription #question .q-hd,
.page-subsc #question .q-hd {
    font-size: 1.3em;
  }
  #docs-subscription #question .qa-card,
.page-subsc #question .qa-card {
    width: 100%;
  }
  #docs-subscription #question .question img,
.page-subsc #question .question img {
    width: 1.8em;
  }
  #docs-subscription #question .question .q-ttl,
.page-subsc #question .question .q-ttl {
    font-size: 1.1em;
  }
}

/*------ end 定期購入説明 and cam2118共通 ------*/
/*------ 定期購入説明ページ ------*/
#docs-subscription #intro .text-intro .text-left {
  width: 64%;
}
#docs-subscription #intro .text-intro .img-right {
  width: 34%;
}
#docs-subscription #explanation .frame {
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 0 6px rgba(0, 32, 147, 0.3);
  margin: 6px;
}
#docs-subscription #explanation .frame img {
  width: 100%;
}
#docs-subscription #explanation .frame .frame-title {
  position: relative;
}
#docs-subscription #explanation .frame .frame-title.flex {
  justify-content: flex-start;
}
#docs-subscription #explanation .frame .frame-title .font-red2 {
  color: #D62222;
}
#docs-subscription #explanation .frame .frame-title .font-blue1 {
  color: #002093;
}
#docs-subscription #explanation .frame .frame-title .frame-title-img {
  position: absolute;
  width: 40px;
  left: 0;
}
#docs-subscription #explanation .frame .frame-title .frame-title-text {
  padding-left: 48px;
}
#docs-subscription #explanation .frame .width-2-3 {
  width: 70%;
}
#docs-subscription #explanation .frame .width-1-3 {
  width: 28%;
}
#docs-subscription #explanation .frame .width-1-5 {
  width: 18%;
}
#docs-subscription #explanation .frame .width-4-5 {
  width: 80%;
}
#docs-subscription #explanation .frame .img-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#docs-subscription #explanation table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
#docs-subscription #explanation tr:nth-child(1) {
  background-color: #BEE1FC;
}
#docs-subscription #explanation tr:nth-child(3) {
  font-size: 1.08em;
  font-weight: 300;
  background: linear-gradient(to bottom, white, #FFFAB8);
}
#docs-subscription #explanation tr:nth-child(4) {
  font-size: 1.16em;
  font-weight: 600;
  background: linear-gradient(to bottom, #FFFAB8, #FFE44A);
}
#docs-subscription #explanation tr:nth-child(5) {
  font-size: 1.24em;
  font-weight: 900;
  -webkit-text-stroke: 1px #333333;
  background-color: #FFE44A;
}
#docs-subscription #explanation td {
  border: solid 1px black;
  width: 33.3333333333%;
}
#docs-subscription #explanation .frame-small {
  width: 48%;
}
#docs-subscription #question .qa-wrap {
  width: 48%;
  padding: 12px;
  margin-bottom: 20px;
}
#docs-subscription #question .accordion-title, #docs-subscription #question .accordion-content {
  position: relative;
  padding-left: 32px;
}
#docs-subscription #question .accordion-title::before, #docs-subscription #question .accordion-content::before {
  color: #fff;
  border-radius: 50%;
  padding-left: 6px;
  margin-right: 8px;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 24px;
  height: 24px;
}
#docs-subscription #question .accordion-title {
  color: #0095ff;
}
#docs-subscription #question .accordion-title::before {
  content: "Q";
  background-color: #0095ff;
}
#docs-subscription #question .accordion-content {
  color: #333;
  padding-left: 0px;
  margin-top: 12px;
}
#docs-subscription #question .cam-btn {
  border: none;
}
@media screen and (max-width: 840px) {
  #docs-subscription #intro .text-intro .text-left {
    width: 100%;
    order: 1;
  }
  #docs-subscription #intro .text-intro .img-right {
    width: 100%;
  }
  #docs-subscription #explanation .frame-small {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #docs-subscription #explanation .frame.uk-padding {
    padding: 20px;
  }
  #docs-subscription #explanation .frame .frame-contents-wrap .width-1-3, #docs-subscription #explanation .frame .frame-contents-wrap .width-2-3, #docs-subscription #explanation .frame .frame-contents-wrap .width-1-5, #docs-subscription #explanation .frame .frame-contents-wrap .width-4-5, #docs-subscription #explanation .frame .frame-contents-wrap .frame-left, #docs-subscription #explanation .frame .frame-contents-wrap .frame-right {
    width: 100%;
  }
  #docs-subscription #explanation .frame .frame-contents-wrap img:not(#select-frame) {
    max-width: 320px;
  }
  #docs-subscription #explanation .frame .frame-contents-wrap#select-frame .frame-right {
    display: block;
  }
  #docs-subscription #explanation .frame .img-flex {
    justify-content: center;
  }
  #docs-subscription #explanation .order-minus {
    order: -1;
  }
  #docs-subscription #question .qa-wrap {
    width: 100%;
  }
  #docs-subscription #question .accordion-title {
    pointer-events: all;
    padding-right: 28px;
  }
  #docs-subscription #question .accordion-title::after {
    content: "+";
    font-size: 1.4em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
  }
  #docs-subscription #question .qa-open::after {
    content: "-";
    font-size: 1.8em;
  }
  #docs-subscription #question .accordion-content {
    display: none;
  }
}

/*------ end 定期購入説明ページ and cam2123共通 ------*/
/*------ 定期購入登録 ------*/
#subscription-input {
  /* 優先設備選択*/
  /* 設備プレビューモーダル */
}
#subscription-input .marker-yellow {
  background: linear-gradient(transparent 70%, #fff100 0%);
  padding-bottom: 2px;
}
#subscription-input .uk-sticky-fixed {
  z-index: 35;
}
#subscription-input .uk-modal {
  z-index: 40;
}
#subscription-input .uk-form-label {
  font-size: 1rem;
}
#subscription-input #snackbar {
  z-index: 100;
}
#subscription-input .desc-wrap {
  font-size: 0.95em;
  background-color: #f5f9ff;
  padding: 8px;
  margin-bottom: 20px;
}
#subscription-input #priority-select .flex {
  justify-content: space-between;
}
#subscription-input #priority-select .select-inner {
  width: 100%;
  border: solid 2px transparent;
}
#subscription-input #priority-select .select-inner .select-hd {
  position: relative;
}
#subscription-input #priority-select .select-inner .radio-btn {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 10px;
}
#subscription-input #priority-select .select-inner label {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
  padding-left: 42px;
  border: solid 2px #dddddd;
  border-radius: 11px;
  font-size: 1em;
  cursor: pointer;
  position: relative;
}
#subscription-input #priority-select .select-inner label::before, #subscription-input #priority-select .select-inner label::after {
  content: "";
  position: absolute;
  border-radius: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 12px;
}
#subscription-input #priority-select .select-inner label::before {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: solid 1px #999999;
}
#subscription-input #priority-select .select-inner label::after {
  width: 12px;
  height: 12px;
  background-color: #999999;
  left: 18px;
}
#subscription-input #priority-select .select-inner .radio-btn:hover + label {
  border-color: #ffae00;
  background-color: #fdf1dc;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .radio-btn:hover + label::before {
  border-color: #ffae00;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .radio-btn:hover + label::after {
  background-color: #ffae00;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .radio-btn:checked + label {
  outline: 0;
  border-color: #ffae00;
  background-color: #fdf1dc;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .radio-btn:checked + label::before {
  border-color: #ffae00;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .radio-btn:checked + label::after {
  background-color: #ffae00;
  transition: 0.3s;
}
#subscription-input #priority-select .select-inner .select-desc {
  font-size: 0.8em;
  padding: 8px 4px 0;
}
#subscription-input #priority-detail {
  padding-top: 10%;
}
#subscription-input #priority-detail .wrap-960 {
  max-width: 960px !important;
}
#subscription-input #priority-detail .preview-wrap {
  background-color: #ffffff;
  width: 100%;
  padding: 30px;
  position: relative;
}
#subscription-input #priority-detail .preview-wrap .uk-modal-close {
  background-color: #333333;
}
#subscription-input #priority-detail .preview-wrap .btn-close {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  right: 0;
  cursor: pointer;
}
#subscription-input #priority-detail .preview-wrap .btn-close::before, #subscription-input #priority-detail .preview-wrap .btn-close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
#subscription-input #priority-detail .preview-wrap .btn-close::before {
  transform: rotate(45deg);
}
#subscription-input #priority-detail .preview-wrap .btn-close::after {
  transform: rotate(-45deg);
}
#subscription-input #priority-detail .priority-wrap {
  width: 48%;
  background-color: #ffffff;
  border: solid 2px #0095ff;
  border-radius: 12px;
}
#subscription-input #priority-detail .priority-wrap .discount {
  display: inline-block;
  color: #444;
  position: relative;
  font-weight: normal;
  font-size: 0.8em;
}
#subscription-input #priority-detail .priority-wrap .discount::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(68, 68, 68, 0.7);
  top: 45%;
  left: 0;
}
#subscription-input #priority-detail .priority-wrap .discount-price {
  display: flex;
  align-items: center;
}
#subscription-input #priority-detail .priority-wrap .price-down {
  display: inline-block;
  text-align: center;
  vertical-align: text-bottom;
  color: white;
  background-color: #ff1744;
  font-size: 0.6em;
  padding: 2px;
  margin: 0 5px 0 0;
}
#subscription-input #priority-detail .priority-wrap .priority-name {
  text-align: center;
  padding: 16px 8px 14px;
  font-size: 1.3em;
  background-color: #0095ff;
  border-radius: 9px 9px 0 0;
  color: white;
}
#subscription-input #priority-detail .priority-wrap .priority-list {
  font-weight: bold;
  color: #333333;
}
#subscription-input #priority-detail .priority-wrap .priority-list .font-bk {
  color: #333333;
}
#subscription-input #priority-detail .priority-wrap .priority-list .equip-name {
  text-align: center;
  color: #333333;
  background-color: #f5f5f5;
  padding: 8px 8px 6px;
}
#subscription-input #priority-detail .priority-wrap .priority-list .list-wrap {
  padding: 0 8px;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap, #subscription-input #priority-detail .priority-wrap .priority-list .eq-detail-wrap:not(:last-child) {
  border-bottom: dashed 1px #999999;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap {
  padding: 16px 0;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 1;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap .font-l {
  font-size: 1.8em;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap .discount {
  font-size: 0.5em;
}
#subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap .current-rate {
  display: block;
}
#subscription-input #priority-detail .priority-wrap .priority-list .eq-detail-wrap {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}
#subscription-input #priority-detail .priority-wrap .priority-list .interconnect-wrap .font-l {
  font-size: 1.5em;
}
#subscription-input #priority-detail .priority-wrap .priority-list dl dt {
  padding: 4px 0;
  margin-right: 10px;
}
#subscription-input #priority-detail .priority-wrap .priority-list dl dd {
  padding: 4px 0;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  #subscription-input #priority-detail .priority-wrap .priority-name {
    font-size: 2.8vw;
  }
  #subscription-input #priority-detail .priority-wrap .priority-list .rate-wrap .font-l {
    font-size: 1.6em;
  }
  #subscription-input #priority-detail .priority-wrap .priority-list .interconnect-wrap .font-l {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 640px) {
  #subscription-input #priority-detail {
    padding-top: 50px;
  }
  #subscription-input #priority-detail .priority-wrap {
    max-width: 375px;
    width: 100%;
    margin: 0 auto 20px;
  }
  #subscription-input #priority-detail .priority-wrap .priority-name {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 420px) {
  #subscription-input #priority-detail {
    padding-top: 15px;
  }
  #subscription-input #priority-detail .preview-wrap {
    padding: 30px 10px;
  }
}

/*------ 定期購入支払い ------*/
#subscription-confirm .subscription-hide {
  display: none;
}
#subscription-confirm #amounts-detail .bs-wrap:nth-child(3) {
  border-bottom: none;
}
#subscription-confirm #equip-data-table .equip-data-wrap:nth-child(odd) {
  background-color: #f5f9ff;
}
#subscription-confirm .terms-wrap {
  background-color: #f5f5f5;
  padding: 10px;
}
#subscription-confirm .buy-terms {
  height: 240px;
  overflow-y: scroll;
  font-size: 80%;
  margin-top: 20px;
  border: 1px solid #dddddd;
  padding: 10px;
  background-color: #ffffff;
}
#subscription-confirm .buy-terms h2 {
  font-size: 110%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-left: none;
  padding-left: 0;
}
#subscription-confirm .buy-terms h3 {
  font-size: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
#subscription-confirm .buy-terms p {
  margin-bottom: 10px;
}
#subscription-confirm .check-text {
  margin-bottom: 10px;
  font-size: 90%;
}
#subscription-confirm .modal-button {
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #f5f5f5;
}
#subscription-confirm .terms-checkbox-wrap {
  justify-content: center;
}
#subscription-confirm .terms-checkbox-wrap label {
  display: inline-block;
}
#subscription-confirm .terms-checkbox:first-child {
  margin-right: 16px;
}
@media screen and (max-width: 640px) {
  #subscription-confirm .terms-checkbox-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  #subscription-confirm .terms-checkbox:first-child {
    margin-bottom: 16px;
    margin-right: 0;
  }
}
@media screen and (max-width: 440px) {
  #subscription-confirm .uk-card-body {
    padding: 15px;
  }
}

/*------ end 定期購入支払い ------*/
/*------ 購入完了アニメーション ------*/
#subscription-thanks {
  /*** 紙吹雪 ****/
  /***** end購入完了アニメーション *****/
}
#subscription-thanks .inner-img {
  width: 160px;
  margin: auto;
}
#subscription-thanks .thanks-explanation {
  text-align: center;
}
#subscription-thanks .shine {
  position: relative;
}
#subscription-thanks .shine:before {
  position: absolute;
  z-index: 98;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  top: -20%;
  background-image: url("/img/common/shine.png"), url("/img/common/shine.png");
  background-size: 0, 0;
  background-position: 20% 90%, 80% 20%;
  background-repeat: no-repeat;
  animation: shine 0.6s ease;
  animation-delay: 2s;
}
@keyframes shine {
  0% {
    background-size: 0, 0;
  }
  10% {
    background-size: 10% auto, 20% auto;
  }
  80% {
    background-size: 10% auto, 20% auto;
  }
  100% {
    background-size: 0, 0;
  }
}
#subscription-thanks .reflect-img {
  position: relative;
  overflow: hidden;
}
#subscription-thanks .reflect {
  z-index: 100;
  height: 100%;
  width: 10px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #ffffff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 2.3s ease-in-out;
}
@keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
#subscription-thanks .confetti {
  display: block;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
#subscription-thanks .confetti .paper {
  opacity: 0;
  position: absolute;
}
#subscription-thanks .confetti .paper:nth-child(odd) {
  animation: confetti1 3.5s ease-in;
}
#subscription-thanks .confetti .paper:nth-child(even) {
  animation: confetti2 3.5s ease-in;
}
#subscription-thanks .confetti .paper.c1 {
  background-color: #79bf7f;
}
#subscription-thanks .confetti .paper.c2 {
  background-color: #51aef1;
}
#subscription-thanks .confetti .paper.c3 {
  background-color: #ffab54;
}
#subscription-thanks .confetti .paper.c4 {
  background-color: #f15383;
}
#subscription-thanks .confetti .paper.c5 {
  background-color: #ac5ab7;
}
@keyframes confetti1 {
  0% {
    opacity: 0;
    transform: translate(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(500%, -1000%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-500%, 2500%) rotate(720deg);
  }
}
@keyframes confetti2 {
  0% {
    opacity: 0;
    transform: translateY(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(-500%, -1800%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(500%, 2500%) rotate(720deg);
  }
}
#subscription-thanks .thanks-present {
  background: linear-gradient(45deg, #2352fb, #173383);
  color: #ffffff;
  max-width: 400px;
  width: 100%;
  margin: 0 auto 2em;
  font-weight: bold;
}
@media print {
  #subscription-thanks .print-none,
#subscription-thanks .main-nav {
    display: none;
  }
  #subscription-thanks h2 {
    border-left: solid 5px #359bf2;
    padding-left: 10px;
  }
  #subscription-thanks .bs-table .bs-wrap {
    border-bottom: dotted 1px #999999;
  }
  #subscription-thanks .bs-table .bs-wrap:last-child, #subscription-thanks .bs-table .bs-wrap:nth-last-child(3) {
    border: none;
  }
}
@media screen and (max-width: 640px) {
  #subscription-thanks .thanks-explanation {
    text-align: left;
  }
  #subscription-thanks #share p {
    text-align: left;
  }
}

/*------ 定期購入 /subscription ------*/
#subscription-index #mv-title .mv-title-text::before, #subscription-index #mv-title .mv-title-text::after {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
}
#subscription-index #mv-title .mv-title-text::before {
  background: url(/img/docs/subscription/hd_img01.png) no-repeat;
  background-size: contain;
  top: -22%;
  left: -44%;
}
#subscription-index #mv-title .mv-title-text::after {
  background: url(/img/docs/subscription/hd_img02.png) no-repeat;
  background-size: contain;
  top: -22%;
  right: -42%;
}
#subscription-index #intro .frame {
  border-radius: 18px;
  box-shadow: 0 0 6px rgba(0, 32, 147, 0.3);
  padding: 18px;
  margin: 4px;
  width: 32%;
}
#subscription-index #intro .frame-title-text {
  color: #D62222;
  padding-left: 48px;
}
#subscription-index #intro .frame-title-img {
  position: absolute;
  width: 40px;
  left: 0;
}
#subscription-index #intro .frame-img img {
  max-width: 380px;
  width: 100%;
}
#subscription-index #explanation ul {
  max-width: 715px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#subscription-index #explanation li {
  width: 46.15%;
}
#subscription-index #explanation .explanation-movie {
  position: relative;
  padding-bottom: 177.78%;
  height: 0;
  overflow: hidden;
}
#subscription-index #explanation .explanation-movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#subscription-index #qa .qa-card {
  width: 49%;
  padding: 30px 24px;
  margin-bottom: 20px;
}
#subscription-index #qa .question {
  position: relative;
}
#subscription-index #qa .question img {
  position: absolute;
  left: 0;
  width: 1.8em;
}
#subscription-index #qa .question .q-ttl {
  font-size: 1.3em;
  display: inline-block;
  padding-left: 34px;
}
#subscription-index #qa .answer {
  text-align: left;
  margin-top: 20px;
}
#subscription-index #qa .notes-wrap {
  border-color: #e20000;
}
#subscription-index #qa .notes-wrap h3 {
  background-color: #e20000;
}
#subscription-index #qa .font-blue {
  color: #0095ff;
}
#subscription-index #qa .notes1 {
  padding-left: 2em;
}
#subscription-index #qa .link-docs-subscription {
  border: 2px solid #002d7f;
  padding: 20px;
}
#subscription-index #qa .link-docs-subscription h3 {
  text-align: center;
  color: #002d7f;
}
#subscription-index .return-wrap {
  max-width: 400px;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 640px) {
  #subscription-index #mv-title .mv-title-text::before, #subscription-index #mv-title .mv-title-text::after {
    width: 60px;
    height: 60px;
    top: -2%;
  }
  #subscription-index #mv-title .mv-title-text::before {
    left: -32%;
  }
  #subscription-index #mv-title .mv-title-text::after {
    right: -32%;
  }
  #subscription-index #mv-title .program {
    display: block;
  }
  #subscription-index #intro .frame {
    width: 100%;
  }
  #subscription-index #explanation ul {
    overflow-x: scroll;
    white-space: nowrap;
    display: block;
  }
  #subscription-index #explanation li {
    width: 92%;
    display: inline-block;
  }
  #subscription-index #qa .q-hd {
    font-size: 1.3em;
  }
  #subscription-index #qa .qa-card {
    width: 100%;
  }
  #subscription-index #qa .question img {
    width: 1.8em;
  }
  #subscription-index #qa .question .q-ttl {
    font-size: 1.1em;
  }
}

/*------ end 定期購入 /subscription ------*/
/*************************
* 銀振自動消込機能説明ページ *
*************************/
#docs-autobank .marker-yellow {
  background: linear-gradient(transparent 70%, #fff100 0%);
  padding-bottom: 2px;
}
#docs-autobank .sp-br, #docs-autobank .sp-img {
  display: none;
}
#docs-autobank .contents-wrap.flex {
  justify-content: space-between;
}
#docs-autobank #intro .text-wrap {
  width: 60%;
}
#docs-autobank #intro .img-wrap {
  width: 30%;
  margin-right: 7%;
}
#docs-autobank #change-bank .text-wrap {
  width: 52%;
}
#docs-autobank #change-bank .img-wrap {
  width: 43%;
}
#docs-autobank #point .point-hd span {
  display: block;
}
#docs-autobank #point .point-detail.flex {
  justify-content: space-between;
}
#docs-autobank #point .point-frame {
  width: 32%;
  background-color: #ffffff;
  border: solid 3px #0095ff;
  padding: 20px;
}
#docs-autobank #point .hd-wrap {
  margin-bottom: 20px;
}
#docs-autobank #point .hd-wrap.flex {
  justify-content: left;
  flex-wrap: nowrap;
}
#docs-autobank #point .hd-wrap img {
  width: 80px;
  height: 80px;
  margin-right: 4%;
}
#docs-autobank #point .attention {
  border: solid 3px #e20000;
  background-color: #ffffff;
  padding: 20px 20px 20px 10px;
}
#docs-autobank #point .attention h3 {
  font-size: 1.17em;
  color: #e20000;
  margin: 0;
}
#docs-autobank #point .attention .attention-wrap {
  padding-left: 10px;
}
@media screen and (max-width: 960px) {
  #docs-autobank #point .point-frame {
    padding: 10px;
  }
  #docs-autobank #point .hd-wrap img {
    width: 60px;
    height: 60px;
  }
  #docs-autobank #point .hd-wrap h3 {
    font-size: 2.3vw;
  }
}
@media screen and (max-width: 768px) {
  #docs-autobank h2 {
    font-size: 1.8em;
  }
  #docs-autobank #intro .text-wrap {
    width: 66%;
  }
  #docs-autobank #intro .img-wrap {
    width: 32%;
    margin-right: 0;
  }
  #docs-autobank #change-bank .img-wrap {
    width: 47%;
  }
  #docs-autobank #point .point-frame {
    width: 33%;
  }
  #docs-autobank #point .hd-wrap img {
    width: 56px;
    height: 56px;
  }
}
@media screen and (max-width: 640px) {
  #docs-autobank h2 {
    font-size: 1.6em;
  }
  #docs-autobank p {
    max-width: 100%;
  }
  #docs-autobank .contents-wrap.flex {
    justify-content: center;
    flex-direction: column-reverse;
  }
  #docs-autobank #intro .text-wrap, #docs-autobank #change-bank .text-wrap {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
  #docs-autobank #intro .img-wrap, #docs-autobank #change-bank .img-wrap {
    width: 100%;
    margin: 0 auto 20px;
  }
  #docs-autobank #intro h2 .sp-br {
    display: block;
  }
  #docs-autobank #intro .img-wrap {
    max-width: 320px;
  }
  #docs-autobank #change-bank h2 .sp-br {
    display: block;
  }
  #docs-autobank #change-bank .img-wrap {
    max-width: 420px;
  }
  #docs-autobank #point .point-frame {
    width: 100%;
  }
  #docs-autobank #point .point-frame:not(:last-child) {
    margin-bottom: 10px;
  }
  #docs-autobank #point .hd-wrap.flex {
    align-items: center;
  }
  #docs-autobank #point .hd-wrap img {
    margin-right: 2%;
  }
  #docs-autobank #point .hd-wrap h3 {
    font-size: 1.3em;
  }
  #docs-autobank #point .attention h3 {
    text-align: center;
    font-size: 3.4vw;
  }
}
@media screen and (max-width: 480px) {
  #docs-autobank h2 {
    font-size: 6.4vw;
  }
  #docs-autobank #point .hd-wrap h3 {
    font-size: 1.2em;
  }
  #docs-autobank #point .attention {
    padding: 10px;
  }
  #docs-autobank #point .attention h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }
  #docs-autobank #point .attention h3 .sp {
    display: none;
  }
  #docs-autobank #point .attention h3 .sp-br {
    display: block;
  }
  #docs-autobank #point .attention .attention-wrap {
    padding-left: 0;
  }
}

/****** 本人確認説明ページ ******/
#docs-identify h1#mv-title {
  background-position: left;
}
#docs-identify .identify-frame {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  border: solid 1px #333333;
  background-color: white;
}
#docs-identify .identify-status {
  max-width: 420px;
  width: 100%;
  margin: 0 auto 20px;
  border: solid 2px #0086ff;
  border-radius: 3px;
}
#docs-identify .identify-status.error {
  border-color: #e20000;
  background-color: #ffd7d7;
  color: #e20000;
}
#docs-identify #identify-intro .img-wrap {
  max-width: 130px;
  width: 100%;
}
#docs-identify #identify-intro .notes1 {
  width: calc(100% - 130px);
}
#docs-identify #identify-01 .step li {
  width: 23%;
}
#docs-identify #identify-01 .step li img {
  max-width: 180px;
  min-width: 120px;
  width: 50%;
  height: 100%;
}
#docs-identify #identify-01 .step li:nth-child(-n+3) {
  position: relative;
}
#docs-identify #identify-01 .step li:nth-child(-n+3)::after {
  content: "▶︎";
  position: absolute;
  line-height: 1;
  font-size: 1.8em;
  transform: scale(0.8, 1.6);
  height: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1em;
  z-index: 1;
}
#docs-identify #attention {
  border: solid 3px #e20000;
  background-color: white;
}
#docs-identify #attention h3 {
  color: #e20000;
  font-size: 1.2em;
}
@media screen and (max-width: 786px) {
  #docs-identify #identify-01 .step li {
    width: 100%;
  }
  #docs-identify #identify-01 .step li:nth-child(-n+3)::after {
    width: 0.8em;
    transform: scale(1.6, 0.8) rotate(90deg);
    right: 0;
    left: 0;
    top: auto;
    bottom: -0.8em;
  }
  #docs-identify #identify-01 .step .flex-sp {
    display: flex;
    justify-content: space-between;
  }
  #docs-identify #identify-01 .step .flex-sp p {
    max-width: calc(100% - 200px);
    min-width: calc(100% - 140px);
    width: 50%;
    margin-left: 20px;
  }
}

/**** end 本人確認説明ページ ****/
/****** 個人情報同意ページ ******/
#user-agree #identify-info {
  border: solid 2px #0086ff;
  background-color: white;
}
@media screen and (max-width: 640px) {
  #user-agree #identify-info {
    background-color: #f5f9ff;
  }
}

/**** end 個人情報同意ページ ****/
/****** 本人確認ポップアップ ******/
.identification-pop #identify-pop {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.identification-pop #identify-pop .flex {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.identification-pop #identify-wrap {
  width: 80%;
  max-width: 800px;
  position: relative;
}
.identification-pop #identify-wrap img {
  border: solid 1px #dddddd;
}
.identification-pop #identify-wrap #identify-close {
  position: absolute;
  top: -1em;
  right: 0;
  cursor: pointer;
  width: 1em;
  height: 1em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  transition: 0.5s;
  text-shadow: 1px 1px 2px #666666;
}
.identification-pop #identify-wrap #identify-close:before {
  content: "×";
  width: 1em;
  height: 1em;
  display: inline-block;
  color: #ffffff;
}
.identification-pop #identify-wrap #identify-close:hover {
  transform: rotateZ(180deg);
}
.identification-pop #identify-wrap .btn-cam {
  background-color: #0095ff;
  color: #ffffff;
  border: 1px solid #0095ff;
  font-size: 1.2em;
}
.identification-pop #identify-wrap a:hover .btn-cam {
  background-color: #ffffff;
  color: #0095ff;
}
.identification-pop .padding-m {
  padding: 40px;
}
@media screen and (max-width: 640px) {
  .identification-pop .padding-m {
    padding: 10px;
  }
}

/**** end 本人確認ポップアップ ****/
/****** 本人確認アップロードエラーメッセージ ******/
#identification-wrap .border {
  border: solid 2px;
}
#identification-wrap .border.warning {
  border-color: #e20000;
}
#identification-wrap .border.checking {
  border-color: #0068ff;
}
#identification-wrap .hd {
  padding: 0.5em 10px;
}
#identification-wrap .hd.warn-hd {
  background-color: #e20000;
}
#identification-wrap .hd.check-hd {
  background-color: #0068ff;
}
#identification-wrap .text-wrap {
  padding: 10px;
}
#identification-wrap .img-wrap {
  width: 120px;
}
#identification-wrap .flex p {
  width: calc(100% - 130px);
}
#identification-wrap .error-wrap {
  background-color: #ffd7d7;
}

/****** end 本人確認アップロードエラーメッセージ ******/
/******** 本人確認完了画面 ********/
#user-upload_thanks .hd-deco {
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#user-upload_thanks .hd-deco::before, #user-upload_thanks .hd-deco::after {
  content: "";
  width: 1.4em;
  height: 2px;
  background-color: #333333;
}
#user-upload_thanks .hd-deco::before {
  transform: rotate(60deg);
}
#user-upload_thanks .hd-deco::after {
  transform: rotate(-60deg);
}
@media screen and (max-width: 640px) {
  #user-upload_thanks .hd-deco {
    font-size: 1.3em;
  }
}

/****** end 本人確認完了画面 ******/
#docs-ranking-pref {
  /* タブ切り替え */
  /* 日本地図 */
  /* ランキング一覧 */
}
#docs-ranking-pref #rank-hd {
  color: #333333;
}
#docs-ranking-pref #rank-hd .font-s {
  font-size: 0.6em;
}
#docs-ranking-pref #rank-hd img {
  width: 1em;
  vertical-align: baseline;
  margin: 0 4px;
}
#docs-ranking-pref .tab-wrap .select-tab {
  width: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  background-color: #e5e5e5;
  text-align: center;
  font-weight: bold;
}
#docs-ranking-pref .tab-wrap .select-tab.active {
  background-color: #0055b2;
  color: white;
}
#docs-ranking-pref .tab-wrap .select-tab:hover {
  cursor: pointer;
}
#docs-ranking-pref .tab-wrap .select-tab .sp-br {
  display: none;
  line-height: 1.2;
}
#docs-ranking-pref .prefW .pref-map {
  background: url(/img/green/data/map-bk.png) center top no-repeat;
  background-size: 100%;
  position: relative;
}
#docs-ranking-pref .prefW .pref-map::before {
  content: "";
  position: absolute;
  background: url(/img/green/data/map-line.png) center top no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#docs-ranking-pref .prefW .pref-map svg {
  width: 100%;
}
#docs-ranking-pref .prefW .pref-map svg .cls-1 {
  fill: #f4f4f4;
}
#docs-ranking-pref .prefW .pref-map svg .rank1 {
  fill: #1a45b4;
}
#docs-ranking-pref .prefW .pref-map svg .rank2 {
  fill: #1b9ef7;
}
#docs-ranking-pref .prefW .pref-map svg .rank3 {
  fill: #23b7af;
}
#docs-ranking-pref .prefW .pref-map svg .rank4, #docs-ranking-pref .prefW .pref-map svg .rank5, #docs-ranking-pref .prefW .pref-map svg .rank6, #docs-ranking-pref .prefW .pref-map svg .rank7, #docs-ranking-pref .prefW .pref-map svg .rank8, #docs-ranking-pref .prefW .pref-map svg .rank9, #docs-ranking-pref .prefW .pref-map svg .rank10 {
  fill: #c2f2dc;
}
#docs-ranking-pref #rank-list {
  border-collapse: collapse;
}
#docs-ranking-pref #rank-list tbody {
  display: block;
  width: 100%;
}
#docs-ranking-pref #rank-list tr {
  background-color: #ffffff;
  padding: 4px 0;
}
#docs-ranking-pref #rank-list tr:nth-child(even) {
  background-color: #f4f4f4;
}
#docs-ranking-pref #rank-list tr:nth-child(-n+3) {
  font-weight: bold;
}
#docs-ranking-pref #rank-list tr:nth-child(n+4) {
  font-size: 0.8em;
}
#docs-ranking-pref #rank-list tr:nth-child(1) td:nth-child(1) {
  position: relative;
  color: transparent;
}
#docs-ranking-pref #rank-list tr:nth-child(1) td:nth-child(1)::before {
  content: "";
  position: absolute;
  background: url(/img/kw/no1.png) no-repeat;
  background-size: contain;
  width: 35px;
  height: 24px;
  top: 0;
  bottom: 0;
  left: 8px;
  margin: auto;
}
#docs-ranking-pref #rank-list tr:nth-child(2) td:nth-child(1) {
  position: relative;
  color: transparent;
}
#docs-ranking-pref #rank-list tr:nth-child(2) td:nth-child(1)::before {
  content: "";
  position: absolute;
  background: url(/img/kw/no2.png) no-repeat;
  background-size: contain;
  width: 35px;
  height: 24px;
  top: 0;
  bottom: 0;
  left: 8px;
  margin: auto;
}
#docs-ranking-pref #rank-list tr:nth-child(3) td:nth-child(1) {
  position: relative;
  color: transparent;
}
#docs-ranking-pref #rank-list tr:nth-child(3) td:nth-child(1)::before {
  content: "";
  position: absolute;
  background: url(/img/kw/no3.png) no-repeat;
  background-size: contain;
  width: 35px;
  height: 24px;
  top: 0;
  bottom: 0;
  left: 8px;
  margin: auto;
}
#docs-ranking-pref #rank-list tr:last-child {
  border-bottom: none;
}
#docs-ranking-pref #rank-list td {
  padding: 4px 8px;
  display: inline-block;
}
#docs-ranking-pref #rank-list td:nth-child(1) {
  width: 51px;
}
#docs-ranking-pref #rank-list td:nth-child(2) {
  width: calc(5em + 16px);
}
#docs-ranking-pref #rank-list td:nth-child(3) {
  width: calc(100% - (5em + 83px));
}
#docs-ranking-pref .btn-cv svg {
  width: 1.4em;
}
@media screen and (max-width: 640px) {
  #docs-ranking-pref #rank-hd {
    font-size: 1.6em;
  }
  #docs-ranking-pref .tab-wrap .select-tab {
    font-size: 0.8em;
  }
  #docs-ranking-pref #rank-list td:nth-child(3) {
    width: 100%;
  }
}

#docs-friend .bg-container {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
}
#docs-friend .no-identified {
  color: #E44341;
  max-width: 420px;
  width: 100%;
  margin: 0 auto 20px;
  border: solid 2px #E44341;
  border-radius: 3px;
}
#docs-friend .friend-hd {
  font-size: 1.1em;
  padding: 4px;
}
#docs-friend #friend-intro .width-3-2 .width-2 {
  padding-left: 0;
  padding-right: 2%;
}
#docs-friend #friend-intro .width-3-2 .width-3 {
  padding-right: 0;
  padding-left: 2%;
}
#docs-friend #friend-flow h3 {
  padding: 8px;
  background-color: #0095ff;
}
#docs-friend #friend-flow .bg-accent {
  background-color: #FE81B3;
}
#docs-friend #friend-flow .flow-left, #docs-friend #friend-flow .flow-right {
  width: calc((100% - 90px) / 2);
}
#docs-friend #friend-flow .flow-right img {
  padding: 2em 0 0 2em;
}
#docs-friend #friend-flow .flow-arrow {
  width: 70px;
}
#docs-friend #friend-invite li {
  width: 30%;
}
#docs-friend #friend-invite .btn-wrap a {
  position: relative;
  color: #333;
  font-weight: bold;
  background-color: #F1F5F6;
  padding: 16px;
  border-radius: 3px;
  box-shadow: 0px 0px 8px grey;
}
#docs-friend #friend-invite .btn-wrap a img {
  width: 40px;
  margin-right: 8px;
}
#docs-friend #friend-invite .btn-wrap a span {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#docs-friend #friend-invite .invited-number-wrap {
  font-size: 1.6em;
  border: 2px solid #0196FF;
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 16px;
}
#docs-friend #friend-invite .invited-number-wrap img {
  width: 40px;
  margin-right: 8px;
}
#docs-friend #friend-invite .invited-number-wrap .inside-text {
  color: #fff;
  background: #0196FF;
  padding: 8px;
  margin-right: 16px;
}
#docs-friend #friend-invite .invited-number-wrap .font-emphasis {
  font-size: 1.8em;
  line-height: 1;
}
#docs-friend #friend-wat ul {
  max-width: 715px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#docs-friend #friend-wat li {
  width: 46.15%;
}
#docs-friend #friend-wat .mv-title {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 10px;
}
#docs-friend #friend-wat .mv-wrap {
  position: relative;
  padding-bottom: 177.78%;
  height: 0;
  overflow: hidden;
}
#docs-friend #friend-notes .notes-wrap {
  border: solid 2px #e20000;
}
#docs-friend #friend-notes .notes-wrap h3 {
  background-color: #e20000;
  max-width: none;
}
@media screen and (max-width: 980px) {
  #docs-friend #friend-invite li {
    width: 100%;
    max-width: 560px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 640px) {
  #docs-friend #friend-invite .invited-number-wrap .inside-text {
    font-size: 0.9em;
    display: block;
    margin-right: 0;
    margin-bottom: 20px;
  }
  #docs-friend #friend-wat ul {
    overflow-x: scroll;
    white-space: nowrap;
    display: block;
  }
  #docs-friend #friend-wat li {
    width: 92%;
    display: inline-block;
  }
  #docs-friend #friend-wat .mv-title {
    font-size: 1.3em;
  }
}

/*
*
* lp-ana
* サイト内コンテンツ用ページ
* ANAキャンペーン共通
*
*/
#lp-ana,
#docs-ana {
  color: #333333;
  font-weight: normal;
  /*---------- メインビジュアル ----------*/
  /*---------- ステップ ----------*/
  /*---------- 販売中案件 ----------*/
  /*---------- モデルケース ----------*/
  /*---------- Q&A ----------*/
  /*---------- PS -----------*/
  /*---------- 登録 ----------*/
}
#lp-ana .bg-blue,
#docs-ana .bg-blue {
  background-color: #f7f8fa;
}
#lp-ana h2,
#docs-ana h2 {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1.5em;
  color: #073d8e;
}
#lp-ana h3,
#docs-ana h3 {
  font-size: 1.5em;
  font-weight: bold;
  color: #073d8e;
}
#lp-ana h4,
#docs-ana h4 {
  text-align: center;
  font-weight: bold;
}
#lp-ana .hd-small,
#docs-ana .hd-small {
  font-size: 0.6em;
  display: block;
}
#lp-ana .note,
#docs-ana .note {
  font-size: 0.7em;
}
#lp-ana .span-yellow,
#docs-ana .span-yellow {
  font-size: 0.5em;
  display: inline-block;
  background-color: #fff002;
  color: #073d8e;
  padding: 5px;
}
#lp-ana .line-yellow,
#docs-ana .line-yellow {
  background: linear-gradient(transparent 65%, #fff002 0%);
  padding-bottom: 5px;
  font-weight: bold;
}
#lp-ana ul,
#lp-ana ol,
#lp-ana dl,
#docs-ana ul,
#docs-ana ol,
#docs-ana dl {
  padding-left: 0;
}
#lp-ana .font-2em,
#docs-ana .font-2em {
  font-size: 2em;
}
#lp-ana .font-m,
#docs-ana .font-m {
  font-size: 1.2em;
}
#lp-ana .font-s,
#docs-ana .font-s {
  font-size: 0.7em;
}
#lp-ana .flex,
#docs-ana .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-ana #modal-amc,
#docs-ana #modal-amc {
  display: none;
  background-color: rgba(107, 107, 107, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
#lp-ana #modal-amc .flex,
#docs-ana #modal-amc .flex {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#lp-ana #modal-amc #modal-wrap,
#docs-ana #modal-amc #modal-wrap {
  background-color: #ffffff;
  border-radius: 15px;
  width: 80%;
  padding: 40px 20px;
  text-align: center;
  font-weight: bold;
}
#lp-ana #modal-amc #modal-wrap h1,
#docs-ana #modal-amc #modal-wrap h1 {
  color: #31a7ea;
  font-size: 2em;
}
#lp-ana #modal-amc #modal-wrap h1 span,
#docs-ana #modal-amc #modal-wrap h1 span {
  color: #19318f;
}
#lp-ana #modal-amc #modal-wrap .btn-m,
#docs-ana #modal-amc #modal-wrap .btn-m {
  background-color: #31a7ea;
  color: #ffffff;
  border-radius: 5px;
}
#lp-ana header,
#docs-ana header {
  padding: 15px 0;
  background-color: transparent;
  position: absolute;
  top: 0;
  z-index: 999;
}
#lp-ana header #change-logo,
#docs-ana header #change-logo {
  width: 250px;
  min-width: 120px;
  width: 23%;
  margin: 0;
}
#lp-ana header .container,
#docs-ana header .container {
  position: relative;
}
#lp-ana header #ana-logo,
#docs-ana header #ana-logo {
  position: absolute;
  right: 0;
  top: 15px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%);
  max-width: 250px;
  min-width: 120px;
  width: 23%;
  text-align: right;
}
#lp-ana header #ana-logo img,
#docs-ana header #ana-logo img {
  width: 80%;
}
#lp-ana #mv,
#docs-ana #mv {
  background: url(/img/ana/mv.jpg) center top no-repeat;
  background-size: cover;
  padding-bottom: 80px;
}
#lp-ana #mv .container,
#docs-ana #mv .container {
  position: relative;
  overflow: visible;
}
#lp-ana #mv #mv-text,
#docs-ana #mv #mv-text {
  width: 55%;
  color: #ffffff;
  padding: 180px 0 50px;
}
#lp-ana #mv #mv-text h1,
#docs-ana #mv #mv-text h1 {
  font-size: 3em;
  letter-spacing: 1.2;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}
#lp-ana #mv #mv-text h1 .sp-br,
#docs-ana #mv #mv-text h1 .sp-br {
  display: none;
}
#lp-ana #mv #mv-text p,
#docs-ana #mv #mv-text p {
  max-width: 33em;
  font-weight: bold;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
#lp-ana #mv #mv-mile,
#docs-ana #mv #mv-mile {
  position: relative;
  display: block;
  transform: rotate(-2deg);
}
#lp-ana #mv #mv-mile img,
#docs-ana #mv #mv-mile img {
  width: 72%;
}
#lp-ana #mv #mv-mile .pc-img,
#docs-ana #mv #mv-mile .pc-img {
  display: block;
}
#lp-ana #mv #mv-mile .sp-img,
#docs-ana #mv #mv-mile .sp-img {
  display: none;
}
#lp-ana #mv .mv-mile-bk,
#docs-ana #mv .mv-mile-bk {
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 80%;
  top: 10%;
  left: 0;
}
#lp-ana #mv #pc-change,
#docs-ana #mv #pc-change {
  position: absolute;
  max-width: 240px;
  width: 22%;
  top: 220px;
  right: 20px;
  z-index: 999;
}
#lp-ana #mv #pc-change .point1,
#docs-ana #mv #pc-change .point1 {
  position: absolute;
  width: 58%;
  top: -33%;
  left: -30%;
}
#lp-ana #mv #pc-change .point2,
#docs-ana #mv #pc-change .point2 {
  position: absolute;
  width: 63%;
  top: -5%;
  left: -65%;
}
#lp-ana #sp-change,
#docs-ana #sp-change {
  display: none;
}
#lp-ana #amc-lead,
#docs-ana #amc-lead {
  font-size: 1.5em;
  font-weight: bold;
}
#lp-ana #amc-lead .font-m,
#docs-ana #amc-lead .font-m {
  font-size: 1.3em;
}
#lp-ana #amc-lead .line-yellow,
#docs-ana #amc-lead .line-yellow {
  font-size: 2.3em;
}
#lp-ana #amc #change-flow .flex,
#docs-ana #amc #change-flow .flex {
  align-items: center;
}
#lp-ana #amc #change-flow .flow-wrap,
#docs-ana #amc #change-flow .flow-wrap {
  background-color: #ffffff;
  border: 2px solid #073d8e;
  border-radius: 20px;
  width: 36%;
  padding: 20px;
}
#lp-ana #amc #change-flow .flow-wrap img,
#docs-ana #amc #change-flow .flow-wrap img {
  max-width: 160px;
  width: 80%;
}
#lp-ana #amc #change-flow .flow-arrow,
#docs-ana #amc #change-flow .flow-arrow {
  line-height: 1;
  width: 25%;
}
#lp-ana #amc #change-flow .flow-arrow .line-yellow,
#docs-ana #amc #change-flow .flow-arrow .line-yellow {
  display: inline-block;
}
#lp-ana #amc #change-flow .flow-arrow .line-yellow .realyield-text,
#docs-ana #amc #change-flow .flow-arrow .line-yellow .realyield-text {
  position: absolute;
  top: -20px;
  font-size: inherit;
  font-weight: normal;
}
#lp-ana #amc #change-flow .flow-arrow .pc-img,
#docs-ana #amc #change-flow .flow-arrow .pc-img {
  display: block;
  width: 80%;
  max-width: 180px;
  margin: 0 auto;
}
#lp-ana #amc #change-flow .flow-arrow .sp-img,
#docs-ana #amc #change-flow .flow-arrow .sp-img {
  display: none;
  max-width: 40px;
  margin: 10px auto;
}
#lp-ana #amc #change-flow .line-yellow,
#docs-ana #amc #change-flow .line-yellow {
  font-weight: normal;
}
#lp-ana #amc #change-flow .line-yellow span,
#lp-ana #amc #change-flow .line-yellow b,
#docs-ana #amc #change-flow .line-yellow span,
#docs-ana #amc #change-flow .line-yellow b {
  font-size: 2em;
  font-weight: bold;
}
#lp-ana .add-mile .line-yellow,
#docs-ana .add-mile .line-yellow {
  font-size: 1.5em;
}
#lp-ana .add-mile .font-l,
#docs-ana .add-mile .font-l {
  font-size: 3.3em;
}
#lp-ana .add-mile .font-m,
#docs-ana .add-mile .font-m {
  font-size: 2.2em;
}
#lp-ana .add-mile .add,
#docs-ana .add-mile .add {
  color: #073d8e;
  font-weight: bold;
}
#lp-ana .add-mile .add p:after,
#docs-ana .add-mile .add p:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 120px 0 120px;
  border-color: #073d8e transparent transparent transparent;
  margin: 0 auto;
}
#lp-ana .add-mile h2 br,
#docs-ana .add-mile h2 br {
  display: none;
}
#lp-ana .add-mile .wrap800,
#docs-ana .add-mile .wrap800 {
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
}
#lp-ana .add-mile .wrap800 .flex,
#docs-ana .add-mile .wrap800 .flex {
  align-items: center;
}
#lp-ana .add-mile .mile-wrap,
#docs-ana .add-mile .mile-wrap {
  width: 200px;
  height: 200px;
  background-color: #073d8e;
  color: #ffffff;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  line-height: 1;
}
#lp-ana .add-mile .mile-wrap p,
#docs-ana .add-mile .mile-wrap p {
  width: 100%;
  font-weight: bold;
  margin: 0;
}
#lp-ana .add-mile .mile-wrap .wh,
#docs-ana .add-mile .mile-wrap .wh {
  background-color: #ffffff;
  color: #073d8e;
  border-radius: 15px;
  padding: 5px 0;
  width: 7em;
  margin-bottom: 10px;
}
#lp-ana .add-mile .mile-wrap .position-r,
#docs-ana .add-mile .mile-wrap .position-r {
  position: relative;
}
#lp-ana .add-mile .mile-wrap .position-r .font-ss,
#docs-ana .add-mile .mile-wrap .position-r .font-ss {
  font-size: 0.7em;
  position: absolute;
  right: 10px;
}
#lp-ana .add-mile .mile-arrow,
#docs-ana .add-mile .mile-arrow {
  width: 25%;
}
#lp-ana .add-mile .mile-arrow .pc-img,
#docs-ana .add-mile .mile-arrow .pc-img {
  display: block;
  max-width: 180px;
  width: 80%;
  margin: 0 auto;
}
#lp-ana .add-mile .mile-arrow .sp-img,
#docs-ana .add-mile .mile-arrow .sp-img {
  display: none;
  max-width: 40px;
  margin: 10px auto;
}
#lp-ana .add-mile .mile-detail,
#docs-ana .add-mile .mile-detail {
  background-color: #e8e8e8;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  padding: 1em 1em 1em 2em;
}
#lp-ana .add-mile .mile-detail ul,
#docs-ana .add-mile .mile-detail ul {
  list-style: disc;
  margin: 0;
}
#lp-ana .add-mile .mile-detail ul li,
#docs-ana .add-mile .mile-detail ul li {
  margin: 1em 0;
}
#lp-ana #merit,
#docs-ana #merit {
  background: linear-gradient(to right, #3378bd 0%, #5895d4 60%, #b9dbfd 100%);
}
#lp-ana #merit h2,
#docs-ana #merit h2 {
  color: #ffffff;
}
#lp-ana #merit li,
#docs-ana #merit li {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 30px;
  align-items: center;
  margin-bottom: 30px;
}
#lp-ana #merit .merit-img,
#docs-ana #merit .merit-img {
  width: 30%;
  text-align: center;
}
#lp-ana #merit .merit-text,
#docs-ana #merit .merit-text {
  width: 65%;
}
#lp-ana #merit li.merit-easy,
#docs-ana #merit li.merit-easy {
  padding: 0 15px;
}
#lp-ana #merit li.merit-easy .merit-img,
#docs-ana #merit li.merit-easy .merit-img {
  align-self: flex-end;
}
#lp-ana #merit li.merit-easy .merit-img img,
#docs-ana #merit li.merit-easy .merit-img img {
  max-width: 250px;
  width: 100%;
}
#lp-ana #merit li.merit-fit,
#lp-ana #merit li.merit-cost,
#docs-ana #merit li.merit-fit,
#docs-ana #merit li.merit-cost {
  flex-direction: row-reverse;
}
#lp-ana #merit h3,
#docs-ana #merit h3 {
  position: relative;
  padding-left: 2.2em;
}
#lp-ana #merit h3 span.hd-merit,
#docs-ana #merit h3 span.hd-merit {
  position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 0.5em;
}
#lp-ana #merit h3 span.merit-num,
#docs-ana #merit h3 span.merit-num {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.5em;
}
#lp-ana #movie .movie-img,
#docs-ana #movie .movie-img {
  border: 1px solid #dddddd;
  max-width: 400px;
  margin: 0 auto;
}
#lp-ana .movie-wrap,
#docs-ana .movie-wrap {
  position: relative;
  padding-bottom: 56%;
  width: 100%;
  height: 0;
  border: 1px solid #dddddd;
}
#lp-ana .movie-wrap .uk-close,
#docs-ana .movie-wrap .uk-close {
  color: #ffffff;
  background-color: #000;
  border-radius: 50%;
  border: 1px solid #ffffff;
  top: -30px;
  right: -15px;
}
#lp-ana .movie-wrap iframe,
#docs-ana .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp-ana #compare table,
#docs-ana #compare table {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
#lp-ana #compare table tbody,
#docs-ana #compare table tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-ana #compare table tr,
#docs-ana #compare table tr {
  width: 14.2%;
  border-left: 1px solid #999999;
}
#lp-ana #compare table th,
#lp-ana #compare table td,
#docs-ana #compare table th,
#docs-ana #compare table td {
  display: block;
  padding: 10px 5px;
  border-bottom: 1px solid #999999;
  height: 50px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lp-ana #compare table th,
#docs-ana #compare table th {
  font-size: 0.9em;
  background-color: #f7f8fa;
}
#lp-ana #compare table .th-top,
#docs-ana #compare table .th-top {
  border-top: 1px solid #999999;
}
#lp-ana #compare table .row td .sp-hd,
#docs-ana #compare table .row td .sp-hd {
  display: none;
}
#lp-ana #compare table .row td .line-red,
#docs-ana #compare table .row td .line-red {
  display: inline;
  background: linear-gradient(transparent 80%, #f33c3d 0%);
}
#lp-ana #compare table .change-data th,
#docs-ana #compare table .change-data th {
  border-right: 1px solid #999999;
}
#lp-ana #compare table .change-data th img,
#docs-ana #compare table .change-data th img {
  max-width: 100px;
  width: 100%;
}
#lp-ana #compare table .change-data td,
#docs-ana #compare table .change-data td {
  border-right: 1px solid #999999;
}
#lp-ana #compare table .change-data td .line-orange,
#docs-ana #compare table .change-data td .line-orange {
  display: inline;
  background: linear-gradient(transparent 70%, #fcaf3c 0%);
}
#lp-ana #compare #summary,
#docs-ana #compare #summary {
  background: linear-gradient(to bottom, #3378bd 0%, #5895d4 60%, #b9dbfd 100%);
  padding: 15px;
  border-radius: 15px;
}
#lp-ana #compare #summary p,
#docs-ana #compare #summary p {
  background-color: #ffffff;
  padding: 20px;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  color: #073d8e;
}
#lp-ana #compare #summary p .font-s,
#docs-ana #compare #summary p .font-s {
  color: #333333;
}
#lp-ana #structure .flex,
#docs-ana #structure .flex {
  align-items: center;
  flex-direction: row-reverse;
}
#lp-ana #structure .txt,
#docs-ana #structure .txt {
  width: 60%;
}
#lp-ana #structure .img,
#docs-ana #structure .img {
  width: 38%;
}
#lp-ana #sell-wat #sell-wrap,
#docs-ana #sell-wat #sell-wrap {
  border: 2px solid #073d8e;
  padding: 15px 15px 0;
  max-width: 900px;
  margin: 0 auto;
  font-weight: bold;
}
#lp-ana #sell-wat h2,
#docs-ana #sell-wat h2 {
  color: #073d8e;
  text-align: center;
  margin: 0 auto 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #073d8e;
}
#lp-ana #sell-wat h2 span,
#docs-ana #sell-wat h2 span {
  display: inline-block;
  transform: rotate(-10deg);
  font-size: 0.6em;
  vertical-align: top;
}
#lp-ana #sell-wat #wat-main,
#docs-ana #sell-wat #wat-main {
  align-items: flex-start;
}
#lp-ana #sell-wat #wat-img,
#docs-ana #sell-wat #wat-img {
  width: 100%;
  max-width: 160px;
}
#lp-ana #sell-wat #wat-catch,
#docs-ana #sell-wat #wat-catch {
  width: 27%;
  margin: 0 2%;
  color: #073d8e;
  text-align: center;
  font-size: 1.2em;
}
#lp-ana #sell-wat #wat-catch span,
#docs-ana #sell-wat #wat-catch span {
  display: block;
}
#lp-ana #sell-wat #wat-catch .catch-m strong,
#docs-ana #sell-wat #wat-catch .catch-m strong {
  font-size: 1.3em;
}
#lp-ana #sell-wat #wat-catch .catch-l,
#docs-ana #sell-wat #wat-catch .catch-l {
  line-height: 1;
  font-size: 2.5em;
}
#lp-ana #sell-wat #wat-text,
#docs-ana #sell-wat #wat-text {
  width: 50%;
  font-size: 1.2em;
}
#lp-ana #guarantee li,
#docs-ana #guarantee li {
  width: 31%;
  border: 2px solid #073d8e;
  padding: 15px;
  border-radius: 15px;
  background-color: #ffffff;
  text-align: center;
  position: relative;
}
#lp-ana #guarantee li span,
#docs-ana #guarantee li span {
  color: #073d8e;
  font-weight: bold;
  font-size: 2.3em;
  position: absolute;
  top: 15px;
  left: 15px;
}
#lp-ana #guarantee li h3,
#docs-ana #guarantee li h3 {
  margin: 0;
}
#lp-ana #guarantee li img,
#docs-ana #guarantee li img {
  max-width: 100px;
  padding: 20px 0;
}
#lp-ana #guarantee li p,
#docs-ana #guarantee li p {
  text-align: left;
  font-size: 0.9em;
  margin-bottom: 0;
}
#lp-ana #step ol,
#docs-ana #step ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  margin: 0 auto 50px;
}
#lp-ana #step ol li,
#docs-ana #step ol li {
  width: 31%;
  text-align: center;
  background-color: #ffffff;
  border: 2px solid #333333;
  border-radius: 10px;
  padding: 10px;
}
#lp-ana #step ol li h3,
#docs-ana #step ol li h3 {
  font-size: 1em;
  color: #333333;
}
#lp-ana #step ol li h3 .step,
#docs-ana #step ol li h3 .step {
  color: #333333;
  font-size: 1.2em;
  margin-top: 1em;
}
#lp-ana #step ol li .step-img,
#docs-ana #step ol li .step-img {
  max-width: 200px;
  margin: 0 auto;
}
#lp-ana #step ol li .sup,
#docs-ana #step ol li .sup {
  margin: 1em 0 0;
  font-size: 0.6em;
}
#lp-ana #step ol li:nth-child(2),
#docs-ana #step ol li:nth-child(2) {
  margin: 0 3.5%;
}
#lp-ana #sale h3,
#docs-ana #sale h3 {
  font-size: 1.2em;
  color: #333333;
}
#lp-ana #model #simulation,
#docs-ana #model #simulation {
  text-align: center;
}
#lp-ana #model #simulation .simu-hd,
#docs-ana #model #simulation .simu-hd {
  display: inline-block;
  background-color: #063d8e;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 50px;
}
#lp-ana #model #simulation .simu-hd .sp-br,
#docs-ana #model #simulation .simu-hd .sp-br {
  display: none;
}
#lp-ana #model #simulation .img-wrap,
#docs-ana #model #simulation .img-wrap {
  padding: 30px;
  border: 1px solid #999999;
  background-color: #ffffff;
}
#lp-ana #model #simulation .img-wrap img,
#docs-ana #model #simulation .img-wrap img {
  padding: 30px 20px 0;
}
#lp-ana #return-ex h3,
#docs-ana #return-ex h3 {
  text-align: center;
}
#lp-ana #return-ex h3 span,
#docs-ana #return-ex h3 span {
  border-bottom: 4px solid #3a71b2;
}
#lp-ana #return-ex h3 br,
#docs-ana #return-ex h3 br {
  display: none;
}
#lp-ana #return-ex ul,
#docs-ana #return-ex ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
#lp-ana #return-ex ul li,
#docs-ana #return-ex ul li {
  width: 31%;
  text-align: center;
  position: relative;
  padding-bottom: 6%;
}
#lp-ana #return-ex ul li .ex-man,
#docs-ana #return-ex ul li .ex-man {
  max-width: 150px;
  width: 40%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}
#lp-ana #return-ex ul li .ex,
#docs-ana #return-ex ul li .ex {
  position: relative;
  z-index: 99;
  width: 290px;
  height: 290px;
  padding: 40px 30px 0;
  background-color: #f7f8fa;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1em;
}
#lp-ana #return-ex ul li .ex .ex-name,
#docs-ana #return-ex ul li .ex .ex-name {
  line-height: 1.2;
}
#lp-ana #return-ex ul li .ex dl,
#docs-ana #return-ex ul li .ex dl {
  line-height: 1.4;
}
#lp-ana #return-ex ul li .ex dt,
#docs-ana #return-ex ul li .ex dt {
  text-align: left;
}
#lp-ana #return-ex ul li .ex dd,
#docs-ana #return-ex ul li .ex dd {
  text-align: right;
  font-size: 1.7em;
  margin-bottom: 0.3em;
}
#lp-ana #return-ex #wat-sell,
#docs-ana #return-ex #wat-sell {
  text-align: center;
}
#lp-ana #return-ex #wat-sell #formula,
#docs-ana #return-ex #wat-sell #formula {
  background-color: #063d8e;
  font-weight: bold;
  color: #ffffff;
  font-size: 1.2em;
}
#lp-ana #return-ex #wat-sell #formula br,
#docs-ana #return-ex #wat-sell #formula br {
  display: none;
}
#lp-ana #qa dl,
#docs-ana #qa dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-ana #qa .qa-wrap,
#docs-ana #qa .qa-wrap {
  width: 32%;
  border: 3px solid #3a71b2;
  margin-bottom: 2%;
  background-color: #ffffff;
}
#lp-ana #qa .qa-wrap dt,
#docs-ana #qa .qa-wrap dt {
  background-color: #3a71b2;
  padding: 5px 5px 5px 1.8em;
  color: #ffffff;
  position: relative;
}
#lp-ana #qa .qa-wrap dt:before,
#docs-ana #qa .qa-wrap dt:before {
  content: "Q.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
}
#lp-ana #qa .qa-wrap dd,
#docs-ana #qa .qa-wrap dd {
  padding: 5px 5px 5px 1.8em;
  text-align: left;
  position: relative;
  font-size: 0.9em;
}
#lp-ana #qa .qa-wrap dd:before,
#docs-ana #qa .qa-wrap dd:before {
  content: "A.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 1.1em;
}
#lp-ana #ps,
#docs-ana #ps {
  background: url(/img/hd/hd_green.jpg) center top no-repeat;
  background-size: cover;
  color: #ffffff;
}
#lp-ana #ps #ps-bk,
#docs-ana #ps #ps-bk {
  background-color: rgba(0, 0, 0, 0.5);
}
#lp-ana #ps h2,
#docs-ana #ps h2 {
  color: #ffffff;
}
#lp-ana #ps h2 img,
#docs-ana #ps h2 img {
  width: 100px;
  margin: 0 auto 4px;
}
#lp-ana .regist,
#docs-ana .regist {
  text-align: center;
}
#lp-ana .regist p,
#docs-ana .regist p {
  font-size: 1.5em;
  font-weight: bold;
}
#lp-ana .regist-bk,
#docs-ana .regist-bk {
  background: url(/img/common/bg_ft.jpg) center top no-repeat;
  background-size: cover;
  color: #ffffff;
}
#lp-ana .regist-bk h2,
#docs-ana .regist-bk h2 {
  color: #ffffff;
  margin-bottom: 10px;
}
#lp-ana .regist-bk form h2,
#docs-ana .regist-bk form h2 {
  display: none;
}
#lp-ana .regist-bk .regist-note,
#docs-ana .regist-bk .regist-note {
  max-width: 800px;
  margin: 0 auto 1em;
}
#lp-ana .regist-bk .regist-wrap,
#docs-ana .regist-bk .regist-wrap {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1em;
  color: #333333;
  border-radius: 15px;
  position: relative;
}
#lp-ana .regist-bk .regist-wrap .regist-amc,
#docs-ana .regist-bk .regist-wrap .regist-amc {
  padding-top: 1em;
  border-top: 1px solid #999999;
}
#lp-ana .regist-bk .regist-wrap .regist-amc dt,
#docs-ana .regist-bk .regist-wrap .regist-amc dt {
  color: #073d8e;
  text-align: center;
}
#lp-ana .regist-bk .regist-wrap .regist-amc dd,
#docs-ana .regist-bk .regist-wrap .regist-amc dd {
  padding: 15px 10px;
}
#lp-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc,
#docs-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc {
  padding: 12px;
  display: block;
  text-align: center;
  width: 100%;
  max-width: 520px;
  font-weight: bold;
  font-size: 1.2em;
  cursor: pointer;
  background-color: #073d8e;
  color: #ffffff;
  border: 1px solid #073d8e;
  border-radius: 30px;
  margin: 0 auto;
  box-shadow: 1px 1px 4px #999999;
}
#lp-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc:hover,
#docs-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc:hover {
  opacity: 1;
  color: #073d8e;
  background-color: #ffffff;
}
#lp-ana footer,
#docs-ana footer {
  color: #333333;
}
@media screen and (max-width: 1028px) {
  #lp-ana #mv #mv-text h1,
#docs-ana #mv #mv-text h1 {
    font-size: 2em;
  }
}
@media screen and (max-width: 959px) {
  #lp-ana h2,
#docs-ana h2 {
    font-size: 1.5em;
  }
  #lp-ana h3,
#docs-ana h3 {
    font-size: 1.2em;
  }
  #lp-ana #sell-wat .flex,
#docs-ana #sell-wat .flex {
    justify-content: center;
  }
  #lp-ana #sell-wat #wat-main,
#docs-ana #sell-wat #wat-main {
    max-width: 600px;
    margin: 0 auto;
  }
  #lp-ana #sell-wat #wat-catch,
#docs-ana #sell-wat #wat-catch {
    width: 31%;
    font-size: 1em;
  }
  #lp-ana #sell-wat p,
#docs-ana #sell-wat p {
    font-size: 0.9em;
    font-weight: normal;
  }
  #lp-ana #sell-wat #wat-text,
#docs-ana #sell-wat #wat-text {
    width: 100%;
  }
  #lp-ana #guarantee li h3,
#docs-ana #guarantee li h3 {
    font-size: 1em;
  }
  #lp-ana #return-ex ul li,
#docs-ana #return-ex ul li {
    padding-bottom: 5%;
  }
  #lp-ana #return-ex ul li .ex,
#docs-ana #return-ex ul li .ex {
    width: 230px;
    height: 230px;
    padding: 35px 15px 0;
    font-size: 0.8em;
  }
  #lp-ana #qa .qa-wrap,
#docs-ana #qa .qa-wrap {
    width: 49%;
  }
}
@media screen and (max-width: 720px) {
  #lp-ana #mv #mv-text h1,
#docs-ana #mv #mv-text h1 {
    font-size: 1.8em;
  }
  #lp-ana #compare table,
#docs-ana #compare table {
    max-width: 500px;
    margin: 0 auto 50px;
  }
  #lp-ana #compare table tbody,
#docs-ana #compare table tbody {
    display: block;
  }
  #lp-ana #compare table #thead,
#docs-ana #compare table #thead {
    display: none;
  }
  #lp-ana #compare table tr,
#docs-ana #compare table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #999999;
  }
  #lp-ana #compare table th,
#docs-ana #compare table th {
    width: 100%;
  }
  #lp-ana #compare table th br,
#docs-ana #compare table th br {
    display: none;
  }
  #lp-ana #compare table .row td,
#docs-ana #compare table .row td {
    display: inline-block;
    width: 25%;
    font-size: 1em;
    height: 60px;
    border-bottom: none;
  }
  #lp-ana #compare table .row td .sp-hd,
#docs-ana #compare table .row td .sp-hd {
    display: block;
    color: #999999;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #lp-ana #compare table .change-data,
#docs-ana #compare table .change-data {
    border-bottom: 1px solid #999999;
  }
  #lp-ana #compare table .change-data th,
#lp-ana #compare table .change-data td,
#docs-ana #compare table .change-data th,
#docs-ana #compare table .change-data td {
    border-right: none;
  }
  #lp-ana #step ol,
#docs-ana #step ol {
    max-width: 500px;
    margin: 0 auto;
  }
  #lp-ana #step ol li,
#docs-ana #step ol li {
    width: 100%;
    margin: 0 auto 3% !important;
  }
  #lp-ana #model #simulation .img-wrap,
#docs-ana #model #simulation .img-wrap {
    padding: 10px;
  }
  #lp-ana #model #simulation .img-wrap img,
#docs-ana #model #simulation .img-wrap img {
    padding: 0;
  }
  #lp-ana #model #simulation .simu-hd,
#docs-ana #model #simulation .simu-hd {
    font-size: 1em;
    padding: 8px 12px;
  }
  #lp-ana #return-ex ul li .ex,
#docs-ana #return-ex ul li .ex {
    width: 200px;
    height: 200px;
    font-size: 0.65em;
  }
  #lp-ana #return-ex #wat-sell,
#docs-ana #return-ex #wat-sell {
    text-align: left;
  }
  #lp-ana #return-ex #wat-sell #formula,
#docs-ana #return-ex #wat-sell #formula {
    font-size: 1em;
  }
  #lp-ana #return-ex #wat-sell #formula br,
#docs-ana #return-ex #wat-sell #formula br {
    display: block;
  }
}
@media screen and (max-width: 680px) {
  #lp-ana #modal-amc #modal-wrap h1,
#docs-ana #modal-amc #modal-wrap h1 {
    font-size: 1.5em;
  }
  #lp-ana #modal-amc #modal-wrap h1 span,
#docs-ana #modal-amc #modal-wrap h1 span {
    display: block;
  }
  #lp-ana #modal-amc #modal-wrap p,
#docs-ana #modal-amc #modal-wrap p {
    text-align: left;
  }
  #lp-ana #mv,
#docs-ana #mv {
    padding-bottom: 40px;
  }
  #lp-ana #mv #mv-text,
#docs-ana #mv #mv-text {
    width: 100%;
    padding: 100px 0 0;
  }
  #lp-ana #mv #mv-text h1,
#docs-ana #mv #mv-text h1 {
    font-size: 2.5em;
  }
  #lp-ana #mv #mv-mile .pc-img,
#docs-ana #mv #mv-mile .pc-img {
    display: none;
  }
  #lp-ana #mv #mv-mile .sp-img,
#docs-ana #mv #mv-mile .sp-img {
    display: block;
    max-width: 380px;
    margin: 0 auto;
  }
  #lp-ana #mv #pc-change,
#docs-ana #mv #pc-change {
    display: none;
  }
  #lp-ana #sp-change,
#docs-ana #sp-change {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  #lp-ana #sp-change #sp-point,
#docs-ana #sp-change #sp-point {
    width: 48%;
    display: block;
  }
  #lp-ana #sp-change #sp-point img,
#docs-ana #sp-change #sp-point img {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
  #lp-ana #sp-change #sp-phone,
#docs-ana #sp-change #sp-phone {
    width: 48%;
  }
  #lp-ana #amc-lead,
#docs-ana #amc-lead {
    font-size: 1em;
  }
  #lp-ana #amc-lead .line-yellow,
#docs-ana #amc-lead .line-yellow {
    font-size: 1.5em;
  }
  #lp-ana #amc .main-text,
#docs-ana #amc .main-text {
    text-align: left;
  }
  #lp-ana #amc .main-text br,
#docs-ana #amc .main-text br {
    display: none;
  }
  #lp-ana #amc #change-flow .flex,
#docs-ana #amc #change-flow .flex {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    justify-content: center;
  }
  #lp-ana #amc #change-flow .flow-wrap,
#docs-ana #amc #change-flow .flow-wrap {
    width: 100%;
  }
  #lp-ana #amc #change-flow .flow-wrap img,
#docs-ana #amc #change-flow .flow-wrap img {
    max-width: 80px;
  }
  #lp-ana #amc #change-flow .flow-wrap h3,
#docs-ana #amc #change-flow .flow-wrap h3 {
    margin: 20px 0;
  }
  #lp-ana #amc #change-flow .flow-arrow,
#docs-ana #amc #change-flow .flow-arrow {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    width: 100%;
  }
  #lp-ana #amc #change-flow .flow-arrow .pc-img,
#docs-ana #amc #change-flow .flow-arrow .pc-img {
    display: none;
  }
  #lp-ana #amc #change-flow .flow-arrow .sp-img,
#docs-ana #amc #change-flow .flow-arrow .sp-img {
    display: block;
  }
  #lp-ana #amc #change-flow .flow-arrow .line-yellow,
#docs-ana #amc #change-flow .flow-arrow .line-yellow {
    text-align: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 20px;
  }
  #lp-ana #amc #change-flow .flow-arrow .line-yellow .realyield-text,
#docs-ana #amc #change-flow .flow-arrow .line-yellow .realyield-text {
    position: relative;
    top: 0;
  }
  #lp-ana .add-mile .main-text,
#docs-ana .add-mile .main-text {
    text-align: left;
  }
  #lp-ana .add-mile .main-text br,
#docs-ana .add-mile .main-text br {
    display: none;
  }
  #lp-ana .add-mile .font-l,
#docs-ana .add-mile .font-l {
    font-size: 2.5em;
  }
  #lp-ana .add-mile .font-m,
#docs-ana .add-mile .font-m {
    font-size: 1.7em;
  }
  #lp-ana .add-mile .add p:after,
#docs-ana .add-mile .add p:after {
    border-width: 30px 90px 0 90px;
  }
  #lp-ana .add-mile .wrap800 .mile-wrap,
#docs-ana .add-mile .wrap800 .mile-wrap {
    width: 150px;
    height: 150px;
    font-size: 0.8em;
  }
  #lp-ana .add-mile .wrap800 .mile-wrap .position-r .font-ss,
#docs-ana .add-mile .wrap800 .mile-wrap .position-r .font-ss {
    top: -5px;
    right: 15px;
  }
  #lp-ana #merit li,
#docs-ana #merit li {
    display: block;
    padding: 15px;
    position: relative;
  }
  #lp-ana #merit li h3,
#docs-ana #merit li h3 {
    text-align: center;
    position: static;
    padding-left: 0;
  }
  #lp-ana #merit li h3 span.hd-merit,
#docs-ana #merit li h3 span.hd-merit {
    top: 15px;
    left: 15px;
  }
  #lp-ana #merit li h3 span.merit-num,
#docs-ana #merit li h3 span.merit-num {
    bottom: auto;
    top: 25px;
    left: 15px;
  }
  #lp-ana #merit .merit-img,
#docs-ana #merit .merit-img {
    width: 100%;
    max-width: 240px;
    margin: 3em auto 1em;
  }
  #lp-ana #merit .merit-text,
#docs-ana #merit .merit-text {
    width: 100%;
  }
  #lp-ana #merit li.merit-easy,
#docs-ana #merit li.merit-easy {
    padding: 15px;
  }
  #lp-ana #merit li.merit-easy .merit-img,
#docs-ana #merit li.merit-easy .merit-img {
    margin: 0 auto 1em;
  }
  #lp-ana #structure .flex,
#docs-ana #structure .flex {
    display: block;
  }
  #lp-ana #structure .img,
#docs-ana #structure .img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1em;
  }
  #lp-ana #structure .txt,
#docs-ana #structure .txt {
    width: 100%;
  }
  #lp-ana #sell-wat #wat-main #wat-catch,
#docs-ana #sell-wat #wat-main #wat-catch {
    width: 35%;
  }
  #lp-ana #guarantee li,
#docs-ana #guarantee li {
    width: 100%;
    margin: 0 auto 3%;
  }
  #lp-ana #model #simulation .simu-hd,
#docs-ana #model #simulation .simu-hd {
    font-size: 0.8em;
  }
  #lp-ana #return-ex ul,
#docs-ana #return-ex ul {
    max-width: 400px;
  }
  #lp-ana #return-ex ul li,
#docs-ana #return-ex ul li {
    width: 100%;
    padding-bottom: 45px;
  }
  #lp-ana #return-ex ul li .ex,
#docs-ana #return-ex ul li .ex {
    width: 280px;
    height: 280px;
    font-size: 1em;
    margin: 0 auto;
    padding: 35px 15px 0;
  }
}
@media screen and (max-width: 640px) {
  #lp-ana #sell-wat #wat-main #wat-catch,
#docs-ana #sell-wat #wat-main #wat-catch {
    width: 45%;
  }
  #lp-ana #ps h2 img,
#docs-ana #ps h2 img {
    width: 80px;
  }
}
@media screen and (max-width: 480px) {
  #lp-ana header .logo,
#docs-ana header .logo {
    width: 120px;
  }
  #lp-ana #mv #mv-text h1 .sp-br,
#docs-ana #mv #mv-text h1 .sp-br {
    display: block;
  }
  #lp-ana #amc-lead,
#docs-ana #amc-lead {
    font-size: 0.9em;
  }
  #lp-ana .add-mile .line-yellow,
#docs-ana .add-mile .line-yellow {
    font-size: 1em;
  }
  #lp-ana .add-mile h2 br,
#docs-ana .add-mile h2 br {
    display: block;
  }
  #lp-ana .add-mile .wrap800 .mile-wrap,
#docs-ana .add-mile .wrap800 .mile-wrap {
    max-width: 150px;
    margin: 0 auto;
  }
  #lp-ana .add-mile .wrap800 .mile-arrow,
#docs-ana .add-mile .wrap800 .mile-arrow {
    width: 100%;
  }
  #lp-ana .add-mile .wrap800 .mile-arrow .pc-img,
#docs-ana .add-mile .wrap800 .mile-arrow .pc-img {
    display: none;
  }
  #lp-ana .add-mile .wrap800 .mile-arrow .sp-img,
#docs-ana .add-mile .wrap800 .mile-arrow .sp-img {
    display: block;
  }
  #lp-ana #compare table .row td,
#docs-ana #compare table .row td {
    width: 50%;
  }
  #lp-ana #qa .qa-wrap,
#docs-ana #qa .qa-wrap {
    width: 100%;
  }
  #lp-ana #sell-wat #wat-main #wat-catch,
#docs-ana #sell-wat #wat-main #wat-catch {
    width: 100%;
  }
  #lp-ana #step h2,
#docs-ana #step h2 {
    font-size: 1em;
  }
  #lp-ana .regist-bk .regist-wrap,
#docs-ana .regist-bk .regist-wrap {
    width: 96%;
    padding: 10px;
  }
  #lp-ana .regist-bk .regist-wrap .regist-amc dt,
#docs-ana .regist-bk .regist-wrap .regist-amc dt {
    font-size: 0.8em;
  }
  #lp-ana .regist-bk .regist-wrap .regist-amc dt br,
#docs-ana .regist-bk .regist-wrap .regist-amc dt br {
    display: none;
  }
  #lp-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc,
#docs-ana .regist-bk .regist-wrap .regist-amc dd .btn-amc {
    font-size: 1em;
  }
  #lp-ana .regist-bk p.regist-txt,
#docs-ana .regist-bk p.regist-txt {
    font-size: 0.85em;
  }
}
@media screen and (max-width: 419px) {
  #lp-ana #compare #summary p,
#docs-ana #compare #summary p {
    font-size: 1.2em;
    padding: 20px 10px;
  }
  #lp-ana #compare #summary p .font-s,
#docs-ana #compare #summary p .font-s {
    display: block;
  }
  #lp-ana #model #simulation .simu-hd,
#docs-ana #model #simulation .simu-hd {
    width: 100%;
  }
  #lp-ana #model #simulation .simu-hd .sp-br,
#docs-ana #model #simulation .simu-hd .sp-br {
    display: block;
  }
}

#lp-ana #lp-data #data {
  background-color: #f7f8fa;
  padding-top: 40px;
  padding-bottom: 40px;
}
#lp-ana #cam-cmn {
  background-color: #fff1e0;
}
#lp-ana #cam-cmn h2 {
  color: #6a3906;
}
#lp-ana #sell-wat #wat-img {
  max-width: 160px;
  width: 100%;
}
#lp-ana .cam-lp {
  background-color: #e1f1ff;
}
@media screen and (max-width: 1080px) {
  #lp-ana #mile h1 {
    font-size: 2.5em;
  }
}

/********** サイト内コンテンツ用 **********/
#docs-ana .sp {
  display: none;
}
#docs-ana header {
  padding: 0;
  background-color: #0095ff;
  position: relative;
  top: 0;
  z-index: 1000;
}
#docs-ana #mv {
  background: url(/img/ana/img-sky.jpg) center top no-repeat;
  background-size: cover;
  position: relative;
}
#docs-ana #mv .container #ana-logo {
  max-width: 200px;
  margin-left: 82%;
}
#docs-ana #mv .container #ana-logo img {
  padding-top: 40px;
}
#docs-ana #mv #mv-text {
  width: 45em;
  padding: 100px 0 50px;
}
#docs-ana #mv #mv-text h2 {
  font-size: 2.5em;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-align: left;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
#docs-ana #mv #mv-text .add-mile {
  margin-top: 40px;
}
#docs-ana #mv #mv-text .add-mile .wh {
  text-shadow: none;
  color: #e56100;
  padding: 5px 0 3px;
  margin-bottom: 5px;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap {
  width: 165px;
  height: 165px;
  background-color: #e56100;
  position: relative;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap:first-child {
  margin-right: 50px;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap:first-child::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 17px;
  border-color: transparent transparent transparent #ffffff;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: -2.3em;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap p {
  text-shadow: none;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap .yen {
  position: relative;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap .yen::before {
  content: "(税込)";
  position: absolute;
  font-size: 0.5em;
  top: -1em;
  left: -0.5em;
  white-space: nowrap;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap .font-l {
  font-size: 3em;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap .font-m {
  font-size: 1.5em;
}
#docs-ana #mv #mv-text .add-mile .mile-wrap .font-ss {
  top: 5px;
  right: 4px;
}
#docs-ana #mv #mv-text .flex {
  justify-content: flex-start;
}
#docs-ana #mv #mv-plane {
  position: absolute;
  max-width: 800px;
  bottom: 10px;
  margin-left: 40vw;
}
#docs-ana #cam-cmn .cam-aug {
  margin-bottom: 0;
}
#docs-ana #amc-form {
  text-align: center;
  background-color: #073d8e;
}
#docs-ana #amc-form #amc-bk {
  background: url(/img/campaign/triple/bk_plane.png) right 20px top 20px no-repeat;
  background-size: 120px auto;
  color: #ffffff;
}
#docs-ana #amc-form #amc-bk h2 {
  color: #ffffff;
  margin-bottom: 20px;
}
#docs-ana #amc-form #amc-bk #amc-text {
  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#docs-ana #amc-form .flex {
  justify-content: space-between;
}
#docs-ana #amc-form .amc-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  color: #333333;
  font-weight: bold;
  padding: 20px;
}
#docs-ana #amc-form .amc-wrap p {
  margin-bottom: 10px;
}
#docs-ana #amc-form .amc-wrap.amc-regist {
  width: 58%;
}
#docs-ana #amc-form .amc-wrap.change-regist {
  width: 40%;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}
#docs-ana #amc-form .amc-wrap.change-regist p {
  width: 100%;
}
#docs-ana #amc-form .btn-edit {
  background-color: #0372f7;
}
#docs-ana #amc-form .change-regist .cam-btn {
  background-color: #ea5514;
  max-width: 300px;
}
#docs-ana #amc-form .cam-btn {
  position: relative;
  display: inline-block;
  max-width: 500px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 10px 7px;
  cursor: pointer;
}
#docs-ana footer {
  color: #ffffff;
}
@media screen and (max-width: 1028px) {
  #docs-ana #mv #mv-text {
    padding: 60px 0 50px;
  }
  #docs-ana #mv #mv-text h1 {
    font-size: 3em;
  }
  #docs-ana #mv #mv-text h2 {
    font-size: 2em;
  }
  #docs-ana #mv #mv-plane {
    max-width: 700px;
    margin: 0;
    right: 10px;
  }
}
@media screen and (max-width: 870px) {
  #docs-ana #mv #mv-plane {
    max-width: 550px;
  }
  #docs-ana #amc-form .amc-wrap.change-regist,
#docs-ana #amc-form .amc-wrap.amc-regist {
    width: 100%;
  }
  #docs-ana #amc-form .change-regist .cam-btn {
    max-width: 500px;
  }
  #docs-ana #amc-form .change-regist {
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 720px) {
  #docs-ana #mv .container #ana-logo {
    max-width: 150px;
    margin-left: 75%;
  }
  #docs-ana #mv .container #ana-logo img {
    padding-top: 20px;
  }
  #docs-ana #mv #mv-text {
    padding: 60px 0 0;
  }
  #docs-ana #mv #mv-plane {
    margin-left: 40%;
  }
}
@media screen and (max-width: 680px) {
  #docs-ana .pc {
    display: none;
  }
  #docs-ana .sp {
    display: block;
  }
  #docs-ana #mv {
    padding-bottom: 10px;
  }
  #docs-ana #mv #mv-text {
    width: 100%;
    padding: 40px 0 0;
  }
  #docs-ana #mv #mv-text .flex {
    justify-content: center;
  }
  #docs-ana #mv #mv-text h1 {
    margin: 0;
    font-size: 3.8em;
  }
  #docs-ana #mv #mv-plane {
    max-width: 100%;
    position: initial;
    margin: 0 auto;
  }
  #docs-ana #cam-about {
    margin-top: 30px;
  }
  #docs-ana #cam-about .about-text {
    font-size: 0.85em;
    margin: 0;
  }
  #docs-ana #cam-about .about-text span {
    color: #00a3ff;
  }
  #docs-ana #cam-about .about-text span .font-l {
    font-size: 1.5em;
  }
  #docs-ana #cam-about .add-mile {
    max-width: 320px;
    margin: 0 auto;
    position: relative;
  }
  #docs-ana #cam-about .add-mile::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 14px;
    border-color: transparent transparent transparent #707070;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #docs-ana #cam-about .add-mile .mile-wrap {
    width: 140px;
    height: 140px;
    background-color: #e56100;
    position: relative;
  }
  #docs-ana #cam-about .add-mile .mile-wrap:first-child::after {
    content: "";
    display: none;
  }
  #docs-ana #cam-about .add-mile .mile-wrap .yen {
    position: relative;
  }
  #docs-ana #cam-about .add-mile .mile-wrap .yen::before {
    content: "(税込)";
    position: absolute;
    font-size: 0.5em;
    top: -1em;
    left: -0.5em;
    white-space: nowrap;
  }
  #docs-ana #cam-about .add-mile .wh {
    text-shadow: none;
    color: #e56100;
    padding: 5px 0 3px;
    margin-bottom: 10px;
    width: 6.3em;
  }
  #docs-ana #cam-about .add-mile .font-l {
    font-size: 2.3em;
  }
  #docs-ana #cam-about .add-mile .font-m {
    font-size: 1.2em;
  }
  #docs-ana #amc-form {
    padding: 30px 0;
  }
  #docs-ana #amc-form h2 {
    font-size: 1.2em;
  }
  #docs-ana #amc-form dd .btn-amc {
    padding: 20px 10px 15px;
    font-size: 1.2em;
  }
}
@media screen and (max-width: 448px) {
  #docs-ana #mv #mv-text h1 {
    font-size: 12vw;
  }
  #docs-ana #mv #mv-text h2 {
    font-size: 6.5vw;
  }
  #docs-ana #cam-about .about-text {
    font-size: 4vw;
  }
  #docs-ana #cam-about .add-mile .mile-wrap {
    width: 130px;
    height: 130px;
  }
  #docs-ana .add-mile .font-m {
    font-size: 1.2em;
  }
  #docs-ana #amc-form #amc-bk {
    padding: 0 10px;
  }
}
@media screen and (max-width: 420px) {
  #docs-ana #amc-form #amc-bk #amc-text {
    text-align: left;
  }
  #docs-ana #amc-form .amc-regist p {
    text-align: left;
  }
  #docs-ana #amc-form .amc-regist br {
    display: none;
  }
}

/********** ANAキャンペーン共通 **********/
.ana-cam-cmn .wrap-840 {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
.ana-cam-cmn .font-black {
  color: #000000;
}
.ana-cam-cmn .font-accent {
  color: #FEFF00;
}
.ana-cam-cmn .ana-cam-attention {
  color: #ED1C24;
}
.ana-cam-cmn .bg-main {
  background-color: #0075C2;
}
.ana-cam-cmn .bg-secondary {
  background: #E5F3FF;
}
.ana-cam-cmn .hd-deco:before, .ana-cam-cmn .hd-deco::after {
  content: "";
  width: 1.6em;
  background-color: #000000;
}
.ana-cam-cmn #terms {
  position: relative;
}
.ana-cam-cmn #terms .frame {
  border: solid 5px #0075C2;
  margin: 10px auto;
}
.ana-cam-cmn #terms .frame .flex {
  justify-content: space-between;
  align-items: center;
}
.ana-cam-cmn #terms .sub-hd {
  width: 130px;
  height: 130px;
  background-color: #000000;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1;
  font-size: 3em;
  padding: 30px 4px 4px;
}
.ana-cam-cmn #terms .sub-hd span {
  display: block;
}
.ana-cam-cmn #terms .sub-hd .font-s {
  font-size: 0.4em;
}
.ana-cam-cmn #terms .text-wrap {
  width: 80%;
  font-weight: bold;
}
.ana-cam-cmn #terms .text-wrap .terms-text {
  color: #000000;
}
.ana-cam-cmn #terms .text-wrap .font-m {
  font-size: 1.6em;
}
.ana-cam-cmn #terms .text-wrap .font-s {
  font-size: 0.6em;
}
.ana-cam-cmn #terms .text-wrap .label {
  background-color: #0075C2;
  line-height: 1.3;
  margin-top: 5px;
  padding: 10px;
}
.ana-cam-cmn #terms .title-wrap {
  max-width: 840px;
  margin: auto;
}
.ana-cam-cmn #add-mile {
  position: relative;
}
.ana-cam-cmn #add-mile::before {
  content: "";
  position: absolute;
  background: url(/img/campaign/common/arrow_more_blk.png) no-repeat;
  background-size: contain;
  width: 400px;
  height: 120px;
  left: 0;
  right: 0;
  top: -70px;
  margin: auto;
}
.ana-cam-cmn #add-mile .flex {
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.ana-cam-cmn #add-mile .flex .mile-wrap {
  width: 280px;
  height: 280px;
  background-color: #FEFF00;
  border-radius: 50%;
}
.ana-cam-cmn #add-mile .flex .mile-wrap .wh {
  max-width: 185px;
  width: 100%;
  font-weight: bold;
  font-size: 1.5em;
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 2px 4px;
  margin: 2.5em auto 5px;
  text-align: center;
}
.ana-cam-cmn #add-mile .flex .mile-wrap .yen {
  position: relative;
}
.ana-cam-cmn #add-mile .flex .mile-wrap .yen::before {
  content: "(税込)";
  position: absolute;
  font-size: 0.4em;
  top: -1.3em;
  left: -0.2em;
  white-space: nowrap;
}
.ana-cam-cmn #add-mile .flex .mile-arrow {
  width: 130px;
}
.ana-cam-cmn #add-mile .flex .position-r {
  margin-top: 0;
  font-weight: bold;
}
.ana-cam-cmn #add-mile .flex .position-r .font-l {
  font-size: 5em;
  line-height: 1.3em;
}
.ana-cam-cmn #add-mile .flex .position-r .font-m {
  font-size: 2.5em;
}
.ana-cam-cmn #add-mile a.icon-tri {
  color: #000;
}
.ana-cam-cmn #add-mile a.icon-tri::before {
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #0B308A;
}
.ana-cam-cmn #ex .lead-text {
  text-align: center;
}
.ana-cam-cmn #ex .text-wrap {
  width: 78%;
  font-weight: bold;
  margin: auto;
}
.ana-cam-cmn #ex .text-wrap .font-l {
  font-size: 2em;
}
.ana-cam-cmn #ex .text-wrap .add-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 10px;
  line-height: 1.2;
  border-bottom: solid 5px #000000;
}
.ana-cam-cmn #ex .text-wrap .add-wrap span {
  display: block;
  font-weight: normal;
  font-size: 0.6em;
}
.ana-cam-cmn #ex .text-wrap .add-wrap .bg-black {
  background-color: #000000;
  padding: 4px;
  margin-bottom: 4px;
}
.ana-cam-cmn #ex .text-wrap .add-wrap .plus {
  font-size: 2em;
  line-height: 1;
  margin: 0;
}
.ana-cam-cmn #ex .text-wrap .add-mile,
.ana-cam-cmn #ex .text-wrap .total-wrap {
  margin: 0;
}
.ana-cam-cmn #ex .text-wrap .total-wrap .font-pink {
  color: #ED1C24;
  font-size: 1.8em;
}
.ana-cam-cmn #ex .text-wrap .add-mile .font-s {
  font-size: 0.6em;
}
.ana-cam-cmn #ex .img-wrap {
  width: 20%;
}
.ana-cam-cmn #ex #ex-conditions .ex-conditions-text-layout {
  padding: 4px 16px;
  margin: 8px;
}
.ana-cam-cmn #ex #ex-conditions .img-plus {
  width: 28px;
  margin: 8px;
}
.ana-cam-cmn #ex #ex-conditions .padding-top-zero {
  padding-top: 0px;
}
.ana-cam-cmn #ex #ex-conditions .total {
  font-size: 1.2em;
}
.ana-cam-cmn #ex #ex-conditions .flex-center {
  justify-content: center;
  align-items: center;
}
.ana-cam-cmn #ex #ex-conditions .img-arrow {
  width: 56px;
  margin: auto;
}
.ana-cam-cmn #ex #ex-conditions .img-arrow img {
  transform: rotate(90deg);
}
.ana-cam-cmn #ex #ex-conditions .img-present {
  width: 135px;
}
.ana-cam-cmn #step li {
  background-color: #E5F3FF;
}
.ana-cam-cmn #step li h3 {
  color: #0075C2;
}
.ana-cam-cmn #step #amc-form {
  text-align: center;
  background-color: #0B308A;
}
.ana-cam-cmn #step #amc-form #amc-bk {
  background: url(/img/campaign/triple/bk_plane.png) right 20px top 20px no-repeat;
  background-size: 120px auto;
  color: #fff;
}
.ana-cam-cmn #step #amc-form #amc-bk h2 {
  color: #fff;
  margin-bottom: 20px;
}
.ana-cam-cmn #step #amc-form #amc-bk #amc-text {
  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.ana-cam-cmn #step #amc-form .flex {
  justify-content: space-between;
}
.ana-cam-cmn #step #amc-form .amc-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  color: #333;
  font-weight: bold;
  padding: 20px;
}
.ana-cam-cmn #step #amc-form .amc-wrap p {
  margin-bottom: 10px;
}
.ana-cam-cmn #step #amc-form .amc-wrap.amc-regist {
  width: 58%;
}
.ana-cam-cmn #step #amc-form .cam-btn {
  position: relative;
  display: inline-block;
  max-width: 520px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  border-radius: 10px;
  padding: 10px 10px 7px;
  cursor: pointer;
}
.ana-cam-cmn #step #amc-form .btn-edit {
  background-color: #3173EF;
}
.ana-cam-cmn #cam-detail {
  background-color: #000000;
}
.ana-cam-cmn #cam-detail dl {
  border-bottom: 1px solid #000000;
  color: #000000;
}
.ana-cam-cmn #cam-detail dl .cam-dl {
  border-top: 1px solid #000000;
}
.ana-cam-cmn #cam-detail .inquiry-wrap {
  border: solid 1px;
  border-radius: 4px;
  padding: 16px;
}
@media screen and (max-width: 840px) {
  .ana-cam-cmn #terms .wrap-840 {
    max-width: 600px;
  }
  .ana-cam-cmn #terms .terms-hd {
    font-size: 3.8vw;
  }
  .ana-cam-cmn #terms .frame {
    padding: 10px;
  }
  .ana-cam-cmn #terms .sub-hd {
    font-size: 2.5em;
    width: 80px;
    height: 80px;
    padding: 13px 4px 4px;
  }
  .ana-cam-cmn #terms .text-wrap {
    width: 84%;
  }
  .ana-cam-cmn #terms .text-wrap .font-m {
    font-size: 1.4em;
  }
  .ana-cam-cmn #terms .text-wrap .label {
    font-size: 1.5em;
  }
  .ana-cam-cmn #add-mile .wrap-840 {
    max-width: 640px;
  }
  .ana-cam-cmn #add-mile .flex .mile-wrap {
    width: 230px;
    height: 230px;
  }
  .ana-cam-cmn #add-mile .flex .mile-arrow {
    width: 100px;
  }
  .ana-cam-cmn #add-mile .flex .wh {
    font-size: 1.3em;
  }
  .ana-cam-cmn #add-mile .flex .position-r .font-l {
    font-size: 4em;
  }
  .ana-cam-cmn #ex .lead-text {
    font-size: 3vw;
  }
  .ana-cam-cmn #ex .text-wrap .total-wrap {
    font-size: 2vw;
  }
  .ana-cam-cmn #step #amc-form .amc-wrap.amc-regist {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .ana-cam-cmn h2 {
    font-size: 1.5em;
  }
  .ana-cam-cmn .padding-s {
    padding: 10px;
  }
  .ana-cam-cmn #terms .sub-hd {
    width: 60px;
    height: 60px;
    font-size: 2em;
    padding: 8px 4px 4px;
  }
  .ana-cam-cmn #terms .flex {
    position: relative;
  }
  .ana-cam-cmn #terms .flex .text-wrap {
    width: 100%;
    margin-top: 10px;
  }
  .ana-cam-cmn #terms .flex .text-wrap .terms-text {
    position: absolute;
    font-size: 3.8vw;
    top: 0;
    left: 68px;
  }
  .ana-cam-cmn #terms .flex .text-wrap .label {
    font-size: 1.8em;
  }
  .ana-cam-cmn #add-mile::before {
    width: 280px;
    height: 84px;
    top: -58px;
  }
  .ana-cam-cmn #add-mile .wrap-840 {
    max-width: 520px;
  }
  .ana-cam-cmn #add-mile .flex .mile-wrap {
    width: 200px;
    height: 200px;
  }
  .ana-cam-cmn #add-mile .flex .mile-wrap .wh {
    font-size: 1em;
    max-width: 130px;
    margin-top: 3em;
  }
  .ana-cam-cmn #add-mile .flex .mile-wrap .position-r .font-l {
    font-size: 3.5em;
  }
  .ana-cam-cmn #add-mile .flex .mile-wrap .position-r .font-m {
    font-size: 1.8em;
  }
  .ana-cam-cmn #add-mile .flex .mile-arrow {
    width: 80px;
  }
  .ana-cam-cmn #add-mile a.font-m {
    font-size: 1em;
  }
  .ana-cam-cmn #ex .flex .text-wrap .add-mile .font-s {
    font-size: 2.8vw;
  }
  .ana-cam-cmn #ex .flex .text-wrap .add-wrap .plus {
    font-size: 1.3em;
  }
  .ana-cam-cmn #ex #ex-conditions .flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 520px) {
  .ana-cam-cmn .text-left-res {
    text-align: left;
  }
  .ana-cam-cmn #terms .terms-hd {
    font-size: 1.3em;
  }
  .ana-cam-cmn #terms .terms-hd br {
    display: none;
  }
  .ana-cam-cmn #terms .flex .text-wrap .terms-text {
    font-size: 1.3em;
    line-height: 1.3;
  }
  .ana-cam-cmn #terms .flex .text-wrap .label {
    font-size: 6.4vw;
  }
  .ana-cam-cmn #add-mile h2 .sp-br {
    display: block;
  }
  .ana-cam-cmn #add-mile .wrap-840 {
    max-width: 200px;
  }
  .ana-cam-cmn #add-mile .flex .mile-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  .ana-cam-cmn #ex .lead-text {
    font-size: 1.2em;
  }
  .ana-cam-cmn #ex .lead-text br {
    display: none;
  }
  .ana-cam-cmn #ex .text-wrap {
    width: 100%;
  }
  .ana-cam-cmn #ex .text-wrap .font-l {
    font-size: 1.2em;
  }
  .ana-cam-cmn #ex .text-wrap .add-wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  .ana-cam-cmn #ex .text-wrap .add-wrap p {
    width: 100%;
  }
  .ana-cam-cmn #ex .text-wrap .add-wrap .plus {
    font-size: 2em;
    margin: 0 10px 10px;
  }
  .ana-cam-cmn #ex .text-wrap .add-wrap .bg-black {
    max-width: 12em;
    margin: 0 auto;
  }
  .ana-cam-cmn #ex .text-wrap .add-mile {
    font-size: 1.6em;
  }
  .ana-cam-cmn #ex .text-wrap .add-mile .font-s {
    font-size: 0.5em;
  }
  .ana-cam-cmn #ex .text-wrap .total-wrap {
    font-size: 4vw;
  }
  .ana-cam-cmn #ex #ex-conditions h3 {
    font-size: 1.2em;
  }
  .ana-cam-cmn #step #amc-form #amc-bk.uk-padding {
    padding: 20px 0;
  }
  .ana-cam-cmn #step #amc-form #amc-bk #amc-text {
    text-align: left;
  }
  .ana-cam-cmn #step #amc-form .amc-regist p {
    text-align: left;
  }
  .ana-cam-cmn #step #amc-form .amc-regist p br {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  .ana-cam-cmn #terms .flex .text-wrap .terms-text {
    font-size: 1em;
    line-height: 1.5;
    padding-top: 5px;
  }
  .ana-cam-cmn #terms .font-l {
    font-size: 1.2em;
  }
  .ana-cam-cmn #add-mile::before {
    width: 240px;
    height: 72px;
    top: -47px;
  }
  .ana-cam-cmn #ex #ex-conditions .hd-deco::before, .ana-cam-cmn #ex #ex-conditions .hd-deco::after {
    width: 1.8em;
  }
  .ana-cam-cmn #step #amc-form #amc-bk h2 {
    font-size: 1.1em;
  }
}

/********** ANAのマイルキャンペーン 2022 春 end **********/
/*
*
* JALサイト内コンテンツ用ページ
* JALランディングページ
*
*/
#docs-jal .sp-br, #docs-jal .sp-img,
#lp-jal .sp-br,
#lp-jal .sp-img {
  display: none;
}
#docs-jal .font-red,
#lp-jal .font-red {
  color: #ed1c24;
}
#docs-jal .font-strong,
#lp-jal .font-strong {
  font-weight: bold;
}
#docs-jal .bg-blue,
#lp-jal .bg-blue {
  background-color: #edf0f4;
}
#docs-jal .bg-gray,
#lp-jal .bg-gray {
  background-color: #f9faf4;
}
#docs-jal .hd,
#lp-jal .hd {
  display: flex;
  justify-content: center;
  align-items: center;
}
#docs-jal .hd::before, #docs-jal .hd::after,
#lp-jal .hd::before,
#lp-jal .hd::after {
  content: "";
  width: 1.2em;
  height: 3px;
  border-radius: 10px;
}
#docs-jal .hd::before,
#lp-jal .hd::before {
  transform: rotate(60deg);
}
#docs-jal .hd::after,
#lp-jal .hd::after {
  transform: rotate(-60deg);
}
#docs-jal #intro .lead,
#lp-jal #intro .lead {
  color: #000;
  text-align: center;
  font-size: 2em;
}
#docs-jal #intro .lead span,
#lp-jal #intro .lead span {
  vertical-align: sub;
}
#docs-jal #intro .lead .font-s,
#lp-jal #intro .lead .font-s {
  font-size: 0.7em;
}
#docs-jal #intro .lead .font-m,
#lp-jal #intro .lead .font-m {
  font-size: 1.4em;
}
#docs-jal #intro .lead .font-l,
#lp-jal #intro .lead .font-l {
  font-size: 1.5em;
}
#docs-jal #change-flow,
#lp-jal #change-flow {
  background-color: #f9faf4;
}
#docs-jal #change-flow h2,
#lp-jal #change-flow h2 {
  color: #ed1c24;
}
#docs-jal #change-flow .hd::before, #docs-jal #change-flow .hd::after,
#lp-jal #change-flow .hd::before,
#lp-jal #change-flow .hd::after {
  background-color: #ed1c24;
}
#docs-jal #change-flow .wrap-880,
#lp-jal #change-flow .wrap-880 {
  margin-bottom: 20px;
}
#docs-jal #change-flow .wrap-880.flex,
#lp-jal #change-flow .wrap-880.flex {
  justify-content: space-between;
  align-items: center;
}
#docs-jal #change-flow .wrap-880 .flow-wrap,
#lp-jal #change-flow .wrap-880 .flow-wrap {
  width: 37%;
  background-color: white;
  border-radius: 21px;
  border: solid 3px #ed1c24;
  padding: 20px;
}
#docs-jal #change-flow .wrap-880 .flow-wrap img,
#lp-jal #change-flow .wrap-880 .flow-wrap img {
  max-width: 190px;
  width: 100%;
  margin: 0 auto;
}
#docs-jal #change-flow .wrap-880 .flow-wrap .bg-bk,
#lp-jal #change-flow .wrap-880 .flow-wrap .bg-bk {
  background-color: #000;
  padding: 8px;
  color: white;
  font-size: 1.25em;
  border-radius: 100px;
  margin: 16px auto;
}
#docs-jal #change-flow .wrap-880 .flow-arrow,
#lp-jal #change-flow .wrap-880 .flow-arrow {
  max-width: 160px;
  width: 100%;
  margin: 20px;
}
#docs-jal #change-flow .wrap-880 .flow-arrow p,
#lp-jal #change-flow .wrap-880 .flow-arrow p {
  text-align: left;
  font-weight: bold;
  line-height: 1.3;
  margin: 10px auto 0;
}
#docs-jal #add-mile,
#lp-jal #add-mile {
  background-color: #edf0f4;
  position: relative;
}
#docs-jal #add-mile::after,
#lp-jal #add-mile::after {
  content: "";
  position: absolute;
  background: url(/img/jal/arrow_more.png) no-repeat;
  background-size: contain;
  width: 240px;
  height: 125px;
  left: 0;
  right: 0;
  top: -80px;
  margin: 20px auto;
}
#docs-jal #add-mile h2,
#lp-jal #add-mile h2 {
  color: #48549e;
  text-align: center;
  margin-top: 24px;
}
#docs-jal #add-mile .hd::before, #docs-jal #add-mile .hd::after,
#lp-jal #add-mile .hd::before,
#lp-jal #add-mile .hd::after {
  background-color: #48549e;
}
#docs-jal #add-mile .main-text,
#lp-jal #add-mile .main-text {
  text-align: center;
  line-height: 1.3;
}
#docs-jal #add-mile .main-text .font-l,
#lp-jal #add-mile .main-text .font-l {
  font-size: 1.6em;
}
#docs-jal #add-mile .wrap-560,
#lp-jal #add-mile .wrap-560 {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
#docs-jal #add-mile .wrap-560.flex,
#lp-jal #add-mile .wrap-560.flex {
  justify-content: space-between;
  align-items: center;
}
#docs-jal #add-mile .wrap-560::after,
#lp-jal #add-mile .wrap-560::after {
  content: "";
  position: absolute;
  background: url(/img/jal/arrow.png) no-repeat;
  background-size: contain;
  width: 140px;
  height: 135px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#docs-jal #add-mile .mile-wrap,
#lp-jal #add-mile .mile-wrap {
  width: 175px;
  height: 175px;
  text-align: center;
  color: white;
  font-weight: bold;
  background-color: #48549e;
  border-radius: 100%;
  padding: 20px 10px;
}
#docs-jal #add-mile .mile-wrap .wh,
#lp-jal #add-mile .mile-wrap .wh {
  max-width: 8em;
  width: 100%;
  font-size: 1em;
  background-color: white;
  color: #48549e;
  border-radius: 50px;
  padding: 4px 4px 2px;
  margin: 20px auto 10px;
}
#docs-jal #add-mile .mile-wrap .position-r,
#lp-jal #add-mile .mile-wrap .position-r {
  line-height: 1;
}
#docs-jal #add-mile .mile-wrap .position-r .font-l,
#lp-jal #add-mile .mile-wrap .position-r .font-l {
  font-size: 3em;
}
#docs-jal #add-mile .mile-wrap .position-r .font-m,
#lp-jal #add-mile .mile-wrap .position-r .font-m {
  font-size: 1.8em;
}
#docs-jal #add-mile .mile-wrap .position-r .yen,
#lp-jal #add-mile .mile-wrap .position-r .yen {
  position: relative;
}
#docs-jal #add-mile .mile-wrap .position-r .yen::after,
#lp-jal #add-mile .mile-wrap .position-r .yen::after {
  content: "(税込)";
  position: absolute;
  width: 5em;
  font-size: 0.3em;
  text-align: left;
  left: 0;
  right: 0;
  top: -1.6em;
  margin: auto;
}
#docs-jal #add-mile .mile-detail,
#lp-jal #add-mile .mile-detail {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
#docs-jal #add-mile .mile-detail ul,
#lp-jal #add-mile .mile-detail ul {
  background-color: white;
  padding: 30px;
  padding-left: calc(30px + 1em);
}
@media screen and (max-width: 1199px) {
  #docs-jal #change-flow .wrap-880,
#lp-jal #change-flow .wrap-880 {
    margin-bottom: 60px;
  }
  #docs-jal #add-mile,
#lp-jal #add-mile {
    padding-top: 80px;
  }
}
@media screen and (max-width: 880px) {
  #docs-jal #change-flow .wrap-880,
#lp-jal #change-flow .wrap-880 {
    max-width: 680px;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap,
#lp-jal #change-flow .wrap-880 .flow-wrap {
    padding: 10px;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow,
#lp-jal #change-flow .wrap-880 .flow-arrow {
    max-width: 100px;
  }
}
@media screen and (max-width: 680px) {
  #docs-jal #intro h2,
#lp-jal #intro h2 {
    font-size: 1.4em;
  }
  #docs-jal #intro .lead,
#lp-jal #intro .lead {
    font-size: 1.5em;
  }
  #docs-jal #intro .lead span,
#lp-jal #intro .lead span {
    vertical-align: initial;
  }
  #docs-jal #change-flow .wrap-880,
#lp-jal #change-flow .wrap-880 {
    max-width: 460px;
    margin-bottom: 60px;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap,
#lp-jal #change-flow .wrap-880 .flow-wrap {
    width: 36%;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap img,
#lp-jal #change-flow .wrap-880 .flow-wrap img {
    max-width: 140px;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap .bg-bk,
#lp-jal #change-flow .wrap-880 .flow-wrap .bg-bk {
    font-size: 1em;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap .text-wrap p:not(.font-s),
#lp-jal #change-flow .wrap-880 .flow-wrap .text-wrap p:not(.font-s) {
    line-height: 1.2;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow,
#lp-jal #change-flow .wrap-880 .flow-arrow {
    margin: 10px;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow p,
#lp-jal #change-flow .wrap-880 .flow-arrow p {
    font-size: 0.8em;
  }
  #docs-jal #add-mile,
#lp-jal #add-mile {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  #docs-jal #add-mile::after,
#lp-jal #add-mile::after {
    width: 180px;
    height: 94px;
  }
  #docs-jal #add-mile h2,
#lp-jal #add-mile h2 {
    font-size: 1.4em;
  }
  #docs-jal #add-mile .main-text br,
#lp-jal #add-mile .main-text br {
    display: none;
  }
  #docs-jal #add-mile .wrap-560::after,
#lp-jal #add-mile .wrap-560::after {
    width: 90px;
    height: 80px;
  }
}
@media screen and (max-width: 480px) {
  #docs-jal .hd::before, #docs-jal .hd::after,
#lp-jal .hd::before,
#lp-jal .hd::after {
    width: 1.6em;
    height: 2px;
  }
  #docs-jal #intro .lead,
#lp-jal #intro .lead {
    font-size: 4.8vw;
  }
  #docs-jal #intro .lead .font-s,
#lp-jal #intro .lead .font-s {
    font-size: 0.8em;
  }
  #docs-jal #change-flow h2 .sp-br,
#lp-jal #change-flow h2 .sp-br {
    display: block;
  }
  #docs-jal #change-flow .main-text,
#lp-jal #change-flow .main-text {
    text-align: left;
  }
  #docs-jal #change-flow .main-text br,
#lp-jal #change-flow .main-text br {
    display: none;
  }
  #docs-jal #change-flow .wrap-880.flex,
#lp-jal #change-flow .wrap-880.flex {
    justify-content: center;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap,
#lp-jal #change-flow .wrap-880 .flow-wrap {
    width: 100%;
  }
  #docs-jal #change-flow .wrap-880 .flow-wrap img,
#lp-jal #change-flow .wrap-880 .flow-wrap img {
    max-width: 190px;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow,
#lp-jal #change-flow .wrap-880 .flow-arrow {
    max-width: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    margin: 20px;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow img,
#lp-jal #change-flow .wrap-880 .flow-arrow img {
    max-width: 90px;
    transform: rotate(90deg);
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow p,
#lp-jal #change-flow .wrap-880 .flow-arrow p {
    margin: 0 auto 10px;
    font-size: 1em;
  }
  #docs-jal #change-flow .wrap-880 .flow-arrow p br,
#lp-jal #change-flow .wrap-880 .flow-arrow p br {
    display: none;
  }
  #docs-jal #add-mile,
#lp-jal #add-mile {
    padding-top: 40px;
  }
  #docs-jal #add-mile h2 .sp-br,
#lp-jal #add-mile h2 .sp-br {
    display: block;
  }
  #docs-jal #add-mile .main-text,
#lp-jal #add-mile .main-text {
    text-align: left;
  }
  #docs-jal #add-mile .main-text .font-l,
#lp-jal #add-mile .main-text .font-l {
    font-size: 1.2em;
  }
  #docs-jal #add-mile .wrap-560,
#lp-jal #add-mile .wrap-560 {
    max-width: 300px;
  }
  #docs-jal #add-mile .wrap-560.flex,
#lp-jal #add-mile .wrap-560.flex {
    justify-content: center;
  }
  #docs-jal #add-mile .wrap-560::after,
#lp-jal #add-mile .wrap-560::after {
    transform: rotate(90deg);
  }
  #docs-jal #add-mile .mile-wrap:first-child,
#lp-jal #add-mile .mile-wrap:first-child {
    margin-bottom: 110px;
  }
  #docs-jal #add-mile .mile-detail ul,
#lp-jal #add-mile .mile-detail ul {
    padding: 10px;
    padding-left: calc(10px + 1em);
  }
}

/*---------- docs/jal ----------*/
#docs-jal #mv {
  background-color: #000;
  overflow: hidden;
}
#docs-jal #mv .container-w {
  position: relative;
  overflow: visible;
}
#docs-jal #mv .container-w .mv-bg {
  position: absolute;
  width: 60%;
  top: 0;
  left: 0;
}
#docs-jal #mv .container {
  position: relative;
  overflow: visible;
}
#docs-jal #mv .container .mv-logo {
  width: 60%;
  position: relative;
}
#docs-jal #mv .container .mv-logo img {
  position: absolute;
  max-width: 440px;
  top: 40px;
  right: 0;
}
#docs-jal #mv .container .mv-text {
  position: relative;
  width: 40%;
  background-color: #ED1C24;
  padding: 60px 10px;
}
#docs-jal #mv .container .mv-text::before, #docs-jal #mv .container .mv-text::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: 0;
}
#docs-jal #mv .container .mv-text::before {
  border-width: 0 0 450px 45px;
  border-color: transparent transparent #ED1C24 transparent;
  left: -45px;
}
#docs-jal #mv .container .mv-text::after {
  border-width: 450px 45px 0 0;
  border-color: #ED1C24 transparent transparent transparent;
  right: -44px;
}
#docs-jal #mv .container .mv-text h1 {
  font-size: 2em;
  margin-left: 10px;
}
#docs-jal #mv .container .mv-mile {
  background-color: transparent;
  position: relative;
  padding: 0;
}
#docs-jal #mv .container .mv-mile::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28px 0 28px 48px;
  border-color: transparent transparent transparent white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#docs-jal #mv .container .mv-mile.flex {
  justify-content: space-between;
}
#docs-jal #mv .container .mv-mile .mile-wrap {
  background-color: white;
  color: #ED1C24;
}
#docs-jal #mv .container .mv-mile .mile-wrap .wh {
  background-color: #ED1C24;
  color: white;
}
#docs-jal #amc-form {
  text-align: center;
  background-color: #ED1C24;
}
#docs-jal #amc-form #amc-bk {
  background: url(/img/campaign/triple/bk_plane.png) right 20px top 20px no-repeat;
  background-size: 120px auto;
  color: #ffffff;
}
#docs-jal #amc-form #amc-bk h2 {
  color: #ffffff;
  margin-bottom: 20px;
}
#docs-jal #amc-form #amc-bk #amc-text {
  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#docs-jal #amc-form .flex {
  justify-content: space-between;
}
#docs-jal #amc-form .amc-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  color: #333333;
  font-weight: bold;
  padding: 20px;
}
#docs-jal #amc-form .amc-wrap p {
  margin-bottom: 10px;
}
#docs-jal #amc-form .amc-wrap.amc-regist {
  width: 58%;
}
#docs-jal #amc-form .amc-wrap.change-regist {
  width: 40%;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}
#docs-jal #amc-form .amc-wrap.change-regist p {
  width: 100%;
}
#docs-jal #amc-form .btn-edit {
  background-color: #48549e;
}
#docs-jal #amc-form .change-regist .cam-btn {
  background-color: #ea5514;
  max-width: 300px;
}
#docs-jal #amc-form .cam-btn {
  position: relative;
  display: inline-block;
  max-width: 520px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: white;
  border-radius: 10px;
  padding: 10px 10px 7px;
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  #docs-jal #mv .container {
    padding: 0;
  }
  #docs-jal #mv .container .mv-logo img {
    max-width: 360px;
    top: 30px;
  }
  #docs-jal #mv .container .mv-text h1 {
    font-size: 1.8em;
  }
  #docs-jal #mv .container #add-mile {
    padding-top: 0;
  }
  #docs-jal #mv .container .mv-mile {
    max-width: 390px;
    width: 100%;
    margin: 0 auto;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap {
    width: 160px;
    height: 160px;
    padding: 10px 16px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-l {
    font-size: 2.8em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-m {
    font-size: 1.6em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .yen::after {
    top: -1.3em;
  }
}
@media screen and (max-width: 1024px) {
  #docs-jal #mv .container .mv-logo img {
    max-width: 320px;
  }
  #docs-jal #mv .container .mv-text h1 {
    font-size: 2.9vw;
  }
  #docs-jal #mv .container .mv-mile {
    max-width: 390px;
  }
  #docs-jal #mv .container .mv-mile::after {
    border-width: 23px 0 23px 40px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap {
    width: 150px;
    height: 150px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .wh {
    font-size: 1em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-l {
    font-size: 2.4em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-m {
    font-size: 1.6em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .yen::after {
    white-space: nowrap;
  }
}
@media screen and (max-width: 960px) {
  #docs-jal #mv .container-w .mv-bg {
    width: 65%;
    left: -30px;
  }
  #docs-jal #mv .container .mv-text {
    padding: 40px 10px;
  }
  #docs-jal #mv .container .mv-mile {
    max-width: 320px;
  }
  #docs-jal #mv .container .mv-mile::after {
    border-width: 17px 0 17px 30px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap {
    width: 140px;
    height: 140px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .wh {
    padding: 2px;
    margin-bottom: 6px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-m {
    font-size: 1.3em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .yen::after {
    top: -1.6em;
  }
}
@media screen and (max-width: 880px) {
  #docs-jal #mv .container-w .mv-bg {
    width: 100%;
    left: 0;
  }
  #docs-jal #mv .container .mv-logo {
    width: 100%;
    padding-top: 50%;
  }
  #docs-jal #mv .container .mv-text {
    width: 100%;
    padding: 20px 10px;
  }
  #docs-jal #mv .container .mv-text::before {
    border-width: 0 0 30px 100vw;
    left: 0;
    top: -30px;
  }
  #docs-jal #mv .container .mv-text::after {
    display: none;
  }
  #docs-jal #mv .container .mv-text h1 {
    text-align: center;
    font-size: 2em;
    margin-left: 0;
  }
  #docs-jal #amc-form .amc-wrap.change-regist,
#docs-jal #amc-form .amc-wrap.amc-regist {
    width: 100%;
  }
  #docs-jal #amc-form .change-regist .cam-btn {
    max-width: 500px;
  }
  #docs-jal #amc-form .change-regist {
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 680px) {
  #docs-jal #mv .container .mv-logo img {
    max-width: 280px;
    top: 20px;
  }
  #docs-jal #mv .container .mv-text h1 {
    font-size: 1.6em;
  }
}
@media screen and (max-width: 480px) {
  #docs-jal #mv .container .mv-logo {
    padding-top: 55%;
  }
  #docs-jal #mv .container .mv-logo img {
    max-width: 240px;
    top: 10px;
  }
  #docs-jal #mv .container .mv-text {
    padding: 10px;
  }
  #docs-jal #mv .container .mv-text::before {
    border-width: 0 0 20px 100vw;
    top: -20px;
  }
  #docs-jal #mv .container .mv-text h1 {
    font-size: 1.4em;
    margin-bottom: 10px;
  }
  #docs-jal #mv .container .mv-mile {
    max-width: 300px;
  }
  #docs-jal #mv .container .mv-mile::after {
    border-width: 17.5px 0 17.5px 30px;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap {
    width: 130px;
    height: 130px;
    padding: 10px;
    margin-bottom: 0;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .wh {
    font-size: 0.8em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-l {
    font-size: 2.3em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .font-m {
    font-size: 1.2em;
  }
  #docs-jal #mv .container .mv-mile .mile-wrap .position-r .yen::after {
    top: -2em;
  }
  #docs-jal #amc-form {
    padding: 30px 0;
  }
  #docs-jal #amc-form .uk-padding {
    padding: 20px 10px;
  }
  #docs-jal #amc-form #amc-bk h2 {
    font-size: 1.2em;
  }
  #docs-jal #amc-form #amc-bk #amc-text {
    text-align: left;
  }
  #docs-jal #amc-form .amc-wrap.amc-regist p {
    text-align: left;
  }
  #docs-jal #amc-form .amc-wrap.amc-regist p br {
    display: none;
  }
  #docs-jal #amc-form dd .btn-amc {
    padding: 20px 10px 15px;
    font-size: 1.2em;
  }
}

/*---------- lp ----------*/
#lp-jal {
  /*---------- 登録 ----------*/
  /*----------　メインビジュアル ----------*/
  /*--- 動画でわかるCHANGE ---*/
  /*--- メリット ---*/
  /*--- 比べてわかる ---*/
  /*---------- ステップ ----------*/
  /*---------- モデルケース ----------*/
  /*---------- Q&A ----------*/
  /*---------- PS -----------*/
}
#lp-jal h2 {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1.5em;
}
#lp-jal .hd-blue {
  color: #48549e;
}
#lp-jal .hd-red {
  color: #ED1C24;
}
#lp-jal .hd-white {
  color: white;
}
#lp-jal .hd-small {
  font-size: 0.6em;
  display: block;
}
#lp-jal .span-yellow {
  font-size: 0.5em;
  display: inline-block;
  background-color: #fff002;
  color: #48549e;
  padding: 5px;
}
#lp-jal #modal-jal {
  display: none;
  background-color: rgba(107, 107, 107, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
#lp-jal #modal-jal .flex {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#lp-jal #modal-jal #modal-wrap {
  background-color: #ffffff;
  border-radius: 15px;
  width: 80%;
  padding: 40px 20px;
  text-align: center;
  font-weight: bold;
}
#lp-jal #modal-jal #modal-wrap h1 {
  color: #31a7ea;
  font-size: 2em;
}
#lp-jal #modal-jal #modal-wrap h1 span {
  color: #ED1C24;
}
#lp-jal #modal-jal #modal-wrap .btn-m {
  background-color: #31a7ea;
  color: #ffffff;
  border-radius: 5px;
}
#lp-jal .regist {
  text-align: center;
}
#lp-jal .regist p {
  font-size: 1.5em;
  font-weight: bold;
}
#lp-jal .regist-bk {
  background: url(/img/common/bg_ft.jpg) center top no-repeat;
  background-size: cover;
  color: white;
}
#lp-jal .regist-bk h2 {
  color: white;
  margin-bottom: 10px;
}
#lp-jal .regist-bk form h2 {
  display: none;
}
#lp-jal .regist-bk .regist-note {
  max-width: 800px;
  margin: 0 auto 1em;
}
#lp-jal .regist-bk .regist-wrap {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1em;
  color: #333333;
  border-radius: 15px;
  position: relative;
  /**** 使ってない？ ****/
}
#lp-jal header {
  position: absolute;
  background-color: transparent;
  top: 0;
  padding: 15px 0;
  z-index: 999;
}
#lp-jal header .container {
  position: relative;
}
#lp-jal header #change-logo {
  min-width: 120px;
  width: 23%;
  margin: 0;
}
#lp-jal header #jal-logo {
  position: absolute;
  max-width: 440px;
  top: 20px;
  right: 0;
}
#lp-jal #mv {
  background: url(/img/ana/mv.jpg) center top no-repeat;
  background-size: cover;
  padding-bottom: 80px;
}
#lp-jal #mv .container {
  position: relative;
  overflow: visible;
}
#lp-jal #mv #mv-text {
  width: 55%;
  color: white;
  padding: 180px 0 50px;
}
#lp-jal #mv #mv-text h1 {
  font-size: 3em;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}
#lp-jal #mv #mv-text p {
  max-width: 33em;
  font-weight: bold;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
#lp-jal #mv #pc-change {
  position: absolute;
  max-width: 220px;
  width: 22%;
  top: 270px;
  right: 20px;
  z-index: 999;
}
#lp-jal #mv #pc-change .point1 {
  position: absolute;
  width: 58%;
  top: -33%;
  left: -30%;
}
#lp-jal #mv #pc-change .point2 {
  position: absolute;
  width: 63%;
  top: -5%;
  left: -65%;
}
#lp-jal #mv #mv-mile {
  position: relative;
  display: block;
  transform: rotate(-2deg);
}
#lp-jal #mv #mv-mile .mv-mile-bk {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 80%;
  top: 10%;
  left: 0;
}
#lp-jal #mv #mv-mile img {
  width: 72%;
}
#lp-jal #mv #mv-mile .pc-img {
  display: block;
}
#lp-jal #mv #mv-mile .sp-img {
  display: none;
}
#lp-jal #sp-change {
  display: none;
}
#lp-jal #movie .movie-img {
  border: 1px solid #dddddd;
  max-width: 400px;
  margin: 0 auto;
}
#lp-jal .movie-wrap {
  position: relative;
  padding-bottom: 56%;
  width: 100%;
  height: 0;
  border: 1px solid #dddddd;
}
#lp-jal .movie-wrap .uk-close {
  color: #ffffff;
  background-color: #000;
  border-radius: 50%;
  border: 1px solid #ffffff;
  top: -30px;
  right: -15px;
}
#lp-jal .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp-jal #merit {
  background: linear-gradient(to right, #3378bd 0%, #5895d4 60%, #b9dbfd 100%);
}
#lp-jal #merit li {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  align-items: center;
  margin-bottom: 30px;
}
#lp-jal #merit .merit-img {
  width: 30%;
  text-align: center;
}
#lp-jal #merit .merit-text {
  width: 65%;
}
#lp-jal #merit li.merit-easy {
  padding: 0 15px;
}
#lp-jal #merit li.merit-easy .merit-img {
  align-self: flex-end;
}
#lp-jal #merit li.merit-easy .merit-img img {
  max-width: 250px;
  width: 100%;
}
#lp-jal #merit li.merit-fit,
#lp-jal #merit li.merit-cost {
  flex-direction: row-reverse;
}
#lp-jal #merit h3 {
  position: relative;
  padding-left: 2.2em;
  color: #48549e;
}
#lp-jal #merit h3 span.hd-merit {
  position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 0.5em;
}
#lp-jal #merit h3 span.merit-num {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.5em;
}
#lp-jal #compare table {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
#lp-jal #compare table tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-jal #compare table tr {
  width: 14.2%;
  border-left: 1px solid #999999;
}
#lp-jal #compare table th,
#lp-jal #compare table td {
  display: block;
  padding: 10px 5px;
  border-bottom: 1px solid #999999;
  height: 50px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lp-jal #compare table th {
  font-size: 0.9em;
  background-color: #edf0f4;
}
#lp-jal #compare table .th-top {
  border-top: 1px solid #999999;
}
#lp-jal #compare table .row td .sp-hd {
  display: none;
}
#lp-jal #compare table .row td .line-red {
  display: inline;
  background: linear-gradient(transparent 80%, #f33c3d 0%);
}
#lp-jal #compare table .change-data th {
  border-right: 1px solid #999999;
}
#lp-jal #compare table .change-data th img {
  max-width: 100px;
  width: 100%;
}
#lp-jal #compare table .change-data td {
  border-right: 1px solid #999999;
}
#lp-jal #compare table .change-data td .line-orange {
  display: inline;
  background: linear-gradient(transparent 70%, #fbb03b 0%);
}
#lp-jal #compare #summary {
  background: linear-gradient(to bottom, #3378bd 0%, #5895d4 60%, #b9dbfd 100%);
  padding: 15px;
  border-radius: 15px;
}
#lp-jal #compare #summary p {
  background-color: #ffffff;
  padding: 20px;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  color: #286db4;
}
#lp-jal #compare #summary p .font-s {
  color: #333333;
}
#lp-jal #structure .flex {
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#lp-jal #structure .txt {
  width: 60%;
}
#lp-jal #structure .img {
  width: 38%;
}
#lp-jal #sell-wat #sell-wrap {
  border: 2px solid #002d7f;
  padding: 15px 15px 0;
  max-width: 900px;
  margin: 0 auto;
  font-weight: bold;
}
#lp-jal #sell-wat h2 {
  color: #002d7f;
  text-align: center;
  margin: 0 auto 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #002d7f;
}
#lp-jal #sell-wat h2 span {
  display: inline-block;
  transform: rotate(-10deg);
  font-size: 0.6em;
  vertical-align: top;
}
#lp-jal #sell-wat #wat-main {
  align-items: flex-start;
}
#lp-jal #sell-wat #wat-img {
  width: 100%;
  max-width: 160px;
}
#lp-jal #sell-wat #wat-catch {
  width: 27%;
  margin: 0 2%;
  color: #002d7f;
  text-align: center;
  font-size: 1.2em;
}
#lp-jal #sell-wat #wat-catch span {
  display: block;
}
#lp-jal #sell-wat #wat-catch .catch-m strong {
  font-size: 1.3em;
}
#lp-jal #sell-wat #wat-catch .catch-l {
  line-height: 1;
  font-size: 2.5em;
}
#lp-jal #sell-wat #wat-text {
  width: 50%;
  font-size: 1.2em;
}
#lp-jal #sell-wat #wat-text a {
  margin-top: 1em;
}
#lp-jal #guarantee .flex {
  justify-content: space-between;
}
#lp-jal #guarantee li {
  width: 31%;
  border: 2px solid #ED1C24;
  padding: 15px;
  border-radius: 15px;
  background-color: white;
  text-align: center;
  position: relative;
}
#lp-jal #guarantee li span {
  color: #ED1C24;
  font-weight: bold;
  font-size: 2.3em;
  position: absolute;
  top: 15px;
  left: 15px;
}
#lp-jal #guarantee li h3 {
  margin: 0;
  color: #ED1C24;
}
#lp-jal #guarantee li img {
  max-width: 100px;
  padding: 20px 0;
}
#lp-jal #guarantee li p {
  text-align: left;
  font-size: 0.9em;
  margin-bottom: 0;
}
#lp-jal #step ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  margin: 0 auto 50px;
}
#lp-jal #step ol li {
  width: 31%;
  text-align: center;
  background-color: white;
  border: 2px solid #333333;
  border-radius: 10px;
  padding: 10px;
}
#lp-jal #step ol li h3 {
  font-size: 1em;
  color: #333333;
}
#lp-jal #step ol li h3 .step {
  color: #333333;
  font-size: 1.2em;
  margin-top: 1em;
}
#lp-jal #step ol li .step-img {
  max-width: 200px;
  margin: 0 auto;
}
#lp-jal #step ol li .sup {
  margin: 1em 0 0;
  font-size: 0.6em;
}
#lp-jal #step ol li:nth-child(2) {
  margin: 0 3.5%;
}
#lp-jal #model #simulation {
  text-align: center;
}
#lp-jal #model #simulation .simu-hd {
  display: inline-block;
  background-color: #48549e;
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
}
#lp-jal #model #simulation .simu-hd .sp-br {
  display: none;
}
#lp-jal #model #simulation .img-wrap {
  padding: 30px;
  border: 1px solid #999999;
  background-color: white;
}
#lp-jal #model #simulation .img-wrap img {
  padding: 30px 20px 0;
}
#lp-jal #return-ex {
  margin-bottom: 30px;
  padding-bottom: 80px;
}
#lp-jal #return-ex h3 {
  text-align: center;
}
#lp-jal #return-ex h3 span {
  border-bottom: 4px solid #48549e;
}
#lp-jal #return-ex h3 br {
  display: none;
}
#lp-jal #return-ex ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
#lp-jal #return-ex ul li {
  width: 31%;
  text-align: center;
  position: relative;
  padding-bottom: 6%;
}
#lp-jal #return-ex ul li .ex-man {
  max-width: 150px;
  width: 40%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}
#lp-jal #return-ex ul li .ex {
  position: relative;
  z-index: 99;
  width: 290px;
  height: 290px;
  padding: 40px 30px 0;
  background-color: #edf0f4;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1em;
}
#lp-jal #return-ex ul li .ex .ex-name {
  line-height: 1.2;
}
#lp-jal #return-ex ul li .ex dl {
  line-height: 1.4;
}
#lp-jal #return-ex ul li .ex dt {
  text-align: left;
}
#lp-jal #return-ex ul li .ex dd {
  text-align: right;
  font-size: 1.7em;
  margin-bottom: 0.3em;
}
#lp-jal #return-ex #wat-sell {
  text-align: center;
}
#lp-jal #return-ex #wat-sell #formula {
  background-color: #48549e;
  font-weight: bold;
  color: white;
  font-size: 1.2em;
}
#lp-jal #return-ex #wat-sell #formula br {
  display: none;
}
#lp-jal .cam-lp {
  background-color: #f9faf4;
}
#lp-jal .cam-lp #cam-hd {
  color: #ED1C24;
}
#lp-jal #lp-data h2 {
  color: #48549e;
}
#lp-jal #lp-data #data ul {
  padding: 0;
}
#lp-jal #lp-data #data li {
  border: 5px solid #48549e;
}
#lp-jal #lp-data #data li h3 {
  color: #48549e;
}
#lp-jal #qa dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-jal #qa .qa-wrap {
  width: 32%;
  border: 3px solid #ED1C24;
  margin-bottom: 2%;
  background-color: white;
}
#lp-jal #qa .qa-wrap dt {
  background-color: #ED1C24;
  padding: 5px 5px 5px 1.8em;
  color: white;
  position: relative;
}
#lp-jal #qa .qa-wrap dt:before {
  content: "Q.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
}
#lp-jal #qa .qa-wrap dd {
  padding: 5px 5px 5px 1.8em;
  text-align: left;
  position: relative;
  font-size: 0.9em;
}
#lp-jal #qa .qa-wrap dd:before {
  content: "A.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 1.1em;
}
#lp-jal #ps {
  background: url(/img/hd/hd_green.jpg) center top no-repeat;
  background-size: cover;
  color: white;
}
#lp-jal #ps #ps-bk {
  background-color: rgba(0, 0, 0, 0.5);
}
#lp-jal #ps h2 {
  color: white;
}
#lp-jal #ps h2 img {
  width: 100px;
  margin: 0 auto 4px;
}
#lp-jal footer {
  color: #333333;
}
@media screen and (max-width: 959px) {
  #lp-jal h2 {
    font-size: 1.5em;
  }
  #lp-jal h3 {
    font-size: 1.2em;
  }
  #lp-jal #sell-wat .flex {
    justify-content: center;
  }
  #lp-jal #sell-wat #wat-main {
    max-width: 600px;
    margin: 0 auto;
  }
  #lp-jal #sell-wat #wat-catch {
    width: 31%;
    font-size: 1em;
  }
  #lp-jal #sell-wat p {
    font-size: 0.9em;
    font-weight: normal;
  }
  #lp-jal #sell-wat #wat-text {
    width: 100%;
  }
  #lp-jal #guarantee li h3 {
    font-size: 1em;
  }
  #lp-jal #return-ex ul li {
    padding-bottom: 5%;
  }
  #lp-jal #return-ex ul li .ex {
    width: 230px;
    height: 230px;
    padding: 35px 15px 0;
    font-size: 0.8em;
  }
  #lp-jal #qa .qa-wrap {
    width: 49%;
  }
}
@media screen and (max-width: 720px) {
  #lp-jal #mv #mv-text h1 {
    font-size: 1.8em;
  }
  #lp-jal #compare table {
    max-width: 500px;
    margin: 0 auto 50px;
  }
  #lp-jal #compare table tbody {
    display: block;
  }
  #lp-jal #compare table #thead {
    display: none;
  }
  #lp-jal #compare table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #999999;
  }
  #lp-jal #compare table th {
    width: 100%;
  }
  #lp-jal #compare table th br {
    display: none;
  }
  #lp-jal #compare table .row td {
    display: inline-block;
    width: 25%;
    font-size: 1em;
    height: 60px;
    border-bottom: none;
  }
  #lp-jal #compare table .row td .sp-hd {
    display: block;
    color: #999999;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #lp-jal #compare table .change-data {
    border-bottom: 1px solid #999999;
  }
  #lp-jal #compare table .change-data th,
#lp-jal #compare table .change-data td {
    border-right: none;
  }
  #lp-jal #step ol {
    max-width: 500px;
    margin: 0 auto;
  }
  #lp-jal #step ol li {
    width: 100%;
    margin: 0 auto 3% !important;
  }
  #lp-jal #model #simulation .img-wrap {
    padding: 10px;
  }
  #lp-jal #model #simulation .img-wrap img {
    padding: 0;
  }
  #lp-jal #model #simulation .simu-hd {
    font-size: 1em;
    padding: 8px 12px;
  }
  #lp-jal #return-ex .wrap-680 {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }
  #lp-jal #return-ex ul li .ex {
    width: 200px;
    height: 200px;
    font-size: 0.65em;
  }
  #lp-jal #return-ex #wat-sell {
    text-align: left;
  }
  #lp-jal #return-ex #wat-sell #formula {
    font-size: 1em;
  }
  #lp-jal #return-ex #wat-sell #formula br {
    display: block;
  }
}
@media screen and (max-width: 680px) {
  #lp-jal #modal-jal #modal-wrap h1 {
    font-size: 1.5em;
  }
  #lp-jal #modal-jal #modal-wrap h1 span {
    display: block;
  }
  #lp-jal #modal-jal #modal-wrap p {
    text-align: left;
  }
  #lp-jal header #jal-logo {
    max-width: 320px;
  }
  #lp-jal #mv {
    padding-bottom: 40px;
  }
  #lp-jal #mv #mv-text {
    width: 100%;
    padding: 100px 0 0;
  }
  #lp-jal #mv #mv-text h1 {
    font-size: 2.5em;
  }
  #lp-jal #mv #mv-mile .pc-img {
    display: none;
  }
  #lp-jal #mv #mv-mile .sp-img {
    display: block;
    max-width: 380px;
    margin: 0 auto;
  }
  #lp-jal #mv #pc-change {
    display: none;
  }
  #lp-jal #sp-change {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  #lp-jal #sp-change #sp-point {
    width: 48%;
    display: block;
  }
  #lp-jal #sp-change #sp-point img {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
  #lp-jal #sp-change #sp-phone {
    width: 48%;
  }
  #lp-jal #intro {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #lp-jal #merit li {
    display: block;
    padding: 15px;
    position: relative;
  }
  #lp-jal #merit li h3 {
    text-align: center;
    position: static;
    padding-left: 0;
  }
  #lp-jal #merit li h3 span.hd-merit {
    top: 15px;
    left: 15px;
  }
  #lp-jal #merit li h3 span.merit-num {
    bottom: auto;
    top: 25px;
    left: 15px;
  }
  #lp-jal #merit .merit-img {
    width: 100%;
    max-width: 240px;
    margin: 3em auto 1em;
  }
  #lp-jal #merit .merit-text {
    width: 100%;
  }
  #lp-jal #merit li.merit-easy {
    padding: 15px;
  }
  #lp-jal #merit li.merit-easy .merit-img {
    margin: 0 auto 1em;
  }
  #lp-jal #structure .flex {
    display: block;
  }
  #lp-jal #structure .img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1em;
  }
  #lp-jal #structure .txt {
    width: 100%;
  }
  #lp-jal #sell-wat h2 .sp-br {
    display: block;
  }
  #lp-jal #sell-wat #wat-main #wat-catch {
    width: 44%;
  }
  #lp-jal #guarantee li {
    width: 100%;
    margin: 0 auto 3%;
  }
  #lp-jal #model #simulation .simu-hd {
    font-size: 0.8em;
  }
  #lp-jal #return-ex ul {
    max-width: 400px;
  }
  #lp-jal #return-ex ul li {
    width: 100%;
    padding-bottom: 45px;
  }
  #lp-jal #return-ex ul li .ex {
    width: 280px;
    height: 280px;
    font-size: 1em;
    margin: 0 auto;
    padding: 35px 15px 0;
  }
  #lp-jal #ps h2 img {
    width: 80px;
  }
}
@media screen and (max-width: 480px) {
  #lp-jal header .logo {
    width: 120px;
  }
  #lp-jal header #jal-logo {
    max-width: 240px;
  }
  #lp-jal #mv #mv-text h1 .sp-br {
    display: block;
  }
  #lp-jal #compare table .row td {
    width: 50%;
  }
  #lp-jal #return-ex {
    padding-bottom: 40px;
  }
  #lp-jal #qa .qa-wrap {
    width: 100%;
  }
  #lp-jal #sell-wat #wat-main #wat-catch {
    width: 100%;
  }
  #lp-jal #step h2 {
    font-size: 1.5em;
  }
  #lp-jal .regist-bk .regist-wrap {
    width: 96%;
    padding: 10px;
  }
  #lp-jal .regist-bk .regist-wrap .regist-jal dt {
    font-size: 0.8em;
  }
  #lp-jal .regist-bk .regist-wrap .regist-jal dt br {
    display: none;
  }
  #lp-jal .regist-bk .regist-wrap .regist-jal dd .btn-jal {
    font-size: 1em;
  }
  #lp-jal .regist-bk p.regist-txt {
    font-size: 0.85em;
  }
}
@media screen and (max-width: 419px) {
  #lp-jal .regist-wrap .btn-lp {
    font-size: 4.7vw;
  }
  #lp-jal header #jal-logo {
    max-width: 170px;
  }
  #lp-jal #compare #summary p {
    font-size: 1.2em;
    padding: 20px 10px;
  }
  #lp-jal #compare #summary p .font-s {
    display: block;
  }
  #lp-jal #model #simulation .simu-hd {
    width: 100%;
  }
  #lp-jal #model #simulation .simu-hd .sp-br {
    display: block;
  }
  #lp-jal #sell-wat h2 {
    font-size: 6vw;
  }
}

/*
*
* Pontaサイト内コンテンツ用ページ
* Pontaランディングページ
*
*/
#docs-ponta .font-main, #lp-ponta .font-main {
  color: #EF8304;
}
#docs-ponta .font-accent, #lp-ponta .font-accent {
  color: red;
}
#docs-ponta .bg-main, #lp-ponta .bg-main {
  background-color: #EF8304;
}
#docs-ponta .bg-sub1, #lp-ponta .bg-sub1 {
  background-color: #FFE98D;
}
#docs-ponta .bg-sub2, #lp-ponta .bg-sub2 {
  background-color: #FFFCDE;
}
#docs-ponta .bg-accent, #lp-ponta .bg-accent {
  background-color: #40220F;
}
#docs-ponta .hd-deco, #lp-ponta .hd-deco {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#docs-ponta .hd-deco:before, #docs-ponta .hd-deco::after, #lp-ponta .hd-deco:before, #lp-ponta .hd-deco::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  margin: 0 8px;
}
#docs-ponta .hd-deco:before, #lp-ponta .hd-deco:before {
  transform: rotate(60deg);
}
#docs-ponta .hd-deco:after, #lp-ponta .hd-deco:after {
  transform: rotate(-60deg);
}
#docs-ponta .add-point, #lp-ponta .add-point {
  max-width: 540px;
}
#docs-ponta .add-point .circle-wrap, #lp-ponta .add-point .circle-wrap {
  background-color: #fff;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}
#docs-ponta .add-point .contents-wrap, #lp-ponta .add-point .contents-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
}
#docs-ponta .add-point .flex-center img, #lp-ponta .add-point .flex-center img {
  max-width: 120px;
  width: 80%;
}
#docs-ponta .add-point .flex-yen, #lp-ponta .add-point .flex-yen {
  line-height: 1.1;
}
#docs-ponta .add-point .font-s, #lp-ponta .add-point .font-s {
  font-size: 0.5em;
}
#docs-ponta #intro .lead, #lp-ponta #intro .lead {
  color: #000;
  text-align: center;
  font-size: 2em;
}
#docs-ponta #intro .lead .font-s, #lp-ponta #intro .lead .font-s {
  font-size: 0.7em;
}
#docs-ponta #intro .lead .font-m, #lp-ponta #intro .lead .font-m {
  font-size: 1.4em;
}
#docs-ponta #intro .lead .font-l, #lp-ponta #intro .lead .font-l {
  font-size: 1.5em;
}
#docs-ponta #intro .add-point, #lp-ponta #intro .add-point {
  margin: auto;
}
#docs-ponta #intro .add-point .circle-wrap, #lp-ponta #intro .add-point .circle-wrap {
  background-color: #EF8304;
  color: #fff;
}
#docs-ponta #intro .renew-energy-note, #lp-ponta #intro .renew-energy-note {
  max-width: 100px;
  margin: auto;
}
#docs-ponta #income .wrap-880, #lp-ponta #income .wrap-880 {
  margin-bottom: 20px;
}
#docs-ponta #income .wrap-880.flex, #lp-ponta #income .wrap-880.flex {
  justify-content: space-between;
  align-items: center;
}
#docs-ponta #income .wrap-880 .flow-wrap, #lp-ponta #income .wrap-880 .flow-wrap {
  width: 37%;
  background-color: white;
  border-radius: 21px;
  border: solid 3px #EF8304;
  padding: 20px;
}
#docs-ponta #income .wrap-880 .flow-wrap img, #lp-ponta #income .wrap-880 .flow-wrap img {
  max-width: 190px;
  width: 100%;
  margin: 0 auto;
}
#docs-ponta #income .wrap-880 .flow-wrap .bg-bk, #lp-ponta #income .wrap-880 .flow-wrap .bg-bk {
  background-color: #000;
  padding: 8px;
  color: white;
  font-size: 1.25em;
  border-radius: 100px;
  margin: 16px auto;
}
#docs-ponta #income .wrap-880 .flow-arrow, #lp-ponta #income .wrap-880 .flow-arrow {
  max-width: 140px;
  width: 100%;
  margin: 20px;
}
#docs-ponta #point-get, #lp-ponta #point-get {
  position: relative;
}
#docs-ponta #point-get::after, #lp-ponta #point-get::after {
  content: "";
  position: absolute;
  background: url(/img/ponta/more.png) no-repeat;
  background-size: contain;
  width: 240px;
  height: 125px;
  left: 0;
  right: 0;
  top: -80px;
  margin: 20px auto;
}
#docs-ponta #point-get .sub-title-text, #lp-ponta #point-get .sub-title-text {
  text-align: center;
}
#docs-ponta #point-get .wrap-560, #lp-ponta #point-get .wrap-560 {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
#docs-ponta #point-get .wrap-560.flex, #lp-ponta #point-get .wrap-560.flex {
  justify-content: space-between;
  align-items: center;
}
#docs-ponta #point-get .wrap-560::after, #lp-ponta #point-get .wrap-560::after {
  content: "";
  position: absolute;
  background: url(/img/ponta/arrow_right.png) no-repeat;
  background-size: contain;
  width: 140px;
  height: 135px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#docs-ponta #point-get .add-point, #lp-ponta #point-get .add-point {
  margin: auto;
}
#docs-ponta #point-get .add-point .circle-wrap, #lp-ponta #point-get .add-point .circle-wrap {
  background-color: #EF8304;
  color: #fff;
}
#docs-ponta #point-get .mile-detail, #lp-ponta #point-get .mile-detail {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
#docs-ponta #point-get .mile-detail ul, #lp-ponta #point-get .mile-detail ul {
  background-color: white;
  padding: 30px;
  padding-left: calc(30px + 1em);
}
#docs-ponta #inquiry, #lp-ponta #inquiry {
  background-color: #40220F;
}
#docs-ponta #inquiry .hd-deco, #lp-ponta #inquiry .hd-deco {
  color: #fff;
}
#docs-ponta #inquiry .hd-deco::before, #docs-ponta #inquiry .hd-deco::after, #lp-ponta #inquiry .hd-deco::before, #lp-ponta #inquiry .hd-deco::after {
  background-color: #fff;
}
#docs-ponta #inquiry .bg-wh, #lp-ponta #inquiry .bg-wh {
  border-radius: 8px;
  width: 100%;
  max-width: 800px;
  margin: auto;
}
#docs-ponta #ps, #lp-ponta #ps {
  background: url(/img/hd/hd_green.jpg) center top no-repeat;
  background-size: cover;
  color: white;
}
#docs-ponta #ps #ps-bk, #lp-ponta #ps #ps-bk {
  background-color: rgba(0, 0, 0, 0.5);
}
#docs-ponta #ps h2, #lp-ponta #ps h2 {
  color: white;
}
#docs-ponta #ps h2 img, #lp-ponta #ps h2 img {
  width: 100px;
  margin: 0 auto 4px;
}
#docs-ponta #contact, #lp-ponta #contact {
  background: #313333;
  color: #ffffff;
}
#docs-ponta #contact .hd-deco::before, #docs-ponta #contact .hd-deco::after, #lp-ponta #contact .hd-deco::before, #lp-ponta #contact .hd-deco::after {
  background-color: #fff;
}
#docs-ponta #contact a, #lp-ponta #contact a {
  color: #ffffff;
}
#docs-ponta #contact h3, #lp-ponta #contact h3 {
  color: #3e3a39;
  background: #ffffff;
  text-align: center;
  padding: 10px;
}
#docs-ponta #contact p, #lp-ponta #contact p {
  margin: 0;
}
#docs-ponta #contact .flex, #lp-ponta #contact .flex {
  justify-content: space-between;
  align-items: center;
}
#docs-ponta #contact #ctw, #lp-ponta #contact #ctw {
  width: 35%;
  max-width: 385px;
  font-size: 16px;
}
#docs-ponta #contact #ctw .lead-text, #lp-ponta #contact #ctw .lead-text {
  color: #FFE900;
  display: flex;
  justify-content: center;
  align-items: center;
}
#docs-ponta #contact #ctw .lead-text::before, #docs-ponta #contact #ctw .lead-text::after, #lp-ponta #contact #ctw .lead-text::before, #lp-ponta #contact #ctw .lead-text::after {
  content: "";
  width: 1em;
  height: 1px;
  background: #FFE900;
}
#docs-ponta #contact #ctw .lead-text::before, #lp-ponta #contact #ctw .lead-text::before {
  transform: rotate(60deg);
}
#docs-ponta #contact #ctw .lead-text::after, #lp-ponta #contact #ctw .lead-text::after {
  transform: rotate(-60deg);
}
#docs-ponta #contact #ctw img, #lp-ponta #contact #ctw img {
  width: 100%;
  margin: 8px 0;
}
#docs-ponta #contact #p-mark, #lp-ponta #contact #p-mark {
  width: 120px;
  height: auto;
  margin: 0 8px 0 auto;
}
#docs-ponta #contact #cs, #lp-ponta #contact #cs {
  width: 455px;
  font-weight: bold;
  border: 1px solid #ffffff;
  border-radius: 16px;
  padding: 1em 0.5em;
}
#docs-ponta #contact #cs #cs-hd, #lp-ponta #contact #cs #cs-hd {
  font-size: 1em;
  text-align: center;
}
#docs-ponta #contact #cs #cs-hd .bg-yellow,
#docs-ponta #contact #cs #cs-hd .frame-yellow, #lp-ponta #contact #cs #cs-hd .bg-yellow,
#lp-ponta #contact #cs #cs-hd .frame-yellow {
  padding-top: 1px;
  border: solid 1px #FFE900;
}
#docs-ponta #contact #cs #cs-hd .bg-yellow, #lp-ponta #contact #cs #cs-hd .bg-yellow {
  background: #FFE900;
  color: #3e3a39;
  width: 60%;
}
#docs-ponta #contact #cs #cs-hd .frame-yellow, #lp-ponta #contact #cs #cs-hd .frame-yellow {
  width: 40%;
}
#docs-ponta #contact #cs #cs-info, #lp-ponta #contact #cs #cs-info {
  padding: 0 3px;
}
#docs-ponta #contact #cs #tel .font-l, #lp-ponta #contact #cs #tel .font-l {
  color: #FFE900;
  font-size: 2em;
}
#docs-ponta #contact #cs #tel .font-l a, #lp-ponta #contact #cs #tel .font-l a {
  color: #FFE900;
  font-weight: bold;
}
#docs-ponta #contact #cs #tel span, #lp-ponta #contact #cs #tel span {
  vertical-align: middle;
}
@media screen and (max-width: 1199px) {
  #docs-ponta #income .wrap-880, #lp-ponta #income .wrap-880 {
    margin-bottom: 60px;
  }
  #docs-ponta #point-get, #lp-ponta #point-get {
    padding-top: 80px;
  }
}
@media screen and (max-width: 880px) {
  #docs-ponta #income .wrap-880, #lp-ponta #income .wrap-880 {
    max-width: 680px;
  }
  #docs-ponta #income .wrap-880 .flow-wrap, #lp-ponta #income .wrap-880 .flow-wrap {
    padding: 10px;
  }
  #docs-ponta #income .wrap-880 .flow-arrow, #lp-ponta #income .wrap-880 .flow-arrow {
    max-width: 140px;
    margin: 0;
  }
}
@media screen and (max-width: 680px) {
  #docs-ponta .add-point, #lp-ponta .add-point {
    flex-direction: column;
  }
  #docs-ponta .add-point .flex-center, #lp-ponta .add-point .flex-center {
    transform: rotate(90deg);
    margin: 20px 0;
  }
  #docs-ponta .add-point .flex-center img, #lp-ponta .add-point .flex-center img {
    max-width: 60px;
  }
  #docs-ponta .add-point .circle-wrap, #lp-ponta .add-point .circle-wrap {
    width: 150px;
    height: 150px;
  }
  #docs-ponta #intro h2, #lp-ponta #intro h2 {
    font-size: 1.4em;
  }
  #docs-ponta #intro .lead, #lp-ponta #intro .lead {
    font-size: 1.5em;
  }
  #docs-ponta #income .wrap-880, #lp-ponta #income .wrap-880 {
    max-width: 460px;
    margin-bottom: 60px;
  }
  #docs-ponta #income .wrap-880 .flow-wrap, #lp-ponta #income .wrap-880 .flow-wrap {
    width: 36%;
  }
  #docs-ponta #income .wrap-880 .flow-wrap img, #lp-ponta #income .wrap-880 .flow-wrap img {
    max-width: 140px;
  }
  #docs-ponta #income .wrap-880 .flow-wrap .bg-bk, #lp-ponta #income .wrap-880 .flow-wrap .bg-bk {
    font-size: 1em;
  }
  #docs-ponta #income .wrap-880 .flow-wrap .text-wrap p:not(.font-s), #lp-ponta #income .wrap-880 .flow-wrap .text-wrap p:not(.font-s) {
    line-height: 1.2;
  }
  #docs-ponta #income .wrap-880 .flow-arrow, #lp-ponta #income .wrap-880 .flow-arrow {
    margin: 10px;
  }
  #docs-ponta #income .wrap-880 .flow-arrow p, #lp-ponta #income .wrap-880 .flow-arrow p {
    font-size: 0.8em;
  }
  #docs-ponta #point-get, #lp-ponta #point-get {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  #docs-ponta #point-get::after, #lp-ponta #point-get::after {
    width: 180px;
    height: 94px;
  }
  #docs-ponta #point-get h2, #lp-ponta #point-get h2 {
    font-size: 1.4em;
  }
  #docs-ponta #point-get .main-text br, #lp-ponta #point-get .main-text br {
    display: none;
  }
  #docs-ponta #point-get .wrap-560::after, #lp-ponta #point-get .wrap-560::after {
    width: 90px;
    height: 80px;
  }
  #docs-ponta #point-get .sub-title-text, #lp-ponta #point-get .sub-title-text {
    text-align: left;
  }
}
#docs-ponta #ps h2 img, #lp-ponta #ps h2 img {
  width: 80px;
}
@media screen and (max-width: 480px) {
  #docs-ponta #intro .lead, #lp-ponta #intro .lead {
    font-size: 4.4vw;
  }
  #docs-ponta #intro .lead .font-s, #lp-ponta #intro .lead .font-s {
    font-size: 0.8em;
  }
  #docs-ponta #income h2 .sp-br, #lp-ponta #income h2 .sp-br {
    display: block;
  }
  #docs-ponta #income .main-text, #lp-ponta #income .main-text {
    text-align: left;
  }
  #docs-ponta #income .main-text br, #lp-ponta #income .main-text br {
    display: none;
  }
  #docs-ponta #income .wrap-880.flex, #lp-ponta #income .wrap-880.flex {
    justify-content: center;
  }
  #docs-ponta #income .wrap-880 .flow-wrap, #lp-ponta #income .wrap-880 .flow-wrap {
    width: 100%;
  }
  #docs-ponta #income .wrap-880 .flow-wrap img, #lp-ponta #income .wrap-880 .flow-wrap img {
    max-width: 190px;
  }
  #docs-ponta #income .wrap-880 .flow-arrow, #lp-ponta #income .wrap-880 .flow-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    margin: 20px;
  }
  #docs-ponta #income .wrap-880 .flow-arrow img, #lp-ponta #income .wrap-880 .flow-arrow img {
    transform: rotate(90deg);
  }
  #docs-ponta #income .wrap-880 .flow-arrow p, #lp-ponta #income .wrap-880 .flow-arrow p {
    margin: 0 auto 10px;
    font-size: 1em;
  }
  #docs-ponta #income .wrap-880 .flow-arrow p br, #lp-ponta #income .wrap-880 .flow-arrow p br {
    display: none;
  }
  #docs-ponta #income .notes1, #lp-ponta #income .notes1 {
    margin: unset;
  }
  #docs-ponta #point-get, #lp-ponta #point-get {
    padding-top: 40px;
  }
  #docs-ponta #point-get h2 .sp-br, #lp-ponta #point-get h2 .sp-br {
    display: block;
  }
  #docs-ponta #point-get .main-text, #lp-ponta #point-get .main-text {
    text-align: left;
  }
  #docs-ponta #point-get .main-text .font-l, #lp-ponta #point-get .main-text .font-l {
    font-size: 1.2em;
  }
  #docs-ponta #point-get .wrap-560, #lp-ponta #point-get .wrap-560 {
    max-width: 300px;
  }
  #docs-ponta #point-get .wrap-560.flex, #lp-ponta #point-get .wrap-560.flex {
    justify-content: center;
  }
  #docs-ponta #point-get .wrap-560::after, #lp-ponta #point-get .wrap-560::after {
    transform: rotate(90deg);
  }
  #docs-ponta #point-get .mile-wrap:first-child, #lp-ponta #point-get .mile-wrap:first-child {
    margin-bottom: 110px;
  }
  #docs-ponta #point-get .mile-detail ul, #lp-ponta #point-get .mile-detail ul {
    padding: 10px;
    padding-left: calc(10px + 1em);
  }
}

#docs-ponta #mv {
  background-color: #EF8304;
}
#docs-ponta #mv .mv-flex {
  max-width: 980px;
  margin: auto;
}
#docs-ponta #mv .mv-text {
  width: 58%;
}
#docs-ponta #mv .mv-logo {
  width: 36%;
  max-width: 340px;
}
#docs-ponta #ponta-form {
  background-color: #EF8304;
}
#docs-ponta #ponta-form .hd-deco {
  color: #fff;
}
#docs-ponta #ponta-form .hd-deco::before, #docs-ponta #ponta-form .hd-deco::after {
  background-color: #fff;
}
#docs-ponta #ponta-form .registration-wrap {
  background-color: #fff;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  margin: auto;
}
#docs-ponta #ponta-form .registration-btn {
  color: #fff;
  display: block;
  background: #40220F;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  max-width: 400px;
  margin: auto;
}
@media screen and (max-width: 880px) {
  #docs-ponta #mv .mv-text, #docs-ponta #mv .mv-logo {
    width: 100%;
    text-align: center;
  }
  #docs-ponta #mv .mv-logo {
    margin-right: 22%;
  }
  #docs-ponta #mv .add-point {
    margin: auto;
  }
}
@media screen and (max-width: 680px) {
  #docs-ponta #mv .mv-text {
    text-align: left;
  }
}
@media screen and (max-width: 480px) {
  #docs-ponta #mv h1 {
    text-align: center;
  }
}

#lp-ponta .hd-font-s {
  font-size: 0.8em;
}
#lp-ponta header img {
  max-height: 60px;
}
#lp-ponta header .logo-ponta {
  margin-right: 18px;
}
#lp-ponta header .logo-wattstore {
  max-width: 180px;
}
#lp-ponta #mv .uk-position-relative {
  max-width: 1100px;
  margin: auto;
}
#lp-ponta #mv .mv-img {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 24%;
  top: 64%;
  width: 100%;
}
#lp-ponta #mv .mv-img img {
  height: 300px;
}
#lp-ponta #mv .mv-text {
  width: 60%;
  padding: 80px 0px;
  margin-left: auto;
}
#lp-ponta #mv .sp-img {
  margin-right: 12px;
}
#lp-ponta .registration-bk {
  background: url(/img/common/bg_ft.jpg) center top no-repeat;
  background-size: cover;
  color: white;
}
#lp-ponta .registration-bk h2 {
  color: white;
  margin-bottom: 10px;
}
#lp-ponta .registration-bk .hd-deco::before, #lp-ponta .registration-bk .hd-deco::after {
  background-color: #fff;
}
#lp-ponta .registration-bk form h2 {
  display: none;
}
#lp-ponta .registration-bk .registration-note {
  max-width: 800px;
  margin: 0 auto 1em;
}
#lp-ponta .registration-bk .registration-wrap {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1em;
  color: #333333;
  border-radius: 15px;
  position: relative;
}
#lp-ponta #movie .movie-img {
  border: 1px solid #dddddd;
  max-width: 400px;
  margin: 0 auto;
}
#lp-ponta #merit li {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  align-items: center;
  margin-bottom: 30px;
}
#lp-ponta #merit .merit-img {
  width: 30%;
  text-align: center;
}
#lp-ponta #merit .merit-text {
  width: 65%;
}
#lp-ponta #merit li.merit-easy {
  padding: 0 15px;
}
#lp-ponta #merit li.merit-easy .merit-img {
  align-self: flex-end;
}
#lp-ponta #merit li.merit-easy .merit-img img {
  max-width: 250px;
  width: 100%;
}
#lp-ponta #merit li.merit-fit,
#lp-ponta #merit li.merit-cost {
  flex-direction: row-reverse;
}
#lp-ponta #merit h3 {
  position: relative;
  padding-left: 2.2em;
}
#lp-ponta #merit h3 span.hd-merit {
  position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 0.5em;
}
#lp-ponta #merit h3 span.merit-num {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.5em;
}
#lp-ponta #compare table {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
#lp-ponta #compare table tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-ponta #compare table tr {
  width: 14.2%;
  border-left: 1px solid #999999;
}
#lp-ponta #compare table th,
#lp-ponta #compare table td {
  display: block;
  padding: 10px 5px;
  border-bottom: 1px solid #999999;
  height: 50px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lp-ponta #compare table th {
  font-size: 0.9em;
  background-color: #EDF0F4;
}
#lp-ponta #compare table .th-top {
  border-top: 1px solid #999999;
}
#lp-ponta #compare table .row td .sp-hd {
  display: none;
}
#lp-ponta #compare table .row td .line-red {
  display: inline;
  background: linear-gradient(transparent 80%, #f33c3d 0%);
}
#lp-ponta #compare table .change-data th {
  border-right: 1px solid #999999;
}
#lp-ponta #compare table .change-data th img {
  max-width: 100px;
  width: 100%;
}
#lp-ponta #compare table .change-data td {
  border-right: 1px solid #999999;
}
#lp-ponta #compare table .change-data td .line-orange {
  display: inline;
  background: linear-gradient(transparent 70%, #fbb03b 0%);
}
#lp-ponta #compare #summary {
  background-color: #EF8304;
  padding: 10px;
  border-radius: 15px;
}
#lp-ponta #compare #summary p {
  background-color: #ffffff;
  padding: 20px;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
}
#lp-ponta #compare #summary p .font-s {
  color: #333333;
}
#lp-ponta #structure .flex {
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#lp-ponta #structure .txt {
  width: 60%;
}
#lp-ponta #structure .img {
  width: 38%;
}
#lp-ponta #guarantee .flex {
  justify-content: space-between;
}
#lp-ponta #guarantee li {
  width: 31%;
  border: 2px solid #EF8304;
  padding: 15px;
  border-radius: 15px;
  background-color: white;
  text-align: center;
  position: relative;
}
#lp-ponta #guarantee li span {
  color: #EF8304;
  font-weight: bold;
  font-size: 2.3em;
  position: absolute;
  top: 15px;
  left: 15px;
}
#lp-ponta #guarantee li h3 {
  margin: 0;
  color: #EF8304;
}
#lp-ponta #guarantee li img {
  max-width: 100px;
  padding: 20px 0;
}
#lp-ponta #guarantee li p {
  text-align: left;
  font-size: 0.9em;
  margin-bottom: 0;
}
#lp-ponta #step ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  margin: 0 auto 50px;
}
#lp-ponta #step ol li {
  width: 31%;
  text-align: center;
  background-color: white;
  border: 2px solid #EF8304;
  border-radius: 10px;
  padding: 10px;
}
#lp-ponta #step ol li h3 {
  font-size: 1em;
  color: #333333;
}
#lp-ponta #step ol li h3 .step {
  color: #333333;
  font-size: 1.2em;
  margin-top: 1em;
}
#lp-ponta #step ol li .step-img {
  max-width: 200px;
  margin: 0 auto;
}
#lp-ponta #step ol li .sup {
  margin: 1em 0 0;
  font-size: 0.6em;
}
#lp-ponta #step ol li:nth-child(2) {
  margin: 0 3.5%;
}
#lp-ponta #model #simulation {
  text-align: center;
}
#lp-ponta #model #simulation .simu-hd {
  display: inline-block;
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
}
#lp-ponta #model #simulation .simu-hd .sp-br {
  display: none;
}
#lp-ponta #model #simulation .img-wrap {
  padding: 30px;
  border: 1px solid #999999;
  background-color: white;
}
#lp-ponta #model #simulation .img-wrap img {
  padding: 30px 20px 0;
}
#lp-ponta #return-ex {
  margin-bottom: 30px;
  padding-bottom: 80px;
}
#lp-ponta #return-ex h2 {
  text-align: center;
}
#lp-ponta #return-ex h3 {
  text-align: center;
}
#lp-ponta #return-ex h3 br {
  display: none;
}
#lp-ponta #return-ex ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
#lp-ponta #return-ex ul li {
  width: 31%;
  text-align: center;
  position: relative;
  padding-bottom: 6%;
}
#lp-ponta #return-ex ul li .ex-man {
  max-width: 150px;
  width: 40%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}
#lp-ponta #return-ex ul li .ex {
  position: relative;
  z-index: 99;
  width: 290px;
  height: 290px;
  padding: 40px 30px 0;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1em;
}
#lp-ponta #return-ex ul li .ex .ex-name {
  line-height: 1.2;
}
#lp-ponta #return-ex ul li .ex dl {
  line-height: 1.4;
}
#lp-ponta #return-ex ul li .ex dt {
  text-align: left;
}
#lp-ponta #return-ex ul li .ex dd {
  text-align: right;
  font-size: 1.7em;
  margin-bottom: 0.3em;
}
#lp-ponta #return-ex #wat-sell {
  text-align: center;
}
#lp-ponta #return-ex #wat-sell #formula {
  background-color: #40220F;
  font-weight: bold;
  color: white;
  font-size: 1.2em;
}
#lp-ponta #return-ex #wat-sell #formula br {
  display: none;
}
#lp-ponta #cam-hd {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#lp-ponta #cam-hd:before, #lp-ponta #cam-hd::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  margin: 0 8px;
}
#lp-ponta #cam-hd:before {
  transform: rotate(60deg);
}
#lp-ponta #cam-hd:after {
  transform: rotate(-60deg);
}
#lp-ponta #lp-data h2 {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#lp-ponta #lp-data h2:before, #lp-ponta #lp-data h2::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  margin: 0 8px;
}
#lp-ponta #lp-data h2:before {
  transform: rotate(60deg);
}
#lp-ponta #lp-data h2:after {
  transform: rotate(-60deg);
}
#lp-ponta #lp-data #data ul {
  padding: 0;
}
#lp-ponta #lp-data #data li {
  border: 5px solid #EF8304;
}
#lp-ponta #lp-data #data li h3 .data-no {
  background: url(/img/ponta/point_bg_ribbon.png);
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff;
}
#lp-ponta #lp-data #data li h3 .data-hd {
  color: #000;
}
#lp-ponta #lp-data #data li img {
  max-width: 180px;
}
#lp-ponta #qa dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#lp-ponta #qa .qa-wrap {
  width: 32%;
  border: 3px solid #EF8304;
  margin-bottom: 2%;
  background-color: white;
}
#lp-ponta #qa .qa-wrap dt {
  background-color: #EF8304;
  padding: 5px 5px 5px 1.8em;
  color: white;
  position: relative;
}
#lp-ponta #qa .qa-wrap dt:before {
  content: "Q.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
}
#lp-ponta #qa .qa-wrap dd {
  padding: 5px 5px 5px 1.8em;
  text-align: left;
  position: relative;
  font-size: 0.9em;
}
#lp-ponta #qa .qa-wrap dd:before {
  content: "A.";
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 1.1em;
}
@media screen and (max-width: 880px) {
  #lp-ponta #mv .mv-img {
    bottom: 4%;
    left: 50%;
  }
  #lp-ponta #mv .mv-text {
    width: 100%;
    padding: 80px 0 360px;
  }
  #lp-ponta #return-ex ul li {
    padding-bottom: 5%;
  }
  #lp-ponta #return-ex ul li .ex {
    width: 230px;
    height: 230px;
    padding: 35px 15px 0;
    font-size: 0.8em;
  }
  #lp-ponta #qa .qa-wrap {
    width: 49%;
  }
  #lp-ponta #contact .container {
    max-width: 576px;
    margin: 0 auto;
  }
  #lp-ponta #contact #ctw,
#lp-ponta #contact #cs {
    width: 100%;
  }
  #lp-ponta #contact #cs {
    margin-top: 20px;
  }
  #lp-ponta #contact #cs #cs-info {
    text-align: center;
    margin-top: 4px;
  }
}
@media screen and (max-width: 720px) {
  #lp-ponta #return-ex .wrap-680 {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }
  #lp-ponta #return-ex ul li .ex {
    width: 200px;
    height: 200px;
    font-size: 0.65em;
  }
  #lp-ponta #return-ex #wat-sell {
    text-align: left;
  }
  #lp-ponta #return-ex #wat-sell #formula {
    font-size: 1em;
  }
  #lp-ponta #return-ex #wat-sell #formula br {
    display: block;
  }
}
@media screen and (max-width: 640px) {
  #lp-ponta header .flex {
    flex-direction: column;
  }
  #lp-ponta header .logo-ponta {
    margin-right: 0;
    margin-bottom: 12px;
  }
  #lp-ponta #mv .mv-img {
    bottom: 14%;
  }
  #lp-ponta #mv .mv-img img {
    height: 240px;
  }
  #lp-ponta #merit li {
    display: block;
    padding: 15px;
    position: relative;
  }
  #lp-ponta #merit li h3 {
    text-align: center;
    position: static;
    padding-left: 0;
  }
  #lp-ponta #merit li h3 span.hd-merit {
    top: 15px;
    left: 15px;
  }
  #lp-ponta #merit li h3 span.merit-num {
    bottom: auto;
    top: 25px;
    left: 15px;
  }
  #lp-ponta #merit .merit-img {
    width: 100%;
    max-width: 240px;
    margin: 3em auto 1em;
  }
  #lp-ponta #merit .merit-text {
    width: 100%;
  }
  #lp-ponta #merit li.merit-easy {
    padding: 15px;
  }
  #lp-ponta #merit li.merit-easy .merit-img {
    margin: 0 auto 1em;
  }
  #lp-ponta #compare table {
    max-width: 500px;
    margin: 0 auto 50px;
  }
  #lp-ponta #compare table tbody {
    display: block;
  }
  #lp-ponta #compare table #thead {
    display: none;
  }
  #lp-ponta #compare table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #999999;
  }
  #lp-ponta #compare table th {
    width: 100%;
  }
  #lp-ponta #compare table th br {
    display: none;
  }
  #lp-ponta #compare table .row td {
    display: inline-block;
    width: 25%;
    font-size: 1em;
    height: 60px;
    border-bottom: none;
  }
  #lp-ponta #compare table .row td .sp-hd {
    display: block;
    color: #999999;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #lp-ponta #compare table .change-data {
    border-bottom: 1px solid #999999;
  }
  #lp-ponta #compare table .change-data th,
#lp-ponta #compare table .change-data td {
    border-right: none;
  }
  #lp-ponta #structure .flex {
    display: block;
  }
  #lp-ponta #structure .img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1em;
  }
  #lp-ponta #structure .txt {
    width: 100%;
  }
  #lp-ponta #guarantee li {
    width: 100%;
    margin: 0 auto 3%;
  }
  #lp-ponta #step ol {
    max-width: 500px;
    margin: 0 auto;
  }
  #lp-ponta #step ol li {
    width: 100%;
    margin: 0 auto 3% !important;
  }
  #lp-ponta #model #simulation .img-wrap {
    padding: 10px;
  }
  #lp-ponta #model #simulation .img-wrap img {
    padding: 0;
  }
  #lp-ponta #model #simulation .simu-hd {
    font-size: 1em;
    padding: 8px 12px;
  }
  #lp-ponta #return-ex h2 {
    text-align: left;
  }
  #lp-ponta #return-ex ul {
    max-width: 400px;
  }
  #lp-ponta #return-ex ul li {
    width: 100%;
    padding-bottom: 45px;
  }
  #lp-ponta #return-ex ul li .ex {
    width: 280px;
    height: 280px;
    font-size: 1em;
    margin: 0 auto;
    padding: 35px 15px 0;
  }
  #lp-ponta #qa .qa-wrap {
    width: 100%;
  }
  #lp-ponta #contact .container {
    max-width: 385px;
    margin: 0 auto;
  }
  #lp-ponta #contact #ctw {
    width: 100%;
    margin-bottom: 1em;
  }
  #lp-ponta #contact #p-mark {
    order: 3;
    margin: 1em auto 0;
  }
  #lp-ponta #contact #cs {
    margin-top: 0;
  }
  #lp-ponta #contact #cs #cs-hd .bg-yellow,
#lp-ponta #contact #cs #cs-hd .frame-yellow {
    width: 100%;
  }
  #lp-ponta #contact #cs #tel .font-l {
    font-size: 1.8em;
  }
}
@media screen and (max-width: 640px) {
  #lp-ponta #compare table .row td {
    width: 50%;
  }
  #lp-ponta #return-ex {
    padding-bottom: 40px;
  }
  #lp-ponta #contact #cs #tel span {
    font-size: 0.8em;
  }
  #lp-ponta #contact #cs #tel .font-l {
    font-size: 1.4em;
  }
}

#ponta-cam-wrap .font-main-ponta {
  color: #EF8304;
}
#ponta-cam-wrap .cam2216-bg {
  background-color: #FFFCDE;
}
#ponta-cam-wrap .font-accent {
  color: #FFF001;
}
#ponta-cam-wrap .bg-accent-text {
  background-color: #FFF001;
  padding: 4px;
}
#ponta-cam-wrap #cam2216-present .frame {
  border: solid 5px #EF8304;
  background-color: #fff;
  margin: 10px auto;
}
#ponta-cam-wrap #cam2216-present .flex {
  justify-content: space-evenly;
}
#ponta-cam-wrap #cam2216-present .flex-left img {
  width: 100%;
  max-width: 110px;
}
#ponta-cam-wrap #cam2216-present .flex-right {
  width: 76%;
  line-height: 1.1;
}
#ponta-cam-wrap #cam2216-present .present-text {
  background-color: #EF8304;
  padding: 10px;
}
#ponta-cam-wrap #cam2216-ex .ex-wrap {
  border-radius: 16px;
}
#ponta-cam-wrap #cam2216-ex .flex {
  align-items: center;
  justify-content: space-evenly;
}
#ponta-cam-wrap #cam2216-ex .flex-left {
  width: 67%;
  max-width: 540px;
}
#ponta-cam-wrap #cam2216-ex .flex-left .flex {
  justify-content: space-between;
}
#ponta-cam-wrap #cam2216-ex .flex-right {
  width: 20%;
}
#ponta-cam-wrap #cam2216-ex .img-arrow {
  margin: 20px 0;
}
#ponta-cam-wrap #cam2216-ex .img-arrow img {
  width: 100%;
  max-width: 200px;
}
#ponta-cam-wrap #cam2216-ex .img-plus {
  margin: 8px;
}
#ponta-cam-wrap #cam2216-ex .img-plus img {
  height: 100%;
  width: 100%;
  max-width: 24px;
}
#ponta-cam-wrap #cam2216-ex .ex-point .ex-point-wrap {
  min-width: 160px;
  width: 34%;
}
#ponta-cam-wrap #cam2216-ex .ex-point .point-title {
  background-color: #40220F;
  color: #fff;
  padding: 4px;
}
#ponta-cam-wrap #cam2216-ex .ex-point .point-text {
  font-size: 1.4em;
  border: 2px solid #40220F;
  padding: 4px;
}
#ponta-cam-wrap #cam2216-ex .hr-ex {
  border-top: 4px solid #40220F;
  margin: 12px 0;
}
#ponta-cam-wrap #cam2216-ex .ex-total-point {
  font-size: 1.4em;
}
@media screen and (max-width: 770px) {
  #ponta-cam-wrap #cam2216-ex .flex-left, #ponta-cam-wrap #cam2216-ex .flex-right {
    width: 100%;
  }
  #ponta-cam-wrap #cam2216-ex .flex-right {
    order: -1;
    margin-bottom: 20px;
  }
  #ponta-cam-wrap #cam2216-ex .flex-right img {
    max-width: 140px;
  }
}
@media screen and (max-width: 640px) {
  #ponta-cam-wrap #cam2216-present .frame {
    position: relative;
    font-size: 0.9em;
  }
  #ponta-cam-wrap #cam2216-present .flex {
    justify-content: start;
  }
  #ponta-cam-wrap #cam2216-present .flex-left {
    width: 17%;
  }
  #ponta-cam-wrap #cam2216-present .flex-right {
    width: 100%;
  }
  #ponta-cam-wrap #cam2216-present .terms-text {
    position: absolute;
    width: 80%;
    top: 8%;
    right: 0;
  }
  #ponta-cam-wrap #cam2216-present .present-text {
    margin-top: 16px;
  }
  #ponta-cam-wrap #cam2216-ex .ex-buy,
#ponta-cam-wrap #cam2216-ex .ex-point {
    flex-direction: column;
  }
}
@media screen and (max-width: 340px) {
  #ponta-cam-wrap #cam2216-present .flex-right {
    font-size: 0.9em;
  }
  #ponta-cam-wrap #cam2216-present .terms-text {
    top: 6%;
  }
}

/*
*
* キャンペーン
*
*/
.js-campaign-cmn {
  display: none;
}

#campaign-index #no-campaign {
  display: none;
}
#campaign-index #no-campaign h2 {
  font-size: 2.3em;
}
#campaign-index #no-campaign img {
  max-width: 416px;
  width: 90%;
}
#campaign-index #cam-open li {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #dddddd;
}
#campaign-index #cam-open li:last-child {
  margin-bottom: 0;
}
#campaign-index #cam-open a.flex {
  justify-content: space-between;
  color: #333333;
}
#campaign-index #cam-open a.flex:hover {
  opacity: 1;
}
#campaign-index #cam-open a.flex:hover h3 {
  text-decoration: underline;
}
#campaign-index #cam-open a.flex:hover .cam-img {
  opacity: 0.8;
}
#campaign-index #cam-open .cam-img {
  width: 35%;
}
#campaign-index #cam-open .cam-img img {
  border: 1px solid #dddddd;
}
#campaign-index #cam-open .cam-text {
  width: 63%;
}
#campaign-index #cam-open .cam-text h3 {
  font-size: 1.5em;
  margin: 0;
  color: #0055b2;
}
#campaign-index #cam-open .cam-text .cam-date {
  display: inline-block;
  border: 1px solid;
  padding: 2px 5px;
}
#campaign-index #cam-open .cam-summary {
  margin-bottom: 0;
}
#campaign-index #cam-close h2 {
  background-color: #0055b2;
  color: #ffffff;
  margin: 0;
  padding: 0.5em 0;
  font-size: 1.5em;
  cursor: pointer;
}
#campaign-index #cam-close h2 span svg {
  width: 1.2em;
}
#campaign-index #cam-close #close-list {
  margin: 0;
}
#campaign-index #cam-close li {
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
}
#campaign-index #cam-close li a {
  color: #333333;
  padding: 1em 0.5em;
  align-items: center;
}
#campaign-index #cam-close li a:hover {
  opacity: 1;
}
#campaign-index #cam-close li a:hover h3 {
  text-decoration: underline;
}
#campaign-index #cam-close li h3 {
  color: #0055b2;
  margin: 0;
  font-size: 1em;
}
#campaign-index #cam-close li p {
  margin: 0;
  font-size: 1em;
}
#campaign-index #cam-close li .open {
  border: 1px solid #dddddd;
  color: #666666;
  padding: 3px 5px;
  margin-right: 1em;
  font-weight: bold;
  width: 5em;
  text-align: center;
}
#campaign-index #cam-close li .end {
  background-color: #dddddd;
  color: #666666;
  padding: 3px 5px;
  margin-right: 1em;
  font-weight: bold;
  width: 5em;
  text-align: center;
}
#campaign-index #cam-close li .term {
  margin-right: 1em;
  font-size: 0.8em;
}
@media screen and (max-width: 768px) {
  #campaign-index #cam-open li .cam-img {
    width: 100%;
  }
  #campaign-index #cam-open li .cam-text {
    width: 100%;
    margin-top: 1em;
  }
  #campaign-index #cam-open li .cam-text h3 {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 640px) {
  #campaign-index #no-campaign h2 {
    font-size: 5vw;
  }
  #campaign-index #cam-close h2 {
    font-size: 1.2em;
  }
}

/*** キャンペーン詳細共通 ***/
#cam-end {
  display: none;
  background-color: #f5f9ff;
  color: #0055b2;
  border-top: 2px solid;
  border-bottom: 2px solid;
  text-align: center;
  font-size: 0.4em;
}

#cam-detail #cam-desc .bg-wh {
  padding: 40px 20px;
}
#cam-detail h2 {
  text-align: center;
  font-size: 2em;
}
#cam-detail dl {
  border-bottom: 1px solid #333333;
  margin: 0;
}
#cam-detail dl .cam-dl {
  border-top: 1px solid #333333;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 10px;
}
#cam-detail dl dt {
  width: 200px;
}
#cam-detail dl dd {
  width: calc(100% - 200px);
  text-align: left;
}
#cam-detail .list-disc {
  list-style: disc;
}
@media screen and (max-width: 640px) {
  #cam-detail #cam-desc .bg-wh {
    padding: 20px 10px;
  }
  #cam-detail dl dt, #cam-detail dl dd {
    width: 100%;
  }
}

/*** 共通 ***/
#cam-cmn h2 {
  text-align: center;
  font-size: 2em;
}
#cam-cmn .hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
#cam-cmn .hd-deco:before, #cam-cmn .hd-deco::after {
  content: "";
  width: 1.4em;
  height: 3px;
  border-radius: 2px;
}
#cam-cmn .hd-deco:before {
  transform: rotate(60deg);
}
#cam-cmn .hd-deco:after {
  transform: rotate(-60deg);
}
#cam-cmn #step ol {
  justify-content: space-between;
}
#cam-cmn #step li {
  width: 32%;
  border-radius: 20px;
  padding: 15px;
}
#cam-cmn #step li h3 {
  text-align: center;
}
#cam-cmn #step li .step-img {
  display: flex;
  align-items: center;
}
#cam-cmn #step li .step-img .img {
  max-width: 200px;
  margin: 0 auto 20px;
}
#cam-cmn .cam-btn {
  display: inline-block;
  text-align: center;
  width: 100%;
  font-weight: bold;
  font-size: 1.4em;
  position: relative;
  cursor: pointer;
  color: #ffffff;
  padding: 10px;
  border-radius: 30px;
  max-width: 400px;
  border: solid 1px;
}
#cam-cmn .cam-btn-buy svg {
  width: 1.4em;
  vertical-align: sub;
}
@media screen and (max-width: 640px) {
  #cam-cmn #step li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #cam-cmn #step li h3 {
    width: 100%;
  }
  #cam-cmn #step li .step-img {
    width: 40%;
    align-items: flex-start;
  }
  #cam-cmn #step li .step-txt {
    width: 55%;
  }
  #cam-cmn #step li:nth-child(2) {
    margin: 2% 0;
  }
}
@media screen and (max-width: 420px) {
  #cam-cmn h2 {
    font-size: 1.5em;
  }
}
#cam-cmn .cam-btn {
  font-size: 1.2em;
}

.cam-lp .btn-m {
  color: #ffffff;
  background-color: #FFA41C;
  border: 1px solid #FFA41C;
  letter-spacing: 0.1em;
}

/***************************************
 ポップアップで表示するキャンペーン用
***************************************/
#cam-pop {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
#cam-pop .flex {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#pop-wrap {
  width: 80%;
  max-width: 1200px;
  position: relative;
}
#pop-wrap #js-close-btn {
  position: absolute;
  top: -1.3em;
  right: -0.1em;
  cursor: pointer;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  transition: 0.5s;
  text-shadow: 1px 1px 2px #666666;
}
#pop-wrap #js-close-btn:before {
  content: "×";
  display: inline-block;
  color: #ffffff;
}
#pop-wrap .btn-cam {
  background-color: #0095ff;
  color: #ffffff;
  border: 1px solid #0095ff;
  font-size: 1.2em;
}
#pop-wrap a:hover .btn-cam {
  background-color: #ffffff;
  color: #0095ff;
}

#fixed-bn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.9);
}
#fixed-bn .bn-wrap {
  max-width: calc(900px + 4em);
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#fixed-bn .bn-wrap a {
  display: inline-block;
  padding: 0;
}
#fixed-bn .bn-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 1em;
  height: 1em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  transition: 0.5s;
  background-color: #000;
}
#fixed-bn .bn-close:before {
  content: "×";
  width: 1em;
  height: 1em;
  display: inline-block;
  color: #ffffff;
}
#fixed-bn .bn-close:hover {
  transform: rotateZ(180deg);
}
#fixed-bn img {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 900px) {
  #pop-wrap {
    width: 90%;
  }
  #pop-wrap h2 {
    font-size: 1em;
  }
  #pop-wrap h2 .font-s {
    font-size: 0.8em;
  }
  #pop-wrap .bn-close {
    top: 0;
    font-size: 1.5em;
    padding: 0;
  }

  #fixed-bn .bn-close {
    top: -1em;
  }
}
@media screen and (max-width: 640px) {
  #pop-wrap .btn-cam {
    font-size: 1.2em;
  }
}
/********************
* 2022年キャンペーン用 *
********************/
/********** 2022年 大決算セール **********/
#campaign-2202 .cam2202-accent {
  color: #d00000;
}
#campaign-2202 .hd-deco::before, #campaign-2202 .hd-deco::after {
  background-color: #000000;
}
#campaign-2202 .cam-btn {
  border-color: #ff6500;
  background-color: #ff6500;
}
#campaign-2202 .cam-btn:hover {
  background-color: white;
  color: #ff6500;
}
#campaign-2202 .cam2202-bg {
  background: url(/img/campaign/2202/cam2202_bg.png);
}
#campaign-2202 #benefit {
  background-color: #ffffd2;
}
#campaign-2202 #benefit .bene-wrap {
  padding-left: 55px;
}
#campaign-2202 #benefit h3 {
  width: 70%;
}
#campaign-2202 #benefit li.bg-wh {
  position: relative;
  border: solid 6px #d00000;
}
#campaign-2202 #benefit li.bg-wh.padding-s {
  padding-left: 7%;
}
#campaign-2202 #benefit li.bg-wh .img-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32%;
  height: 176px;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#campaign-2202 #benefit li.bg-wh .text-wrap {
  width: 60%;
}
#campaign-2202 #benefit li.bg-wh::before {
  content: "";
  position: absolute;
  max-width: 116px;
  min-width: 80px;
  width: 15%;
  height: 100%;
  top: -6px;
  left: -60px;
}
#campaign-2202 #benefit li.bg-wh:nth-child(1) .img-wrap {
  width: 20%;
}
#campaign-2202 #benefit li.bg-wh:nth-child(1) .text-wrap {
  width: 76%;
}
#campaign-2202 #benefit li.bg-wh:nth-child(1) img {
  padding: 20px;
}
#campaign-2202 #benefit li.bg-wh:nth-child(1)::before {
  background: url(/img/campaign/2202/t_1.png) no-repeat;
  background-size: contain;
}
#campaign-2202 #benefit li.bg-wh:nth-child(2)::before {
  background: url(/img/campaign/2202/t_2.png) no-repeat;
  background-size: contain;
}
#campaign-2202 #benefit li.bg-wh:nth-child(3) .img-wrap {
  position: initial;
  max-width: 100%;
  width: 100%;
  height: auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
#campaign-2202 #benefit li.bg-wh:nth-child(3) .img-wrap div {
  width: 48%;
}
#campaign-2202 #benefit li.bg-wh:nth-child(3) .text-wrap {
  width: 100%;
}
#campaign-2202 #benefit li.bg-wh:nth-child(3)::before {
  background: url(/img/campaign/2202/t_3.png) no-repeat;
  background-size: contain;
}
#campaign-2202 #step .sp-img {
  display: none;
}
#campaign-2202 #step li {
  position: relative;
  width: 31%;
  background-color: #fff0f5;
  box-shadow: 0 0 5px rgba(165, 165, 165, 0.75);
  margin: 5px;
}
#campaign-2202 #step .arrow-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-self: center;
  max-width: 150px;
  min-width: 80px;
  width: 50%;
  top: 0;
  bottom: 0;
  right: -32%;
  margin: auto;
  z-index: 1;
}
@media screen and (max-width: 840px) {
  #campaign-2202 #benefit .bene-wrap {
    padding-left: 0;
  }
  #campaign-2202 #benefit li.bg-wh {
    max-width: 640px;
    width: 100%;
    margin: 60px auto 0;
  }
  #campaign-2202 #benefit li.bg-wh.padding-s {
    padding-top: 60px;
    padding-left: 20px;
  }
  #campaign-2202 #benefit li.bg-wh h3 {
    width: 100%;
    font-size: 1.3em;
    text-align: center;
  }
  #campaign-2202 #benefit li.bg-wh .img-wrap {
    position: initial;
    max-width: 350px;
    width: 100%;
    height: auto;
    padding: 0 10px;
  }
  #campaign-2202 #benefit li.bg-wh .text-wrap {
    width: 100%;
  }
  #campaign-2202 #benefit li.bg-wh::before {
    width: 80px;
    height: 80px;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #campaign-2202 #benefit li.bg-wh:nth-child(1) .img-wrap {
    max-width: 176px;
    width: 100%;
  }
  #campaign-2202 #benefit li.bg-wh:nth-child(1) .text-wrap {
    width: 100%;
  }
  #campaign-2202 #benefit li.bg-wh:nth-child(1) img {
    padding: 0;
  }
  #campaign-2202 #step li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #campaign-2202 #step li h3 {
    width: 100%;
  }
  #campaign-2202 #step li .step-img {
    width: 40%;
    align-items: flex-start;
  }
  #campaign-2202 #step li .step-txt {
    width: 55%;
  }
  #campaign-2202 #step li:nth-child(2) {
    margin: 2% 0;
  }
  #campaign-2202 #step .pc-img {
    display: none;
  }
  #campaign-2202 #step .sp-img {
    display: block;
  }
  #campaign-2202 #step .arrow-wrap {
    top: auto;
    bottom: -8%;
    right: 0;
    left: 0;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2202 #benefit li.bg-wh.padding-s {
    padding-left: 10px;
  }
  #campaign-2202 #benefit li.bg-wh:nth-child(3) .img-wrap {
    max-width: 420px;
  }
  #campaign-2202 #benefit li.bg-wh:nth-child(3) .img-wrap div {
    width: 100%;
  }
  #campaign-2202 #step li:nth-child(2) {
    margin-bottom: 10%;
  }
  #campaign-2202 #step .arrow-wrap {
    min-width: 120px;
    width: 40%;
    bottom: -19%;
  }
}

/********** end 2022年 大決算セール **********/
/********** ワットプラス最大8倍キャンペーン **********/
#campaign-2204 {
  /* 共通 */
  /* キャンペーン期間中の特典 */
  /* お得にキャンペーンに参加する方法 */
  /* ワットプラスの特長 */
  /* ステップ */
}
#campaign-2204 .cam2204-font-main {
  color: #002093;
}
#campaign-2204 .cam2204-font-sub {
  color: #ffe700;
}
#campaign-2204 .cam2204-font-accent {
  color: #e80000;
}
#campaign-2204 .cam2204-font-text {
  color: #000000;
}
#campaign-2204 .cam2204-bg {
  background-color: #002093;
}
#campaign-2204 .cam2204-bg-sub {
  background-color: #ffe700;
}
#campaign-2204 .cam2204-bg-accent {
  background-color: #000000;
}
#campaign-2204 .cam2204-bg-accent2 {
  background-color: #e80000;
}
#campaign-2204 .cam2204-contents-hd {
  padding: 1em;
  font-weight: bold;
  font-size: 1.3em;
  line-height: 1.2;
}
#campaign-2204 .cam2204-contents-hd .sub-hd {
  line-height: 1;
  padding: 8px;
}
#campaign-2204 .cam2204-conditions {
  border: solid 4px #000000;
  color: #000000;
  padding: 4px;
  font-weight: normal;
  line-height: 1.2;
}
#campaign-2204 .cam2204-conditions .font-m {
  font-size: 1.2em;
}
#campaign-2204 .cam2204-present .font-l {
  font-size: 5em;
  line-height: 0.8;
  letter-spacing: -2px;
}
#campaign-2204 .cam2204-present p:nth-child(2) {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -2px;
}
#campaign-2204 .cam2204-arrow img {
  max-width: 60px;
  min-width: 30px;
  width: 80%;
  padding: 4px;
  margin-left: 0.5em;
}
#campaign-2204 .cam2204-font-bold {
  -webkit-text-stroke: 2px #e80000;
}
#campaign-2204 .cam-btn {
  border-color: #ff6500;
  background-color: #ff6500;
  color: white;
}
#campaign-2204 .cam-btn:hover {
  background-color: white;
  color: #ff6500;
}
#campaign-2204 .cam-btn:hover .cls-1 {
  fill: #ff6500;
}
#campaign-2204 #benefit .padding-s {
  padding: 20px 30px;
}
#campaign-2204 #benefit .hd-deco {
  color: white;
}
#campaign-2204 #benefit .hd-deco::before, #campaign-2204 #benefit .hd-deco::after {
  background-color: white;
}
#campaign-2204 #benefit .cam2204-wrap {
  width: 49%;
}
#campaign-2204 #benefit .cam2204-catch {
  position: relative;
}
#campaign-2204 #benefit .cam2204-catch::before {
  content: "";
  position: absolute;
  display: block;
  background: url(/img/campaign/2204/mataha.png) no-repeat;
  background-size: contain;
  width: 55px;
  height: 55px;
  top: -33px;
  left: -19px;
}
#campaign-2204 #benefit .cam2204-bene-desc {
  font-size: 1.2em;
  line-height: 1.4;
}
#campaign-2204 #benefit .cam2204-bene-desc .font-m {
  font-size: 1.3em;
}
#campaign-2204 #cam-way h2 {
  color: #000000;
}
#campaign-2204 #cam-way .hd-deco::before, #campaign-2204 #cam-way .hd-deco::after {
  background-color: #000000;
}
#campaign-2204 #cam-way .cam2204-pay-type {
  font-size: 0.8em;
}
#campaign-2204 #cam-way li {
  border: solid 7px #000000;
}
#campaign-2204 #cam-way li:nth-child(1) .cam2204-contents-hd .bg-wh::before {
  background: url(/img/campaign/2204/1.png) no-repeat;
  background-size: contain;
}
#campaign-2204 #cam-way li:nth-child(1) .cam2204-present .font-l {
  font-size: 3.5em;
}
#campaign-2204 #cam-way li:nth-child(1) .cam2204-return-rate {
  width: 10em;
}
#campaign-2204 #cam-way li:nth-child(2) .cam2204-contents-hd .bg-wh::before {
  background: url(/img/campaign/2204/2.png) no-repeat;
  background-size: contain;
}
#campaign-2204 #cam-way li:nth-child(2) .cam2204-present .font-l {
  font-size: 4.5em;
  -webkit-text-stroke: 2px #e80000;
}
#campaign-2204 #cam-way li:nth-child(2) .cam2204-return-rate {
  width: 10.5em;
}
#campaign-2204 #cam-way li:nth-child(3) .cam2204-contents-hd .bg-wh::before {
  background: url(/img/campaign/2204/3.png) no-repeat;
  background-size: contain;
}
#campaign-2204 #cam-way li:nth-child(3) .cam2204-present {
  padding-top: 0.5em;
}
#campaign-2204 #cam-way li:nth-child(3) .cam2204-present .font-l {
  font-size: 5.5em;
  -webkit-text-stroke: 3px #e80000;
  margin-right: 4px;
}
#campaign-2204 #cam-way li:nth-child(3) .cam2204-return-rate {
  width: 15em;
}
#campaign-2204 #cam-way .cam2204-contents-hd .bg-wh {
  position: relative;
}
#campaign-2204 #cam-way .cam2204-contents-hd .bg-wh::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  top: -40px;
  left: -85px;
}
#campaign-2204 #cam-way .cam2204-contents-inner .cam2204-contents-left {
  width: 60%;
  justify-content: space-between;
}
#campaign-2204 #cam-way .cam2204-contents-inner .cam2204-contents-right {
  width: 28%;
}
#campaign-2204 #cam-way .contents-wrap {
  width: 32%;
  border: solid 4px #000000;
}
#campaign-2204 #cam-way .contents-wrap.accent {
  border-color: #e80000;
}
#campaign-2204 #cam-way .contents-wrap .cam2204-contents-hd {
  font-weight: normal;
  padding: 4px;
  font-size: 1em;
}
#campaign-2204 #cam-way .contents-wrap dd {
  padding: 4px;
  line-height: 1.3;
}
#campaign-2204 #watplus {
  /* ワットプラスの使い方 */
}
#campaign-2204 #watplus h2 {
  color: #000000;
}
#campaign-2204 #watplus .hd-deco::before, #campaign-2204 #watplus .hd-deco::after {
  background-color: #000000;
}
#campaign-2204 #watplus .marker-yellow {
  background: linear-gradient(transparent 45%, #ffe700 0%);
}
#campaign-2204 #watplus .frame-wrap {
  position: relative;
  width: 32%;
  border: solid 3px #002093;
  background-color: white;
}
#campaign-2204 #watplus .frame-wrap .point-hd {
  position: absolute;
  color: white;
  width: 6em;
  text-align: center;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
  line-height: 1;
  padding: 0.5em 1em;
}
#campaign-2204 #watplus .text-wrap {
  padding-top: 1.5em;
}
#campaign-2204 #watplus .notes2 {
  padding-left: 8em;
}
#campaign-2204 #watplus #cam2204-use {
  padding: 40px 20px;
}
#campaign-2204 #watplus #cam2204-use h2 {
  color: white;
}
#campaign-2204 #step {
  background: url(/img/campaign/2204/cam2204_bg.png);
}
#campaign-2204 #step .hd-deco::before, #campaign-2204 #step .hd-deco::after {
  background-color: white;
}
#campaign-2204 #cam-detail h2 {
  color: #000000;
}
@media screen and (max-width: 960px) {
  #campaign-2204 .cam2204-contents-hd {
    padding: 10px;
  }
  #campaign-2204 #benefit ol {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  #campaign-2204 #benefit .cam2204-wrap {
    width: 100%;
  }
  #campaign-2204 #benefit .cam2204-contents-inner {
    align-items: center;
  }
  #campaign-2204 #cam-way ol {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  #campaign-2204 #cam-way .cam2204-contents-hd .bg-wh {
    display: block;
    width: 6em;
    margin: 0 auto;
    padding: 4px;
    margin-bottom: 8px;
  }
  #campaign-2204 #cam-way .cam2204-contents-hd .bg-wh::before {
    top: -44px;
  }
  #campaign-2204 #cam-way .cam2204-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
  #campaign-2204 #cam-way dd.bg-wh {
    flex-direction: column;
  }
  #campaign-2204 #cam-way .cam2204-contents-inner .cam2204-contents-left {
    width: 100%;
  }
  #campaign-2204 #cam-way .cam2204-contents-inner .cam2204-contents-right {
    width: initial;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2204 .cam2204-contents-hd {
    line-height: 1.2;
  }
  #campaign-2204 .cam2204-contents-hd .sub-hd {
    padding: 4px;
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 8px;
  }
  #campaign-2204 #benefit .padding-s {
    padding: 10px;
  }
  #campaign-2204 #watplus .frame-wrap {
    width: 100%;
  }
  #campaign-2204 #watplus .notes2 {
    padding-left: 0;
    padding-top: 1.8em;
    margin-top: 1em;
  }
  #campaign-2204 #watplus #cam2204-use {
    padding: 20px 10px;
  }
}
@media screen and (max-width: 480px) {
  #campaign-2204 .cam2204-contents-hd {
    font-size: 1.2em;
  }
  #campaign-2204 .cam2204-conditions {
    width: 100%;
    padding: 4px;
  }
  #campaign-2204 .cam2204-arrow {
    transform: rotate(90deg);
  }
  #campaign-2204 .cam2204-arrow img {
    margin-left: 0;
  }
  #campaign-2204 #benefit .cam2204-contents-inner > div {
    flex-direction: column;
  }
  #campaign-2204 #benefit .cam2204-bene-desc {
    font-size: 1em;
  }
  #campaign-2204 #benefit h4 {
    font-size: 1em;
  }
  #campaign-2204 #cam-way li .cam2204-contents-hd .bg-wh::before {
    width: 60px;
    top: -30px;
    left: -65px;
  }
  #campaign-2204 #cam-way .cam2204-contents-left {
    flex-direction: column;
  }
  #campaign-2204 #cam-way .contents-wrap {
    width: 100%;
    margin-bottom: 4px;
  }
}

/******** end ワットプラス最大8倍キャンペーン ********/
/********** 春の分散投資キャンペーン **********/
#campaign-2205 .bg-pink1 {
  background-color: #FFEEF7;
}
#campaign-2205 .bg-pink2 {
  background-color: #FF3993;
}
#campaign-2205 .font-pink {
  color: #FF3993;
}
#campaign-2205 #intro h2 {
  font-size: 1.9em;
}
#campaign-2205 #explanation .return .frame-return {
  border: solid 5px #FF3993;
}
#campaign-2205 #explanation .return #method.padding-s {
  padding-top: 30px;
}
#campaign-2205 #explanation .return #method #movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2205 #explanation .return #method #movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#campaign-2205 #structure .width-res {
  width: 600px;
}
#campaign-2205 #structure .detail-wrap .text-reduction {
  font-size: 1.4em;
}
#campaign-2205 #structure .detail-wrap .ex-3-text {
  font-size: 1.8em;
  max-width: 230px;
  width: 100%;
}
#campaign-2205 #facilities .btn-l {
  max-width: 320px;
  min-width: auto;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 50px;
  font-size: 1.3em;
}
#campaign-2205 #facilities .btn-l svg {
  width: 1.2em;
  vertical-align: sub;
}
#campaign-2205 #facilities .btn-l svg .cls-1 {
  fill: white;
}
#campaign-2205 #facilities .btn-l:hover {
  background-color: white;
  color: #FF6F3D;
  opacity: 1;
}
#campaign-2205 #facilities .btn-l:hover svg .cls-1 {
  fill: #FF6F3D;
}
@media screen and (max-width: 1160px) {
  #campaign-2205 #facilities {
    padding: 30px 0 0;
  }
  #campaign-2205 #structure .width-res {
    width: auto;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2205 #intro .intro-flex .text-wrap h2 {
    text-align: left !important;
  }
  #campaign-2205 #facilities .btn-l {
    max-width: 280px;
    font-size: 1em;
  }
}
@media screen and (max-width: 480px) {
  #campaign-2205 h2 {
    font-size: 1.5em;
  }
  #campaign-2205 #intro h2 {
    font-size: 1.5em;
  }
  #campaign-2205 #explanation .return .frame-return {
    padding: 24px 10px;
  }
  #campaign-2205 #structure .structure-title-font-res {
    font-size: 1.5em !important;
  }
}

/******** end 春の分散投資キャンペーン ********/
/********** ANAのマイルキャンペーン 2022 春 **********/
#campaign-2206 .wrap-840 {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
#campaign-2206 .sp-br {
  display: none;
}
#campaign-2206 .font-m {
  font-size: 1.3em;
}
#campaign-2206 .font-black {
  color: #000;
}
#campaign-2206 .font-accent {
  color: #FEFF00;
}
#campaign-2206 .cam2206-attention {
  color: #ED1C24;
}
#campaign-2206 .font-white {
  color: #fff;
}
#campaign-2206 .font-black {
  color: #000;
}
#campaign-2206 .bg-main {
  background-color: #0075C2;
}
#campaign-2206 .bg-secondary {
  background: #E5F3FF;
}
#campaign-2206 .hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
#campaign-2206 .hd-deco:before, #campaign-2206 .hd-deco::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
}
#campaign-2206 .hd-deco:before {
  transform: rotate(60deg);
}
#campaign-2206 .hd-deco:after {
  transform: rotate(-60deg);
}
#campaign-2206 #terms {
  position: relative;
}
#campaign-2206 #terms .terms-hd {
  text-align: center;
}
#campaign-2206 #terms .frame {
  border: solid 5px #0075C2;
  background-color: #fff;
  margin: 10px auto;
}
#campaign-2206 #terms .frame .flex {
  justify-content: space-between;
  align-items: center;
}
#campaign-2206 #terms .sub-hd {
  width: 130px;
  height: 130px;
  background-color: #000;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1;
  font-size: 3em;
  padding: 30px 4px 4px;
}
#campaign-2206 #terms .sub-hd span {
  display: block;
}
#campaign-2206 #terms .sub-hd .font-s {
  font-size: 0.4em;
}
#campaign-2206 #terms .text-wrap {
  width: 80%;
  font-weight: bold;
}
#campaign-2206 #terms .text-wrap .terms-text {
  color: #000;
}
#campaign-2206 #terms .text-wrap .font-m {
  font-size: 1.6em;
}
#campaign-2206 #terms .text-wrap .font-s {
  font-size: 0.6em;
}
#campaign-2206 #terms .text-wrap .label {
  background-color: #0075C2;
  line-height: 1.3;
  margin-top: 5px;
  padding: 10px;
}
#campaign-2206 #terms .title-wrap {
  max-width: 840px;
  margin: auto;
}
#campaign-2206 #add-mile {
  position: relative;
}
#campaign-2206 #add-mile::before {
  content: "";
  position: absolute;
  background: url(/img/campaign/common/arrow_more_blk.png) no-repeat;
  background-size: contain;
  width: 400px;
  height: 120px;
  left: 0;
  right: 0;
  top: -70px;
  margin: auto;
}
#campaign-2206 #add-mile .flex {
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
#campaign-2206 #add-mile .flex .mile-wrap {
  width: 280px;
  height: 280px;
  background-color: #FEFF00;
  border-radius: 50%;
}
#campaign-2206 #add-mile .flex .mile-wrap .wh {
  max-width: 185px;
  width: 100%;
  font-weight: bold;
  font-size: 1.5em;
  background-color: #fff;
  color: #0075C2;
  border-radius: 20px;
  padding: 2px 4px;
  margin: 2.5em auto 5px;
}
#campaign-2206 #add-mile .flex .mile-wrap .yen {
  position: relative;
}
#campaign-2206 #add-mile .flex .mile-wrap .yen::before {
  content: "(税込)";
  position: absolute;
  font-size: 0.4em;
  top: -1.3em;
  left: -0.2em;
  white-space: nowrap;
}
#campaign-2206 #add-mile .flex .mile-arrow {
  width: 130px;
}
#campaign-2206 #add-mile .flex .position-r {
  margin-top: 0;
  font-weight: bold;
}
#campaign-2206 #add-mile .flex .position-r .font-l {
  font-size: 5em;
  line-height: 1.3em;
}
#campaign-2206 #add-mile .flex .position-r .font-m {
  font-size: 2.5em;
}
#campaign-2206 #add-mile a.icon-tri {
  color: #000;
}
#campaign-2206 #add-mile a.icon-tri::before {
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #0B308A;
}
#campaign-2206 #add-mile #mile-wh {
  background-color: #000;
  color: white;
}
#campaign-2206 #ex .lead-text {
  text-align: center;
}
#campaign-2206 #ex .text-wrap {
  width: 78%;
  font-weight: bold;
  margin: auto;
}
#campaign-2206 #ex .text-wrap .font-l {
  font-size: 2em;
}
#campaign-2206 #ex .text-wrap .add-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 10px;
  line-height: 1.2;
  border-bottom: solid 5px #000;
}
#campaign-2206 #ex .text-wrap .add-wrap span {
  display: block;
  font-weight: normal;
  font-size: 0.6em;
}
#campaign-2206 #ex .text-wrap .add-wrap .bg-black {
  background-color: #000;
  padding: 4px;
  margin-bottom: 4px;
}
#campaign-2206 #ex .text-wrap .add-wrap .plus {
  font-size: 2em;
  line-height: 1;
  margin: 0;
}
#campaign-2206 #ex .text-wrap .add-mile, #campaign-2206 #ex .text-wrap .total-wrap {
  margin: 0;
}
#campaign-2206 #ex .text-wrap .total-wrap .font-pink {
  color: #ED1C24;
  font-size: 1.8em;
}
#campaign-2206 #ex .text-wrap .add-mile .font-s {
  font-size: 0.6em;
}
#campaign-2206 #ex .img-wrap {
  width: 20%;
}
#campaign-2206 #ex #ex-conditions .ex-conditions-text-layout {
  padding: 4px 16px;
  margin: 8px;
}
#campaign-2206 #ex #ex-conditions .img-plus {
  width: 28px;
  margin: 8px;
}
#campaign-2206 #ex #ex-conditions .padding-top-zero {
  padding-top: 0px;
}
#campaign-2206 #ex #ex-conditions .total {
  font-size: 1.2em;
}
#campaign-2206 #ex #ex-conditions .flex-center {
  justify-content: center;
  align-items: center;
}
#campaign-2206 #ex #ex-conditions .img-arrow {
  width: 56px;
  margin: auto;
}
#campaign-2206 #ex #ex-conditions .img-arrow img {
  transform: rotate(90deg);
}
#campaign-2206 #ex #ex-conditions .img-present {
  width: 135px;
}
#campaign-2206 #step li {
  background-color: #E5F3FF;
}
#campaign-2206 #step li h3 {
  color: #0075C2;
}
#campaign-2206 #step #amc-form {
  text-align: center;
  background-color: #0B308A;
}
#campaign-2206 #step #amc-form #amc-bk {
  background: url(/img/campaign/triple/bk_plane.png) right 20px top 20px no-repeat;
  background-size: 120px auto;
  color: #fff;
}
#campaign-2206 #step #amc-form #amc-bk h2 {
  color: #fff;
  margin-bottom: 20px;
}
#campaign-2206 #step #amc-form #amc-bk #amc-text {
  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#campaign-2206 #step #amc-form .flex {
  justify-content: space-between;
}
#campaign-2206 #step #amc-form .amc-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  color: #333;
  font-weight: bold;
  padding: 20px;
}
#campaign-2206 #step #amc-form .amc-wrap p {
  margin-bottom: 10px;
}
#campaign-2206 #step #amc-form .amc-wrap.amc-regist {
  width: 58%;
}
#campaign-2206 #step #amc-form .cam-btn {
  position: relative;
  display: inline-block;
  max-width: 520px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  border-radius: 10px;
  padding: 10px 10px 7px;
  cursor: pointer;
  background-color: #3173EF;
}
#campaign-2206 #cam-detail {
  background-color: #000;
}
#campaign-2206 #cam-detail dl {
  border-bottom: 1px solid #000;
  color: #000;
}
#campaign-2206 #cam-detail dl .cam-dl {
  border-top: 1px solid #000;
}
#campaign-2206 #cam-detail .inquiry-wrap {
  border: solid 1px;
  border-radius: 4px;
  padding: 16px;
}
@media screen and (max-width: 840px) {
  #campaign-2206 #terms .wrap-840 {
    max-width: 600px;
  }
  #campaign-2206 #terms .terms-hd {
    font-size: 3.8vw;
  }
  #campaign-2206 #terms .frame {
    padding: 10px;
  }
  #campaign-2206 #terms .sub-hd {
    font-size: 2.5em;
    width: 80px;
    height: 80px;
    padding: 13px 4px 4px;
  }
  #campaign-2206 #terms .text-wrap {
    width: 84%;
  }
  #campaign-2206 #terms .text-wrap .font-m {
    font-size: 1.4em;
  }
  #campaign-2206 #terms .text-wrap .label {
    font-size: 1.5em;
  }
  #campaign-2206 #add-mile .wrap-840 {
    max-width: 640px;
  }
  #campaign-2206 #add-mile .flex .mile-wrap {
    width: 230px;
    height: 230px;
  }
  #campaign-2206 #add-mile .flex .mile-arrow {
    width: 100px;
  }
  #campaign-2206 #add-mile .flex .wh {
    font-size: 1.3em;
  }
  #campaign-2206 #add-mile .flex .position-r .font-l {
    font-size: 4em;
  }
  #campaign-2206 #ex .lead-text {
    font-size: 3vw;
  }
  #campaign-2206 #ex .text-wrap .total-wrap {
    font-size: 2vw;
  }
  #campaign-2206 #step #amc-form .amc-wrap.amc-regist {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2206 h2 {
    font-size: 1.5em;
  }
  #campaign-2206 .padding-s {
    padding: 10px;
  }
  #campaign-2206 #terms .sub-hd {
    width: 60px;
    height: 60px;
    font-size: 2em;
    padding: 8px 4px 4px;
  }
  #campaign-2206 #terms .flex {
    position: relative;
  }
  #campaign-2206 #terms .flex .text-wrap {
    width: 100%;
    margin-top: 10px;
  }
  #campaign-2206 #terms .flex .text-wrap .sp-br {
    display: block;
  }
  #campaign-2206 #terms .flex .text-wrap .terms-text {
    position: absolute;
    font-size: 3.8vw;
    top: 0;
    left: 68px;
  }
  #campaign-2206 #terms .flex .text-wrap .label {
    font-size: 1.8em;
  }
  #campaign-2206 #add-mile::before {
    width: 280px;
    height: 84px;
    top: -58px;
  }
  #campaign-2206 #add-mile .wrap-840 {
    max-width: 520px;
  }
  #campaign-2206 #add-mile .flex .mile-wrap {
    width: 200px;
    height: 200px;
  }
  #campaign-2206 #add-mile .flex .mile-wrap .wh {
    font-size: 1em;
    max-width: 130px;
    margin-top: 3em;
  }
  #campaign-2206 #add-mile .flex .mile-wrap .position-r .font-l {
    font-size: 3.5em;
  }
  #campaign-2206 #add-mile .flex .mile-wrap .position-r .font-m {
    font-size: 1.8em;
  }
  #campaign-2206 #add-mile .flex .mile-arrow {
    width: 80px;
  }
  #campaign-2206 #add-mile a.font-m {
    font-size: 1em;
  }
  #campaign-2206 #ex .flex .text-wrap .add-mile .font-s {
    font-size: 2.8vw;
  }
  #campaign-2206 #ex .flex .text-wrap .add-wrap .plus {
    font-size: 1.3em;
  }
  #campaign-2206 #ex #ex-conditions .flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 520px) {
  #campaign-2206 .text-left-res {
    text-align: left;
  }
  #campaign-2206 #terms .terms-hd {
    font-size: 1.3em;
  }
  #campaign-2206 #terms .terms-hd br {
    display: none;
  }
  #campaign-2206 #terms .flex .text-wrap .terms-text {
    font-size: 1.3em;
    line-height: 1.3;
  }
  #campaign-2206 #terms .flex .text-wrap .label {
    font-size: 6.4vw;
  }
  #campaign-2206 #add-mile h2 .sp-br {
    display: block;
  }
  #campaign-2206 #add-mile .wrap-840 {
    max-width: 200px;
  }
  #campaign-2206 #add-mile .flex .mile-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  #campaign-2206 #ex .lead-text {
    font-size: 1.2em;
  }
  #campaign-2206 #ex .lead-text br {
    display: none;
  }
  #campaign-2206 #ex .text-wrap {
    width: 100%;
  }
  #campaign-2206 #ex .text-wrap .font-l {
    font-size: 1.2em;
  }
  #campaign-2206 #ex .text-wrap .add-wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  #campaign-2206 #ex .text-wrap .add-wrap p {
    width: 100%;
  }
  #campaign-2206 #ex .text-wrap .add-wrap .plus {
    font-size: 2em;
    margin: 0 10px 10px;
  }
  #campaign-2206 #ex .text-wrap .add-wrap .bg-black {
    max-width: 12em;
    margin: 0 auto;
  }
  #campaign-2206 #ex .text-wrap .add-mile {
    font-size: 1.6em;
  }
  #campaign-2206 #ex .text-wrap .add-mile .font-s {
    font-size: 0.5em;
  }
  #campaign-2206 #ex .text-wrap .total-wrap {
    font-size: 4vw;
  }
  #campaign-2206 #ex #ex-conditions h3 {
    font-size: 1.2em;
  }
  #campaign-2206 #step #amc-form #amc-bk.uk-padding {
    padding: 20px 0;
  }
  #campaign-2206 #step #amc-form #amc-bk #amc-text {
    text-align: left;
  }
  #campaign-2206 #step #amc-form .amc-regist p {
    text-align: left;
  }
  #campaign-2206 #step #amc-form .amc-regist p br {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  #campaign-2206 #terms .flex .text-wrap .terms-text {
    font-size: 1em;
    line-height: 1.5;
    padding-top: 5px;
  }
  #campaign-2206 #terms .font-l {
    font-size: 1.2em;
  }
  #campaign-2206 #add-mile::before {
    width: 240px;
    height: 72px;
    top: -47px;
  }
  #campaign-2206 #ex #ex-conditions .hd-deco::before, #campaign-2206 #ex #ex-conditions .hd-deco::after {
    width: 1.8em;
  }
  #campaign-2206 #step #amc-form #amc-bk h2 {
    font-size: 1.1em;
  }
}

/********** ANAのマイルキャンペーン 2022 春 end **********/
/********** 資産づくりデビュー月間 **********/
#campaign-2207 {
  /* 共通 */
  /* ワット定期購入とは */
  /* キャンペーン説明 */
}
#campaign-2207 .sp-br {
  display: none;
}
#campaign-2207 .cam-btn {
  border-color: #E54056;
  background-color: #E54056;
}
#campaign-2207 .cam-btn:hover {
  background-color: white;
  color: #E54056;
}
#campaign-2207 .hd-deco {
  color: #000000;
  font-size: 1.9em;
}
#campaign-2207 .hd-deco::before, #campaign-2207 .hd-deco::after {
  background-color: #000000;
}
#campaign-2207 .cam2207-font-main {
  color: #192F4F;
}
#campaign-2207 .cam2207-font-bold {
  -webkit-text-stroke: 1px white;
}
#campaign-2207 .cam2207-bg {
  background: url(/img/campaign/2207/bk.png);
}
#campaign-2207 .cam2207-ribbonttl {
  position: relative;
  color: white;
  background-color: #192F4F;
  margin-right: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
  line-height: 80px;
}
#campaign-2207 .cam2207-ribbonttl::before, #campaign-2207 .cam2207-ribbonttl::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  border-top: 40px solid #192F4F;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #192F4F;
  border-left: 20px solid transparent;
}
#campaign-2207 .cam2207-ribbonttl::before {
  right: -20px;
}
#campaign-2207 .cam2207-ribbonttl::after {
  left: -20px;
}
#campaign-2207 .movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2207 .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px #999;
}
#campaign-2207 #subscription #point-list li {
  width: 19%;
  border: solid 3px #00A57B;
}
#campaign-2207 #subscription #point-list li .point-hd {
  color: white;
  background-color: #00A57B;
  padding: 4px 10px;
}
#campaign-2207 #subscription #point-list li .point-hd-num {
  font-style: italic;
  margin-left: 5px;
  vertical-align: -0.1em;
}
#campaign-2207 #subscription #point-list li .font-m {
  font-size: 1.3em;
}
#campaign-2207 #subscription .bottomlink {
  font-size: 1.3em;
  color: #000;
}
#campaign-2207 #subscription .bottomlink > a {
  color: #000;
}
#campaign-2207 #camdesc {
  background-color: #FFF9E1;
}
#campaign-2207 #camdesc .container {
  overflow: visible;
}
#campaign-2207 #camdesc #camdesc-list {
  color: #000;
}
#campaign-2207 #camdesc #camdesc-list .cam-info::after {
  content: "";
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: -3px;
  left: -3px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:not(:last-child) {
  margin-bottom: 30px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(1) {
  border: solid 3px #FFD93B;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(1) .cam-term {
  color: #000000;
  background-color: #FFD93B;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(1) .cam-term-date.cam2207-font-bold {
  -webkit-text-stroke-color: #000000;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(2) {
  border: solid 3px #46C33F;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(2) .cam-term {
  background-color: #46C33F;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(3) {
  border: solid 3px #4E96D0;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(3) .cam-term {
  background-color: #4E96D0;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(4) {
  border: solid 3px #F48337;
}
#campaign-2207 #camdesc #camdesc-list .cam-info:nth-child(4) .cam-term {
  background-color: #F48337;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .font-m {
  font-size: 1.7em;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .font-l {
  font-size: 2.25em;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term {
  position: relative;
  color: white;
  padding: 10px 15px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term .icon-open {
  display: none;
  max-width: 107px;
  position: absolute;
  top: 0;
  left: -20px;
  bottom: 0;
  margin: auto;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-num {
  color: #000000;
  font-size: 1.3em;
  padding: 4px 10px;
  margin-right: 10px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-price {
  color: white;
  background-color: #000;
  padding: 4px 15px;
  margin-right: 10px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-present {
  font-size: 3.5em;
  line-height: 1.2;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-present .price {
  color: #E54056;
  -webkit-text-stroke: 2px #E54056;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-left {
  max-width: 52%;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-left > span:last-child {
  display: block;
}
#campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-middle {
  width: 6.7%;
  max-width: 70px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info.js-open::after {
  display: none;
}
#campaign-2207 #camdesc #camdesc-list .cam-info.js-open .cam-term {
  padding: 10px 15px 10px 110px;
}
#campaign-2207 #camdesc #camdesc-list .cam-info.js-open .cam-term .icon-open {
  display: block;
}
@media screen and (max-width: 960px) {
  #campaign-2207 #subscription #point-list li {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  #campaign-2207 #subscription #point-list li:nth-child(3n) {
    margin-right: 0;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail {
    flex-direction: column;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-left {
    max-width: 100%;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-middle {
    width: 100%;
    text-align: center;
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 640px) {
  #campaign-2207 .sp-br {
    display: block;
  }
  #campaign-2207 #subscription #point-list li {
    width: 48%;
    margin-right: 4%;
  }
  #campaign-2207 #subscription #point-list li:nth-child(3n) {
    margin-right: 4%;
  }
  #campaign-2207 #subscription #point-list li:nth-child(even) {
    margin-right: 0;
  }
  #campaign-2207 #subscription #point-list li .font-m {
    font-size: 1em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .font-m {
    font-size: 1.3em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .font-l {
    font-size: 1.6em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-term .icon-open {
    max-width: 60px;
    left: 0;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-present {
    font-size: 2.2em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-left > span:last-child {
    display: inline;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-detail-middle {
    max-width: 40px;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info.js-open .cam-term {
    padding: 10px 15px 10px 70px;
  }
}
@media screen and (max-width: 480px) {
  #campaign-2207 .cam2207-font-bold {
    -webkit-text-stroke: unset;
  }
  #campaign-2207 .hd-deco {
    font-size: 1.3em;
  }
  #campaign-2207 #subscription .bottomlink {
    font-size: 1em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-num {
    font-size: 1em;
  }
  #campaign-2207 #camdesc #camdesc-list .cam-info .cam-term-date {
    font-size: 1.1em;
  }
}
@media screen and (max-width: 370px) {
  #campaign-2207 h2 {
    font-size: 1.3em;
  }
}

/******** end 資産づくりデビュー月間 ********/
/******** changeを使ってみよう！ ********/
#campaign-2208 .cam2208-main-bg {
  background-color: #15B786;
}
#campaign-2208 .cam2208-sub-bg {
  background-color: #FCF7C0;
}
#campaign-2208 h1, #campaign-2208 h2, #campaign-2208 h3 {
  color: #231816;
}
#campaign-2208 ol {
  padding: 0;
}
#campaign-2208 .hd-deco {
  font-size: 1.9em;
}
#campaign-2208 .hd-deco::before, #campaign-2208 .hd-deco::after {
  background-color: #231816;
}
#campaign-2208 .btn-cam2208-cv {
  background-color: #231816;
  border: solid 2px #231816;
}
#campaign-2208 .btn-cam2208-cv a {
  color: #fff;
  position: relative;
}
#campaign-2208 .btn-cam2208-cv span {
  position: absolute;
  right: 2%;
}
#campaign-2208 .btn-cam2208-cv:hover {
  background-color: #fff;
  color: #231816;
}
#campaign-2208 #intro .text-left {
  width: 48%;
}
#campaign-2208 #intro .img-right {
  width: 40%;
}
#campaign-2208 #intro img {
  max-width: 400px;
  width: 100%;
}
#campaign-2208 #explanation h2 {
  color: #fff;
  background-color: #F62928;
  padding: 10px;
}
#campaign-2208 #explanation .movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2208 #explanation .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px #999;
}
#campaign-2208 #explanation .logo-wrap {
  background-color: #fff;
  padding: 20px;
}
#campaign-2208 #explanation .logo-wrap p {
  color: #fff;
  background-color: #231816;
  text-align: center;
}
#campaign-2208 #explanation .old-logo, #campaign-2208 #explanation .new-logo {
  width: 40%;
}
#campaign-2208 #explanation .old-logo img, #campaign-2208 #explanation .new-logo img {
  width: auto;
  height: 160px;
}
#campaign-2208 #explanation .arrow-center {
  width: 50px;
}
#campaign-2208 #participation h2 {
  color: #fff;
  background-color: #231816;
  padding: 10px;
}
#campaign-2208 #participation li {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  width: 32%;
}
#campaign-2208 #participation li h3 {
  color: #15B786;
}
#campaign-2208 #participation li img {
  max-width: 300px;
  width: 100%;
}
#campaign-2208 #participation .present-wrap {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}
#campaign-2208 #participation .present-wrap img {
  max-width: 200px;
}
#campaign-2208 #question h2 {
  color: #fff;
  background-color: #F62928;
  padding: 10px;
}
#campaign-2208 #question li {
  width: 48%;
  background-color: #fff;
  margin-bottom: 20px;
}
#campaign-2208 #question li h3 {
  font-size: 1em;
  color: #fff;
  background-color: #231816;
  padding: 10px;
}
#campaign-2208 #question li p {
  padding: 10px;
}
@media screen and (max-width: 640px) {
  #campaign-2208 #intro .text-left {
    width: 100%;
    order: 2;
  }
  #campaign-2208 #intro .img-right {
    width: 100%;
    margin-bottom: 20px;
  }
  #campaign-2208 #explanation .logo-wrap {
    flex-direction: column;
  }
  #campaign-2208 #explanation .old-logo, #campaign-2208 #explanation .new-logo {
    width: 100%;
  }
  #campaign-2208 #explanation .old-logo img, #campaign-2208 #explanation .new-logo img {
    height: auto;
    width: 300px;
  }
  #campaign-2208 #explanation .arrow-center {
    transform: rotate(90deg);
  }
  #campaign-2208 #participation li {
    width: 100%;
    margin-bottom: 20px;
  }
  #campaign-2208 #participation .present-wrap {
    text-align: center;
  }
  #campaign-2208 #question li {
    width: 100%;
  }
}

/******** end changeを使ってみよう！ ********/
/********** お得マシマシ銀行振込キャンペーン **********/
#campaign-2209 {
  /* 共通 */
  /* キャンペーン期間中の特典 */
  /* 銀行振り込みがスピーディでおトクに！ */
  /* ワットプラスとは */
}
#campaign-2209 .cam2209-bg {
  background-color: #FDF2F1;
}
#campaign-2209 .hd-black {
  color: white;
  background-color: #231815;
  padding: 8px;
  margin-bottom: 40px;
}
#campaign-2209 .cam-btn .cls-1 {
  fill: white;
}
#campaign-2209 .cam-btn:hover {
  background-color: white;
  color: #ff6500;
}
#campaign-2209 .cam-btn:hover .cls-1 {
  fill: #ff6500;
}
#campaign-2209 .pc-br {
  display: block;
}
#campaign-2209 .sp-br {
  display: none;
}
#campaign-2209 #intro .benefit-badge {
  width: 60px;
}
#campaign-2209 #benefit .benefit-txt {
  font-size: 2rem;
  font-weight: bold;
}
#campaign-2209 #benefit .benefit-txt:not(:first-of-type) {
  -webkit-text-stroke: 1px #333333;
}
#campaign-2209 #benefit .benefit-txt .benefit-badge {
  max-width: 150px;
}
#campaign-2209 #benefit .benefit-content {
  font-size: 2.6rem;
  font-weight: bold;
  min-height: 107px;
  margin-left: 59px;
  background-color: #FFFFE9;
  outline: solid 5px #d00000;
  outline-offset: -5px;
  -webkit-text-stroke: 1px #333333;
}
#campaign-2209 #benefit .benefit-content::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -59px;
  width: 117px;
  height: 100%;
}
#campaign-2209 #benefit .benefit-content:nth-of-type(1)::before {
  background: url(/img/campaign/2202/t_1.png) no-repeat;
  background-size: contain;
}
#campaign-2209 #benefit .benefit-content:nth-of-type(2)::before {
  background: url(/img/campaign/2202/t_2.png) no-repeat;
  background-size: contain;
}
#campaign-2209 #benefit .benefit-txt.flex, #campaign-2209 #benefit .benefit-content.flex {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#campaign-2209 #benefit .benefit-txt .flex, #campaign-2209 #benefit .benefit-content .flex {
  align-items: baseline;
  justify-content: center;
}
#campaign-2209 #benefit .benefit-txt .flex sup, #campaign-2209 #benefit .benefit-content .flex sup {
  font-size: 0.5em;
  top: -1em;
  color: #333333;
  -webkit-text-stroke: 0;
}
#campaign-2209 #benefit .benefit-txt strong, #campaign-2209 #benefit .benefit-content strong {
  color: #d00000;
  -webkit-text-stroke: 2px #d00000;
}
#campaign-2209 #benefit .benefit-txt strong .benefit-num, #campaign-2209 #benefit .benefit-content strong .benefit-num {
  font-size: 70px;
  vertical-align: -4px;
}
#campaign-2209 #benefit .benefit-txt .notes1, #campaign-2209 #benefit .benefit-content .notes1 {
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding-bottom: 20px;
  -webkit-text-stroke: 0;
  line-height: 1.3;
  text-align: left;
}
#campaign-2209 #point-list {
  justify-content: space-between;
}
#campaign-2209 #point-list .point-detail {
  width: 31%;
  padding: 20px 10px;
  border: solid 3px #FF0028;
  border-radius: 21px;
}
#campaign-2209 #point-list .point-detail .hd-wrap {
  flex-wrap: nowrap;
  justify-content: left;
  align-items: center;
  margin-bottom: 20px;
}
#campaign-2209 #point-list .point-detail-img {
  max-width: 80px;
  width: 25.4%;
}
#campaign-2209 #watplus #movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2209 #watplus #movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#campaign-2209 #cam-detail {
  background-color: #d00000;
}
@media screen and (max-width: 1139px) {
  #campaign-2209 #point .point-detail .hd-wrap h3 {
    font-size: 2vw;
  }
}
@media screen and (max-width: 840px) {
  #campaign-2209 #benefit .benefit-txt {
    font-size: 1.6rem;
  }
  #campaign-2209 #benefit .benefit-txt .benefit-badge {
    max-width: 80px;
  }
  #campaign-2209 #benefit .benefit-txt:not(:first-of-type) {
    -webkit-text-stroke: unset;
  }
  #campaign-2209 #benefit .benefit-content {
    font-size: 2.2rem;
  }
  #campaign-2209 #benefit .benefit-txt strong .benefit-num, #campaign-2209 #benefit .benefit-content strong .benefit-num {
    font-size: 50px;
  }
  #campaign-2209 #point-list .point-detail {
    width: 33%;
  }
  #campaign-2209 #point-list .point-detail .hd-wrap h3 {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2209 .pc-br {
    display: none;
  }
  #campaign-2209 .sp-br {
    display: block;
  }
  #campaign-2209 #benefit .benefit-txt .benefit-badge {
    max-width: 100px;
    display: block;
    margin: 0 auto;
  }
  #campaign-2209 #benefit .benefit-content {
    margin-top: 70px;
    margin-bottom: 30px;
    margin-left: 0;
    padding: 30px 20px 20px 20px;
  }
  #campaign-2209 #benefit .benefit-content::before {
    top: -50px;
    left: 0;
    right: 0;
    width: 90px;
    margin: auto;
  }
  #campaign-2209 #benefit .benefit-content .present-txt {
    display: block;
  }
  #campaign-2209 #benefit .benefit-txt, #campaign-2209 #benefit .benefit-content {
    line-height: 1.4;
  }
  #campaign-2209 #benefit .benefit-txt .notes1, #campaign-2209 #benefit .benefit-content .notes1 {
    margin-top: 20px;
    padding-bottom: 0px;
  }
  #campaign-2209 #point-list {
    display: block;
  }
  #campaign-2209 #point-list .point-detail {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
  #campaign-2209 #point-list .point-detail-img {
    max-width: 60px;
    width: 100%;
  }
  #campaign-2209 #point-list .point-detail .hd-wrap {
    margin-bottom: 10px;
  }
  #campaign-2209 #point-list .point-detail .hd-wrap h3 {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 420px) {
  #campaign-2209 #benefit .benefit-content {
    font-size: 1.7rem;
  }
}

/******** end お得マシマシ銀行振込キャンペーン ********/
/********* JAL *********/
#campaign-2210 .wrap-840,
#campaign-2220 .wrap-840 {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
#campaign-2210 .sp-br,
#campaign-2220 .sp-br {
  display: none;
}
#campaign-2210 .paddig-s,
#campaign-2220 .paddig-s {
  padding: 20px;
}
#campaign-2210 .font-m,
#campaign-2220 .font-m {
  font-size: 1.3em;
}
#campaign-2210 .font-black,
#campaign-2220 .font-black {
  color: #000;
}
#campaign-2210 .font-yellow,
#campaign-2220 .font-yellow {
  color: #FFF101;
}
#campaign-2210 .font-accent,
#campaign-2220 .font-accent {
  color: #FFF101;
}
#campaign-2210 .font-red,
#campaign-2220 .font-red {
  color: #ED1C24;
}
#campaign-2210 .font-white,
#campaign-2220 .font-white {
  color: #fff;
}
#campaign-2210 .font-black,
#campaign-2220 .font-black {
  color: #000;
}
#campaign-2210 .bg-main,
#campaign-2220 .bg-main {
  background-color: #FFF101;
}
#campaign-2210 .bg-yellow,
#campaign-2220 .bg-yellow {
  background-color: #FFF101;
}
#campaign-2210 .banner-border,
#campaign-2220 .banner-border {
  border: solid 1px black;
}
#campaign-2210 .hd-deco,
#campaign-2220 .hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
#campaign-2210 .hd-deco:before, #campaign-2210 .hd-deco::after,
#campaign-2220 .hd-deco:before,
#campaign-2220 .hd-deco::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
}
#campaign-2210 .hd-deco:before,
#campaign-2220 .hd-deco:before {
  transform: rotate(60deg);
}
#campaign-2210 .hd-deco:after,
#campaign-2220 .hd-deco:after {
  transform: rotate(-60deg);
}
#campaign-2210 #terms,
#campaign-2220 #terms {
  background-color: #f9faf4;
  position: relative;
}
#campaign-2210 #terms .terms-hd,
#campaign-2220 #terms .terms-hd {
  text-align: center;
}
#campaign-2210 #terms .frame,
#campaign-2220 #terms .frame {
  border: solid 5px #ED1C24;
  background-color: #fff;
  margin: 10px auto;
}
#campaign-2210 #terms .frame .flex,
#campaign-2220 #terms .frame .flex {
  justify-content: space-between;
  align-items: center;
}
#campaign-2210 #terms .sub-hd,
#campaign-2220 #terms .sub-hd {
  width: 130px;
  height: 130px;
  background-color: #000;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1;
  font-size: 3em;
  padding: 30px 4px 4px;
}
#campaign-2210 #terms .sub-hd span,
#campaign-2220 #terms .sub-hd span {
  display: block;
}
#campaign-2210 #terms .sub-hd .font-s,
#campaign-2220 #terms .sub-hd .font-s {
  font-size: 0.4em;
}
#campaign-2210 #terms .img-wrap,
#campaign-2220 #terms .img-wrap {
  width: 17%;
}
#campaign-2210 #terms .text-wrap,
#campaign-2220 #terms .text-wrap {
  width: 80%;
  font-weight: bold;
}
#campaign-2210 #terms .text-wrap .terms-text,
#campaign-2220 #terms .text-wrap .terms-text {
  color: #000;
}
#campaign-2210 #terms .text-wrap .font-m,
#campaign-2220 #terms .text-wrap .font-m {
  font-size: 1.6em;
}
#campaign-2210 #terms .text-wrap .font-s,
#campaign-2220 #terms .text-wrap .font-s {
  font-size: 0.6em;
}
#campaign-2210 #terms .text-wrap .label,
#campaign-2220 #terms .text-wrap .label {
  background-color: #ED1C24;
  line-height: 1.3;
  margin-top: 5px;
  padding: 10px;
}
#campaign-2210 #terms .title-wrap,
#campaign-2220 #terms .title-wrap {
  max-width: 902px;
  margin: auto;
}
#campaign-2210 #add-mile,
#campaign-2220 #add-mile {
  position: relative;
}
#campaign-2210 #add-mile::before,
#campaign-2220 #add-mile::before {
  content: "";
  position: absolute;
  background: url(/img/campaign/common/arrow_more.png) no-repeat;
  background-size: contain;
  width: 400px;
  height: 120px;
  left: 0;
  right: 0;
  top: -70px;
  margin: auto;
}
#campaign-2210 #add-mile .flex,
#campaign-2220 #add-mile .flex {
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
#campaign-2210 #add-mile .flex .mile-wrap,
#campaign-2220 #add-mile .flex .mile-wrap {
  width: 280px;
  height: 280px;
  background-color: #FFF101;
  border-radius: 50%;
}
#campaign-2210 #add-mile .flex .mile-wrap .wh,
#campaign-2220 #add-mile .flex .mile-wrap .wh {
  max-width: 185px;
  width: 100%;
  font-weight: bold;
  font-size: 1.5em;
  background-color: #fff;
  color: #48549e;
  border-radius: 20px;
  padding: 2px 4px;
  margin: 2.5em auto 5px;
}
#campaign-2210 #add-mile .flex .mile-wrap .yen,
#campaign-2220 #add-mile .flex .mile-wrap .yen {
  position: relative;
}
#campaign-2210 #add-mile .flex .mile-wrap .yen::before,
#campaign-2220 #add-mile .flex .mile-wrap .yen::before {
  content: "(税込)";
  position: absolute;
  font-size: 0.4em;
  top: -1.3em;
  left: -0.2em;
  white-space: nowrap;
}
#campaign-2210 #add-mile .flex .mile-arrow,
#campaign-2220 #add-mile .flex .mile-arrow {
  width: 130px;
}
#campaign-2210 #add-mile .flex .bg-white,
#campaign-2220 #add-mile .flex .bg-white {
  font-weight: bold;
  font-size: 1.5em;
  border-radius: 20px;
  max-width: 185px;
  width: 100%;
  padding: 2px 4px;
  margin: 2.5em auto 5px;
}
#campaign-2210 #add-mile .flex .position-r,
#campaign-2220 #add-mile .flex .position-r {
  margin-top: 0;
  font-weight: bold;
}
#campaign-2210 #add-mile .flex .position-r .font-l,
#campaign-2220 #add-mile .flex .position-r .font-l {
  font-size: 5em;
  line-height: 1.3em;
}
#campaign-2210 #add-mile .flex .position-r .font-m,
#campaign-2220 #add-mile .flex .position-r .font-m {
  font-size: 2.5em;
}
#campaign-2210 #add-mile a.icon-tri,
#campaign-2220 #add-mile a.icon-tri {
  color: #000;
}
#campaign-2210 #add-mile a.icon-tri::before,
#campaign-2220 #add-mile a.icon-tri::before {
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ED1C24;
}
#campaign-2210 #add-mile #bg-yellow,
#campaign-2220 #add-mile #bg-yellow {
  background-color: #FFF101;
}
#campaign-2210 #add-mile #mile-wh,
#campaign-2220 #add-mile #mile-wh {
  background-color: #000;
  color: white;
}
#campaign-2210 #ex,
#campaign-2220 #ex {
  background-color: #edf0f4;
}
#campaign-2210 #ex .lead-text,
#campaign-2220 #ex .lead-text {
  text-align: center;
}
#campaign-2210 #ex .ex-wrap,
#campaign-2220 #ex .ex-wrap {
  position: relative;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(8, 91, 153, 0.3);
}
#campaign-2210 #ex .ex-wrap .ex-hd,
#campaign-2220 #ex .ex-wrap .ex-hd {
  position: absolute;
  background-color: #ED1C24;
  font-weight: bold;
  width: 90%;
  padding: 10px;
  border-radius: 30px;
  left: 0;
  right: 0;
  margin: auto;
  top: -1.5em;
}
#campaign-2210 #ex .ex-wrap .ex-hd .font-m,
#campaign-2220 #ex .ex-wrap .ex-hd .font-m {
  font-size: 1.5em;
}
#campaign-2210 #ex .flex,
#campaign-2220 #ex .flex {
  justify-content: space-between;
  padding-top: 40px;
}
#campaign-2210 #ex .flex .img-wrap,
#campaign-2220 #ex .flex .img-wrap {
  width: 20%;
}
#campaign-2210 #ex .text-wrap,
#campaign-2220 #ex .text-wrap {
  width: 78%;
  margin: 0 auto;
  font-weight: bold;
}
#campaign-2210 #ex .text-wrap .font-l,
#campaign-2220 #ex .text-wrap .font-l {
  font-size: 2em;
}
#campaign-2210 #ex .text-wrap .add-wrap,
#campaign-2220 #ex .text-wrap .add-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 10px;
  line-height: 1.2;
  border-bottom: solid 5px #000;
}
#campaign-2210 #ex .text-wrap .add-wrap span,
#campaign-2220 #ex .text-wrap .add-wrap span {
  display: block;
  font-weight: normal;
  font-size: 0.6em;
}
#campaign-2210 #ex .text-wrap .add-wrap .bg-black,
#campaign-2220 #ex .text-wrap .add-wrap .bg-black {
  background-color: #000;
  padding: 4px;
  margin-bottom: 4px;
}
#campaign-2210 #ex .text-wrap .add-wrap .plus,
#campaign-2220 #ex .text-wrap .add-wrap .plus {
  font-size: 2em;
  line-height: 1;
  margin: 0;
}
#campaign-2210 #ex .text-wrap .add-mile, #campaign-2210 #ex .text-wrap .total-wrap,
#campaign-2220 #ex .text-wrap .add-mile,
#campaign-2220 #ex .text-wrap .total-wrap {
  margin: 0;
}
#campaign-2210 #ex .text-wrap .total-wrap .font-pink,
#campaign-2220 #ex .text-wrap .total-wrap .font-pink {
  color: #ED1C24;
  font-size: 1.8em;
}
#campaign-2210 #ex .text-wrap .add-mile .font-s,
#campaign-2220 #ex .text-wrap .add-mile .font-s {
  font-size: 0.6em;
}
#campaign-2210 #ex .text-wrap .add-mile .bg-bk,
#campaign-2220 #ex .text-wrap .add-mile .bg-bk {
  padding: 4px;
}
#campaign-2210 #ex #ex-conditions .ex-conditions-text-layout,
#campaign-2220 #ex #ex-conditions .ex-conditions-text-layout {
  padding: 4px 16px;
  margin: 8px;
}
#campaign-2210 #ex #ex-conditions .img-plus,
#campaign-2220 #ex #ex-conditions .img-plus {
  width: 28px;
  margin: 8px;
}
#campaign-2210 #ex #ex-conditions .padding-top-zero,
#campaign-2220 #ex #ex-conditions .padding-top-zero {
  padding-top: 0px;
}
#campaign-2210 #ex #ex-conditions .total,
#campaign-2220 #ex #ex-conditions .total {
  font-size: 1.2em;
}
#campaign-2210 #ex #ex-conditions .flex-center,
#campaign-2220 #ex #ex-conditions .flex-center {
  justify-content: center;
  align-items: center;
}
#campaign-2210 #ex #ex-conditions .img-arrow,
#campaign-2220 #ex #ex-conditions .img-arrow {
  width: 56px;
  margin: auto;
}
#campaign-2210 #ex #ex-conditions .img-arrow img,
#campaign-2220 #ex #ex-conditions .img-arrow img {
  transform: rotate(90deg);
}
#campaign-2210 #ex #ex-conditions .img-present,
#campaign-2220 #ex #ex-conditions .img-present {
  width: 135px;
}
#campaign-2210 #step li,
#campaign-2220 #step li {
  background-color: #edf0f4;
}
#campaign-2210 #step li h3,
#campaign-2220 #step li h3 {
  color: #ED1C24;
}
#campaign-2210 #step #amc-form,
#campaign-2220 #step #amc-form {
  text-align: center;
  background-color: #ED1C24;
}
#campaign-2210 #step #amc-form #amc-bk,
#campaign-2220 #step #amc-form #amc-bk {
  background: url(/img/campaign/triple/bk_plane.png) right 20px top 20px no-repeat;
  background-size: 120px auto;
  color: #fff;
}
#campaign-2210 #step #amc-form #amc-bk h2,
#campaign-2220 #step #amc-form #amc-bk h2 {
  color: #fff;
  margin-bottom: 20px;
}
#campaign-2210 #step #amc-form #amc-bk #amc-text,
#campaign-2220 #step #amc-form #amc-bk #amc-text {
  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#campaign-2210 #step #amc-form .flex,
#campaign-2220 #step #amc-form .flex {
  justify-content: space-between;
}
#campaign-2210 #step #amc-form .amc-wrap,
#campaign-2220 #step #amc-form .amc-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  color: #333;
  font-weight: bold;
  padding: 20px;
}
#campaign-2210 #step #amc-form .amc-wrap p,
#campaign-2220 #step #amc-form .amc-wrap p {
  margin-bottom: 10px;
}
#campaign-2210 #step #amc-form .amc-wrap.amc-regist,
#campaign-2220 #step #amc-form .amc-wrap.amc-regist {
  width: 58%;
}
#campaign-2210 #step #amc-form .amc-wrap.change-regist,
#campaign-2220 #step #amc-form .amc-wrap.change-regist {
  width: 40%;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}
#campaign-2210 #step #amc-form .amc-wrap.change-regist p,
#campaign-2220 #step #amc-form .amc-wrap.change-regist p {
  width: 100%;
}
#campaign-2210 #step #amc-form .change-regist .cam-btn,
#campaign-2220 #step #amc-form .change-regist .cam-btn {
  background-color: #ea5514;
  max-width: 300px;
}
#campaign-2210 #step #amc-form .cam-btn,
#campaign-2220 #step #amc-form .cam-btn {
  position: relative;
  display: inline-block;
  max-width: 520px;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  border-radius: 10px;
  padding: 10px 10px 7px;
  cursor: pointer;
  background-color: #0095ff;
}
#campaign-2210 #equipments,
#campaign-2220 #equipments {
  background-color: #f9faf4;
}
#campaign-2210 #equipments .cls-1,
#campaign-2220 #equipments .cls-1 {
  fill: white;
}
#campaign-2210 #equipments .btn-cv:hover .cls-1,
#campaign-2220 #equipments .btn-cv:hover .cls-1 {
  fill: #FFA41C;
}
#campaign-2210 #cam-detail,
#campaign-2220 #cam-detail {
  background-color: #000;
}
#campaign-2210 #cam-detail dl,
#campaign-2220 #cam-detail dl {
  border-bottom: 1px solid #000;
  color: #000;
}
#campaign-2210 #cam-detail dl .cam-dl,
#campaign-2220 #cam-detail dl .cam-dl {
  border-top: 1px solid #000;
}
#campaign-2210 #cam-detail .inquiry-wrap,
#campaign-2220 #cam-detail .inquiry-wrap {
  border: solid 1px;
  border-radius: 4px;
  padding: 16px;
}
@media screen and (max-width: 840px) {
  #campaign-2210 #terms .wrap-840,
#campaign-2220 #terms .wrap-840 {
    max-width: 600px;
  }
  #campaign-2210 #terms .terms-hd,
#campaign-2220 #terms .terms-hd {
    font-size: 3.8vw;
  }
  #campaign-2210 #terms .frame,
#campaign-2220 #terms .frame {
    padding: 10px;
  }
  #campaign-2210 #terms .sub-hd,
#campaign-2220 #terms .sub-hd {
    font-size: 2.5em;
    width: 80px;
    height: 80px;
    padding: 13px 4px 4px;
  }
  #campaign-2210 #terms .text-wrap,
#campaign-2220 #terms .text-wrap {
    width: 84%;
  }
  #campaign-2210 #terms .text-wrap .font-m,
#campaign-2220 #terms .text-wrap .font-m {
    font-size: 1.4em;
  }
  #campaign-2210 #terms .text-wrap .label,
#campaign-2220 #terms .text-wrap .label {
    font-size: 1.5em;
  }
  #campaign-2210 #add-mile .wrap-840,
#campaign-2220 #add-mile .wrap-840 {
    max-width: 640px;
  }
  #campaign-2210 #add-mile .flex .mile-wrap,
#campaign-2220 #add-mile .flex .mile-wrap {
    width: 230px;
    height: 230px;
  }
  #campaign-2210 #add-mile .flex .mile-arrow,
#campaign-2220 #add-mile .flex .mile-arrow {
    width: 100px;
  }
  #campaign-2210 #add-mile .flex .wh,
#campaign-2220 #add-mile .flex .wh {
    font-size: 1.3em;
  }
  #campaign-2210 #add-mile .flex .position-r .font-l,
#campaign-2220 #add-mile .flex .position-r .font-l {
    font-size: 4em;
  }
  #campaign-2210 #ex .lead-text,
#campaign-2220 #ex .lead-text {
    font-size: 3vw;
  }
  #campaign-2210 #ex .ex-wrap .ex-hd .font-m,
#campaign-2220 #ex .ex-wrap .ex-hd .font-m {
    font-size: 2.9vw;
  }
  #campaign-2210 #ex .flex .text-wrap .total-wrap,
#campaign-2220 #ex .flex .text-wrap .total-wrap {
    font-size: 2vw;
  }
  #campaign-2210 #step #amc-form .amc-wrap.change-regist,
#campaign-2220 #step #amc-form .amc-wrap.change-regist {
    width: 100%;
    margin-bottom: 10px;
  }
  #campaign-2210 #step #amc-form .amc-wrap.change-regist .cam-btn,
#campaign-2220 #step #amc-form .amc-wrap.change-regist .cam-btn {
    max-width: 100%;
  }
  #campaign-2210 #step #amc-form .amc-wrap.amc-regist,
#campaign-2220 #step #amc-form .amc-wrap.amc-regist {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2210 h2,
#campaign-2220 h2 {
    font-size: 1.5em;
  }
  #campaign-2210 .padding-s,
#campaign-2220 .padding-s {
    padding: 10px;
  }
  #campaign-2210 #terms .sub-hd,
#campaign-2220 #terms .sub-hd {
    width: 60px;
    height: 60px;
    font-size: 2em;
    padding: 8px 4px 4px;
  }
  #campaign-2210 #terms .flex,
#campaign-2220 #terms .flex {
    position: relative;
  }
  #campaign-2210 #terms .flex .text-wrap,
#campaign-2220 #terms .flex .text-wrap {
    width: 100%;
    margin-top: 10px;
  }
  #campaign-2210 #terms .flex .text-wrap .sp-br,
#campaign-2220 #terms .flex .text-wrap .sp-br {
    display: block;
  }
  #campaign-2210 #terms .flex .text-wrap .terms-text,
#campaign-2220 #terms .flex .text-wrap .terms-text {
    position: absolute;
    font-size: 3.8vw;
    top: 0;
    left: 68px;
  }
  #campaign-2210 #terms .flex .text-wrap .label,
#campaign-2220 #terms .flex .text-wrap .label {
    font-size: 1.8em;
  }
  #campaign-2210 #add-mile::before,
#campaign-2220 #add-mile::before {
    width: 280px;
    height: 84px;
    top: -58px;
  }
  #campaign-2210 #add-mile .wrap-840,
#campaign-2220 #add-mile .wrap-840 {
    max-width: 520px;
  }
  #campaign-2210 #add-mile .flex .mile-wrap,
#campaign-2220 #add-mile .flex .mile-wrap {
    width: 200px;
    height: 200px;
  }
  #campaign-2210 #add-mile .flex .mile-wrap .wh,
#campaign-2220 #add-mile .flex .mile-wrap .wh {
    font-size: 1em;
    max-width: 130px;
    margin-top: 3em;
  }
  #campaign-2210 #add-mile .flex .mile-wrap .position-r .font-l,
#campaign-2220 #add-mile .flex .mile-wrap .position-r .font-l {
    font-size: 3.5em;
  }
  #campaign-2210 #add-mile .flex .mile-wrap .position-r .font-m,
#campaign-2220 #add-mile .flex .mile-wrap .position-r .font-m {
    font-size: 1.8em;
  }
  #campaign-2210 #add-mile .flex .mile-arrow,
#campaign-2220 #add-mile .flex .mile-arrow {
    width: 80px;
  }
  #campaign-2210 #add-mile a.font-m,
#campaign-2220 #add-mile a.font-m {
    font-size: 1em;
  }
  #campaign-2210 #ex .flex .text-wrap .add-mile .font-s,
#campaign-2220 #ex .flex .text-wrap .add-mile .font-s {
    font-size: 2.8vw;
  }
  #campaign-2210 #ex .flex .text-wrap .add-wrap .plus,
#campaign-2220 #ex .flex .text-wrap .add-wrap .plus {
    font-size: 1.3em;
  }
  #campaign-2210 #ex #ex-conditions .flex,
#campaign-2220 #ex #ex-conditions .flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 520px) {
  #campaign-2210 .text-left-res,
#campaign-2220 .text-left-res {
    text-align: left;
  }
  #campaign-2210 #terms .terms-hd,
#campaign-2220 #terms .terms-hd {
    font-size: 1.3em;
  }
  #campaign-2210 #terms .terms-hd br,
#campaign-2220 #terms .terms-hd br {
    display: none;
  }
  #campaign-2210 #terms .flex .text-wrap .terms-text,
#campaign-2220 #terms .flex .text-wrap .terms-text {
    font-size: 1.3em;
    line-height: 1.3;
  }
  #campaign-2210 #terms .flex .text-wrap .label,
#campaign-2220 #terms .flex .text-wrap .label {
    font-size: 6.4vw;
  }
  #campaign-2210 #add-mile h2 .sp-br,
#campaign-2220 #add-mile h2 .sp-br {
    display: block;
  }
  #campaign-2210 #add-mile .wrap-840,
#campaign-2220 #add-mile .wrap-840 {
    max-width: 200px;
  }
  #campaign-2210 #add-mile .flex .mile-arrow,
#campaign-2220 #add-mile .flex .mile-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  #campaign-2210 #ex .lead-text,
#campaign-2220 #ex .lead-text {
    font-size: 1.2em;
  }
  #campaign-2210 #ex .lead-text br,
#campaign-2220 #ex .lead-text br {
    display: none;
  }
  #campaign-2210 #ex .ex-wrap .ex-hd,
#campaign-2220 #ex .ex-wrap .ex-hd {
    line-height: 1.2;
  }
  #campaign-2210 #ex .ex-wrap .ex-hd .sp-br,
#campaign-2220 #ex .ex-wrap .ex-hd .sp-br {
    display: block;
  }
  #campaign-2210 #ex .ex-wrap .ex-hd .font-m,
#campaign-2220 #ex .ex-wrap .ex-hd .font-m {
    font-size: 1em;
  }
  #campaign-2210 #ex .flex,
#campaign-2220 #ex .flex {
    flex-direction: column-reverse;
  }
  #campaign-2210 #ex .flex .img-wrap,
#campaign-2220 #ex .flex .img-wrap {
    max-width: 116px;
    width: 100%;
    margin: 20px auto;
  }
  #campaign-2210 #ex .text-wrap,
#campaign-2220 #ex .text-wrap {
    width: 100%;
  }
  #campaign-2210 #ex .text-wrap .font-l,
#campaign-2220 #ex .text-wrap .font-l {
    font-size: 1.2em;
  }
  #campaign-2210 #ex .text-wrap .add-wrap,
#campaign-2220 #ex .text-wrap .add-wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    flex-direction: column;
  }
  #campaign-2210 #ex .text-wrap .add-wrap p,
#campaign-2220 #ex .text-wrap .add-wrap p {
    width: 100%;
    max-width: 240px;
  }
  #campaign-2210 #ex .text-wrap .add-wrap .plus,
#campaign-2220 #ex .text-wrap .add-wrap .plus {
    font-size: 2em;
    margin: 0 10px 10px;
  }
  #campaign-2210 #ex .text-wrap .add-wrap .bg-black,
#campaign-2220 #ex .text-wrap .add-wrap .bg-black {
    max-width: 12em;
    margin: 0 auto;
  }
  #campaign-2210 #ex .text-wrap .add-mile,
#campaign-2220 #ex .text-wrap .add-mile {
    font-size: 1.6em;
  }
  #campaign-2210 #ex .text-wrap .add-mile .font-s,
#campaign-2220 #ex .text-wrap .add-mile .font-s {
    font-size: 0.5em;
  }
  #campaign-2210 #ex .text-wrap .total-wrap,
#campaign-2220 #ex .text-wrap .total-wrap {
    font-size: 4vw;
  }
  #campaign-2210 #ex #ex-conditions h3,
#campaign-2220 #ex #ex-conditions h3 {
    font-size: 1.2em;
  }
  #campaign-2210 #step #amc-form #amc-bk.uk-padding,
#campaign-2220 #step #amc-form #amc-bk.uk-padding {
    padding: 20px 0;
  }
  #campaign-2210 #step #amc-form #amc-bk #amc-text,
#campaign-2220 #step #amc-form #amc-bk #amc-text {
    text-align: left;
  }
  #campaign-2210 #step #amc-form .amc-regist p,
#campaign-2220 #step #amc-form .amc-regist p {
    text-align: left;
  }
  #campaign-2210 #step #amc-form .amc-regist p br,
#campaign-2220 #step #amc-form .amc-regist p br {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  #campaign-2210 #terms .flex .text-wrap .terms-text,
#campaign-2220 #terms .flex .text-wrap .terms-text {
    font-size: 1em;
    line-height: 1.5;
    padding-top: 5px;
  }
  #campaign-2210 #terms .font-l,
#campaign-2220 #terms .font-l {
    font-size: 1.2em;
  }
  #campaign-2210 #add-mile::before,
#campaign-2220 #add-mile::before {
    width: 240px;
    height: 72px;
    top: -47px;
  }
  #campaign-2210 #step #amc-form #amc-bk h2,
#campaign-2220 #step #amc-form #amc-bk h2 {
    font-size: 1.1em;
  }
}

/******* end JAL *******/
/********** みんなで再エネをひろめよう！太陽光発電の日 333チャレンジ **********/
#campaign-2211 {
  /* 共通 */
  /* チャレンジ達成特典 */
  /* 友達紹介 */
  /* キャンペーン詳細 */
}
#campaign-2211 h3 {
  font-size: 1.8rem;
}
#campaign-2211 .cam2211-bg {
  background-color: #fff7c5;
}
#campaign-2211 .cam2211-color {
  color: #ff3200;
}
#campaign-2211 .hd-black {
  color: white;
  background-color: #231815;
  padding: 8px;
  margin-bottom: 40px;
}
#campaign-2211 .hd-deco {
  color: #000000;
  font-size: 1.9em;
  text-align: center;
}
#campaign-2211 .hd-deco::before, #campaign-2211 .hd-deco::after {
  background-color: #000000;
}
#campaign-2211 .cam-btn {
  border: solid 1px #ff6500;
}
#campaign-2211 .cam-btn .cls-1 {
  fill: white;
}
#campaign-2211 .cam-btn:hover {
  background-color: white;
  color: #ff6500;
}
#campaign-2211 .cam-btn:hover .cls-1 {
  fill: #ff6500;
}
#campaign-2211 .btn-cam2211-cv {
  color: white;
  background-color: #f54074;
  border: solid 2px #f54074;
}
#campaign-2211 .btn-cam2211-cv:hover {
  color: white;
  background-color: #f54074;
  opacity: 0.7;
}
#campaign-2211 .pc-br, #campaign-2211 .pc-allow {
  display: block;
}
#campaign-2211 .sp-br, #campaign-2211 .sp-allow {
  display: none;
}
#campaign-2211 #challenge .challenge-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding-top: 5px;
  line-height: 2.4;
}
#campaign-2211 #challenge .challenge-ttl img {
  height: 40px;
  margin-right: 8px;
}
#campaign-2211 #challenge .cam-detail {
  background: white;
}
#campaign-2211 #challenge .cam-detail ul li {
  justify-content: space-between;
  align-items: center;
}
#campaign-2211 #challenge .cam-detail ul li:not(:last-child) {
  margin-bottom: 20px;
}
#campaign-2211 #challenge .cam-detail-left {
  position: relative;
  max-width: 500px;
  width: 49.5%;
  font-size: 2rem;
  padding-left: 5em;
  line-height: 1.4;
}
#campaign-2211 #challenge .cam-detail-left span {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: white;
  font-size: 65%;
  padding: 6px 8px;
  line-height: 1;
}
#campaign-2211 #challenge .cam-detail-left span.individual {
  background-color: #0044cc;
}
#campaign-2211 #challenge .cam-detail-left span.whole {
  background-color: #ff3200;
}
#campaign-2211 #challenge .cam-detail-middle {
  max-width: 54px;
  width: 5%;
  margin: 0 1%;
}
#campaign-2211 #challenge .cam-detail-right {
  max-width: 430px;
  width: 41.5%;
  font-size: 1.7rem;
  font-weight: bold;
  flex: 1;
  line-height: 1.3;
}
#campaign-2211 #challenge .cam-detail-right .txt_every {
  color: #0044cc;
}
#campaign-2211 #challenge .cam-detail-right strong {
  font-size: 2.1rem;
  margin: 0 4px;
  vertical-align: -0.1em;
}
#campaign-2211 #challenge .cam-detail-right strong.individual {
  color: #ff3200;
  -webkit-text-stroke: 2px #ff3200;
}
#campaign-2211 #challenge .cam-detail-right strong.whole {
  color: #0044cc;
  -webkit-text-stroke: 2px #0044cc;
}
#campaign-2211 #challenge .cam-detail-right .note-txt {
  font-size: 0.95rem;
  font-weight: normal;
}
#campaign-2211 #challenge .cam-detail.individual {
  border: solid 5px #0044cc;
}
#campaign-2211 #challenge .cam-detail.whole {
  border: solid 5px #ff3200;
}
#campaign-2211 #challenge-individual .challenge-ttl {
  background: #0044cc;
}
#campaign-2211 #challenge-whole .challenge-ttl {
  background: #ff3200;
}
#campaign-2211 #challenge-whole .cam-detail-left {
  max-width: 580px;
  width: 57.4%;
}
#campaign-2211 #challenge-whole .cam-detail-right {
  max-width: 340px;
  width: 33.6%;
}
#campaign-2211 #challenge-powerup {
  font-size: 1.6rem;
  -webkit-text-stroke: 1px #000000;
}
#campaign-2211 #challenge-powerup > .txt::after {
  content: "...";
  display: inline-block;
  vertical-align: 0.3em;
  line-height: 1;
}
#campaign-2211 #challenge-powerup-txt {
  justify-content: center;
  align-items: center;
  color: #ff3200;
  -webkit-text-stroke: 1px #ff3200;
  line-height: 1.3;
}
#campaign-2211 #challenge-powerup-txt img {
  max-width: 90px;
  margin: 5px 10px 5px 0;
}
#campaign-2211 #challenge-powerup > img {
  max-width: 720px;
  width: 90%;
  margin-top: 10px;
}
#campaign-2211 #challenge-gauge {
  padding: 60px 40px 80px;
  background-color: #000000;
}
#campaign-2211 #challenge-gauge .hd-deco {
  color: white;
}
#campaign-2211 #challenge-gauge .hd-deco::before, #campaign-2211 #challenge-gauge .hd-deco::after {
  background-color: white;
}
#campaign-2211 #challenge-gauge .achievement-gauge {
  flex-wrap: nowrap;
  max-height: 78px;
  height: 100%;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge-value {
  position: relative;
  height: 70px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge-value .gauge-txt {
  position: absolute;
  right: -20px;
  bottom: -40px;
  color: white;
  line-height: 1.2;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge-value .gauge-txt.gauge-txt-0 {
  right: 0;
  left: -5px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge-value .graycover {
  position: absolute;
  right: 0;
  display: block;
  height: 100%;
  background: #d3d3d3;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge100 {
  width: 30.03%;
  background: #d3d3d3;
  margin-right: 4px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge100.intermediate {
  background: linear-gradient(90deg, rgb(23, 132, 249) 15%, rgb(26, 206, 250) 50%, rgb(154, 223, 110) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge100.clear {
  background: linear-gradient(90deg, rgb(23, 132, 249) 15%, rgb(26, 206, 250) 50%, rgb(154, 223, 110) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge200 {
  width: 30.03%;
  background: #d3d3d3;
  margin-right: 4px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge200.intermediate {
  background: linear-gradient(90deg, rgb(154, 223, 110) 0%, rgb(254, 237, 0) 20%, rgb(255, 242, 31) 80%, rgb(255, 174, 38) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge200.clear {
  background: linear-gradient(90deg, rgb(154, 223, 110) 0%, rgb(254, 237, 0) 20%, rgb(255, 242, 31) 80%, rgb(255, 174, 38) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge300 {
  width: 30.03%;
  background: #d3d3d3;
  margin-right: 4px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge300.intermediate {
  background: linear-gradient(90deg, rgb(255, 174, 38) 0%, rgb(234, 101, 45) 35%, rgb(229, 53, 43) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge300.clear {
  background: linear-gradient(90deg, rgb(255, 174, 38) 0%, rgb(234, 101, 45) 35%, rgb(229, 53, 43) 100%);
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge333 {
  width: 9.91%;
  background-color: #d3d3d3;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge333 img {
  display: none;
  position: absolute;
  bottom: 90px;
  left: 20px;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge333.intermediate {
  background-color: #e5352b;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge333.clear {
  background-color: #e5352b;
}
#campaign-2211 #challenge-gauge .achievement-gauge .gauge333.clear img {
  display: block;
}
#campaign-2211 #friend-info {
  justify-content: space-between;
}
#campaign-2211 #friend-info .img {
  max-width: 400px;
  width: 36%;
}
#campaign-2211 #friend-info .txt {
  max-width: 630px;
  width: 57%;
  padding-right: 4.5%;
}
#campaign-2211 #friend-info-btn {
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
}
#campaign-2211 #friend-invite {
  background-color: #ff64a3;
}
#campaign-2211 #friend-invite .hd-deco {
  color: white;
}
#campaign-2211 #friend-invite .hd-deco::before, #campaign-2211 #friend-invite .hd-deco::after {
  background-color: white;
}
#campaign-2211 #friend-invite-num {
  max-width: 590px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  line-height: 1;
  background-color: white;
}
#campaign-2211 #friend-invite-num .num-txt {
  -webkit-text-stroke: 1px #333;
}
#campaign-2211 #friend-invite .note-date-txt {
  max-width: 590px;
  width: 100%;
  color: white;
  margin: 0 auto;
  text-align: right;
}
#campaign-2211 #friend .get-benefit {
  margin-top: 80px;
}
#campaign-2211 #cam-detail {
  background-color: #ff3200;
}
#campaign-2211 #cam-detail .maker-non {
  list-style: none;
}
@media screen and (max-width: 900px) {
  #campaign-2211 #challenge .cam-detail-left {
    max-width: 370px;
    width: 46.8%;
    font-size: 1.5rem;
    padding-left: 0;
  }
  #campaign-2211 #challenge .cam-detail-left span {
    position: relative;
    display: inline-block;
    top: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    margin-bottom: 5px;
  }
  #campaign-2211 #challenge .cam-detail-middle {
    max-width: 38px;
    width: 4.42%;
    margin: 0;
  }
  #campaign-2211 #challenge .cam-detail-right {
    flex: inherit;
    max-width: 370px;
    width: 46.8%;
    font-size: 1.3rem;
  }
  #campaign-2211 #challenge .cam-detail-right strong {
    font-size: 1.8rem;
  }
  #campaign-2211 #challenge-gauge .achievement-gauge .gauge-value .gauge-txt {
    right: -13px;
    bottom: -28px;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2211 h2, #campaign-2211 .hd-deco {
    font-size: 1.6em;
  }
  #campaign-2211 h3 {
    font-size: 1.5em;
  }
  #campaign-2211 .pc-br, #campaign-2211 .pc-allow {
    display: none;
  }
  #campaign-2211 .sp-br, #campaign-2211 .sp-allow {
    display: block;
  }
  #campaign-2211 #challenge .cam-detail {
    padding: 30px 14px;
  }
  #campaign-2211 #challenge .cam-detail ul {
    text-align: center;
  }
  #campaign-2211 #challenge .cam-detail ul li {
    display: inline-block;
    text-align: left;
  }
  #campaign-2211 #challenge .cam-detail ul li:not(:last-child) {
    margin-bottom: 30px;
  }
  #campaign-2211 #challenge .cam-detail-left {
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
    padding-left: 0;
    text-align: center;
  }
  #campaign-2211 #challenge .cam-detail-left span {
    position: relative;
    display: inline-block;
    top: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    margin-bottom: 5px;
  }
  #campaign-2211 #challenge .cam-detail-middle {
    width: 100%;
    margin: 0 auto 10px;
  }
  #campaign-2211 #challenge .cam-detail-right {
    flex: 1;
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  #campaign-2211 #challenge-powerup-txt {
    font-size: 1.5em;
    margin-bottom: 20px;
  }
  #campaign-2211 #challenge-gauge {
    padding: 40px 20px 60px;
  }
  #campaign-2211 #challenge-gauge .achievement-gauge .gauge333 img {
    max-width: 180%;
    left: -30px;
  }
  #campaign-2211 #challenge-gauge .achievement-gauge .gauge333 .gauge-txt {
    bottom: -44px;
  }
  #campaign-2211 #friend-info {
    display: block;
  }
  #campaign-2211 #friend-info .img {
    max-width: 100%;
    width: 80%;
    margin: 0 auto 30px;
  }
  #campaign-2211 #friend-info .txt {
    max-width: 100%;
    width: 100%;
    padding-right: 0;
  }
  #campaign-2211 #friend-info-btn {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
  }
  #campaign-2211 #friend .get-benefit {
    margin-top: 40px;
  }
}
@media screen and (max-width: 440px) {
  #campaign-2211 #challenge-gauge .achievement-gauge .gauge333.clear img {
    bottom: 50px;
  }
  #campaign-2211 #friend-invite {
    padding: 14px;
  }
  #campaign-2211 #friend-invite-num .right-txt {
    font-size: 1.5em;
  }
}

/******** end みんなで再エネをひろめよう！太陽光発電の日 333チャレンジ ********/
/********** 新規登録＆購入でdポイント最大3,000ポイントプレゼント **********/
#campaign-2212 .cam2212-title {
  color: #fff;
  background-color: #780023;
  padding: 8px;
}
#campaign-2212 .cam2212-bg {
  background-color: #FFE7E7;
}
#campaign-2212 .wrap-760 {
  width: 100%;
  max-width: 760px;
  margin: auto;
}
#campaign-2212 .hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
#campaign-2212 .hd-deco:before, #campaign-2212 .hd-deco::after {
  content: "";
  width: 1.6em;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}
#campaign-2212 .hd-deco:before {
  transform: rotate(60deg);
}
#campaign-2212 .hd-deco:after {
  transform: rotate(-60deg);
}
#campaign-2212 #present .text-accent {
  color: #FEF102;
}
#campaign-2212 #present .frame {
  justify-content: space-between;
  border: 4px solid;
  background-color: #fff;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 20px;
}
#campaign-2212 #present .flex-left {
  display: flex;
  align-items: center;
}
#campaign-2212 #present .flex-left img {
  width: 100px;
  height: 100px;
}
#campaign-2212 #present .flex-right {
  width: 84%;
}
#campaign-2212 #present .flex-right .present-text {
  background-color: #CE0F31;
}
#campaign-2212 #present .small-margin-right {
  margin-right: 4px;
}
#campaign-2212 #wattstore .movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2212 #wattstore .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#campaign-2212 #step li h3 {
  color: #780023;
}
#campaign-2212 #step .dpoint-img {
  width: 90%;
  max-width: 160px;
}
#campaign-2212 #participation .text-wrap {
  width: 75%;
}
#campaign-2212 #participation .img-wrap {
  width: 12%;
}
#campaign-2212 #participation .dpoint-wrap {
  background-color: #CE0F31;
  padding: 32px;
}
#campaign-2212 #participation .dpoint-regist {
  background-color: #fff;
  padding: 16px;
}
#campaign-2212 #participation .notes1 {
  width: 100%;
  max-width: 420px;
  margin: auto;
}
#campaign-2212 #participation .flex {
  justify-content: space-between;
}
#campaign-2212 #participation .recaptcha-txt {
  text-align: center;
}
#campaign-2212 #cam-detail {
  background-color: #FFCA32;
}
#campaign-2212 #cam-detail dl dt {
  width: 196px;
  margin-right: 4px;
}
@media screen and (max-width: 720px) {
  #campaign-2212 #present .frame {
    position: relative;
    justify-content: flex-start;
  }
  #campaign-2212 #present .flex-left {
    margin-bottom: 10px;
  }
  #campaign-2212 #present .flex-left img {
    width: 82px;
    height: 82px;
  }
  #campaign-2212 #present .flex-right {
    width: 100%;
  }
  #campaign-2212 #present .terms-text {
    position: absolute;
    top: 12%;
    right: 5%;
    width: 74%;
  }
  #campaign-2212 #participation .text-wrap {
    width: 100%;
  }
  #campaign-2212 #participation .flex {
    justify-content: center;
  }
  #campaign-2212 #participation .img-wrap {
    width: 16%;
    margin: 0 16px 20px;
  }
  #campaign-2212 #participation .text-wrap {
    order: 1;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2212 #cam-detail dl dt {
    width: 100%;
    margin-right: 0;
  }
}
@media screen and (max-width: 464px) {
  #campaign-2212 #present .frame {
    font-size: 0.75em;
  }
  #campaign-2212 #present .flex-left img {
    width: 56px;
    height: 56px;
  }
  #campaign-2212 #present .terms-text {
    top: 8%;
    right: 4%;
    width: 72%;
  }
  #campaign-2212 #participation h2 {
    font-size: 1.6em;
  }
  #campaign-2212 #participation h3 {
    font-size: 1.4em;
  }
  #campaign-2212 #participation .dpoint-wrap {
    padding: 16px;
  }
}

/********** end 新規登録＆購入でdポイント最大3,000ポイントプレゼント **********/
/******** 5周年記念！超ワット祭！ ********/
#campaign-2213 .font-accent {
  color: #FFFF00;
}
#campaign-2213 .hd-deco {
  text-align: center;
}
#campaign-2213 .hd-deco::before, #campaign-2213 .hd-deco::after {
  background-color: #000;
}
#campaign-2213 .present-title-wrap img {
  width: 46px;
  position: absolute;
  top: 50%;
  left: calc(50% - 140px);
  z-index: 100;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#campaign-2213 .present-title-main {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 0 30px;
  margin: 0;
  height: 50px;
  line-height: 50px;
  width: 100%;
  max-width: 800px;
}
#campaign-2213 .present-title-main::before, #campaign-2213 .present-title-main::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 1;
}
#campaign-2213 .present-title-main::before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #FEEEF1;
  border-style: solid;
}
#campaign-2213 .present-title-main::after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #FEEEF1 transparent transparent;
  border-style: solid;
}
#campaign-2213 .present-title-sub-ribbon::before {
  border-color: transparent transparent transparent #EEF5FF;
}
#campaign-2213 .present-title-sub-ribbon::after {
  border-color: transparent #EEF5FF transparent transparent;
}
#campaign-2213 .band-cam2213 {
  background: url(/img/campaign/2213/band_img.png) repeat-x;
  background-size: 25px 35px;
  height: 35px;
}
#campaign-2213 .btn-cv .cls-1 {
  fill: #fff;
}
#campaign-2213 .btn-cv:hover {
  color: #e56100;
}
#campaign-2213 .btn-cv:hover .cls-1 {
  fill: #e56100;
}
#campaign-2213 .bg-main {
  background-color: #E50112;
}
#campaign-2213 .bg-sub {
  background-color: #013894;
}
#campaign-2213 .bg-present-main {
  background-color: #FEEEF1;
}
#campaign-2213 .bg-present-sub {
  background-color: #EEF5FF;
}
#campaign-2213 #about {
  background-color: #000;
}
#campaign-2213 #about h2 {
  color: #fff;
}
#campaign-2213 #about .hd-deco::before, #campaign-2213 #about .hd-deco::after {
  background-color: #fff;
}
#campaign-2213 #about .flex {
  justify-content: space-between;
}
#campaign-2213 #about .present-wrap {
  font-size: 1.3em;
  background-color: #fff;
  border: solid 1px #E50112;
  width: 240px;
}
#campaign-2213 #about .present-wrap .present-title {
  color: #fff;
  position: relative;
  padding: 8px;
}
#campaign-2213 #about .present-wrap .present-title p {
  margin: 0 0 0 54px;
}
#campaign-2213 #about .present-wrap img {
  width: 56px;
  position: absolute;
  top: -20%;
  left: 2%;
}
#campaign-2213 #about .present-wrap .present-content {
  padding: 16px 8px;
}
#campaign-2213 #about .border-main {
  border: solid 1px #E50112;
}
#campaign-2213 #about .border-sub {
  border: solid 1px #013894;
}
#campaign-2213 #present-1 .buy-ex-list p {
  margin-right: 20px;
}
#campaign-2213 #present-3 .flex-left {
  width: 40%;
}
#campaign-2213 #present-3 .flex-right {
  width: 50%;
}
#campaign-2213 #present-4 .present-wrap {
  font-size: 1.2em;
  border: solid 1px #013894;
  background-color: #fff;
  width: 100%;
  max-width: 800px;
  margin: auto;
}
#campaign-2213 #present-4 .present-title {
  color: #fff;
  padding: 8px;
}
#campaign-2213 #present-4 .present-content {
  padding: 12px;
}
#campaign-2213 #present-4 .present-content .flex-left {
  width: 40%;
  padding: 8px;
  border: solid 1px lightgray;
}
#campaign-2213 #present-4 .present-content .flex-left img {
  max-width: 180px;
}
#campaign-2213 #present-4 .present-content .flex-center {
  font-size: 2.8em;
  width: 15%;
}
#campaign-2213 #present-4 .present-content .flex-right {
  width: 40%;
  padding: 8px;
  border: solid 1px lightgray;
}
#campaign-2213 #present-4 .present-content .flex-right img {
  max-width: 180px;
}
#campaign-2213 #present-4 .present-content .badge-accent {
  position: absolute;
  color: #fff;
  font-size: 0.8em;
  background-color: red;
  line-height: 1.1;
  border-radius: 50%;
  padding: 12px;
  top: 4%;
  left: calc(50% - 120px);
}
#campaign-2213 #present-4 .kw-wrap {
  position: relative;
  border: 4px solid #000;
  background-color: #fff;
  padding: 40px;
  margin-top: 80px;
}
#campaign-2213 #present-4 .kw-wrap h3 {
  color: #fff;
  background-color: #000;
  border-radius: 8px;
  width: 92%;
  max-width: 380px;
  padding: 10px 0px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#campaign-2213 #present-4 .kw-wrap .flex-left {
  width: 62%;
}
#campaign-2213 #present-4 .kw-wrap .flex-right {
  width: 30%;
}
#campaign-2213 #present-4 .kw-detail {
  font-size: 1.1em;
}
#campaign-2213 #present-4 .kw-detail a {
  color: #333;
}
#campaign-2213 #qa {
  background-color: #000;
}
#campaign-2213 #qa h2 {
  color: #fff;
  padding: 8px;
}
#campaign-2213 #qa .qa-wrap {
  width: 48%;
  background-color: #fff;
  padding: 12px;
  margin-bottom: 20px;
}
#campaign-2213 #qa .accordion-title, #campaign-2213 #qa .accordion-content {
  position: relative;
  padding-left: 32px;
}
#campaign-2213 #qa .accordion-title::before, #campaign-2213 #qa .accordion-content::before {
  color: #fff;
  border-radius: 50%;
  padding-left: 6px;
  margin-right: 8px;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 24px;
  height: 24px;
}
#campaign-2213 #qa .accordion-title::before {
  content: "Q";
  background-color: #E50112;
}
#campaign-2213 #qa .accordion-content {
  margin-top: 12px;
}
#campaign-2213 #qa .accordion-content::before {
  content: "A";
  background-color: #013894;
}
#campaign-2213 #qa .cam-btn {
  border: none;
}
@media screen and (max-width: 640px) {
  #campaign-2213 #about .flex {
    justify-content: space-around;
  }
  #campaign-2213 #present-1 .buy-ex-list p {
    margin-right: 0px;
    font-size: 0.8em;
  }
  #campaign-2213 #present-3 .flex-left, #campaign-2213 #present-3 .flex-right {
    width: 100%;
  }
  #campaign-2213 #present-3 .flex-left {
    margin-bottom: 20px;
  }
  #campaign-2213 #present-4 .present-content .flex-left, #campaign-2213 #present-4 .present-content .flex-right, #campaign-2213 #present-4 .kw-wrap .flex-left, #campaign-2213 #present-4 .kw-wrap .flex-right {
    width: 100%;
  }
  #campaign-2213 #present-4 .kw-wrap .flex-right {
    order: -1;
    margin-bottom: 20px;
  }
  #campaign-2213 #qa .qa-wrap {
    width: 100%;
  }
  #campaign-2213 #qa .accordion-title {
    pointer-events: all;
    padding-right: 28px;
  }
  #campaign-2213 #qa .accordion-title::after {
    content: "+";
    font-size: 1.4em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
  }
  #campaign-2213 #qa .qa-open::after {
    content: "-";
    font-size: 1.8em;
  }
  #campaign-2213 #qa .accordion-content {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  #campaign-2213 .present-title-wrap img {
    left: calc(50% - 120px);
  }
  #campaign-2213 #present-4 .kw-wrap {
    padding: 40px 16px 16px;
  }
  #campaign-2213 #present-4 .kw-wrap h3, #campaign-2213 #present-4 .kw-wrap .flex-left-title {
    font-size: 1.2em;
  }
}

/******** end 5周年記念！超ワット祭！ ********/
/********** cam2213_greeting(5周年グリーティングページ)  **********/
#campaign-2213_greeting {
  /*--- 共通 ---*/
}
#campaign-2213_greeting .cam2213-color-main {
  color: #0095ff;
}
#campaign-2213_greeting .cam2213-greeting-hd {
  background-color: #0095ff;
  color: white;
  padding: 16px;
  text-align: center;
  font-size: 1.6em;
}
#campaign-2213_greeting .cam2213-greeting-hd-sub {
  font-size: 1.3em;
}
#campaign-2213_greeting .cam2213-greeting-bg {
  background-color: #fcaf49;
  padding: 20px;
  border-radius: 21px;
}
#campaign-2213_greeting .flex-set1 {
  justify-content: space-between;
}
#campaign-2213_greeting .flex-set1 .flex-left {
  width: 42%;
}
#campaign-2213_greeting .flex-set1 .flex-right {
  width: 54%;
}
#campaign-2213_greeting .flex-set1 img {
  width: 100%;
}
#campaign-2213_greeting .cam2213-greeting-result {
  font-size: 2em;
}
#campaign-2213_greeting .cam2213-greeting-result .font-s {
  font-size: 0.6em;
  vertical-align: text-bottom;
}
#campaign-2213_greeting #cam2213-greeting-intro h1 {
  font-size: 1.8em;
}
#campaign-2213_greeting #cam2213-greeting-summary .dl-wrap {
  color: white;
}
#campaign-2213_greeting #cam2213-greeting-summary dt {
  text-align: center;
  border: solid 2px white;
  padding: 4px;
}
#campaign-2213_greeting #cam2213-greeting-summary .bg-wh .font-m {
  font-size: 1.15em;
  color: black;
}
#campaign-2213_greeting #cam2213-greeting-summary .bg-wh .font-l {
  font-size: 1.35em;
  color: #fd0001;
}
#campaign-2213_greeting #cam2213-greeting-apf .flex {
  justify-content: space-between;
}
#campaign-2213_greeting #cam2213-greeting-apf .flex-set2 .flex-left {
  width: 54%;
}
#campaign-2213_greeting #cam2213-greeting-apf .flex-set2 .flex-right {
  width: 42%;
}
#campaign-2213_greeting #cam2213-greeting-alliance .flex {
  justify-content: space-between;
}
#campaign-2213_greeting #cam2213-greeting-close .bg-wh {
  border: solid 4px #0095ff;
}
#campaign-2213_greeting #cam2213-greeting-close p {
  font-size: 1.2em;
}
@media screen and (max-width: 640px) {
  #campaign-2213_greeting .cam2213-greeting-hd {
    padding: 10px;
  }
  #campaign-2213_greeting .flex-set1 .flex-left, #campaign-2213_greeting .flex-set1 .flex-right {
    width: 100%;
  }
  #campaign-2213_greeting .flex-set1 img {
    margin-bottom: 20px;
  }
  #campaign-2213_greeting .cam2213-greeting-hd {
    font-size: 1.2em;
  }
  #campaign-2213_greeting #cam2213-greeting-intro h1 {
    font-size: 1.4em;
  }
  #campaign-2213_greeting #cam2213-greeting-apf .flex-set2 {
    flex-direction: column-reverse;
  }
  #campaign-2213_greeting #cam2213-greeting-apf .flex-set2 .flex-left, #campaign-2213_greeting #cam2213-greeting-apf .flex-set2 .flex-right {
    width: 100%;
  }
  #campaign-2213_greeting #cam2213-greeting-apf .flex-set2 img {
    margin-bottom: 20px;
  }
  #campaign-2213_greeting #cam2213-greeting-close h2 {
    font-size: 1.2em;
  }
}

/******** end cam2213_greeting(5周年グリーティングページ) ********/
/********** 再エネを普及せよ！日本全国ワット甲子園 **********/
#campaign-2215 .sp-br {
  display: block;
}
#campaign-2215 .pc-br {
  display: none;
}
#campaign-2215 .hd-deco {
  text-align: center;
}
#campaign-2215 .hd-deco::before, #campaign-2215 .hd-deco::after {
  content: none;
}
#campaign-2215 .cam-btn {
  border: solid 1px #ff6500;
}
#campaign-2215 .cam-btn .cls-1 {
  fill: white;
}
#campaign-2215 .cam-btn:hover {
  background-color: white;
  color: #ff6500;
}
#campaign-2215 .cam-btn:hover .cls-1 {
  fill: #ff6500;
}
#campaign-2215 .league-list li {
  border: solid 5px #ffbf04;
  background-color: white;
}
#campaign-2215 .league-list li .item-title {
  line-height: 1;
  background-color: #ffbf04;
}
#campaign-2215 .league-list li .text-watt {
  color: #ee146d;
}
#campaign-2215 .league-list li .text-watt strong {
  font-size: 1.5em;
  -webkit-text-stroke: 2px #ee146d;
}
#campaign-2215 #rank-modal #docs-kw-index {
  height: 100%;
  padding: 30px 10px;
}
#campaign-2215 #rank-modal #docs-kw-index .uk-tab li {
  display: flex;
  width: 33.3%;
  font-size: 0.8rem;
  height: 60px;
  cursor: pointer;
}
#campaign-2215 #rank-modal #docs-kw-index .uk-tab li .game-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  line-height: 1.4;
  border-radius: 20px 20px 0 0;
  background-color: rgba(255, 191, 4, 0.15);
}
#campaign-2215 #rank-modal #docs-kw-index .uk-tab li .game-tab.active {
  background-color: #ffbf04;
}
#campaign-2215 #rank-modal #docs-kw-index .rank-wrap {
  max-height: calc(100% - 90px);
  overflow-y: scroll;
  margin: 0;
  padding: 5px;
}
#campaign-2215 #rank-modal #docs-kw-index .rank-wrap .bk {
  padding: 12px 10px;
}
#campaign-2215 #rank-modal #docs-kw-index .rank-wrap .own-wat {
  word-break: break-all;
}
#campaign-2215 #rank-modal #docs-kw-index .rank-wrap ol li {
  justify-content: center;
}
#campaign-2215 .cam2215-league h2 {
  color: white;
  line-height: 1;
}
#campaign-2215 .cam2215-league h3.font-l {
  font-size: 1.6rem;
}
#campaign-2215 #cam2215-individual {
  background-color: rgba(255, 191, 4, 0.15);
}
#campaign-2215 #cam2215-individual h2 {
  background-color: #ff9b0b;
}
#campaign-2215 #cam2215-individual .js-individual-item {
  position: relative;
}
#campaign-2215 #cam2215-individual .js-individual-item .item-title span {
  padding: 5px 10px;
  margin-right: 5px;
  background-color: red;
  color: white;
  font-size: 0.8em;
  vertical-align: 0.1em;
}
#campaign-2215 #cam2215-individual .js-individual-item .game-end {
  content: "終了しました";
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-weight: bold;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
#campaign-2215 #cam2215-individual .link-game-result {
  margin-top: 55px;
  margin-bottom: 0;
}
#campaign-2215 #cam2215-individual .link-game-result a {
  color: #333;
}
#campaign-2215 #cam2215-individual .individual-date-txt {
  font-size: 0.85em;
}
#campaign-2215 #cam2215-prefectures {
  background-color: rgba(2, 183, 183, 0.15);
}
#campaign-2215 #cam2215-prefectures h2 {
  background-color: #00a5a0;
}
#campaign-2215 #cam2215-prefectures .link-game-result2 {
  font-size: 1em;
}
#campaign-2215 #cam2215-prefectures #game-result {
  margin: 30px 0 50px;
  border: solid 5px #1c4a96;
  background-color: white;
}
#campaign-2215 #cam2215-prefectures #game-result h3 {
  font-size: 1.8em;
  padding: 10px 0;
  text-align: center;
  color: white;
  background-color: #1c4a96;
}
#campaign-2215 #cam2215-prefectures #game-result .game-result-list {
  font-size: 1.1em;
}
#campaign-2215 #cam2215-prefectures #game-result ul {
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
}
#campaign-2215 #cam2215-prefectures #game-result ul li {
  position: relative;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(1)::before {
  position: absolute;
  top: -1px;
  left: -44px;
  content: "";
  background: url(/img/kw/no1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 21px;
}
#campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(2)::before {
  position: absolute;
  top: -1px;
  left: -44px;
  content: "";
  background: url(/img/kw/no2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 21px;
  font-size: 0;
}
#campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(3)::before {
  position: absolute;
  top: -1px;
  left: -44px;
  content: "";
  background: url(/img/kw/no3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 21px;
  font-size: 0;
}
#campaign-2215 #cam2215-prefectures #game-result a {
  color: #333;
}
#campaign-2215 #cam2215-prefectures .league-list {
  justify-content: space-between;
}
#campaign-2215 #cam2215-prefectures .league-list li {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto 30px;
  border: solid 5px #02b7b7;
}
#campaign-2215 #cam2215-prefectures .league-list li .item-title {
  color: white;
  background-color: #02b7b7;
}
#campaign-2215 #cam2215-prefectures .league-list li .item-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#campaign-2215 #cam2215-prefectures .league-list li .item-container .step-img {
  padding: 0 15px;
}
#campaign-2215 #cam2215-prefectures .container-prefectures {
  padding: 30px;
  border: solid 5px #1c4a96;
  background-color: white;
}
#campaign-2215 #cam2215-prefectures .container-prefectures .user-info {
  color: #1c4a96;
}
#campaign-2215 #cam2215-prefectures .container-prefectures .user-prefectures {
  border: solid 1px #c0c0c0;
  background-color: #f6f7f7;
  line-height: 1;
}
#campaign-2215 #cam2215-prefectures .container-prefectures a {
  color: #333;
}
#campaign-2215 #cam-detail {
  background-color: #1c4a96;
}
#campaign-2215 #cam-detail h2 {
  font-size: 1.8em;
  color: white;
  line-height: 1;
}
#campaign-2215 #cam-detail dl {
  padding: 10px;
}
#campaign-2215 #cam-detail dl .cam-dl:first-child {
  border-top: none;
}
#campaign-2215 #cam-detail .individual-league h3 {
  font-size: 1.3em;
  color: white;
  background-color: #ff9b0b;
}
#campaign-2215 #cam-detail .prefectures-league h3 {
  font-size: 1.3em;
  color: white;
  background-color: #00a5a0;
}
@media screen and (min-width: 440px) {
  #campaign-2215 #cam2215-prefectures #game-result .game-result-list {
    font-size: 1.5em;
  }
  #campaign-2215 #cam2215-prefectures #game-result .link-game-result2 {
    font-size: 1.3em;
  }
  #campaign-2215 #cam2215-prefectures #game-result ul {
    max-width: 320px;
  }
  #campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(1)::before {
    left: -60px;
    width: 44px;
    height: 30px;
  }
  #campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(2)::before {
    left: -60px;
    width: 44px;
    height: 30px;
  }
  #campaign-2215 #cam2215-prefectures #game-result ul li:nth-child(3)::before {
    left: -60px;
    width: 44px;
    height: 30px;
  }
}
@media screen and (min-width: 640px) {
  #campaign-2215 .sp-br {
    display: none;
  }
  #campaign-2215 .pc-br {
    display: block;
  }
  #campaign-2215 .hd-deco::before, #campaign-2215 .hd-deco::after {
    content: "";
    background-color: #000000;
  }
  #campaign-2215 #rank-modal #docs-kw-index {
    padding: 30px;
  }
  #campaign-2215 #rank-modal #docs-kw-index .uk-tab li {
    font-size: 1rem;
  }
  #campaign-2215 #rank-modal #docs-kw-index .uk-tab li .game-tab {
    padding: 10px 20px;
  }
  #campaign-2215 #cam2215-prefectures .league-list li {
    width: 48%;
  }
  #campaign-2215 #cam-detail h2 {
    font-size: 2.2em;
  }
  #campaign-2215 #cam-detail dl {
    padding: 30px;
  }
  #campaign-2215 #cam-detail dl dt {
    padding-right: 10px;
  }
  #campaign-2215 #cam-detail .individual-league h3,
#campaign-2215 #cam-detail .prefectures-league h3 {
    font-size: 1.8em;
  }
}
@media screen and (min-width: 960px) {
  #campaign-2215 .cam2215-league h3.font-l {
    font-size: 2.2rem;
  }
  #campaign-2215 #cam2215-prefectures .league-list li {
    width: 24%;
    margin: 0;
  }
}

/********** end 再エネを普及せよ！日本全国ワット甲子園 **********/
/******** cam2216 Ponta提携記念キャンペーン ********/
#campaign-2216 .section-title {
  color: #fff;
  background-color: #40220F;
  padding: 8px;
}
#campaign-2216 .font-main {
  color: #EF8404;
}
#campaign-2216 .font-accent {
  color: #FFF001;
}
#campaign-2216 .background-main {
  background-color: #EF8404;
}
#campaign-2216 .bg-accent-text {
  color: #40220F;
  background-color: #FFF001;
  padding: 4px;
}
#campaign-2216 .cam2216-bg {
  background-color: #FFFCDF;
}
#campaign-2216 .padding-l-more {
  padding: 120px 0 80px;
}
#campaign-2216 .wrap-880 {
  max-width: 880px;
  margin: auto;
}
#campaign-2216 .cam2216-btn {
  color: #fff;
  background-color: #40220F;
  border: 1px solid #40220F;
}
#campaign-2216 .cam2216-btn:hover {
  color: #40220F;
  background-color: #fff;
}
#campaign-2216 .bnr-wrap {
  border: 1px solid #40220F;
}
#campaign-2216 #cam2216-present .frame {
  border: solid 5px #EF8404;
  background-color: #fff;
  margin: 10px auto;
}
#campaign-2216 #cam2216-present .flex {
  justify-content: space-evenly;
}
#campaign-2216 #cam2216-present .flex-left img {
  width: 100%;
  max-width: 110px;
}
#campaign-2216 #cam2216-present .flex-right {
  width: 76%;
  line-height: 1.1;
}
#campaign-2216 #cam2216-present .present-text {
  background-color: #EF8404;
  padding: 10px;
}
#campaign-2216 #cam2216-point .arrow-more {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 90%;
}
#campaign-2216 #cam2216-point .arrow-more img {
  width: 100%;
  max-width: 340px;
}
#campaign-2216 #cam2216-point .flex {
  justify-content: space-around;
  align-items: center;
  max-width: 800px;
  margin: auto;
}
#campaign-2216 #cam2216-point .flex-left,
#campaign-2216 #cam2216-point .flex-right {
  width: 30%;
  max-width: 240px;
}
#campaign-2216 #cam2216-point .flex-middle {
  width: 20%;
  max-width: 100px;
}
#campaign-2216 #cam2216-ex .ex-wrap {
  border-radius: 16px;
}
#campaign-2216 #cam2216-ex .flex {
  align-items: center;
  justify-content: space-evenly;
}
#campaign-2216 #cam2216-ex .flex-left {
  width: 67%;
  max-width: 540px;
}
#campaign-2216 #cam2216-ex .flex-left .flex {
  justify-content: space-between;
}
#campaign-2216 #cam2216-ex .flex-right {
  width: 20%;
}
#campaign-2216 #cam2216-ex .img-arrow {
  margin: 20px 0;
}
#campaign-2216 #cam2216-ex .img-arrow img {
  width: 100%;
  max-width: 200px;
}
#campaign-2216 #cam2216-ex .img-plus {
  margin: 8px;
}
#campaign-2216 #cam2216-ex .img-plus img {
  height: 100%;
  width: 100%;
  max-width: 24px;
}
#campaign-2216 #cam2216-ex .ex-point .ex-point-wrap {
  min-width: 160px;
  width: 34%;
}
#campaign-2216 #cam2216-ex .ex-point .point-title {
  background-color: #40220F;
  color: #fff;
  padding: 4px;
}
#campaign-2216 #cam2216-ex .ex-point .point-text {
  font-size: 1.4em;
  border: 2px solid #40220F;
  padding: 4px;
}
#campaign-2216 #cam2216-ex .hr-ex {
  border-top: 4px solid #40220F;
  margin: 12px 0;
}
#campaign-2216 #cam2216-ex .ex-total-point {
  font-size: 1.4em;
}
#campaign-2216 #cam2216-wattstore .movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#campaign-2216 #cam2216-wattstore .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#campaign-2216 #step li {
  background-color: #FFFCDF;
}
#campaign-2216 #cam2216-participation {
  padding: 40px;
}
#campaign-2216 #cam2216-participation .flex {
  align-items: center;
  justify-content: center;
}
#campaign-2216 #cam2216-participation .flex-left {
  width: 20%;
  max-width: 160px;
  margin-right: 16px;
}
#campaign-2216 #cam2216-participation .flex-right {
  width: 72%;
  max-width: 640px;
  font-size: 1.1em;
}
#campaign-2216 #cam2216-participation .notes1 {
  width: 420px;
  max-width: 100%;
  margin: auto;
}
#campaign-2216 #cam2216-participation .recaptcha-txt {
  text-align: center;
}
#campaign-2216 #cam-detail {
  background-color: #40220F;
}
@media screen and (max-width: 770px) {
  #campaign-2216 #cam2216-ex .flex-left,
#campaign-2216 #cam2216-ex .flex-right {
    width: 100%;
  }
  #campaign-2216 #cam2216-ex .flex-right {
    order: -1;
    margin-bottom: 20px;
  }
  #campaign-2216 #cam2216-ex .flex-right img {
    max-width: 140px;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2216 #cam2216-present .frame {
    position: relative;
    font-size: 0.9em;
  }
  #campaign-2216 #cam2216-present .flex {
    justify-content: start;
  }
  #campaign-2216 #cam2216-present .flex-left {
    width: 17%;
  }
  #campaign-2216 #cam2216-present .flex-right {
    width: 100%;
  }
  #campaign-2216 #cam2216-present .terms-text {
    position: absolute;
    width: 80%;
    top: 8%;
    right: 0;
  }
  #campaign-2216 #cam2216-present .present-text {
    margin-top: 16px;
  }
  #campaign-2216 #cam2216-point .flex {
    flex-direction: column;
  }
  #campaign-2216 #cam2216-point .flex-left,
#campaign-2216 #cam2216-point .flex-right {
    width: 80%;
  }
  #campaign-2216 #cam2216-point .flex-middle {
    transform: rotate(90deg);
    width: 36%;
  }
  #campaign-2216 #cam2216-ex .ex-buy,
#campaign-2216 #cam2216-ex .ex-point {
    flex-direction: column;
  }
  #campaign-2216 #cam2216-participation {
    padding: 16px;
  }
  #campaign-2216 #cam2216-participation .flex-left,
#campaign-2216 #cam2216-participation .flex-right {
    width: 100%;
  }
  #campaign-2216 #cam2216-participation .flex-right {
    order: -1;
  }
}
@media screen and (max-width: 340px) {
  #campaign-2216 #cam2216-present .flex-right {
    font-size: 0.9em;
  }
  #campaign-2216 #cam2216-present .terms-text {
    top: 6%;
  }
}

/******** end cam2216 Ponta提携記念キャンペーン ********/
/********** cam2217 秋の分散投資キャンペーン **********/
#campaign-2217 .hd-deco::before, #campaign-2217 .hd-deco::after {
  background-color: black;
}
#campaign-2217 .cam-btn {
  border-color: #FFA41C;
  background-color: #FFA41C;
  color: white;
}
#campaign-2217 .cam-btn .cls-1 {
  fill: white;
}
#campaign-2217 .cam-btn:hover {
  background-color: white;
  color: #FFA41C;
}
#campaign-2217 .cam-btn:hover .cls-1 {
  fill: #FFA41C;
}
#campaign-2217 .cam2217-font-accent {
  color: #ff0000;
}
#campaign-2217 .cam2217-benefit-wrap {
  border: solid 5px #088233;
  background-color: white;
}
#campaign-2217 .cam2217-flex-left {
  width: 66%;
}
#campaign-2217 .cam2217-flex-left .flex-inner-left {
  width: 96px;
}
#campaign-2217 .cam2217-flex-left .flex-inner-right {
  margin-left: 1em;
}
#campaign-2217 .cam2217-flex-left .flex-inner-right .font-large {
  font-size: 2.1em;
}
#campaign-2217 .cam2217-flex-left .flex-inner-right .font-middle {
  font-size: 1.4em;
}
#campaign-2217 .cam2217-flex-left .flex-inner-right .font-white {
  background-color: #088233;
  padding: 6px;
}
#campaign-2217 .cam2217-flex-center {
  padding: 10px;
}
#campaign-2217 .cam2217-flex-center img {
  width: 60px;
}
#campaign-2217 .cam2217-flex-right h3 {
  font-size: min(2vw, 1.8em);
  line-height: 1;
}
#campaign-2217 .cam2217-flex-right .font-large {
  font-size: 4em;
}
#campaign-2217 .cam2217-flex-right .font-middle {
  font-size: 2em;
}
#campaign-2217 #cam2217-intro .flex-left {
  width: 56%;
}
#campaign-2217 #cam2217-intro .flex-right {
  width: 42%;
}
#campaign-2217 #cam2217-explanation {
  background-color: #fff8cc;
}
#campaign-2217 #cam2217-structure .cam2217-contents-hd {
  background-color: #088233;
  padding: 8px;
  font-size: 1.3em;
}
#campaign-2217 #cam2217-structure .cam2217-contents-hd .bg-wh {
  padding: 4px 6px;
  color: black;
}
#campaign-2217 #cam2217-structure .contents-wrap {
  position: relative;
  width: 22%;
  background-color: #fff8cc;
  border-radius: 10px;
  padding: 10px;
}
#campaign-2217 #cam2217-structure .contents-wrap.accent {
  width: 20%;
  font-size: 1.2em;
  font-weight: bold;
  background-color: #f8d22c;
}
#campaign-2217 #cam2217-structure .contents-wrap.mark-cmn {
  margin-right: 4em;
}
#campaign-2217 #cam2217-structure .contents-wrap.mark-cmn::after {
  content: "";
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1em;
}
#campaign-2217 #cam2217-structure .contents-wrap.plus::after {
  content: "+";
}
#campaign-2217 #cam2217-structure .contents-wrap.equal::after {
  content: "=";
}
#campaign-2217 #cam2217-structure .contents-wrap.negative {
  margin-right: 4.5em;
}
#campaign-2217 #cam2217-structure .contents-wrap.negative::after {
  content: "-";
}
#campaign-2217 #cam2217-structure .contents-wrap .cam2217-contents-hd {
  font-weight: normal;
  padding: 4px;
  font-size: 1em;
}
#campaign-2217 #cam2217-structure .contents-wrap dd {
  padding: 4px;
  line-height: 1.3;
  font-weight: bold;
}
#campaign-2217 #cam2217-structure .contents-wrap .subscription {
  position: relative;
}
#campaign-2217 #cam2217-structure .contents-wrap .subscription::after {
  content: "";
  background: url(/img/campaign/2217/icon_watt.png) no-repeat;
  background-size: contain;
  position: absolute;
  width: 60px;
  height: 60px;
  top: -30px;
  right: -32px;
}
#campaign-2217 #cam-detail {
  background-color: #f8d22c;
}
@media screen and (max-width: 990px) {
  #campaign-2217 .cam2217-flex-left,
#campaign-2217 .cam2217-flex-wrap {
    width: 100%;
    margin: 20px auto 0;
    justify-content: center;
  }
  #campaign-2217 .cam2217-flex-left .flex-inner-right,
#campaign-2217 .cam2217-flex-wrap .flex-inner-right {
    font-size: 1.8vw;
  }
  #campaign-2217 .cam2217-flex-right h3 {
    font-size: 1.5em;
  }
  #campaign-2217 #cam2217-structure .contents-wrap {
    width: 30%;
  }
  #campaign-2217 #cam2217-structure .contents-wrap.mark-cmn {
    margin-right: 2em;
  }
  #campaign-2217 #cam2217-structure .contents-wrap.mark-cmn::after {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2217 .cam-btn {
    max-width: 280px;
    font-size: 1.1em;
  }
  #campaign-2217 .cam-btn svg {
    width: 1.4em;
  }
  #campaign-2217 #cam2217-intro .flex-left,
#campaign-2217 #cam2217-intro .flex-right {
    width: 100%;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-left {
    margin: 0 auto;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-left .flex-inner-left {
    width: 60px;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-left .flex-inner-right {
    width: 100%;
    text-align: center;
    font-size: 1em;
    margin-left: 0;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-left .flex-inner-right .font-large {
    font-size: 1.6em;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-left .flex-inner-right .font-middle {
    font-size: 1.4em;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-center img {
    width: 40px;
  }
  #campaign-2217 #cam2217-explanation .cam2217-flex-right h3 {
    font-size: 1.3em;
  }
  #campaign-2217 #cam2217-structure .cam2217-contents-hd {
    font-size: 1em;
  }
  #campaign-2217 #cam2217-structure .cam2217-contents-hd .bg-wh {
    display: inline-block;
    width: 100%;
    padding: 2px;
  }
}

/******** end cam2217 秋の分散投資キャンペーン ********/
/******** cam2218 貯蓄の日！ワット定期購入新規登録キャンペーン ********/
#campaign-2218 .cam2218-text {
  color: #3e3a39;
}
#campaign-2218 .cam2218-text-sub {
  color: #000;
}
#campaign-2218 .hd-deco::before, #campaign-2218 .hd-deco::after {
  background-color: #000;
}
#campaign-2218 .cam2218-sub {
  bottom: 0.1em;
}
#campaign-2218 .notes2 {
  padding-left: 3em;
}
#campaign-2218 .sp-br {
  display: none;
}
#campaign-2218 .cam2218-frame {
  border: solid 3px #231815;
}
#campaign-2218 .cam2218-frame .cam2218-frame-hd {
  background-color: #231815;
  padding: 8px;
  color: #ff9100;
}
#campaign-2218 .cam2218-frame .cam2218-frame-sub-hd {
  background-color: #ff9100;
  color: white;
  padding: 4px 8px;
}
#campaign-2218 .cam2218-frame .cam2218-frame-inner {
  padding: 16px;
}
#campaign-2218 .cam2218-ribbon {
  position: relative;
  color: white;
  background-color: #5c3391;
  padding: 16px;
  margin-right: 1rem;
  margin-left: 1rem;
}
#campaign-2218 .cam2218-ribbon::before, #campaign-2218 .cam2218-ribbon::after {
  content: "";
  top: 0;
  position: absolute;
  width: 1rem;
  height: 100%;
  background-color: #5c3391;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 100% 101%, 100% 0);
}
#campaign-2218 .cam2218-ribbon::before {
  left: -1rem;
}
#campaign-2218 .cam2218-ribbon::after {
  right: -1rem;
  transform: scaleX(-1);
}
#campaign-2218 #cam2218-intro h2 {
  color: #4d1cad;
}
#campaign-2218 #cam2218-intro .marker-yellow {
  background: linear-gradient(transparent 60%, #fff000 0%);
}
#campaign-2218 #cam2218-subscription {
  background-color: #ddd2ff;
}
#campaign-2218 #cam2218-subscription h3.hd-deco {
  font-size: 1.8em;
}
#campaign-2218 #cam2218-subscription .cam2218-frame {
  background-color: #fcf1e6;
}
#campaign-2218 #cam2218-subscription .cam2218-frame .cam2218-frame-hd {
  line-height: 1;
}
#campaign-2218 #cam2218-subscription .cam2218-frame .cam2218-frame-hd .font-l {
  font-style: italic;
}
#campaign-2218 #cam2218-subscription .cam2218-frame .cam2218-frame-inner {
  font-size: 1.1em;
}
#campaign-2218 #cam2218-subscription p.font-l {
  font-size: 1.3em;
}
#campaign-2218 #cam2218-desc {
  background-color: #fcf1e6;
}
#campaign-2218 #cam2218-desc h3.hd-deco {
  font-size: 1.8em;
}
#campaign-2218 #cam2218-desc h3.hd-deco::before, #campaign-2218 #cam2218-desc h3.hd-deco::after {
  width: 2.6em;
}
#campaign-2218 #cam2218-desc .cam2218-frame-inner {
  background-color: white;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
}
#campaign-2218 #cam2218-desc .cam2218-frame-hd {
  font-size: 1.6em;
}
#campaign-2218 #cam2218-desc .btn-cv {
  border: solid 1px #ff8d00;
  background-color: #ff8d00;
}
#campaign-2218 #cam2218-desc .btn-cv:hover {
  background-color: white;
  color: #ff8d00;
}
#campaign-2218 #cam-detail {
  background-color: #5c3391;
}
@media screen and (max-width: 640px) {
  #campaign-2218 .sp-br {
    display: block;
  }
  #campaign-2218 #cam2218-intro h2 {
    font-size: 1.2em;
  }
  #campaign-2218 #cam2218-subscription h2, #campaign-2218 #cam2218-desc h2 {
    font-size: 1.5em;
  }
  #campaign-2218 #cam2218-subscription h3.hd-deco, #campaign-2218 #cam2218-desc h3.hd-deco {
    font-size: 1.2em;
  }
  #campaign-2218 #cam2218-desc .cam2218-frame .cam2218-frame-inner {
    font-size: 1.6em;
  }
  #campaign-2218 #cam2218-desc .cam2218-frame .cam2218-frame-hd {
    font-size: 1.2em;
  }
}

#campaign-2218-pop #cam-pop {
  background-color: rgba(0, 0, 0, 0.85);
}
@media screen and (max-width: 640px) {
  #campaign-2218-pop .font-l {
    font-size: 1.3em;
    margin: 0 1em 20px;
  }
  #campaign-2218-pop .font-m {
    font-size: 1em;
  }
}

/******** end cam2218 貯蓄の日！ワット定期購入新規登録キャンペーン ********/
/******** cam2219 ブラックフライデー2022 ********/
#campaign-2219 .font-pink {
  color: #ff1494;
}
#campaign-2219 .font-blue {
  color: #0052e2;
}
#campaign-2219 .hd-deco {
  color: black;
}
#campaign-2219 .hd-deco::before, #campaign-2219 .hd-deco::after {
  background-color: black;
}
#campaign-2219 .hd-deco.font-white {
  color: white;
}
#campaign-2219 .hd-deco.font-white::before, #campaign-2219 .hd-deco.font-white::after {
  background-color: white;
}
#campaign-2219 .sp-br {
  display: none;
}
#campaign-2219 .pc-br {
  display: block;
}
#campaign-2219 .cam2219-bg {
  background-color: black;
}
#campaign-2219 .btn-cam2219 {
  color: #333333;
  background-color: #80ff00;
  border: solid 1px #80ff00;
}
#campaign-2219 .btn-cam2219 svg .cls-1 {
  fill: #333333;
}
#campaign-2219 .btn-cam2219:hover {
  color: #80ff00;
  background-color: #333333;
  opacity: 1;
}
#campaign-2219 .btn-cam2219:hover svg .cls-1 {
  fill: #80ff00;
}
#campaign-2219 #mv {
  background-color: #ff1494;
}
#campaign-2219 #mv .mv-img {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}
#campaign-2219 #mv .band-line {
  padding: 5px;
  background-color: #80ff00;
}
#campaign-2219 #mv .band-line .day-img {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}
#campaign-2219 #mv .day-img-sp {
  display: none;
}
#campaign-2219 #cam2219-intro #cam-end {
  font-size: 17px;
}
#campaign-2219 #cam2219-intro h2 {
  color: #ff1494;
  font-size: 2.2em;
  -webkit-text-stroke: 1px #ff1494;
}
#campaign-2219 #cam2219-intro .info {
  font-size: 1.5em;
}
#campaign-2219 #cam2219-intro .intro-text {
  margin: 0;
}
#campaign-2219 #cam2219-explanation .benefit-list {
  max-width: 980px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
#campaign-2219 #cam2219-explanation .benefit-list li {
  position: relative;
  padding: 8px 18px 8px 84px;
  margin: 0 0 40px 40px;
  min-height: 120px;
  line-height: 1.3;
  border: solid 4px #ff1494;
  font-size: 1.8em;
  font-weight: bold;
}
#campaign-2219 #cam2219-explanation .benefit-list li::before {
  content: "";
  width: 120px;
  height: 120px;
  position: absolute;
  top: -4px;
  left: -60px;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-left {
  max-width: 400px;
  width: 50%;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-center {
  max-width: 60px;
  width: 7.3%;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-right {
  min-width: 250px;
  -webkit-text-stroke: 1px #333333;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-right .icon-left {
  max-width: 100px;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-right .font-l {
  font-size: 2.3em;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-right .font-pink {
  -webkit-text-stroke: 1px #ff1494;
}
#campaign-2219 #cam2219-explanation .benefit-list li .flex-right .font-blue {
  -webkit-text-stroke: 1px #0052e2;
}
#campaign-2219 #cam2219-explanation .benefit-list li.benefit1::before {
  background: url(/img/campaign/2219/t_1.png);
  background-size: contain;
}
#campaign-2219 #cam2219-explanation .benefit-list li.benefit1 .flex-left {
  max-width: 100%;
  width: calc(100% - 300px);
}
#campaign-2219 #cam2219-explanation .benefit-list li.benefit1 .flex-right {
  max-width: 280px;
  min-width: auto;
  width: 100%;
}
#campaign-2219 #cam2219-explanation .benefit-list li.benefit2::before {
  background: url(/img/campaign/2219/t_2.png);
  background-size: contain;
}
#campaign-2219 #cam2219-explanation .benefit-list li.benefit3::before {
  background: url(/img/campaign/2219/t_3.png);
  background-size: contain;
}
#campaign-2219 #cam2219-explanation .note-wrap {
  color: white;
  max-width: 980px;
  width: 100%;
  margin: 0 auto 80px;
}
#campaign-2219 #cam2219-explanation .note-wrap .notes1 {
  max-width: 918px;
  width: 100%;
  margin-left: 40px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table {
  border: solid 1px white;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap {
  position: relative;
  border-bottom: solid 1px white;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap:last-child {
  border: none;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-title {
  width: 50%;
  color: white;
  background-color: #000;
  font-size: 1.3em;
  font-weight: bold;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-title .mk {
  font-size: 0.8em;
  font-weight: normal;
  color: #000;
  background-color: white;
  padding: 3px 6px;
  vertical-align: middle;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member {
  width: 25%;
  background-color: #898989;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
  width: 25%;
  background-color: #f7a12f;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
  line-height: 1;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .num, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .num {
  font-size: 3em;
  -webkit-text-stroke: 3px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .unit, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .unit {
  font-size: 2.3em;
  -webkit-text-stroke: 2px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .txt, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .txt {
  font-size: 1.4em;
  line-height: 1.2;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .per, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .per {
  color: #333333;
  font-size: 1.2em;
  line-height: 1.4;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .wrap-bg, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .wrap-bg {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px 0;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .wrap-bg .flex, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .wrap-bg .flex {
  max-width: 180px;
  width: 90%;
  margin: 0 auto;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-title, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
  padding: 15px 10px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .note {
  font-size: 0.6em;
  letter-spacing: initial;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title {
  color: white;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .font-l {
  font-size: 1.5em;
  letter-spacing: -2px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .font-m {
  font-size: 1em;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member .num, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw .num {
  font-size: 4em;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member .unit, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw .unit {
  font-size: 3em;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member .txt, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw .txt {
  font-size: 1.6em;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member .wrap-bg, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw .wrap-bg {
  padding: 10px 0;
  background-color: white;
  border-radius: 15px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-1 .comp-title img {
  max-width: 120px;
}
#campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-member .unit, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-kw .unit {
  font-size: 1.3em;
  line-height: 1.1;
  -webkit-text-stroke: 1px;
  letter-spacing: -2px;
}
#campaign-2219 #cam2219-explanation .howtobuy .title-wrap {
  max-width: 600px;
  width: 80%;
  top: -26px;
  right: 0;
  left: 0;
  margin: auto;
}
#campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3 {
  color: black;
  background-color: #ff1494;
  padding: 10px 0;
  margin: 0 auto;
  filter: drop-shadow(0px 0px 3px black);
}
#campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3::before, #campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3::after {
  content: "";
  top: 0;
  position: absolute;
  width: 1rem;
  height: 100%;
  background-color: #ff1494;
  clip-path: polygon(0 0, 85% 50%, 0 100%, 100% 100%, 100% 0);
}
#campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3::before {
  left: -0.9rem;
}
#campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3::after {
  right: -0.9rem;
  transform: scaleX(-1);
}
#campaign-2219 #cam2219-explanation .howtobuy .text-wrap {
  font-size: clamp(1.375rem, 0.531rem + 1.5vw, 1.563rem);
  color: white;
  padding: 40px 30px 20px 30px;
  background-color: #282828;
  border: solid 6px #ff1494;
  flex-wrap: wrap;
}
#campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-left {
  max-width: 100%;
  width: 100%;
  text-align: center;
}
#campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-center {
  max-width: 60px;
  width: 90%;
  margin: 0 auto;
  transform: rotate(90deg);
}
#campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-right {
  font-size: clamp(1.875rem, -0.125rem + 3.64vw, 2.375rem);
  color: #80ff00;
  justify-content: center;
  font-size: 30px;
  max-width: 100%;
  width: 100%;
  -webkit-text-stroke: 2px #80ff00;
}
#campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-right .font-l {
  font-size: 2.3em;
  line-height: 1;
}
#campaign-2219 #cam2219-point {
  background-color: #ff1494;
}
#campaign-2219 #cam2219-point .point-list {
  margin-left: 35px;
}
#campaign-2219 #cam2219-point .point-list li {
  font-size: 120%;
  padding: 20px 20px 20px 85px;
  border: solid 5px black;
  border-radius: 17px;
  background-color: white;
}
#campaign-2219 #cam2219-point .point-list li:before {
  content: "";
  width: 130px;
  height: 131px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -65px;
  margin: auto;
}
#campaign-2219 #cam2219-point .point-list li:nth-child(1):before {
  background: url(/img/campaign/2219/point_1.png);
  background-size: contain;
}
#campaign-2219 #cam2219-point .point-list li:nth-child(2):before {
  background: url(/img/campaign/2219/point_2.png);
  background-size: contain;
}
#campaign-2219 #cam2219-point .point-list li h3 {
  font-size: 130%;
  margin-bottom: 5px;
}
#campaign-2219 #cam2219-point .considerations-wrap {
  background-color: white;
  padding: 20px;
}
#campaign-2219 #cam2219-equip .flex-left {
  max-width: 300px;
}
#campaign-2219 #cam2219-equip .flex-right .hd-deco {
  font-size: 1.4em;
  font-weight: bold;
}
#campaign-2219 #cam-detail {
  background-color: #ff1494;
}
@media only screen and (max-width: 880px) {
  #campaign-2219 #cam2219-explanation .benefit-list li {
    max-width: 580px;
    width: 95%;
    padding: 60px 10px 10px;
    margin: 80px auto 0;
    flex-wrap: wrap;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li::before {
    width: 100px;
    height: 100px;
    top: -50px;
    right: 0;
    left: 0;
    margin: auto;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li .flex-left {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li .flex-center {
    width: 90%;
    margin: 0 auto;
    transform: rotate(90deg);
  }
  #campaign-2219 #cam2219-explanation .benefit-list li .flex-right {
    max-width: 100%;
    min-width: auto;
    width: 100%;
    font-size: 0.9em;
    justify-content: center;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li.benefit1 .flex-left {
    width: 100%;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li.benefit1 .flex-right {
    max-width: 400px;
    width: 100%;
    margin: 20px auto 0;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li.benefit3 .uk-flex {
    flex-wrap: wrap;
  }
  #campaign-2219 #cam2219-explanation .note-wrap {
    max-width: 580px;
    width: 95%;
  }
  #campaign-2219 #cam2219-explanation .note-wrap .notes1 {
    margin-left: 0;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    border: none;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap {
    border-bottom: none;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-title {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45px;
    font-size: 1.2em;
    padding: 0 10px;
    min-height: auto !important;
    border-left: solid 10px #898989;
    border-right: solid 10px #f7a12f;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member {
    background-color: #898989;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
    background-color: #f7a12f;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
    width: 50%;
    min-height: auto !important;
    margin-top: 45px;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .comp-title {
    display: none;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .comp-kw {
    margin-top: 0;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-title {
    display: none;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw {
    margin-top: 0;
    padding: 0 10px 15px;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-1 .comp-title .flex-right {
    display: none;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-kw {
    padding: 0 10px 10px;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-member .unit, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-3 .comp-kw .unit {
    font-size: 1.3em;
    line-height: 1.1;
    -webkit-text-stroke: 1px;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-1 .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-1 .comp-kw, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-2 .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-2 .comp-kw {
    padding: 0 10px;
  }
  #campaign-2219 #cam2219-explanation .howtobuy .text-wrap {
    max-width: 700px;
    flex-wrap: wrap;
    font-size: 22px;
    color: white;
    padding: 40px 20px 20px 20px;
    margin: 0 auto;
  }
  #campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-right {
    font-size: 30px;
  }
}
@media screen and (max-width: 640px) {
  #campaign-2219 .sp-br {
    display: block;
  }
  #campaign-2219 .pc-br {
    display: none;
  }
  #campaign-2219 .btn-cam2219 {
    font-size: 1.2em;
  }
  #campaign-2219 .btn-cam2219 svg {
    width: 1.6em;
  }
  #campaign-2219 #mv .day-img-pc {
    display: none;
  }
  #campaign-2219 #mv .day-img-sp {
    display: block;
  }
  #campaign-2219 #cam2219-intro h2 {
    font-size: 1.7em;
  }
  #campaign-2219 #cam2219-intro .font-l {
    font-size: 1.15em;
  }
  #campaign-2219 #cam2219-intro .intro-text {
    margin-bottom: 1em;
  }
  #campaign-2219 #cam2219-explanation .benefit-list li {
    font-size: 1.5em;
  }
  #campaign-2219 #cam2219-explanation .buycomp h2 {
    font-size: 1.3em;
  }
  #campaign-2219 #cam2219-explanation .buycomp h3 {
    font-size: 1em;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-flex .font-l {
    font-size: 1.4em;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-flex .font-m {
    font-size: 1em;
  }
  #campaign-2219 #cam2219-explanation .howtobuy .title-wrap h3 {
    font-size: 1.5em;
  }
  #campaign-2219 #cam2219-explanation .howtobuy .text-wrap .flex-right {
    font-size: clamp(23px, 5vw, 30px);
  }
  #campaign-2219 #cam2219-point .point-list {
    padding-left: 0;
    margin-left: 0;
  }
  #campaign-2219 #cam2219-point .point-list li {
    font-size: 100%;
    padding: 60px 20px 10px;
    margin: 70px 0 0 !important;
  }
  #campaign-2219 #cam2219-point .point-list li:before {
    content: "";
    width: 100px;
    height: 101px;
    top: -50px;
    right: 0;
    bottom: inherit;
    left: 0;
  }
  #campaign-2219 #cam2219-point .considerations-wrap {
    background-color: white;
    padding: 20px;
  }
  #campaign-2219 #cam2219-equip .uk-flex {
    flex-wrap: wrap;
  }
  #campaign-2219 #cam2219-equip .uk-flex .flex-right {
    max-width: 100%;
    width: 100%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 480px) {
  #campaign-2219 #cam2219-explanation .buycomp h2 {
    font-size: 1.1em;
  }
  #campaign-2219 #cam2219-explanation .buycomp h2 span {
    font-size: 0.9em;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-title {
    font-size: 4vw;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw {
    font-size: 3.3vw;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-member .wrap-bg .flex, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .buycomp-wrap .comp-kw .wrap-bg .flex {
    width: 80%;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-title .comp-kw {
    font-size: 3.3vw;
  }
  #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-member, #campaign-2219 #cam2219-explanation .buycomp .buycomp-table .comp-wrap-rate .comp-kw {
    font-size: 3vw;
  }
  #campaign-2219 #cam2219-explanation .howtobuy .ls-block {
    display: block;
  }
}

.cam2219-bg-green {
  height: 100%;
  width: 100%;
  background: #80ff00;
  position: absolute;
  top: 0px;
}

.cam2219-bg-pink {
  height: 100%;
  width: 100%;
  background: #ff1494;
  position: absolute;
  top: 0px;
}

.cam2219-bf-img {
  position: absolute;
  top: 4%;
}
.cam2219-bf-img img {
  width: 60%;
}

.cam2219-bg-pink-detail {
  position: relative;
  top: -480px;
}

.cam2219-bf-img-detail {
  width: 100%;
  max-width: 1100px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.cam2219-bf-img-detail img {
  display: block;
  max-width: 600px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media only screen and (max-width: 1100px) {
  .cam2219-bf-img-detail img {
    width: calc(100% - 420px);
    left: 20px;
  }
}
@media only screen and (max-width: 880px) {
  .cam2219-set-height {
    height: 176px !important;
  }

  .cam2219-bg-pink-detail {
    height: 176px;
    top: -166px;
  }

  .cam2219-bf-img-detail {
    max-width: 240px;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .cam2219-bf-img-detail img {
    width: 100%;
    left: 0;
  }
}
/******** end cam2219 ブラックフライデー2022 ********/
/*
*
* voucher
*
*/
/******** 登録完了 ********/
@keyframes pop {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  10% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  20% {
    transform: scale(1.1, 0.8) translate(0%, 10%);
  }
  30% {
    transform: scale(0.8, 1.1) translate(0%, -10%);
  }
  40% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes open {
  0% {
    opacity: 1;
  }
  30% {
    transform: translateX(0);
    opacity: 1;
  }
  33%, 43%, 49%, 55%, 61%, 67% {
    transform: translateX(4%);
    opacity: 1;
  }
  38%, 46%, 52%, 58%, 64%, 70% {
    transform: translateX(-4%);
    opacity: 1;
  }
  71% {
    background: url(/img/common/present2.png) center top no-repeat;
    background-size: contain;
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    background: url(/img/common/present_open.png) center top no-repeat;
    background-size: contain;
  }
}
@keyframes get {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: rotate(0);
  }
}
#registration-thanks .vouchers-pop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  width: 200px;
}
#registration-thanks .vouchers-pop a {
  position: relative;
  display: block;
}
#registration-thanks .vouchers-pop #pop {
  animation: pop 3s linear 1s infinite;
}
#registration-thanks .vouchers-pop #get-text {
  background-color: #ffffff;
  border-radius: 15px;
  color: #d87285;
  font-weight: bold;
  border: 2px solid #d87285;
  font-size: 14px;
  width: 90%;
  text-align: center;
  position: absolute;
  bottom: 0;
  margin: 0 5% 10px;
}
#registration-thanks #get-voucher .btn-red {
  border: 1px solid #ef3d27;
  color: #ef3d27;
  background-color: #ffffff;
}
#registration-thanks #get-voucher .confirm-wrap {
  width: 400px;
  height: 300px;
  padding: 10px;
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
#registration-thanks #get-voucher #open-img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(/img/common/present2.png) center top no-repeat;
  background-size: contain;
  animation: open 4s ease-out 1;
  animation-fill-mode: forwards;
}
#registration-thanks #get-voucher #wat-fix {
  opacity: 0;
  animation: get 0.5s ease-out 5s 1;
  animation-fill-mode: forwards;
  background: linear-gradient(#ef3d27, #9a1100);
  color: #ffffff;
  font-weight: bold;
  padding-top: 2em;
  position: absolute;
  top: 20%;
  left: 60%;
  width: 60px;
  height: 30px;
  transform: rotate(-25deg);
  margin: 0;
  overflow: hidden;
}
#registration-thanks #get-voucher #wat-fix img {
  width: 80%;
}

/******** 購入系クーポン誘導 ********/
@keyframes boundVoucher {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-8px);
  }
  25% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.voucher-guide {
  position: relative;
  max-width: 200px;
  width: 60%;
  background-color: #ffffff;
  /*background: linear-gradient(to bottom right, $voucher-base,$voucher-grd, $voucher-base);*/
  font-weight: bold;
  font-size: 0.8em;
  color: #ef3d27;
  padding: 10px 5px;
  animation: boundVoucher 4s infinite;
  border: 1px solid #ef3d27;
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
}
.voucher-guide img {
  height: 1em;
  vertical-align: middle;
}

.voucher-guide::before {
  content: "";
  position: absolute;
}

.balloon-btm::before {
  border: 10px solid transparent;
  border-bottom-color: #ef3d27;
  top: -20px;
  left: calc(50% - 10px);
}

.balloon-top::before {
  border: 10px solid transparent;
  border-top-color: #ef3d27;
  bottom: -20px;
  left: calc(50% - 10px);
}

.voucher-tip {
  position: absolute;
  top: 2.5em;
  left: 0;
  width: 150px;
  background-color: #ffffff;
  border: 1px solid #ef3d27;
  border-radius: 15px;
  padding: 2px;
  animation: boundVoucher 4s infinite;
  font-size: 0.8em;
  z-index: 99;
}

.voucher-tip::before {
  content: "";
  border: 10px solid transparent;
  border-bottom-color: #ef3d27;
  position: absolute;
  top: -20px;
  left: 20px;
}

.voucher-tip::after {
  content: attr(voucher-tip);
  display: block;
  padding: 5px;
  font-weight: bold;
  text-align: center;
  color: #ef3d27;
}

.step-label {
  background-color: #ffffff;
  color: #ef3d27;
  padding: 1px 3px;
}

/******** マイページ ********/
#myvoucher {
  width: 230px;
  position: fixed;
  right: 0;
  bottom: 0px;
  z-index: 999;
}
#myvoucher a {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
#myvoucher a:hover {
  opacity: 0.8;
}
#myvoucher img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
#myvoucher .expire-date {
  width: 100%;
  /*background: linear-gradient(45deg, $voucher-base, $voucher-grd);*/
  background-color: #1c3267;
  color: #ffffff;
  font-size: 0.8em;
  padding: 2px 5px;
  margin: 0;
}
#myvoucher #bn-close {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  background-color: #000;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: -10px;
  right: 13px;
  cursor: pointer;
}

#voucher-guide .voucher-tip {
  top: 3.5em;
}

@media screen and (max-width: 640px) {
  #myvoucher {
    max-width: 155px;
    padding: 5px 0;
    bottom: 65px;
  }
  #myvoucher a {
    padding: 0;
  }
  #myvoucher #voucher-wrap {
    padding: 5px;
  }
  #myvoucher #voucher-wrap .sp-none {
    display: none;
  }
  #myvoucher img {
    display: inline-block;
    vertical-align: text-top;
  }
  #myvoucher .expire-date {
    font-size: 0.7em;
  }
}
/******** 設備一覧 ********/
#equipment-index .voucher-guide {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 1em;
  color: #ef2208;
  background-color: #ffdada;
  padding: 10px 5px;
  border: none;
  animation: none;
  animation: blink 5s ease infinite normal;
  border-radius: 0;
}
#equipment-index .voucher-guide br {
  display: none;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#equipment-index .voucher-guide img {
  height: 1em;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  #equipment-index .voucher-guide {
    font-size: 0.8em;
  }
  #equipment-index .voucher-guide br {
    display: block;
  }
}

/******** 購入入力 ********/
#buy-index .voucher-guide {
  display: none;
  width: 50%;
}
#buy-index #button-voucher {
  background-color: #ef3d27;
  position: relative;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.3em;
}
#buy-index #button-voucher img {
  height: 1em;
}
#buy-index #voucher-unuse {
  color: #ef3d27;
  font-size: 0.8em;
}
#buy-index #campaign span {
  font-size: 0.6em;
  font-weight: bold;
  display: inline-block;
  color: #ef3d27;
  background-color: #ffffff;
  border: 1px solid #ef3d27;
  padding: 5px;
  position: relative;
  width: 245px;
  text-align: center;
}
#buy-index #campaign img {
  width: 2em;
}

/******** 購入支払い ********/
#buy-payment #pay-voucher {
  position: relative;
  padding-top: 20px;
}
#buy-payment .voucher-tip {
  position: absolute;
  top: -30px;
  left: 0x;
  width: 200px;
  background-color: #ffffff;
  border: 1px solid #ef3d27;
  animation: boundVoucher 4s infinite;
  font-size: 0.8em;
}
#buy-payment .voucher-tip::before {
  border-bottom-color: transparent;
  border-top-color: #ef3d27;
  top: auto;
  left: 20px;
  bottom: -20px;
}
#buy-payment .voucher-guide {
  margin: 0 auto 0 52%;
  width: 50%;
}

#buy-confirm .voucher-tip {
  position: static;
  background-color: #ffffff;
  border: 1px solid #ef3d27;
  animation: boundVoucher 4s infinite;
  font-size: 0.7em;
  width: 300px;
  margin: 0 auto 30px;
}
#buy-confirm .voucher-tip::before {
  border-bottom-color: transparent;
  border-top-color: #ef3d27;
  top: auto;
  bottom: -20px;
  left: 50px;
}
#buy-confirm .voucher-guide {
  margin: 0 auto 15px 52%;
  display: none;
  width: 50%;
}

/*
*
* 管理画面
*
*/
#admin-broadcast-index {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
  background-color: #04f6dd;
  /*** ログ ***/
}
#admin-broadcast-index h1, #admin-broadcast-index h2, #admin-broadcast-index h3 {
  color: #333333;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
}
#admin-broadcast-index h2 {
  text-align: center;
}
#admin-broadcast-index ul {
  padding-left: 0;
}
#admin-broadcast-index .margin-bottom-small {
  margin-bottom: 5px;
}
#admin-broadcast-index .bc-font {
  color: #04f6dd;
}
#admin-broadcast-index .bc-bg {
  background-color: #1c1c1c;
}
#admin-broadcast-index .index-color-box {
  display: inline-block;
  width: 12px;
  height: 12px;
}
#admin-broadcast-index .trade-result-color-box {
  width: 10px;
  height: 32px;
}
#admin-broadcast-index .trade-result-wrap li:nth-child(n+2) {
  margin-left: 2px;
}
#admin-broadcast-index .date-wrap {
  width: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#admin-broadcast-index .date-wrap li {
  height: 24px;
  margin-bottom: 1px;
}
#admin-broadcast-index .daily-out-puts-boxes-wrap {
  flex-grow: 1;
}
#admin-broadcast-index .daily-outputs-color-box {
  width: 14px;
  height: 24px;
  margin: 1px;
}
#admin-broadcast-index .user-dd-wrap {
  flex-grow: 1;
}
#admin-broadcast-index #main {
  padding: 10px;
  color: #333333;
  margin: 0;
}
#admin-broadcast-index .last-updated {
  margin-bottom: 10px;
  color: #333333;
}
#admin-broadcast-index .wrap {
  font-size: 1vw;
  margin-bottom: 5px;
}
#admin-broadcast-index .wrap dl.flex {
  margin: 0;
  justify-content: space-between;
}
#admin-broadcast-index .wrap dt {
  width: 6em;
  font-size: 1.5em;
  text-align: center;
  background-color: #20262d;
  color: #04f6dd;
  display: flex;
  align-items: center;
  justify-content: center;
}
#admin-broadcast-index .wrap dd {
  width: calc(100% - 9em - 5px);
  justify-content: space-between;
}
#admin-broadcast-index .wrap .bc-card {
  width: calc(20% - 2.5px);
  background-color: #1c1c1c;
  padding: 0;
}
#admin-broadcast-index .wrap .bc-card.gw-card {
  margin-top: 5px;
}
#admin-broadcast-index .wrap .bc-card h3 {
  font-size: 1.2em;
  padding: 8px 16px;
  margin: 0;
  background-color: #20262d;
  color: #04f6dd;
  text-align: left;
}
#admin-broadcast-index .wrap .bc-content-text {
  margin: 0;
  color: #ffffff;
  font-weight: bold;
  padding: 8px 16px;
  font-size: 4em;
  line-height: 1;
}
#admin-broadcast-index .wrap.user dd {
  width: calc(100% - 5px);
  justify-content: space-between;
}
#admin-broadcast-index .wrap.user .bc-card {
  width: calc(20% - 2.5px);
  background-color: #1c1c1c;
  padding: 0;
}
#admin-broadcast-index .equip-column-wrap {
  display: flex;
  flex-flow: column;
}
#admin-broadcast-index h3.bc-font {
  margin-bottom: 0;
}
#admin-broadcast-index #log {
  font-size: 0.8em;
}
#admin-broadcast-index #log .log-hd {
  background-color: #20262d;
  color: #04f6dd;
  padding: 8px;
}
#admin-broadcast-index #log #log-list {
  padding: 16px 8px;
  list-style: none;
  line-height: 1;
  height: 10em;
  overflow: scroll;
  background-color: #1c1c1c;
  color: #ffffff;
}
@media screen and (max-width: 640px) {
  #admin-broadcast-index {
    font-size: 1.2vw;
  }
  #admin-broadcast-index #main {
    padding: 6px;
  }
  #admin-broadcast-index .last-updated {
    font-size: 0.8em;
  }
  #admin-broadcast-index .wrap {
    margin-bottom: 10px;
  }
  #admin-broadcast-index .wrap dt {
    width: 100%;
    margin-bottom: 5px;
    padding: 8px;
  }
  #admin-broadcast-index .wrap dd {
    width: 100%;
  }
  #admin-broadcast-index .wrap .bc-card h3, #admin-broadcast-index .wrap .bc-content-text {
    padding: 6px;
  }
  #admin-broadcast-index .wrap .bc-card,
#admin-broadcast-index .wrap .bc-card.user {
    width: calc(50% - 2.5px);
  }
  #admin-broadcast-index .wrap .bc-card:nth-child(even),
#admin-broadcast-index .wrap .bc-card.user:nth-child(even) {
    margin-right: 0;
  }
  #admin-broadcast-index .wrap .bc-card:not(:last-child),
#admin-broadcast-index .wrap .bc-card.user:not(:last-child) {
    margin-bottom: 5px;
  }
  #admin-broadcast-index h3.bc-font {
    font-size: 4vw;
    margin-bottom: 4px;
  }
  #admin-broadcast-index .trade-heat-map-wrap, #admin-broadcast-index .daily-output-wrap {
    padding: 6px;
  }
}

/*
*
*docs-watplus
*
*/
#docs-watplus #watplus-01 .frame-wrap {
  position: relative;
  width: 32%;
  border: solid 3px #0095ff;
  background-color: white;
}
#docs-watplus #watplus-01 .frame-wrap .point-hd {
  position: absolute;
  background-color: #0095ff;
  color: white;
  width: 6em;
  text-align: center;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
}
#docs-watplus #watplus-01 .text-wrap {
  padding-top: 1.5em;
}
#docs-watplus #watplus-01 .notes2 {
  padding-left: 8em;
}
#docs-watplus #watplus-02 h3 {
  display: inline-block;
  border: solid 1px #333333;
  background-color: white;
  padding: 10px;
}
#docs-watplus #watplus-02 .img-wrap {
  box-shadow: 0 0 3px #998b7e;
  margin: 3px;
  border-radius: 22px;
  padding: 40px;
}
#docs-watplus #watplus-02 .text-wrap {
  padding: 0 40px;
}
#docs-watplus #watplus-03 .mv-img {
  position: relative;
}
#docs-watplus #watplus-03 .mv-img img {
  border: 1px solid #dddddd;
}
#docs-watplus #watplus-03 .mv-wrap {
  position: relative;
  padding-bottom: 56%;
  width: 100%;
  height: 0;
  border: 1px solid #dddddd;
}
#docs-watplus #watplus-03 .mv-wrap .uk-close {
  color: #ffffff;
  background-color: #000;
  border-radius: 50%;
  border: 1px solid #ffffff;
  top: -30px;
  right: -15px;
}
#docs-watplus #watplus-03 .mv-wrap.uk-modal-dialog {
  width: 100%;
}
#docs-watplus #watplus-03 .mv-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#docs-watplus #watplus-04 .qa-wrap {
  width: 48%;
  margin-top: 4%;
}
#docs-watplus #watplus-04 h3 {
  position: relative;
  padding-left: 48px;
}
#docs-watplus #watplus-04 h3::before {
  content: "";
  position: absolute;
  background: url(/img/docs/watplus/icon_q.png) no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 640px) {
  #docs-watplus #watplus-01 .frame-wrap {
    width: 100%;
  }
  #docs-watplus #watplus-01 .notes2 {
    padding-left: 0;
    padding-top: 1.8em;
    margin-top: 1em;
  }
  #docs-watplus #watplus-02 h3 {
    font-size: 1em;
  }
  #docs-watplus #watplus-02 .img-wrap {
    padding: 10px;
  }
  #docs-watplus #watplus-02 .text-wrap {
    padding: 0;
  }
  #docs-watplus #watplus-03 .padding-s {
    padding: 0;
  }
  #docs-watplus #watplus-04 .qa-wrap {
    width: 100%;
  }
  #docs-watplus #watplus-04 h3 {
    padding-left: 38px;
    font-size: 1.1em;
  }
  #docs-watplus #watplus-04 h3::before {
    width: 30px;
    height: 30px;
    bottom: auto;
  }
}
@media screen and (max-width: 420px) {
  #docs-watplus .docs-wrap h2 {
    font-size: 6vw;
  }
}

/*
*
*中古太陽光買取ページ
*
*/
#docs-secondary {
  color: #333333;
  /*---------- レスポンシブ ---------*/
  /*---------- endレスポンシブ ---------*/
}
#docs-secondary .color-blue {
  color: #0055b2;
}
#docs-secondary .color-og {
  color: #ffae00;
}
#docs-secondary h1 {
  font-size: 3.5em;
  color: #333333;
}
#docs-secondary h2 {
  font-size: 2em;
}
#docs-secondary h3 {
  font-size: 1.5em;
}
#docs-secondary .flex {
  justify-content: space-between;
  flex-wrap: wrap;
}
#docs-secondary .top80 {
  margin-top: 80px;
}
#docs-secondary .bottom80 {
  margin-bottom: 80px;
}
#docs-secondary #contact,
#docs-secondary #content,
#docs-secondary #sh-flow {
  margin-top: 80px;
}
#docs-secondary #mv {
  background: url(/img/docs/secondary/bg-mv.jpg) center center no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;
}
#docs-secondary #mv::after {
  content: "";
  background: linear-gradient(to bottom, rgba(158, 205, 248, 0.5), rgba(158, 205, 248, 0.25), rgba(158, 205, 248, 0));
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
}
#docs-secondary #mv .container {
  position: relative;
}
#docs-secondary #mv .mv-ttl {
  max-width: 860px;
  padding: 80px 0 120px;
}
#docs-secondary #mv .mv-ttl .ttl-sp {
  display: none;
}
#docs-secondary #mv .mv-img {
  position: absolute;
  max-width: 390px;
  bottom: -5.5px;
  right: 0;
}
#docs-secondary #contact {
  text-align: center;
}
#docs-secondary #contact a {
  box-shadow: 1px 1px 4px #999999;
}
#docs-secondary #contact a img {
  width: 32px;
}
#docs-secondary #contact a.btn-l {
  max-width: 420px;
  border-radius: 15px;
  padding-left: 1.3em;
}
#docs-secondary #contact a.btn-l.font-l {
  font-size: 1.8em;
}
#docs-secondary #contact a span {
  height: 1em;
  top: -0.1em;
  bottom: 0;
  margin: auto;
}
#docs-secondary #contact a span svg {
  width: 1em;
}
#docs-secondary #content h1 {
  text-align: center;
}
#docs-secondary #content .content-user {
  background-color: #0055b2;
}
#docs-secondary #content .content-user .container {
  padding-bottom: 60px;
  overflow: initial;
  position: relative;
}
#docs-secondary #content .content-user .container::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 50px;
  background-color: #FFE900;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#docs-secondary #content .content-user .container::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 110px 0 110px;
  border-color: #FFE900 transparent transparent transparent;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#docs-secondary #content .content-user h1 {
  color: #ffffff;
  padding-top: 80px;
}
#docs-secondary #content .content-user .user-inner {
  position: relative;
  background-color: #ffffff;
  border-radius: 30px;
  box-shadow: 0 3px 6px #333333;
}
#docs-secondary #content .content-user .user-inner .img-l, #docs-secondary #content .content-user .user-inner .img-r {
  position: absolute;
}
#docs-secondary #content .content-user .user-inner .img-l {
  max-width: 160px;
  top: -12%;
  left: -1%;
}
#docs-secondary #content .content-user .user-inner .img-r {
  max-width: 155px;
  bottom: -3%;
  right: -3%;
}
#docs-secondary #content .content-user .user-check {
  padding: 80px 0;
  margin: 40px 0 0;
}
#docs-secondary #content .content-user .user-check li {
  position: relative;
  max-width: 30em;
  margin: 0 auto;
  border-bottom: dashed 1.5px #707070;
  padding: 0 4px 4px;
  font-size: 1.3em;
  margin-bottom: 24px;
}
#docs-secondary #content .content-user .user-check li b {
  padding-left: 40px;
}
#docs-secondary #content .content-user .user-check li:last-child {
  margin-bottom: 0;
}
#docs-secondary #content .content-user .user-check li::before {
  content: "";
  position: absolute;
  width: 35px;
  height: 30px;
  background: url(/img/docs/secondary/icon-check.png) center center no-repeat;
  background-size: cover;
}
#docs-secondary #content .content-company .sub-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1em;
}
#docs-secondary #content .content-company .sub-ttl::before, #docs-secondary #content .content-company .sub-ttl::after {
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333333;
}
#docs-secondary #content .content-company .sub-ttl::before {
  transform: rotate(55deg);
}
#docs-secondary #content .content-company .sub-ttl::after {
  transform: rotate(-55deg);
}
#docs-secondary #content .content-company ul {
  margin: 40px 0 0;
  padding-left: 0;
}
#docs-secondary #content .content-company .flex .com-img {
  max-width: 30%;
  margin-right: 40px;
}
#docs-secondary #content .content-company .flex .com-txt {
  max-width: 66%;
  margin-top: 16px;
}
#docs-secondary #content .content-company .com-list {
  border-bottom: solid 1px #dddddd;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
#docs-secondary #content .content-company h2:not(.sub-ttl) {
  font-size: 2.5em;
  text-align: center;
}
#docs-secondary #sh-flow {
  background-color: #f5f9ff;
  padding-bottom: 40px;
}
#docs-secondary #sh-flow .flow-des h1 {
  position: relative;
}
#docs-secondary #sh-flow .flow-des h1::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 5px;
  background: linear-gradient(to right, #0055b2, #0055b2 5px, transparent 5px, transparent 10px, #0055b2 10px, #0055b2 15px, transparent 15px, transparent 20px, #0055b2 20px, #0055b2 25px);
  bottom: -24px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#docs-secondary #sh-flow .flow-des p {
  padding-top: 29px;
}
#docs-secondary #sh-flow .flow-list thead {
  display: flex;
  margin: 40px 0;
}
#docs-secondary #sh-flow .flow-list thead tr, #docs-secondary #sh-flow .flow-list thead td {
  width: 100%;
  display: block;
}
#docs-secondary #sh-flow .flow-list thead tr {
  background-color: #ffffff;
  box-shadow: 0 3px 3px #dddddd;
  position: relative;
  padding-bottom: 20px;
}
#docs-secondary #sh-flow .flow-list thead tr::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #707070;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -15px;
  z-index: 1;
}
#docs-secondary #sh-flow .flow-list thead tr:last-child::after {
  content: "";
  display: none;
}
#docs-secondary #sh-flow .flow-list .flow-number {
  color: #ffae00;
  font-size: 3em;
  font-style: italic;
  padding: 40px 16px 0;
  line-height: 0;
}
#docs-secondary #sh-flow .flow-list .flow-img {
  max-width: 90px;
  margin: 0 auto;
  padding: 8px;
}
#docs-secondary #sh-flow .flow-list .flow-txt {
  text-align: center;
  padding: 0 8px;
}
#docs-secondary #change {
  background-color: #ffffff;
  border-radius: 50px;
  max-width: 1100px;
  margin: 0 auto;
  border: solid 5px #0095ff;
  position: relative;
}
#docs-secondary #change .change-inner {
  padding: 80px;
}
#docs-secondary #change .change-inner .logo-change {
  max-width: 230px;
  margin-right: 80px;
}
#docs-secondary #change .change-inner .txt-change {
  max-width: calc(100% - 310px);
}
#docs-secondary #change .change-inner .txt-change p {
  margin-bottom: 0;
}
#docs-secondary #change .flex {
  align-items: center;
}
#docs-secondary #change .change-img {
  position: absolute;
  max-width: 400px;
  bottom: -58px;
  right: -40px;
  z-index: 1;
}
@media screen and (max-width: 1104px) {
  #docs-secondary #change {
    margin-left: 20px;
    margin-right: 20px;
  }
  #docs-secondary #change .change-inner {
    padding: 80px 40px;
  }
  #docs-secondary #change .change-inner .logo-change {
    margin-right: 40px;
  }
  #docs-secondary #change .change-img {
    right: 0;
  }
}
@media screen and (max-width: 1072px) {
  #docs-secondary #mv .mv-ttl {
    max-width: 830px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 350px;
  }
  #docs-secondary #content .content-company .flex .com-txt {
    max-width: 65%;
  }
  #docs-secondary #change .txt-change {
    max-width: calc(100% - 270px);
  }
}
@media screen and (max-width: 1024px) {
  #docs-secondary #mv .mv-ttl {
    max-width: 800px;
    width: 90%;
  }
  #docs-secondary #mv .mv-img {
    max-width: 320px;
  }
}
@media screen and (max-width: 960px) {
  #docs-secondary #mv .mv-ttl {
    width: 80%;
  }
  #docs-secondary #content .content-user .user-inner .img-l, #docs-secondary #content .content-user .user-inner .img-r {
    max-width: 100px;
  }
  #docs-secondary #content .content-company .flex .com-img {
    margin-right: 20px;
  }
  #docs-secondary #content .content-company .flex .com-txt {
    margin-top: 0;
  }
  #docs-secondary #content .content-company h2:not(.sub-ttl) {
    font-size: 2em;
  }
  #docs-secondary #sh-flow .flow-list {
    margin-bottom: 0;
  }
  #docs-secondary #sh-flow .flow-list thead tr:nth-child(2) .flow-txt br {
    display: none;
  }
  #docs-secondary #change {
    border-color: #0095ff;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 40px;
  }
  #docs-secondary #change::before {
    display: none;
  }
  #docs-secondary #change .change-inner {
    padding: 40px;
  }
  #docs-secondary #change .change-inner .logo-change {
    margin: 0 auto;
  }
  #docs-secondary #change .change-inner .txt-change {
    max-width: 100%;
    margin: 24px 0;
    text-align: center;
  }
  #docs-secondary #change .change-inner .txt-change p {
    padding-bottom: 40px;
  }
  #docs-secondary #change .change-img {
    right: 0;
    left: 0;
    margin: auto;
    bottom: 0;
  }
}
@media screen and (max-width: 820px) {
  #docs-secondary h1 {
    font-size: 3em;
  }
  #docs-secondary .top80 {
    margin-top: 40px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 300px;
  }
  #docs-secondary #content .content-user h1 {
    padding-top: 40px;
  }
  #docs-secondary #content .content-user .user-inner .img-l {
    max-width: 85px;
  }
  #docs-secondary #content .content-user .user-inner .img-r {
    max-width: 100px;
  }
}
@media screen and (max-width: 768px) {
  #docs-secondary h1 {
    font-size: 2.8em;
  }
  #docs-secondary h2 {
    font-size: 1.8em;
  }
  #docs-secondary h3 {
    font-size: 1.3em;
  }
  #docs-secondary #mv .mv-ttl {
    max-width: 720px;
    width: 90%;
    padding-bottom: 230px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 300px;
  }
  #docs-secondary #content .content-user .user-inner {
    width: 100%;
    margin: 0 auto;
  }
  #docs-secondary #content .content-user .user-inner .img-l {
    max-width: 80px;
  }
  #docs-secondary #content .content-user .user-inner .img-r {
    max-width: 100px;
  }
  #docs-secondary #sh-flow .flow-list thead {
    flex-wrap: wrap;
    max-width: 614px;
    margin: 40px auto 0;
  }
  #docs-secondary #sh-flow .flow-list thead tr {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    padding-bottom: 0;
  }
  #docs-secondary #sh-flow .flow-list thead tr::after {
    content: "";
    transform: rotate(90deg);
    left: 0;
    right: 0;
    margin: auto;
    top: initial;
    bottom: -37px;
  }
  #docs-secondary #sh-flow .flow-list thead tr .flow-number {
    padding-top: 8px;
  }
  #docs-secondary #sh-flow .flow-list thead tr .flow-img {
    order: 2;
  }
  #docs-secondary #sh-flow .flow-list thead tr .flow-txt {
    padding: 10px 0;
  }
  #docs-secondary #change .change-img {
    max-width: 360px;
  }
}
@media screen and (max-width: 680px) {
  #docs-secondary #mv .mv-ttl {
    width: 90%;
  }
  #docs-secondary #mv .mv-img {
    max-width: 280px;
  }
  #docs-secondary h1 {
    font-size: 2.5em;
  }
  #docs-secondary .bottom80 {
    margin-bottom: 40px;
  }
  #docs-secondary #contact,
#docs-secondary #content,
#docs-secondary #sh-flow {
    margin-top: 40px;
  }
  #docs-secondary #contact h3 br {
    display: none;
  }
  #docs-secondary #content .content-user .user-check {
    padding: 40px 0;
  }
  #docs-secondary #content .content-user .user-check li {
    font-size: 1em;
    margin: 0 auto 24px;
  }
  #docs-secondary #content .content-user .user-check li::before {
    width: 25px;
    height: 20px;
  }
  #docs-secondary #content .content-user .user-check li b {
    padding-left: 28px;
  }
  #docs-secondary #content .content-company ul {
    margin-top: 24px;
  }
  #docs-secondary #content .content-company .com-list {
    padding-bottom: 0;
  }
  #docs-secondary #content .content-company .flex .com-img, #docs-secondary #content .content-company .flex .com-txt {
    max-width: 100%;
  }
  #docs-secondary #content .content-company .flex .com-img {
    margin-right: 0;
  }
  #docs-secondary #content .content-company .flex .com-txt {
    margin-top: 24px;
  }
  #docs-secondary #sh-flow .flow-list thead {
    max-width: 100%;
  }
  #docs-secondary #change {
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media screen and (max-width: 620px) {
  #docs-secondary h1 {
    font-size: 2em;
  }
  #docs-secondary h2 {
    font-size: 1.5em;
  }
  #docs-secondary #contact,
#docs-secondary #content,
#docs-secondary #sh-flow {
    margin-top: 40px;
  }
  #docs-secondary #contact button a {
    font-size: 2em;
  }
  #docs-secondary #mv .mv-ttl {
    padding: 40px 0 210px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 260px;
  }
  #docs-secondary #content .content-user .user-inner .user-check {
    margin: 0;
  }
  #docs-secondary #content .content-user .user-inner .img-l, #docs-secondary #content .content-user .user-inner .img-r {
    display: none;
  }
  #docs-secondary #content .content-user .user-inner {
    margin-top: 0;
  }
  #docs-secondary #content .content-company {
    margin-top: 24px;
  }
  #docs-secondary #content .content-company h2:not(.sub-ttl) {
    font-size: 1.8em;
    margin-top: 20px;
  }
}
@media screen and (max-width: 520px) {
  #docs-secondary #contact h3 {
    text-align: left;
    margin: 0 20px;
  }
  #docs-secondary #contact a.btn-l {
    max-width: 280px;
  }
  #docs-secondary #contact a.btn-l.font-l {
    font-size: 1.1em;
  }
  #docs-secondary #contact a span {
    top: -0.5em;
  }
  #docs-secondary #contact a span svg {
    width: 1.2em;
  }
  #docs-secondary #mv .mv-ttl {
    padding-bottom: 190px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 225px;
  }
  #docs-secondary #content .content-company h2:not(.sub-ttl) {
    text-align: left;
    font-size: 1.6em;
  }
  #docs-secondary #sh-flow .flow-des p {
    text-align: left;
  }
}
@media screen and (max-width: 420px) {
  #docs-secondary h1 {
    font-size: 1.8em;
  }
  #docs-secondary #contact h3 {
    font-size: 1.2em;
    margin: 0;
  }
  #docs-secondary #contact p {
    text-align: left;
  }
  #docs-secondary #contact button {
    padding: 20px;
  }
  #docs-secondary #contact button a {
    font-size: 1.5em;
  }
  #docs-secondary #contact button a img {
    width: 28px;
  }
  #docs-secondary #mv .mv-ttl {
    padding-bottom: 113px;
  }
  #docs-secondary #mv .mv-img {
    max-width: 150px;
  }
  #docs-secondary #content .content-user h1 {
    text-align: left;
    letter-spacing: -1px;
  }
  #docs-secondary #content .content-user .user-check {
    margin-top: 0;
  }
  #docs-secondary #content .content-user .user-check li {
    margin: 0 10px 24px;
  }
  #docs-secondary #content .content-user .user-check li b {
    display: block;
  }
  #docs-secondary #content .content-company .sub-ttl {
    font-size: 100%;
  }
  #docs-secondary #content .content-company .sub-ttl::before, #docs-secondary #content .content-company .sub-ttl::after {
    width: 15px;
    height: 1px;
  }
  #docs-secondary #content .content-company .flex .com-txt h3 {
    margin-bottom: 0;
  }
  #docs-secondary #content .content-company .flex .com-txt p {
    margin-top: 8px;
  }
  #docs-secondary #content .content-company h2:not(.sub-ttl) {
    font-size: 1.3em;
  }
  #docs-secondary #sh-flow .flow-des h1 {
    margin-bottom: 0;
  }
  #docs-secondary #sh-flow .flow-des h1::after {
    bottom: -16px;
  }
  #docs-secondary #sh-flow .flow-des p {
    margin-top: 0;
  }
  #docs-secondary #change .change-inner {
    padding: 24px 10px;
  }
  #docs-secondary #change .change-inner .txt-change p {
    padding-bottom: 0;
  }
  #docs-secondary #change .change-img {
    max-width: 220px;
  }
}

/*
*
* 特典申込(共通)
*
*/
.bonus-cmn .btn-disabl {
  cursor: auto;
  border: 1px solid #666666;
}
.bonus-cmn .bonus-list {
  justify-content: space-around;
}
.bonus-cmn .bonus-list li {
  width: 46%;
  margin: 0 1%;
  align-content: space-between;
}
.bonus-cmn .bonus-list li h3 {
  width: 100%;
}
.bonus-cmn .bonus-list li .bonus-btn {
  width: 100%;
}
.bonus-cmn .img-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.bonus-cmn .img-wrap img {
  /*max-width: 40%;*/
  max-height: 200px;
  margin-top: 20px;
}
.bonus-cmn .img-wrap p {
  width: 100%;
}

/*
*
* 特典申込(index)
*
*/
#bonusgoods-index #no-campaign img {
  max-width: 300px;
  width: 100%;
}
#bonusgoods-index #bonus-goods-img img {
  width: 100%;
  max-width: 300px;
}
#bonusgoods-index .bonus-list {
  flex-wrap: wrap;
}
#bonusgoods-index .bonus-list.notconfirmed li::before {
  content: "";
  width: 100%;
  height: calc(100% - 40px);
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  z-index: 100;
}
#bonusgoods-index .bonus-list li {
  position: relative;
  width: 30%;
  max-width: 800px;
}
#bonusgoods-index .bonus-list li .js-notconfirmed {
  pointer-events: none;
}
#bonusgoods-index .bonus-list li .js-notconfirmed:hover {
  opacity: 1;
}
@media screen and (max-width: 640px) {
  #bonusgoods-index .bonus-list {
    flex-wrap: wrap;
  }
  #bonusgoods-index .bonus-list.notconfirmed li::before {
    height: calc(100% - 20px);
  }
  #bonusgoods-index .bonus-list li {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    margin-left: 10px;
  }
  #bonusgoods-index #no-campaign h2 {
    font-size: 1.2em;
  }
}

/*
*
* 特典申込(入力)
*
*/
#bonusgoods-input {
  /** ガイド **/
}
#bonusgoods-input .bonus-list li {
  position: relative;
  justify-content: center;
}
#bonusgoods-input .bonus-list label {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 8px 8px 8px 30px;
  width: 100%;
  height: 100%;
  font-weight: bold;
  cursor: pointer;
}
#bonusgoods-input .bonus-list label .img-wrap {
  width: 80%;
  max-width: 200px;
}
#bonusgoods-input .bonus-list label .img-wrap.watt {
  max-width: 120px;
}
#bonusgoods-input .bonus-list .bonus-name {
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  margin: 0;
}
#bonusgoods-input .bonus-list input {
  position: absolute;
  left: 10px;
  top: 45%;
  background: #fff;
}
#bonusgoods-input .bonus-list input:checked {
  background-color: #fbb03b;
}
#bonusgoods-input .bonus-list input:checked + label {
  background: #fdf3cc;
}
#bonusgoods-input .select-pop {
  color: #fff;
  font-weight: bold;
  text-align: center;
  border: 2px solid #193e8b;
  background-color: #0095ff;
  padding: 8px;
  animation: blink 8s ease infinite normal;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 640px) {
  #bonusgoods-input .bonus-list li {
    max-width: 300px;
    width: 100%;
    margin: 4% 1%;
  }
}

#bonusgoods-confirm #confirm {
  padding: 16px;
  background-color: #f5f5f5;
}
#bonusgoods-confirm .btn-disable {
  background-color: #dddddd;
  color: #ffffff;
}

/*
 *
 * マイル登録用 CSS
 *
 */
/*---------- マイル登録 ----------*/
.side-mile .side-amc {
  background-color: #063d8f;
  color: #ffffff;
  padding: 2px 4px;
}
.side-mile .side-jmb {
  background-color: #cc0100;
  color: #ffffff;
  padding: 2px 4px;
}

#user-mileagenumber .mileage-btn {
  background-color: #ffffff;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.2;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  position: relative;
}
#user-mileagenumber .mileage-btn#jmb-btn {
  border: 2px solid #cc0100;
  color: #cc0100;
}
#user-mileagenumber .mileage-btn#dpoint-btn {
  border: 2px solid #d00f31;
  color: #d00f31;
}
#user-mileagenumber .mileage-btn .font-s {
  font-size: 0.6em;
}
#user-mileagenumber .mileage-btn .uk-icon {
  position: absolute;
  right: 5px;
  top: calc(50% - 0.5em);
}
#user-mileagenumber .mile-tab {
  padding: 10px 20px;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  font-size: 1.2em;
  width: 50%;
  text-align: center;
}
#user-mileagenumber .mile-tab:hover {
  cursor: pointer;
}
#user-mileagenumber .tab-tripartition .mile-tab {
  width: 33.3%;
}
#user-mileagenumber #tab-jal {
  background-color: #fadbda;
  color: #ffffff;
}
#user-mileagenumber #tab-jal.active {
  background-color: #cc0100;
}
#user-mileagenumber #tab-ana {
  background-color: #d3dff1;
  color: #ffffff;
}
#user-mileagenumber #tab-ana.active {
  background-color: #063d8f;
}
#user-mileagenumber #tab-docomo {
  background-color: #e2bec7;
  color: #ffffff;
}
#user-mileagenumber #tab-docomo.active {
  background-color: #d00f31;
}
#user-mileagenumber #tab-ponta {
  background-color: #ffd3a7;
  color: #ffffff;
}
#user-mileagenumber #tab-ponta.active {
  background-color: #ff9123;
}
#user-mileagenumber #ana-wrap .btn-m, #user-mileagenumber #ponta-wrap .btn-m {
  margin: 8px 0;
}
#user-mileagenumber #guide-blink {
  color: white;
  font-weight: bold;
  background-color: #0055b2;
  display: inline-block;
  padding: 4px 16px;
  position: relative;
}
#user-mileagenumber #guide-blink::before, #user-mileagenumber #guide-blink::after {
  content: "";
  position: absolute;
  bottom: -15px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #0055b2 transparent transparent transparent;
  border-width: 15px 15px 0 15px;
}
#user-mileagenumber #guide-blink::before {
  left: 10%;
}
#user-mileagenumber #guide-blink::after {
  right: 10%;
}
#user-mileagenumber #guide-blink.guide-tripartition {
  max-width: 600px;
  width: 100%;
}
#user-mileagenumber #guide-blink .point-guide::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #0055b2 transparent transparent transparent;
  border-width: 15px 15px 0 15px;
}
#user-mileagenumber .mile-error {
  padding: 1em;
  font-size: 0.8em;
  background-color: #fee;
  color: #f42727;
}
#user-mileagenumber #note-wrap {
  background-color: #efefef;
  padding: 1em;
}
#user-mileagenumber #title-register {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#user-mileagenumber #title-register .title-logo {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 12px;
  color: white;
  line-height: 1;
}
#user-mileagenumber #title-register .title-logo.logo-amc {
  background-color: #063d8f;
}
#user-mileagenumber #title-register .title-logo.logo-jmb {
  background-color: #cc0100;
}
#user-mileagenumber #title-register .title-logo.logo-docomo, #user-mileagenumber #title-register .title-logo.logo-ponta {
  max-width: 60px;
  padding: 5px;
}
#user-mileagenumber #mileagenum {
  padding: 10px;
  border: solid 1px black;
  background-color: #efefef;
}
@media screen and (max-width: 420px) {
  #user-mileagenumber .tab-tripartition .mile-tab {
    padding: 8px 10px;
    font-size: 0.9em;
  }
  #user-mileagenumber #guide-blink::before {
    left: 20%;
  }
  #user-mileagenumber #guide-blink::after {
    right: 20%;
  }
  #user-mileagenumber #guide-blink.guide-tripartition::before {
    left: 13%;
  }
  #user-mileagenumber #guide-blink.guide-tripartition::after {
    right: 13%;
  }
}

/*
 *
 * グリーンワット共通CSS
 *
 */
.grw-cmn {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 17px;
  /*---------- テキスト・装飾 ----------*/
  /*------ end テキスト・装飾 -------*/
  /*--------- 見出し・装飾 ---------*/
  /*------- end 見出し・装飾 -------*/
  /*--------- 背景・装飾 -----------*/
  /*-------- end 背景・装飾 -------*/
  /*---------- パンくず ---------*/
  /*------- end パンくず --------*/
  /*---------- ボタン -----------*/
  /* チェックボタン */
  /* グラデーションボタン */
  /* 枠がグラデーションのボタン */
  /* end グラデーションボタン */
  /* 枠がmain2のボタン */
  /* 数量入力ボタン */
  /* 数量入力ボタン(MAX) */
  /*-------- end ボタン --------*/
  /*----- ヘッダ -----*/
  /*----- end ヘッダ -----*/
  /*----- フッタ -----*/
  /*----- end フッタ -----*/
  /*----- 購入／売却ステップ -----*/
  /*---- end購入／売却ステップ ----*/
  /*------------ 発電所一覧 ------------*/
  /**** イメージ画像 ****/
  /**** グリーンワット全体のスペック ****/
  /*---------- end 発電所一覧 ----------*/
  /**** ページネーション ****/
  /*---------- 履歴 ----------*/
  /*---------- サマリ ----------*/
  /*---------- endサマリ ----------*/
  /*------ 利用規約 ------*/
  /*------ リーフの単位 ------*/
  /*---------- レスポンシブ ----------*/
}
.grw-cmn h1, .grw-cmn h2, .grw-cmn h3, .grw-cmn h4, .grw-cmn h5 {
  font-family: sans-serif;
  color: #232323;
}
.grw-cmn p, .grw-cmn ul, .grw-cmn ol, .grw-cmn dl {
  color: #232323;
}
.grw-cmn .uk-alert-danger {
  color: #ff3833;
}
.grw-cmn .uk-alert-warning {
  color: #f7945e;
}
.grw-cmn .font-text {
  color: #232323;
}
.grw-cmn .font-main1 {
  color: #81c725;
}
.grw-cmn .font-main2 {
  color: #00b3a3;
}
.grw-cmn .font-base2 {
  color: #fff;
}
.grw-cmn .font-sub1 {
  color: #f7b421;
}
.grw-cmn .font-sub2 {
  color: #008fc2;
}
.grw-cmn .font-low {
  color: #5a982d;
}
.grw-cmn .font-cv {
  color: #ff5b22;
}
.grw-cmn .text-link {
  color: #232323;
  text-decoration: underline;
}
.grw-cmn h1#mv-title {
  height: 3em;
  font-size: 2em;
}
.grw-cmn .hd-main {
  font-size: 1.6em;
}
.grw-cmn .hd-sub, .grw-cmn .bs-hd {
  font-size: 1.4em;
}
.grw-cmn .hd-s {
  font-size: 1.2em;
}
.grw-cmn .h-left-main1 {
  border-left: 5px solid #81c725;
  padding-left: 10px;
}
.grw-cmn .h-bottom-main1 {
  text-align: center;
  display: block;
}
.grw-cmn .h-bottom-main1:after {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background: #81c725;
  margin: 5px auto 10px;
}
.grw-cmn .h-bottom-main1-left {
  display: block;
}
.grw-cmn .h-bottom-main1-left:after {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background: #81c725;
  margin: 5px 0 10px;
}
.grw-cmn .h-top-main1 {
  text-align: center;
  display: block;
}
.grw-cmn .h-top-main1:before {
  display: block;
  content: "";
  width: 4em;
  height: 3px;
  background: #81c725;
  margin: 5px auto 10px;
}
@media screen and (max-width: 640px) {
  .grw-cmn h1#mv-title {
    height: 3em;
    font-size: 1.3em;
  }
  .grw-cmn .hd-main {
    font-size: 1.3em;
  }
  .grw-cmn .hd-sub, .grw-cmn .bs-hd {
    font-size: 1.2em;
  }
  .grw-cmn .hd-s {
    font-size: 1em;
  }
}
.grw-cmn .bg-gra {
  background: linear-gradient(to right, #00b3a3, #81c725);
}
.grw-cmn .bg-base1 {
  background-color: #f1f5f5;
}
.grw-cmn .bg-base2 {
  background-color: #fff;
}
.grw-cmn .bg-main1 {
  background-color: #81c725;
}
.grw-cmn .bg-main2 {
  background-color: #00b3a3;
}
.grw-cmn .bg-sub1 {
  background-color: #f7b421;
}
.grw-cmn .bg-sub2 {
  background-color: #008fc2;
}
.grw-cmn .bg-high1 {
  background-color: #7dd8d0;
}
.grw-cmn .bg-high2 {
  background-color: #fbd98e;
}
.grw-cmn .bg-high3 {
  background-color: #7dc6e0;
}
.grw-cmn .bg-high4 {
  background-color: #a9dd57;
}
.grw-cmn .bg-high5 {
  background-color: #eef8e0;
}
.grw-cmn .bg-high6 {
  background-color: #d4f4f0;
}
.grw-cmn .bg-graph {
  background-color: #f9f9f9;
}
.grw-cmn .bg-low {
  background-color: #5a982d;
}
.grw-cmn .tag {
  padding: 2px;
}
.grw-cmn .tag-base2 {
  border: solid 1px #fff;
}
.grw-cmn .tag-low {
  border: solid 1px #5a982d;
}
.grw-cmn .table-alternate tr:nth-child(odd) {
  background: #f9f9f9;
}
.grw-cmn .table-alternate tr:nth-child(even) {
  background: #fff;
}
.grw-cmn .box-shadow {
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  margin: 5px;
}
.grw-cmn .round-corner {
  border-radius: 16px;
}
.grw-cmn .round-top {
  border-radius: 16px 16px 0 0;
}
.grw-cmn .round-shadow {
  border-radius: 16px;
  filter: drop-shadow(0 0 5px rgba(206, 206, 206, 0.75));
  transform: translateZ(0);
  overflow: hidden;
  margin: 5px;
}
.grw-cmn .margin-shadow {
  margin: 5px;
}
.grw-cmn .padding-shadow {
  padding: 5px;
}
@media screen and (max-width: 640px) {
  .grw-cmn .padding-remove-s {
    box-shadow: none;
    background: none;
  }
}
.grw-cmn .breadcrumb {
  color: #232323;
}
.grw-cmn .breadcrumb a {
  color: #232323;
}
.grw-cmn .uk-checkbox:checked,
.grw-cmn .uk-checkbox:indeterminate,
.grw-cmn .uk-radio:checked {
  background-color: #00b3a3;
}
.grw-cmn .btn-xl {
  max-width: 410px;
  padding: 16px 8px;
  border-radius: 50px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
}
.grw-cmn .btn-tall {
  padding: 16px 8px;
  border-radius: 50px;
}
.grw-cmn .btn-gra {
  background: linear-gradient(to top, #00b3a3, #81c725);
  color: #81c725;
}
.grw-cmn .btn-gra.btn-frame {
  padding: 3px;
}
.grw-cmn .btn-gra-line {
  background: linear-gradient(to bottom, #00b3a3, #81c725);
  padding: 3px;
  border-radius: 50px;
  display: inline-block;
}
.grw-cmn .btn-gra-line .btn-inner {
  background: #fff;
  border-radius: 50px;
  padding: 10px;
}
.grw-cmn .btn-gra-line .btn-inner:hover {
  background: linear-gradient(to bottom, #00b3a3, #81c725);
  color: #fff;
}
.grw-cmn .btn-std {
  background: #fff;
}
.grw-cmn .btn-std.font-cv {
  color: #ff5b22;
}
.grw-cmn .btn-std.font-sub2 {
  color: #008fc2;
}
.grw-cmn .btn-std.font-muted {
  color: #898989;
}
.grw-cmn .btn-base2 {
  background: #fff;
  border: solid 2px #00b3a3;
  color: #00b3a3;
}
.grw-cmn .btn-base2:hover {
  background: #00b3a3;
  color: #fff;
}
.grw-cmn .btn-main2 {
  background: #00b3a3;
  border: solid 2px #00b3a3;
  color: #fff;
}
.grw-cmn .btn-main2:hover {
  background: #fff;
  color: #00b3a3;
}
.grw-cmn .btn-main2-frame {
  background: #00b3a3;
  padding: 3px;
  border-radius: 50px;
  display: inline-block;
}
.grw-cmn .btn-main2-frame .btn-inner {
  background: #fff;
  border-radius: 50px;
  padding: 10px;
  color: #232323;
}
.grw-cmn .btn-main2-frame .btn-inner:hover {
  background: #00b3a3;
  color: #fff;
}
.grw-cmn .btn-cv {
  background: #ff5b22;
  border: 1px solid #ff5b22;
}
.grw-cmn .btn-cv:hover {
  background: #fff;
  color: #ff5b22;
}
.grw-cmn .btn-normal {
  background: #fff;
  border: solid 0.5px #d3d3d3;
  color: #232323;
}
.grw-cmn .btn-normal.btn-m {
  border-radius: 5px;
  padding: 4px;
}
.grw-cmn .btn-shadow {
  background: #fff;
  border: solid 0.5px #fff;
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  margin: 5px;
}
.grw-cmn .btn-shadow.btn-m {
  border-radius: 5px;
  padding: 4px;
}
.grw-cmn .btn-back {
  background: #d3d3d3;
  border: solid 1px #d3d3d3;
}
.grw-cmn .btn-back:hover {
  background: #fff;
}
.grw-cmn .button-sum {
  background: #adadad;
  border-radius: 7px;
}
.grw-cmn .button-max {
  background: #00b3a3;
  border-radius: 7px;
}
@media screen and (max-width: 640px) {
  .grw-cmn .btn-xl {
    font-size: 1em;
  }
}
.grw-cmn header#green-hd {
  color: #232323;
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
}
.grw-cmn header#green-hd hr {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #00b3a3, #81c725);
  border: none;
}
.grw-cmn header#green-hd #hd-btn .btn-regist {
  padding: 8px;
}
.grw-cmn header#green-hd #hd-btn .btn-gra-line {
  color: #878787;
  padding: 2px;
}
.grw-cmn header#green-hd #hd-btn .btn-gra-line .btn-inner {
  padding: 6px;
  width: 100%;
  height: 100%;
}
.grw-cmn header#green-hd #hd-btn .btn-gra-line .btn-inner svg {
  width: 1em;
}
.grw-cmn header#green-hd #hd-btn .btn-gra-line .btn-inner .cls-1 {
  fill: #878787;
}
.grw-cmn header#green-hd #hd-btn .btn-gra-line .btn-inner:hover .cls-1 {
  fill: #fff;
}
.grw-cmn header#green-hd #hd-btn .btn-gra {
  color: #fff;
}
.grw-cmn header#green-hd #hd-btn .btn-gra svg {
  width: 1em;
}
.grw-cmn header#green-hd #hd-btn .btn-gra svg .cls-1 {
  fill: #fff;
}
.grw-cmn header#green-hd #hd-btn .btn-gra svg .cls-2 {
  fill: #81c725;
  fill-rule: evenodd;
}
.grw-cmn header#green-hd #g-menu {
  margin: 15px 0 0 0;
}
.grw-cmn header#green-hd #g-menu li {
  padding: 0 1em;
  font-weight: bold;
}
.grw-cmn header#green-hd #g-menu li:not(:last-child) {
  border-right: 1px solid #e5e5e5;
}
.grw-cmn header#green-hd #g-menu li:last-child {
  padding: 0 0 0 1em;
}
.grw-cmn header#green-hd #g-menu li a.font-main2 {
  color: #00b3a3;
}
.grw-cmn header#green-hd #g-menu li a {
  color: #232323;
}
@media screen and (max-width: 960px) {
  .grw-cmn header#green-hd #hd-btn .btn-gra-line .btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.grw-cmn footer#green-ft {
  background-color: #f1f5f5;
  background-image: url(/img/green/common/bk_tree1.png);
  background-position: center top;
  background-repeat: repeat-x;
  background-size: auto 220px;
  padding-top: 220px;
}
.grw-cmn footer#green-ft #ft-logo {
  max-width: 210px;
  width: 100%;
}
.grw-cmn footer#green-ft #ft-link {
  width: 70%;
}
.grw-cmn footer#green-ft #ft-link p {
  color: #fff;
}
.grw-cmn footer#green-ft #ft-link #ft01-right {
  align-items: center;
}
.grw-cmn footer#green-ft #ft-link #ft-btn {
  width: 385px;
  align-items: flex-end;
  justify-content: flex-end;
}
.grw-cmn footer#green-ft #ft-link #ft-btn .btn-s {
  margin-left: 8px;
}
.grw-cmn footer#green-ft #ft-link #ft-btn .btn-s span {
  position: static;
}
.grw-cmn footer#green-ft #ft-link #ft-btn .logout:hover {
  color: #fff;
}
.grw-cmn footer#green-ft #ft-link #ft-btn svg {
  width: 1em;
}
.grw-cmn footer#green-ft #ft-link #ft-btn svg .cls-1 {
  fill: #fff;
}
.grw-cmn footer#green-ft #ft-link #ft-btn .grw-home svg .cls-1 {
  fill: #81c725;
}
.grw-cmn footer#green-ft #ft-link #ft-btn .grw-home svg .cls-2 {
  fill: #fff;
  fill-rule: evenodd;
}
.grw-cmn footer#green-ft #ft-app {
  width: 27%;
  background: #fff;
  border-radius: 16px;
  align-items: center;
}
.grw-cmn footer#green-ft #ft-app ul {
  width: 100%;
}
.grw-cmn footer#green-ft #ft-btm .container {
  align-items: flex-end;
}
.grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active * {
  color: #81c725;
}
.grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #grw1, .grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #buy2 {
  fill: #81c725 !important;
}
.grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn.ft-nav-active #grw1 {
  stroke: #81c725 !important;
}
.grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn#ft-bottom-close * {
  color: #81c725;
}
.grw-cmn footer#green-ft #ft-bottom-nav #ft-bottom .ft-bottom-btn#ft-bottom-close #close1-1-2-3 {
  fill: #81c725 !important;
}
@media (max-width: 1080px) {
  .grw-cmn footer#green-ft #ft-link #ft-btn {
    justify-content: flex-end;
    width: 145px;
  }
  .grw-cmn footer#green-ft #ft-link #ft-btn .btn-s {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .grw-cmn footer#green-ft #ft-link #ft-btn .btn-s span {
    display: none;
  }
}
@media screen and (max-width: 880px) {
  .grw-cmn footer#green-ft #ft-link {
    width: 100%;
  }
  .grw-cmn footer#green-ft #ft-app {
    width: 100%;
    max-width: 280px;
    margin: 40px auto 0;
  }
}
@media screen and (max-width: 640px) {
  .grw-cmn footer#green-ft {
    background-color: #f1f5f5;
    background-image: url(/img/green/common/bk_tree1.png);
    background-position: center top;
    background-repeat: repeat-x;
    background-size: auto 110px;
    padding-top: 110px;
  }
  .grw-cmn footer#green-ft #ft-logo {
    margin: 0 auto 20px;
  }
  .grw-cmn footer#green-ft #ft-link #ft01-right {
    width: 100%;
  }
  .grw-cmn footer#green-ft #ft-link #ft-sns {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .grw-cmn footer#green-ft #ft-link #ft-btn {
    width: 100%;
    justify-content: center;
  }
  .grw-cmn footer#green-ft .ft-menu-block {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}
.grw-cmn .step-indicator li {
  color: #f1f5f5;
}
.grw-cmn .step-indicator li::before {
  border-left: 10px solid #f1f5f5;
}
.grw-cmn .step-indicator li.step-incomplete {
  background: #d3d3d3;
}
.grw-cmn .step-indicator li.step-incomplete:after {
  border-left: 10px solid #d3d3d3;
}
.grw-cmn .step-indicator li.step-active {
  background: #81c725;
}
.grw-cmn .step-indicator li.step-active:after {
  border-left: 10px solid #81c725;
}
.grw-cmn .step-indicator li.step-complete {
  background: #fff;
  color: #81c725;
}
.grw-cmn .step-indicator li.step-complete:after {
  border-left: 10px solid #fff;
}
.grw-cmn .equip-list {
  padding: 0 6px;
}
.grw-cmn .equip-list .equip-list-wrap {
  background: #fff;
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  border-radius: 16px;
  /*** 発電実績 ***/
}
.grw-cmn .equip-list .equip-list-wrap h3 {
  background: #81c725;
  border-radius: 16px 16px 0 0;
}
.grw-cmn .equip-list .equip-list-wrap .equip-img .eq-display {
  position: absolute;
  background-color: #fff;
  color: #00b3a3;
  top: 15px;
  left: 15px;
  font-weight: bold;
  margin: 0;
  padding: 4px 8px;
}
.grw-cmn .equip-list .equip-list-wrap dl {
  background: #fff;
  border-top: none;
}
.grw-cmn .equip-list .equip-list-wrap dl .eq-detail-wrap {
  border-bottom: 1px solid #d3d3d3;
}
.grw-cmn .equip-list .equip-list-wrap dl dt {
  font-weight: normal;
  padding: 16px 0 0;
  color: #232323;
}
.grw-cmn .equip-list .equip-list-wrap dl dd {
  font-weight: bold;
  padding: 16px 0 0;
  color: #232323;
}
.grw-cmn .equip-list .equip-list-wrap .btn-wrap {
  background: transparent;
}
.grw-cmn .equip-list .equip-list-wrap .performance-data dt {
  color: #232323;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .height-match {
  border: none;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .performance-data {
  background: #eef8e0;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .performance-data .chart-detail-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .performance-data .chart-detail-wrap:first-child {
  border-bottom: solid 1px #d3d3d3;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .performance-data dt {
  margin-top: 0;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .btn-wrap {
  padding-right: 1em;
  padding-left: 1em;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .btn-wrap .btn-main2 a {
  color: #fff;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .btn-wrap .btn-main2:hover a {
  color: #00b3a3;
  opacity: 1;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .btn-wrap .btn-base2 a {
  color: #00b3a3;
}
.grw-cmn .equip-list .equip-list-wrap .chart-wrap .btn-wrap .btn-base2:hover a {
  color: #fff;
  opacity: 1;
}
.grw-cmn .equip-list .equip-list-wrap .weather-date {
  border-top: none;
  background: #f9f9f9;
}
.grw-cmn .equip-list .equip-list-wrap .weather-date li {
  padding: 10px;
}
.grw-cmn .equip-img .img-note {
  position: absolute;
  top: auto;
  bottom: 15px;
  right: 15px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
  font-size: 0.8em;
  line-height: 1;
}
.grw-cmn .grw-spec {
  display: flex;
  align-items: flex-start;
}
.grw-cmn .grw-spec .equip-img {
  width: 40%;
  position: relative;
}
.grw-cmn .grw-spec .equip-img img {
  min-height: 270px;
  object-fit: cover;
}
.grw-cmn .grw-spec .equip-img .status-wrap {
  position: absolute;
  top: 1vw;
  left: 1vw;
}
.grw-cmn .grw-spec .equip-img .status-wrap .equip-status {
  background: #ffffff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}
.grw-cmn .grw-spec .equip-img .status-wrap .equip-status p {
  margin: 0;
}
.grw-cmn .grw-spec .equip-img .status-wrap .stop {
  background: #d3d3d3;
}
.grw-cmn .grw-spec .equip-img .status-wrap .sold {
  background: #fff;
}
.grw-cmn .grw-spec .equip-img .status-wrap .open {
  background: #fff;
}
.grw-cmn .grw-spec .equip-img .status-wrap .open p {
  color: #5a982d;
}
.grw-cmn .grw-spec .equip-detail {
  width: 56%;
  background: #ffffff;
  /**** 容量グラフ ****/
}
.grw-cmn .grw-spec .equip-detail .eq-detail-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #d3d3d3;
  padding: 16px 0;
}
.grw-cmn .grw-spec .equip-detail .eq-detail-wrap:last-child {
  border-bottom: none;
}
.grw-cmn .grw-spec .equip-detail dt {
  font-weight: bold;
}
.grw-cmn .grw-spec .equip-detail dd {
  font-weight: normal;
}
.grw-cmn .grw-spec .equip-detail dd.font-low {
  color: #5a982d;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart {
  width: 100%;
  position: relative;
  font-weight: bold;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .bg-total {
  background-color: #d3d3d3;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .grw-stock {
  color: #ffffff;
  font-size: 0.7em;
  height: 30px;
  line-height: 30px;
  overflow: visible;
  white-space: nowrap;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .grw-stock span {
  margin-left: 8px;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-total {
  color: #81c725;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .chart-bar {
  height: 30px;
  font-size: 0.7em;
  position: relative;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .chart-bar span {
  position: absolute;
  border-left: 1px solid #81c725;
  padding-left: 8px;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-preGrw span {
  top: -1.5em;
  left: 0;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-grw {
  /*border-left: 1px solid #fff;
  z-index: 99;*/
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-grw span {
  bottom: -1.5em;
  left: -1px;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-unit {
  font-size: 0.7em;
  color: #00b3a3;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-unit span {
  position: absolute;
  bottom: -1.5em;
  line-height: 1;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-unit span:nth-child(1) {
  left: -0.5em;
}
.grw-cmn .grw-spec .equip-detail .capacity-chart .cap-unit span:nth-child(2) {
  right: -0.5em;
}
@media screen and (max-width: 768px) {
  .grw-cmn .grw-spec .equip-img {
    width: 100%;
  }
  .grw-cmn .grw-spec .equip-detail {
    width: 100%;
  }
  .grw-cmn .grw-spec .equip-detail dd {
    width: 100%;
  }
}
.grw-cmn #change-month-btn {
  background: #f9f9f9;
  padding: 10px 20px;
}
.grw-cmn #change-month-btn .pagenation {
  width: 13em;
}
.grw-cmn #change-month-btn .pagenation.flex {
  justify-content: space-between;
}
.grw-cmn #change-month-btn #prev-month, .grw-cmn #change-month-btn #next-month {
  max-width: 6em;
  width: 100%;
}
.grw-cmn #change-month-btn #prev-month.btn-m span {
  position: initial;
}
.grw-cmn #change-month-btn.flex {
  justify-content: space-between;
  align-items: center;
}
.grw-cmn #change-month-btn .btn-normal.btn-m {
  padding: 4px 14px 4px 4px;
}
@media screen and (max-width: 768px) {
  .grw-cmn #change-month-btn .pagenation {
    width: 100%;
  }
  .grw-cmn #change-month-btn .actual-note {
    margin-bottom: 0;
    text-align: left;
  }
}
.grw-cmn .divider-list {
  border-color: #d3d3d3;
}
.grw-cmn .divider-list .data-wrap {
  border-bottom: solid 1px #d3d3d3;
}
.grw-cmn .divider-list .data-wrap:last-child {
  border-bottom: none;
}
.grw-cmn .uk-pagination a {
  display: inline-block;
  padding: 5px 11px;
  margin: 0 5px;
  border: 1px solid #81c725;
  background: #fff;
  color: #81c725;
  font-weight: bold;
  border-radius: 50%;
  box-shadow: none;
}
.grw-cmn .uk-pagination a:hover {
  background: #81c725;
  color: #fff;
}
.grw-cmn .uk-pagination .uk-disabled {
  padding-left: 0;
}
.grw-cmn .uk-pagination .uk-disabled a {
  background: #81c725;
  color: #fff;
}
.grw-cmn #history table {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}
.grw-cmn #history table th, .grw-cmn #history table td {
  border-left: 1px solid #e5e5e5;
}
.grw-cmn #history table th {
  font-size: 0.9em;
}
@media screen and (max-width: 640px) {
  .grw-cmn #history table {
    border-left: 1px solid #e5e5e5;
    display: block;
    width: 100%;
  }
  .grw-cmn #history table thead, .grw-cmn #history table tbody {
    display: block;
    width: 100%;
  }
  .grw-cmn #history table tr {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
  }
  .grw-cmn #history table th, .grw-cmn #history table td {
    border-left: none;
    padding: 0;
    margin: 0 2% 0 0;
  }
  .grw-cmn #history table .data-1c {
    width: 100%;
  }
  .grw-cmn #history table .data-2c {
    width: 48%;
  }
}
.grw-cmn #grw-summary .bg-base2 {
  border-radius: 16px;
}
.grw-cmn #grw-summary dl {
  font-weight: bold;
}
.grw-cmn #grw-summary dl dt {
  border: 1px solid #81c725;
  display: inline-block;
  padding: 2px 0.5em;
  margin-bottom: 8px;
}
.grw-cmn #grw-summary dl dd {
  font-size: 1.5em;
  word-break: break-all;
}
.grw-cmn #grw-summary dl dd .unit {
  font-size: 0.7em;
}
.grw-cmn #grw-summary dl .data-wrap:nth-child(1) {
  padding-left: 0;
}
.grw-cmn #grw-summary dl .data-wrap:nth-child(2) {
  border-left: 1px solid #81c725;
  border-right: 1px solid #81c725;
}
.grw-cmn #grw-summary dl .data-wrap:nth-child(3) {
  padding-right: 0;
}
.grw-cmn #grw-summary .btn-wrap {
  position: absolute;
  padding: 0;
  top: 16px;
  right: 16px;
  font-weight: bold;
}
.grw-cmn #grw-summary .btn-wrap .btn-normal {
  padding: 8px 8px 6px 16px;
  border-radius: 5px;
}
@media screen and (max-width: 880px) {
  .grw-cmn #grw-summary dl .data-wrap {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .grw-cmn #grw-summary dl .data-wrap:nth-child(1) {
    padding-top: 0;
  }
  .grw-cmn #grw-summary dl .data-wrap:nth-child(2) {
    border-left: none;
    border-right: none;
    border-top: 1px solid #81c725;
    border-bottom: 1px solid #81c725;
  }
  .grw-cmn #grw-summary dl .data-wrap:nth-child(3) {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .grw-cmn #grw-summary .btn-wrap {
    text-align: center;
    position: static;
    margin: 16px auto 0;
  }
}
@media screen and (max-width: 640px) {
  .grw-cmn #grw-summary dl dt {
    font-size: 0.8em;
  }
}
.grw-cmn .terms-common h2 {
  border-color: #00b3a3;
}
.grw-cmn .leaf-unit-g {
  font-size: 0.5em;
}
.grw-cmn .leaf-unit-kg {
  font-size: 0.6em;
  line-height: 1;
  text-align: center;
  margin-left: 8px;
  margin-top: 4px;
}
.grw-cmn .leaf-unit-kg span {
  font-size: 1.5em;
}
@media screen and (max-width: 480px) {
  .grw-cmn .uk-padding {
    padding: 20px 10px;
  }
}

/*
 *
 * グリーンワット購入/売却
 *
 */
/*---------- 共通 ----------*/
#green-buy-sell {
  /***** 承諾事項 *****/
  /*** end 承諾事項 ***/
}
#green-buy-sell #grw-amounts-wrap {
  margin-top: 90px;
}
#green-buy-sell .bs-hd, #green-buy-sell .quantity-hd {
  padding-bottom: 8px;
}
#green-buy-sell .quantity-hd {
  border-bottom: solid 1px #81c725;
}
#green-buy-sell .quantity-hd .flex {
  justify-content: space-between;
}
#green-buy-sell .quantity-hd .flex img {
  width: 2em;
}
#green-buy-sell .bs-table .bs-wrap:nth-child(odd) {
  background-color: #f9f9f9;
}
#green-buy-sell #amounts-detail .bs-wrap {
  border-top: solid 1px #d3d3d3;
  border-bottom: none;
}
#green-buy-sell #amounts-detail .bs-wrap > .bs-wrap {
  border-top: none;
}
#green-buy-sell #amounts-detail .bs-wrap > .bs-wrap:last-child {
  border-bottom: none;
}
#green-buy-sell #amounts-detail .bs-wrap.border-top {
  border-top: solid 1px #d3d3d3;
}
#green-buy-sell #amounts-detail .bs-wrap:nth-child(odd) {
  background-color: transparent;
}
#green-buy-sell #amounts-detail .bs-wrap.total-amount {
  background-color: transparent !important;
  border-top: solid 3px #81c725;
  color: #232323;
}
#green-buy-sell #amounts-detail .bs-wrap:last-child {
  background: #eef8e0 !important;
  border-bottom: solid 1px #d3d3d3;
  color: #81c725;
}
#green-buy-sell .terms-wrap {
  background-color: #f5f5f5;
  padding: 10px;
}
#green-buy-sell .buy-terms {
  height: 240px;
  overflow-y: scroll;
  font-size: 80%;
  margin-top: 20px;
  border: 1px solid #dddddd;
  padding: 10px;
  background: #fff;
}
#green-buy-sell .buy-terms h2 {
  font-size: 110%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-left: none;
  padding-left: 0;
}
#green-buy-sell .buy-terms h3 {
  font-size: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
#green-buy-sell .buy-terms p {
  margin-bottom: 10px;
}
#green-buy-sell .check-text {
  margin-bottom: 10px;
  font-size: 90%;
}
#green-buy-sell .modal-button {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
}

/*---------- end 共通 ----------*/
/*---------- 入力画面 ----------*/
#green-buy-index #equip-top {
  padding: 20px;
  position: relative;
  background: #81c725;
}
#green-buy-index #equip-top h3 {
  font-size: 1.6em;
  color: #ffffff;
}
#green-buy-index #equip-top h3 img {
  width: 1.5em;
}
#green-buy-index #equip-top .btn-wrap {
  position: absolute;
  max-width: 160px;
  width: 100%;
  padding: 0;
  top: 20px;
  right: 20px;
}
#green-buy-index #equip-top .btn-wrap .font-s {
  font-size: 0.9em;
}
#green-buy-index #equip-top .hd-main {
  max-width: calc(100% - 330px);
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
#green-buy-index #equip-top .text-detail {
  color: #fff;
}
@media screen and (max-width: 880px) {
  #green-buy-index #equip-top .hd-main {
    max-width: 100%;
    font-size: 1.3em;
  }
  #green-buy-index #equip-top .btn-wrap {
    position: static;
    margin: 20px auto 0;
  }
}
@media screen and (max-width: 640px) {
  #green-buy-index #equip-top {
    padding: 10px;
  }
}

/*---------- end 入力画面 ----------*/
/*----------- 支払い画面 -----------*/
#green-buy-payment #my-equipment .font-l {
  font-size: 1.2em;
  font-weight: bold;
}
#green-buy-payment #my-equipment .eq-wrap {
  margin-bottom: 10px;
  border: 1px solid #d3d3d3;
  border-radius: 14px;
  position: relative;
}
#green-buy-payment #my-equipment .eq-wrap .eq-name {
  background: #0095ff;
  border-radius: 13px 13px 0 0;
  color: #fff;
  padding: 10px 16px 5px;
  font-weight: bold;
}
#green-buy-payment #my-equipment .eq-wrap dl {
  border-bottom: 1px solid #d3d3d3;
}
#green-buy-payment #my-equipment .eq-wrap dl .eq-data {
  padding: 5px 10px;
  width: 50%;
}
#green-buy-payment #my-equipment .eq-wrap dl .eq-data dt {
  font-size: 0.8em;
  font-weight: normal;
}
#green-buy-payment #my-equipment .eq-wrap dl .eq-data dd {
  font-weight: bold;
}
#green-buy-payment #my-equipment .eq-wrap dl .eq-data:first-child {
  border-right: 1px solid #d3d3d3;
}
#green-buy-payment #my-equipment .eq-wrap .eq-own {
  padding: 5px;
  font-size: 0.8em;
}
#green-buy-payment #my-equipment .eq-wrap .eq-btn {
  width: 120px;
  margin: 0 auto 10px;
}
#green-buy-payment #my-equipment .eq-wrap .eq-btn .btn-cv {
  background: #ff5b22;
  border: solid 1px #ff5b22;
  padding: 3px;
}
#green-buy-payment #my-equipment .eq-wrap .eq-btn .btn-cv:hover {
  background: #fff;
  color: #ff5b22;
}
#green-buy-payment #my-equipment p#lack-note {
  color: #fb453b;
  font-size: 0.7em;
  font-weight: normal;
}
#green-buy-payment #my-equipment .eq-dis-selected {
  position: absolute;
  right: 3px;
  top: 0;
  color: #fff;
  font-weight: bold;
  font-weight: bold;
  background: transparent;
  font-size: 1.5em;
  line-height: 1;
}

/*--------- end 支払い画面 ---------*/
/*------------ 完了画面 -----------*/
#green-buy-thanks, #green-coupon-thanks {
  /********** 購入完了アニメーション **********/
  /** 通常 **/
  /*** 紙吹雪 ****/
  /***** end購入完了アニメーション *****/
}
#green-buy-thanks #amounts-detail .bs-wrap:last-child, #green-coupon-thanks #amounts-detail .bs-wrap:last-child {
  background: none;
  color: #232323;
}
#green-buy-thanks #amounts-detail .bs-wrap.total-amount, #green-coupon-thanks #amounts-detail .bs-wrap.total-amount {
  background: #eef8e0;
  color: #81c725;
}
#green-buy-thanks #thanks-text h2, #green-coupon-thanks #thanks-text h2 {
  font-size: 1.6em;
}
#green-buy-thanks #thanks-img, #green-coupon-thanks #thanks-img {
  background: url(/img/green/buy/leaf.png) no-repeat;
  background-size: contain;
  width: 250px;
  height: 250px;
  margin: auto;
  position: relative;
}
#green-buy-thanks #thanks-img #wat, #green-coupon-thanks #thanks-img #wat {
  position: absolute;
  width: 160px;
  height: 115px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#green-buy-thanks .thanks-own-gw, #green-coupon-thanks .thanks-own-gw {
  width: 49%;
}
@media screen and (max-width: 640px) {
  #green-buy-thanks .thanks-own-gw, #green-coupon-thanks .thanks-own-gw {
    width: 100%;
    margin-top: 10px;
  }
}
#green-buy-thanks #wat, #green-coupon-thanks #wat {
  animation: ani 2s ease-in;
}
@keyframes ani {
  0% {
    transform: rotateY(0deg) translate(0px, 0px);
  }
  50% {
    transform: rotateY(450deg) translate(0px, 0px);
  }
  100% {
    transform: rotateY(360deg) translate(0px, 0px);
  }
}
#green-buy-thanks .confetti, #green-coupon-thanks .confetti {
  display: block;
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
#green-buy-thanks .confetti .paper, #green-coupon-thanks .confetti .paper {
  opacity: 0;
  position: absolute;
}
#green-buy-thanks .confetti .paper:nth-child(odd), #green-coupon-thanks .confetti .paper:nth-child(odd) {
  animation: confetti1 3.5s ease-in;
}
#green-buy-thanks .confetti .paper:nth-child(even), #green-coupon-thanks .confetti .paper:nth-child(even) {
  animation: confetti2 3.5s ease-in;
}
#green-buy-thanks .confetti .paper.c1, #green-coupon-thanks .confetti .paper.c1 {
  background: #81c725;
}
#green-buy-thanks .confetti .paper.c2, #green-coupon-thanks .confetti .paper.c2 {
  background: #00b3a3;
}
@keyframes confetti1 {
  0% {
    opacity: 0;
    transform: translate(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(500%, -1000%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-500%, 2500%) rotate(720deg);
  }
}
@keyframes confetti2 {
  0% {
    opacity: 0;
    transform: translateY(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(-500%, -1800%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(500%, 2500%) rotate(720deg);
  }
}
@media print {
  #green-buy-thanks .step-indicator,
#green-buy-thanks .print-none, #green-coupon-thanks .step-indicator,
#green-coupon-thanks .print-none {
    display: none;
  }
  #green-buy-thanks h2, #green-coupon-thanks h2 {
    border-left: 5px solid #00b3a3;
    padding-left: 10px;
  }
  #green-buy-thanks h2.bs-hd, #green-coupon-thanks h2.bs-hd {
    padding-bottom: 0;
  }
  #green-buy-thanks .bs-table .bs-wrap, #green-coupon-thanks .bs-table .bs-wrap {
    border-bottom: solid 1px #d3d3d3;
  }
  #green-buy-thanks .card-wrap.round-shadow, #green-coupon-thanks .card-wrap.round-shadow {
    border-radius: 0;
  }
  #green-buy-thanks .card-wrap.uk-padding, #green-coupon-thanks .card-wrap.uk-padding {
    padding: 10px;
  }
  #green-buy-thanks .uk-width-1-2\@m, #green-coupon-thanks .uk-width-1-2\@m {
    width: 50% !important;
  }
}

/*---------- end 完了画面 ---------*/
/*----------- 売却入力 -----------*/
#green-sell-index #own-w {
  border: solid 1px #d3d3d3;
}
#green-sell-index #own-w .own-wrap {
  padding: 5px;
}
#green-sell-index #own-w .border-top {
  border-top: solid 1px #d3d3d3;
}
#green-sell-index #bank-free {
  border-bottom: 1px solid #FB9B01;
  color: #FB9B01;
  display: inline;
}
#green-sell-index #kw-bonus {
  margin: 0;
  font-size: 0.8em;
}
#green-sell-index #bank-wrap {
  position: relative;
}
#green-sell-index #bank-wrap img#kw-ribbon {
  position: absolute;
  top: 0;
  right: 20px;
  width: 20%;
  max-width: 80px;
}

/*--------- end 売却入力 ---------*/
/*
*
* グリーンワット設備一覧/詳細
*
*/
/*--------- 一覧 ----------*/
#equipment-green_index #view-switch {
  background: #fff;
  padding: 0;
}
#equipment-green_index #view-switch.flex {
  align-items: center;
}
#equipment-green_index #view-switch li {
  padding: 0.5em;
}
#equipment-green_index #view-switch .switch-hd {
  position: relative;
  display: inline-block;
  background: #adadad;
  line-height: 2.2;
}
#equipment-green_index #view-switch .switch-hd::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  margin: auto;
  width: 10px;
  height: 44px;
  border-style: solid;
  border-width: 22px 0 22px 10px;
  border-color: transparent transparent transparent #adadad;
}
#equipment-green_index .uk-position-center .text-detail {
  font-weight: normal;
  font-size: 0.5em;
  margin-top: 6px;
}
@media screen and (max-width: 640px) {
  #equipment-green_index #view-switch .switch-hd {
    width: 100%;
    margin-right: 0;
  }
  #equipment-green_index #view-switch .switch-hd::after {
    display: none;
  }
}

/*------- end 一覧 --------*/
/*--------- 詳細 ----------*/
#equipment-green_detail {
  /*------ 発電実績 ------*/
  /*------ お知らせ ------*/
  /*-------- レスポンシブ --------*/
}
#equipment-green_detail span.h-bottom-main1,
#equipment-green_detail span.h-bottom-main1-left {
  font-size: 0.4em;
}
#equipment-green_detail #mv-equip {
  height: 325px;
  width: 100%;
}
#equipment-green_detail #mv-equip .container {
  position: relative;
  height: 100%;
}
#equipment-green_detail #mv-equip .container .img-note {
  position: absolute;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
  font-size: 0.8em;
  line-height: 1;
  top: auto;
  bottom: 15px;
  right: 15px;
}
#equipment-green_detail #mv-equip h1#mv-title {
  position: relative;
  margin: 0 !important;
  width: 40%;
  height: 100%;
  text-align: left;
}
#equipment-green_detail #mv-equip h1#mv-title.bg-gra {
  background: linear-gradient(to bottom, #00b3a3, #81c725);
}
#equipment-green_detail #mv-equip h1#mv-title .eq-hd-wrap {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#equipment-green_detail #mv-equip h1#mv-title span:not(.eq-name) {
  font-size: 0.5em;
  display: block;
  margin: 10px 0;
}
#equipment-green_detail #mv-equip h1#mv-title .hd-category {
  padding: 5px;
}
#equipment-green_detail .container.flex {
  justify-content: space-between;
}
#equipment-green_detail #share-button .twitter-share-button {
  margin-top: 0;
}
#equipment-green_detail #share-button .fb-share-button span {
  vertical-align: middle !important;
}
#equipment-green_detail #chart-div canvas {
  padding: 10px;
}
#equipment-green_detail #notify {
  background-color: #fafcff;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
#equipment-green_detail #notify h3 {
  color: #e60012;
  font-size: 1.3em;
  width: 18%;
  text-align: center;
  padding: 20px 20px 0 0;
}
#equipment-green_detail #notify h3:before {
  content: "";
  background: url(/img/common/icon_info.png) center top no-repeat;
  background-size: contain;
  width: 35px;
  height: 35px;
  display: block;
  margin: 0 auto 5px;
}
#equipment-green_detail #notify #notify-text {
  width: 82%;
  border-left: 1px solid #ddd;
  padding-left: 20px;
}
#equipment-green_detail #notify h4 {
  font-weight: bold;
  font-size: 1.1em;
}
#equipment-green_detail #notify p {
  font-size: 0.9em;
  margin-bottom: 0;
}
#equipment-green_detail #chart-notify {
  transition: all 0.5s;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.9);
  z-index: 1;
  text-align: center;
  padding: 100px 10px;
  box-sizing: border-box;
  color: darkgray;
  font-size: 1.5em;
  opacity: 0;
}
#equipment-green_detail #planActualAccuGreenChart {
  display: none;
}
#equipment-green_detail #detail03 .equip-info {
  padding: 0;
}
#equipment-green_detail #detail03 .equip-info .equip-data-wrap {
  border-top: solid 1px #d3d3d3;
  border-left: solid 1px #d3d3d3;
  border-right: solid 1px #d3d3d3;
}
#equipment-green_detail #detail03 .equip-info .equip-data-wrap:last-child {
  border-bottom: solid 1px #d3d3d3;
}
#equipment-green_detail #detail03 .equip-info .equip-data-wrap:nth-child(odd) {
  background: #f9f9f9;
}
#equipment-green_detail #detail03 .equip-info .equip-data-wrap:nth-child(even) {
  background: #fff;
}
@media screen and (max-width: 1100px) {
  #equipment-green_detail #mv-equip .container {
    padding-left: 0;
  }
}
@media screen and (max-width: 959px) {
  #equipment-green_detail #detail01 .uk-first-column {
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  #equipment-green_detail #mv-equip {
    padding-top: 130px;
  }
  #equipment-green_detail #mv-equip .container {
    padding-right: 0;
    overflow: visible;
  }
  #equipment-green_detail #mv-equip h1#mv-title {
    width: 100%;
    min-height: 130px;
    max-height: 140px;
    top: -130px;
  }
  #equipment-green_detail #mv-equip h1#mv-title .eq-hd-wrap {
    text-align: center;
  }
}
@media screen and (max-width: 480px) {
  #equipment-green_detail #mv-equip {
    height: 280px;
  }
  #equipment-green_detail #mv-equip h1#mv-title .eq-hd-wrap {
    width: 90%;
  }
  #equipment-green_detail #detail01 li {
    position: relative;
    padding-bottom: 80%;
  }
  #equipment-green_detail #detail01 li iframe {
    position: absolute;
    height: 100%;
  }
  #equipment-green_detail #detail02 #chart-div canvas {
    padding: 10px 0;
  }
}

/*-------- end 詳細 --------*/
/*
 *
 * グリーンワット共通CSS
 *
 */
#green-index {
  /*---------- レスポンシブ ----------*/
}
#green-index #img .bg-base2 {
  padding: 25px 15px;
}
#green-index #img .catch {
  padding-left: 0.5em;
  font-size: 1.7em;
  letter-spacing: 0.12em;
  margin: 25px 0 0;
  font-weight: normal;
}
#green-index #asset .hd-sub .icon {
  position: relative;
  display: inline-block;
  background: #fff;
  width: 1.4em;
  height: 1.4em;
  padding: 2px;
  border-radius: 50%;
  vertical-align: bottom;
}
#green-index #asset .hd-sub .icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#green-index #asset #own-grw .paid-grw {
  padding: 0 15px 0 0;
}
#green-index #asset #own-grw .pre-grw {
  border-left: 1px solid #d3d3d3;
}
#green-index #buy-sell {
  justify-content: center;
}
#green-index #buy-sell .btn-shadow {
  margin: 5px 16px;
}
#green-index #buy-sell .font-gray {
  color: #898989;
}
#green-index #history-tab {
  justify-content: space-between;
  width: calc(100% - 10px);
  margin: 0 auto;
}
#green-index #history-tab li {
  width: 49%;
}
#green-index #history-tab li button {
  background: #eef8e0;
  color: #81c725;
  width: 100%;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  padding: 16px 0;
  font-weight: bold;
  font-size: 1.5rem;
}
#green-index #history-tab li button.switch-primary {
  background: #00b3a3;
  color: #fff;
  position: relative;
}
#green-index #history-tab li button.switch-primary:after {
  content: "";
  z-index: 99;
  position: absolute;
  left: 0;
  bottom: -30px;
  width: 100%;
  height: 30px;
  background: url(/img/green/index/switch-primary.png) center top no-repeat;
  background-size: contain;
}
#green-index #history #history-wrap {
  border-radius: 0 0 16px 16px;
  filter: drop-shadow(0 6px 5px rgba(206, 206, 206, 0.75));
  transform: translateZ(0);
  overflow: hidden;
  margin: 0 5px 5px;
}
#green-index #btn-share.btn-gra-line {
  position: relative;
  font-size: 1.4em;
}
#green-index #btn-share.btn-gra-line::before {
  content: "";
  width: 2.4em;
  height: 2.4em;
  display: inline-block;
  background: url(/img/green/index/icon-share-l.png) center no-repeat;
  background-size: contain;
  position: absolute;
  left: 1em;
  top: 0.6em;
}
#green-index #btn-share.btn-gra-line::after {
  content: "";
  width: 3.2em;
  height: 3.2em;
  display: inline-block;
  background: url(/img/green/index/icon-share.png) center no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 3px;
}
#green-index #btn-share.btn-gra-line .btn-inner {
  display: flex;
  align-items: center;
  padding: 0 3.8em;
  height: 3.2em;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  #green-index #img .uk-padding-small {
    padding: 10px;
  }
  #green-index #img .catch {
    font-size: 5vw;
    margin: 10px 0 0;
  }
  #green-index #asset #own-grw .paid-grw {
    padding: 0;
  }
  #green-index #asset #own-grw .pre-grw {
    border-left: none;
    padding-left: 0;
  }
  #green-index #history-tab li button {
    font-size: 4.2vw;
  }
  #green-index #btn-share.btn-gra-line {
    font-size: 1em;
  }
}

/*
*
* グリーンワット説明ページ
*
*/
#docs-greenwatt .sp-img, #docs-greenwatt .sp-br {
  display: none;
}
#docs-greenwatt .flex-contents .flex {
  justify-content: space-between;
}
#docs-greenwatt .flex-contents .img-wrap {
  width: 32%;
}
#docs-greenwatt .flex-contents .text-wrap {
  width: 62%;
}
#docs-greenwatt .hd-deco {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#docs-greenwatt .hd-deco::before, #docs-greenwatt .hd-deco::after {
  content: "";
  width: 1.2em;
  height: 2px;
}
#docs-greenwatt .hd-deco::before {
  transform: rotate(60deg);
}
#docs-greenwatt .hd-deco::after {
  transform: rotate(-60deg);
}
#docs-greenwatt #intro .bg-tree {
  position: relative;
}
#docs-greenwatt #intro .bg-tree::before, #docs-greenwatt #intro .bg-tree::after {
  content: "";
  position: absolute;
  background: url(/img/green/docs/bg_tree.png) bottom center no-repeat;
  background-size: contain;
  max-width: 330px;
  width: 29vw;
  height: 237px;
  left: 0;
  bottom: 0;
}
#docs-greenwatt #intro .bg-tree::after {
  left: auto;
  right: 0;
  transform: scale(-1, 1);
}
#docs-greenwatt #intro .wrap-800 {
  padding: 35px 0;
}
#docs-greenwatt #intro .catch {
  font-size: 2em;
  padding-left: 0.7em;
  letter-spacing: 0.1em;
  font-weight: normal;
}
#docs-greenwatt #intro .logo {
  max-width: 280px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 10px;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex {
  align-items: center;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap {
  max-width: 220px;
  width: 28%;
  margin-right: 20px;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap .bg-base2 {
  position: relative;
  width: 100%;
  border-radius: 50%;
  padding-top: 100%;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap .bg-base2 img {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex .text-wrap {
  width: 70%;
}
#docs-greenwatt #intro #about-grw.flex-contents .flex .text-wrap p {
  font-size: 1.1em;
}
#docs-greenwatt #use .hd {
  display: block;
}
#docs-greenwatt #use .hd .font-s {
  font-size: 0.7em;
}
#docs-greenwatt #use .hd span {
  font-weight: normal;
}
#docs-greenwatt #use .hd span::before, #docs-greenwatt #use .hd span::after {
  background: #5a982d;
}
#docs-greenwatt #use .flex {
  justify-content: space-between;
}
#docs-greenwatt #use .flex .use-wrap {
  position: relative;
  width: 30%;
}
#docs-greenwatt #use .flex .use-wrap .icon {
  position: absolute;
  max-width: 68px;
  width: 6vw;
  top: 0px;
  left: 0px;
  z-index: 1;
}
#docs-greenwatt #comparisopn .wrap-1000 {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#docs-greenwatt #comparisopn .table-wrap {
  width: 100%;
  border-spacing: 0;
}
#docs-greenwatt #comparisopn .table-wrap tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#docs-greenwatt #comparisopn .table-wrap .t-detail-wrap {
  width: 42%;
}
#docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:first-child {
  width: 16%;
}
#docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:last-child th, #docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:last-child td {
  border-right: solid 1px #d3d3d3;
}
#docs-greenwatt #comparisopn .table-wrap th, #docs-greenwatt #comparisopn .table-wrap td {
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-top: solid 1px #d3d3d3;
  border-left: solid 1px #d3d3d3;
  overflow: hidden;
}
#docs-greenwatt #comparisopn .table-wrap th:last-child, #docs-greenwatt #comparisopn .table-wrap td:last-child {
  border-bottom: solid 1px #d3d3d3;
}
#docs-greenwatt #comparisopn .table-wrap img {
  max-width: 210px;
  width: 100%;
}
#docs-greenwatt #comparisopn .table-wrap .line-1 {
  height: 90px;
}
#docs-greenwatt #comparisopn .table-wrap .line-2 {
  height: 142px;
}
#docs-greenwatt #comparisopn .table-wrap .line-4 {
  height: 90px;
}
#docs-greenwatt #comparisopn .table-wrap th.line-5, #docs-greenwatt #comparisopn .table-wrap td.line-5 {
  height: 170px;
  align-items: initial;
}
#docs-greenwatt #comparisopn .table-wrap .line-6 {
  height: 200px;
}
#docs-greenwatt #qa .flex {
  justify-content: space-between;
}
#docs-greenwatt #qa .qa-wrap {
  width: 49%;
  margin-bottom: 2%;
}
#docs-greenwatt #qa .hd-s {
  font-size: 1em;
}
#docs-greenwatt #qa .icon {
  position: relative;
  padding-left: 30px;
}
#docs-greenwatt #qa .icon::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  top: 0;
  left: 0;
}
#docs-greenwatt #qa .icon.question::before {
  background: url(/img/green/docs/icon-q.png) no-repeat;
  background-size: contain;
}
#docs-greenwatt #qa .icon.answer::before {
  background: url(/img/green/docs/icon-a.png) no-repeat;
  background-size: contain;
}
#docs-greenwatt #goal .round-shadow {
  margin: 5px auto;
  overflow: visible;
}
#docs-greenwatt #goal .flex {
  justify-content: space-between;
}
#docs-greenwatt #goal .font-m {
  font-size: 1.6em;
  margin: 0 16px;
}
#docs-greenwatt #goal .wrap-800 {
  max-width: 720px;
}
#docs-greenwatt #goal .goal-wrap {
  position: relative;
  margin-bottom: 82px;
  max-width: 720px;
}
#docs-greenwatt #goal .goal-wrap::after {
  content: "";
  position: absolute;
  background: url(/img/green/docs/arrow_under.png) no-repeat;
  background-size: contain;
  width: 143px;
  height: 32px;
  left: 0;
  right: 0;
  bottom: -62px;
  margin: auto;
}
#docs-greenwatt #goal .goal-wrap.padding-s {
  padding: 20px 30px;
}
#docs-greenwatt #goal .text-left {
  position: relative;
}
#docs-greenwatt #goal .text-left::after {
  content: "";
  position: absolute;
  background: url(/img/green/docs/arrow_right.png) no-repeat;
  background-size: contain;
  width: 21px;
  height: 26px;
  top: 0;
  bottom: 0;
  right: -32px;
  margin: auto;
}
#docs-greenwatt #goal .hd-deco::before, #docs-greenwatt #goal .hd-deco::after {
  background: #232323;
}
#docs-greenwatt #goal #can .dl-wrap {
  width: 32%;
}
#docs-greenwatt #goal #can .dl-wrap span {
  display: inline-block;
}
#docs-greenwatt #goal #can dt {
  font-weight: normal;
  border-bottom: solid 1px #d3d3d3;
}
#docs-greenwatt #goal #can dt img {
  display: block;
  max-height: 90px;
  height: 100%;
  margin: 0 auto;
}
#docs-greenwatt #goal #can dt, #docs-greenwatt #goal #can dd {
  padding: 4px;
}
#docs-greenwatt #goal #future ul li {
  width: 49%;
}
#docs-greenwatt #spec .btn-wrap .hd-deco {
  line-height: 1.2;
}
#docs-greenwatt #spec .btn-wrap .hd-deco::before, #docs-greenwatt #spec .btn-wrap .hd-deco::after {
  width: 1.6em;
  background: #5a982d;
}
@media screen and (max-width: 960px) {
  #docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap {
    max-width: 180px;
  }
}
@media screen and (max-width: 880px) {
  #docs-greenwatt #intro .catch {
    font-size: 4vw;
  }
  #docs-greenwatt #use .flex .use-wrap {
    width: 33%;
  }
  #docs-greenwatt #use .flex .use-wrap .padding-s {
    padding: 10px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-2 {
    height: 150px;
  }
  #docs-greenwatt #comparisopn .table-wrap th.line-5, #docs-greenwatt #comparisopn .table-wrap td.line-5 {
    height: 163px;
  }
}
@media screen and (max-width: 768px) {
  #docs-greenwatt .flex-contents .img-wrap {
    width: 36%;
  }
  #docs-greenwatt #intro .logo {
    max-width: 240px;
  }
  #docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap {
    margin-right: 10px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-2 {
    height: 170px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-3 {
    height: 95px;
  }
  #docs-greenwatt #comparisopn .table-wrap th.line-5, #docs-greenwatt #comparisopn .table-wrap td.line-5 {
    height: 183px;
  }
  #docs-greenwatt #goal .wrap-800 {
    max-width: 600px;
  }
  #docs-greenwatt #goal .wrap-800 .flex {
    justify-content: center;
  }
  #docs-greenwatt #goal .text-left {
    margin-bottom: 26px;
  }
  #docs-greenwatt #goal .text-left::after {
    right: 0;
    left: 0;
    top: auto;
    bottom: -26px;
    transform: rotate(90deg);
  }
  #docs-greenwatt #goal #future .hd-deco {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 640px) {
  #docs-greenwatt h2 {
    font-size: 1.3em;
  }
  #docs-greenwatt .flex-contents .flex {
    justify-content: center;
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  #docs-greenwatt .flex-contents .flex .img-wrap, #docs-greenwatt .flex-contents .flex .text-wrap {
    width: 100%;
  }
  #docs-greenwatt .flex-contents .flex .img-wrap {
    margin-top: 3em;
  }
  #docs-greenwatt .flex-contents .flex .text-wrap {
    margin-top: 20px;
  }
  #docs-greenwatt .flex-contents .flex h2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
  }
  #docs-greenwatt #intro .wrap-800 {
    padding-bottom: 60px;
  }
  #docs-greenwatt #intro .catch {
    font-size: 6vw;
  }
  #docs-greenwatt #intro .logo {
    padding: 20px 10px 30px;
  }
  #docs-greenwatt #intro #about-grw.flex-contents .flex .img-wrap {
    margin-right: 0;
    width: 80%;
  }
  #docs-greenwatt #intro #about-grw.flex-contents .flex .text-wrap {
    width: 100%;
  }
  #docs-greenwatt #intro #about-grw.flex-contents .flex .text-wrap h2 {
    text-align: center;
  }
  #docs-greenwatt #intro #about-grw.flex-contents .flex .text-wrap p {
    font-size: 1em;
  }
  #docs-greenwatt #use .flex {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  #docs-greenwatt #use .flex .use-wrap {
    width: 100%;
  }
  #docs-greenwatt #use .flex .use-wrap:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #docs-greenwatt #use .flex .use-wrap .icon {
    max-width: 86px;
    width: 100%;
    top: -1px;
    left: -1px;
  }
  #docs-greenwatt #use .flex .use-wrap .padding-s {
    padding: 20px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-2 {
    height: 200px;
  }
  #docs-greenwatt #comparisopn .table-wrap th.line-5, #docs-greenwatt #comparisopn .table-wrap td.line-5 {
    height: 225px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-6 {
    height: 200px;
  }
  #docs-greenwatt #qa .qa-wrap {
    width: 100%;
  }
  #docs-greenwatt #qa .qa-wrap:nth-last-of-type(2) {
    margin-bottom: 2%;
  }
  #docs-greenwatt #goal .sp-br {
    display: block;
  }
  #docs-greenwatt #goal #future ul li {
    width: 100%;
  }
  #docs-greenwatt #goal #future ul li:first-child {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  #docs-greenwatt h2 {
    font-size: 6vw;
  }
  #docs-greenwatt .flex-contents .flex {
    width: 100%;
  }
  #docs-greenwatt #intro .bg-tree::before, #docs-greenwatt #intro .bg-tree::after {
    width: 50vw;
  }
  #docs-greenwatt #intro .wrap-800 {
    padding-bottom: calc(100% - 62vw);
  }
  #docs-greenwatt #use .flex .use-wrap .icon {
    width: 17vw;
  }
  #docs-greenwatt #use .flex .use-wrap .padding-s {
    padding: 10px;
  }
  #docs-greenwatt #comparisopn .table-wrap .t-detail-wrap {
    width: 100%;
  }
  #docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:first-child {
    display: none;
  }
  #docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:nth-child(2) {
    border-right: solid 1px #d3d3d3;
  }
  #docs-greenwatt #comparisopn .table-wrap .t-detail-wrap:last-child {
    margin-top: 20px;
  }
  #docs-greenwatt #comparisopn .table-wrap .line-1, #docs-greenwatt #comparisopn .table-wrap .line-2, #docs-greenwatt #comparisopn .table-wrap .line-3, #docs-greenwatt #comparisopn .table-wrap .line-4, #docs-greenwatt #comparisopn .table-wrap .line-6 {
    height: auto;
  }
  #docs-greenwatt #comparisopn .table-wrap td {
    padding: 2.5em 10px 10px;
  }
  #docs-greenwatt #comparisopn .table-wrap th.line-5, #docs-greenwatt #comparisopn .table-wrap td.line-5 {
    height: auto;
  }
  #docs-greenwatt #comparisopn .table-wrap .cell {
    position: relative;
  }
  #docs-greenwatt #comparisopn .table-wrap .cell::after {
    content: attr(data-title);
    position: absolute;
    width: 100%;
    background: #f9f9f9;
    color: #232323;
    text-align: center;
    font-weight: bold;
    top: 0;
    left: 0;
    padding: 2px;
  }
  #docs-greenwatt #goal .font-m {
    font-size: 1.3em;
  }
  #docs-greenwatt #goal .font-l {
    font-size: 1.6em;
  }
  #docs-greenwatt #goal #can .dl-wrap {
    width: 100%;
  }
  #docs-greenwatt #goal #can dd {
    text-align: center;
  }
  #docs-greenwatt #goal #can dd br {
    display: none;
  }
  #docs-greenwatt #future .hd-deco {
    font-size: 1.1em;
  }
}

/*
*
* リーフ説明ページ
*
*/
#docs-offset #flow .distribution-img-wrap {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
#docs-offset #flow .distribution-img-wrap h3 {
  font-size: 1.2em;
}
#docs-offset #flow .green-notes {
  position: relative;
  padding-left: 1.4em;
}
#docs-offset #flow .green-notes:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00b3a3;
  top: 50%;
  left: 14px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#docs-offset #confirm .flex-left {
  width: 49%;
}
#docs-offset #confirm .flex-right {
  width: 49%;
}
@media screen and (max-width: 640px) {
  #docs-offset h2 {
    font-size: 1.4em;
  }
  #docs-offset #flow .distribution-img-wrap h3 {
    font-size: 1.1em;
  }
  #docs-offset #confirm .flex-left {
    width: 100%;
    margin-bottom: 20px;
  }
  #docs-offset #confirm .flex-right {
    width: 100%;
  }
}

/*
*
* グリーンワット環境貢献
*
*/
#green-publish {
  /*---------- レスポンシブ ----------*/
}
#green-publish hr {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #00b3a3, #81c725);
  border: none;
}
#green-publish #data {
  padding: 30px;
}
#green-publish #data h1 {
  font-size: 2em;
}
#green-publish #data .img-wrap {
  width: 48%;
}
#green-publish #data .img-wrap h1 {
  display: none;
}
#green-publish #data .img-wrap .bk {
  position: relative;
}
#green-publish #data .img-wrap .bk .publish-logo {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 30%;
  max-width: 120px;
}
#green-publish #data .img-wrap .bk .green {
  width: 18%;
  position: absolute;
  bottom: 10%;
  left: 41%;
  z-index: 1;
}
#green-publish #data .img-wrap .bk .green .leaf {
  width: 80%;
  margin-bottom: -10px;
  animation: leaf 5s ease-out infinite;
  opacity: 1;
}
@keyframes leaf {
  0%, 30% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
}
#green-publish #data .img-wrap .bk .green .base {
  width: 100%;
  position: relative;
  z-index: 2;
}
#green-publish #data .text-wrap {
  width: 48%;
}
#green-publish #data .text-wrap h1 {
  display: block;
}
#green-publish #data .data-wrap {
  border-radius: 10px;
  padding: 10px;
  font-weight: bold;
}
#green-publish #data .data-wrap dt {
  border: 1px solid #fff;
  display: inline-block;
  padding: 2px 4px;
  margin-bottom: 8px;
}
#green-publish #data .data-wrap dd {
  font-size: 1.5em;
  word-break: break-all;
}
#green-publish #data .btn-main2-frame,
#green-publish #data .btn-gra-line {
  width: calc(100% - 10px);
}
#green-publish #data .btn-main2-frame .btn-inner,
#green-publish #data .btn-gra-line .btn-inner {
  padding: 16px 5px;
  position: relative;
}
#green-publish #data .btn-main2-frame .btn-inner .icon-right,
#green-publish #data .btn-gra-line .btn-inner .icon-right {
  position: absolute;
  right: 10px;
  top: 35%;
}
#green-publish footer #ft01 p {
  width: calc(100% - 250px);
  margin: 0;
}
#green-publish footer #ft-btm {
  justify-content: center;
  padding: 8px;
}
@media screen and (max-width: 840px) {
  #green-publish #data .img-wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #green-publish #data .img-wrap h1 {
    display: block;
    text-align: center;
  }
  #green-publish #data .text-wrap {
    width: 100%;
  }
  #green-publish #data .text-wrap h1 {
    display: none;
  }
  #green-publish footer #ft01 p {
    width: 100%;
    margin-top: 1em;
  }
}
@media screen and (max-width: 640px) {
  #green-publish #data {
    padding: 20px 10px 10px;
  }
  #green-publish #data h1 {
    font-size: 1.3em;
  }
}

/*************************
* グリーンワット実績サマリー
*************************/
#green-data {
  /******* タブ *******/
  /********************
    エリア別ランキング
  ********************/
  /********************
    個人ランキング
  ********************/
}
#green-data .hd-main {
  padding-bottom: 8px;
  border-bottom: 3px solid;
}
#green-data .hd-main img {
  height: 1em;
  vertical-align: baseline;
}
#green-data .tab-wrap .select-tab {
  background-color: #cecece;
  color: #fff;
  width: 48%;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  padding: 8px 0;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}
#green-data .tab-wrap .select-tab:hover {
  cursor: pointer;
}
#green-data .scroll {
  overflow-y: scroll;
  border: 1px solid #e5e5e5;
}
#green-data .scroll table {
  margin-top: 0;
  font-weight: bold;
}
#green-data .scroll table td {
  padding: 8px;
}
#green-data .scroll table td span {
  display: inline-block;
}
#green-data .scroll table td span.sub-data-s {
  width: 120px;
}
#green-data .scroll table td span.sub-data-l {
  width: 220px;
}
#green-data .scroll table td span.name {
  width: 11em;
}
#green-data .scroll table .rank {
  justify-content: center;
  align-items: center;
  display: flex;
}
#green-data .scroll table .rank1, #green-data .scroll table .rank2, #green-data .scroll table .rank3 {
  color: #fff;
}
#green-data .scroll table .rank1 {
  background: url(/img/green/data/rank1.png) center bottom 4px no-repeat;
  background-size: auto 70%;
  padding: 16px 8px 0;
}
#green-data .scroll table .rank2 {
  background: url(/img/green/data/rank2.png) center bottom 4px no-repeat;
  background-size: auto 70%;
  padding: 16px 8px 0;
}
#green-data .scroll table .rank3 {
  background: url(/img/green/data/rank3.png) center bottom 4px no-repeat;
  background-size: auto 70%;
  padding: 16px 8px 0;
}
#green-data .data-button {
  background-color: #00b3a3;
}
#green-data #area-rank #area-wrap {
  align-items: center;
}
#green-data #area-rank .select-tab.active {
  background-color: #81c725;
}
#green-data #area-rank .scroll {
  height: 320px;
}
#green-data #area-rank .pref-map {
  background: url(/img/green/data/map-bk.png) center top no-repeat;
  background-size: 100%;
  position: relative;
}
#green-data #area-rank .pref-map svg {
  width: 100%;
}
#green-data #area-rank .pref-map svg .cls-1 {
  fill: #ededed;
}
#green-data #area-rank .pref-map svg .rank1 {
  fill: #00b3a3;
}
#green-data #area-rank .pref-map svg .rank2 {
  fill: #81c725;
}
#green-data #area-rank .pref-map svg .rank3 {
  fill: #f7b421;
}
#green-data #area-rank .pref-map svg .rank4, #green-data #area-rank .pref-map svg .rank5, #green-data #area-rank .pref-map svg .rank6, #green-data #area-rank .pref-map svg .rank7, #green-data #area-rank .pref-map svg .rank8, #green-data #area-rank .pref-map svg .rank9, #green-data #area-rank .pref-map svg .rank10 {
  fill: #fbd98e;
}
#green-data #area-rank .pref-map::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/green/data/map-line.png) center top no-repeat;
  background-size: 100%;
}
#green-data #personal-rank .select-tab.active {
  background-color: #00b3a3;
}
#green-data #personal-rank .scroll {
  height: 450px;
}
@media screen and (max-width: 920px) {
  #green-data .scroll table td span {
    display: block;
  }
  #green-data .scroll table td span.sub-data-s,
#green-data .scroll table td span.sub-data-l,
#green-data .scroll table td span.name {
    width: auto;
  }
}
@media screen and (max-width: 640px) {
  #green-data .scroll table {
    font-size: 0.8em;
  }
}

/*
*
* グリーンワットオフセット
*
*/
/*---------- history ----------*/
#offset-history section #history table, #offset-detail section #history table {
  border-right: none;
  border-left: none;
}
#offset-history section #history table th, #offset-history section #history table td, #offset-detail section #history table th, #offset-detail section #history table td {
  border-left: none;
}
#offset-history section tbody tr, #offset-detail section tbody tr {
  cursor: pointer;
  position: relative;
}
#offset-history section tbody tr:hover, #offset-detail section tbody tr:hover {
  opacity: 0.7;
}
#offset-history .offset-history-top h3 .icon, #offset-detail .offset-history-top h3 .icon {
  position: relative;
  display: inline-block;
  background: #fff;
  width: 1.4em;
  height: 1.4em;
  padding: 2px;
  border-radius: 50%;
  vertical-align: bottom;
}
#offset-history .offset-history-top h3 .icon img, #offset-detail .offset-history-top h3 .icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#offset-history .detail-main-content, #offset-detail .detail-main-content {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}
#offset-history .table-icon, #offset-detail .table-icon {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#offset-history .offset-detail-btn-icon, #offset-detail .offset-detail-btn-icon {
  top: 0.26em;
}
@media screen and (max-width: 640px) {
  #offset-history section #history table thead, #offset-detail section #history table thead {
    display: none;
  }
  #offset-history tbody td[data-title]:before, #offset-detail tbody td[data-title]:before {
    color: #232323;
    content: attr(data-title) " :";
    font-weight: bold;
    padding: 0 10px 0 0;
    display: inline;
  }
}

/*---------- end history ----------*/
/*
 *
 * カーボンオフセットマッチ
 *
 */
#green-monte .uk-padding {
  padding: 20px;
}
#green-monte .top-img-wrap {
  margin: 0px 5px 40px;
}
#green-monte .detail-main-content {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}

/*
 *
 * APF共通CSS
 *
 */
.apf-contents-height {
  min-height: calc(100vh - 108px);
}

.apf-cmn {
  font-size: 14px;
  color: #231815;
  background-color: white;
  /*------ 共通 ------*/
  /* 角丸 */
  /* 同比率で画像をトリミング */
  /* 画像の枠線 */
  /* 余白 */
  /*------ フォントサイズ ------*/
  /*------ フォントカラー ------*/
  /*------ 見出し・装飾 ------*/
  /*------ 背景 ------*/
  /*------ ボタン ------*/
  /* サイズ */
  /*------ カテゴリー ------*/
  /* タグ */
  /*------ リスト ------*/
  /*------ 装飾 ------*/
  /*------ タブ切り替え ------*/
  /*------ ページネーション ------*/
  /*------ 購入、新規会員登録ステップ ------*/
  /*------ 紙吹雪 ------*/
  /*------ リーフゲットポップアップ ------*/
  /*------ フットプリント監修 ------*/
  /*---------- UIkit ----------*/
  /*---------- PC ----------*/
}
.apf-cmn h1, .apf-cmn h2, .apf-cmn h3, .apf-cmn h4, .apf-cmn h5 {
  color: #231815;
  font-weight: bold;
}
.apf-cmn p, .apf-cmn ul, .apf-cmn ol, .apf-cmn dl, .apf-cmn a {
  color: #231815;
}
.apf-cmn button {
  background-color: transparent;
  border: none;
}
.apf-cmn .apf-main {
  background: linear-gradient(to right, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 100%;
  height: 6px;
}
.apf-cmn .apf-corner {
  border-radius: 8px;
}
.apf-cmn .apf-img-trim {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 57%;
}
.apf-cmn .apf-img-trim img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  object-fit: cover;
}
.apf-cmn .apf-img-border {
  border: solid 1px #ccc;
}
.apf-cmn .apf-padding-l {
  padding-top: 20px;
  padding-bottom: 20px;
}
.apf-cmn .apf-padding-m {
  padding-top: 10px;
  padding-bottom: 10px;
}
.apf-cmn .apf-card-padding {
  padding: 10px;
}
.apf-cmn .apf-text-accent {
  font-size: 1.3em;
  line-height: 1.3;
  font-weight: bold;
}
.apf-cmn .apf-text-secondary {
  font-size: 0.8em;
}
.apf-cmn .apf-text-muted {
  font-size: 0.6em;
}
.apf-cmn .apf-hd-article {
  font-size: 1.3em;
}
.apf-cmn .apf-font-move {
  color: #6bb640;
}
.apf-cmn .apf-font-energy {
  color: #f0ae22;
}
.apf-cmn .apf-font-food {
  color: #df2516;
}
.apf-cmn .apf-font-chores {
  color: #672e8d;
}
.apf-cmn .apf-font-goods {
  color: #0d79be;
}
.apf-cmn .apf-font-other {
  color: #464646;
}
.apf-cmn .apf-font-sub {
  color: #9fa0a0;
}
.apf-cmn .apf-font-error {
  color: #ff1815;
}
.apf-cmn h2 {
  font-size: 1.5em;
}
.apf-cmn h2.apf-hd-primary {
  position: relative;
  padding-left: 16px;
}
.apf-cmn h2.apf-hd-primary::before {
  content: "";
  position: absolute;
  background: linear-gradient(to bottom, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 5px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.apf-cmn h2.apf-hd-secondary {
  position: relative;
  text-align: center;
  padding-bottom: 8px;
}
.apf-cmn h2.apf-hd-secondary::before {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 2em;
  height: 5px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.apf-cmn h2.apf-hd-symbol {
  position: relative;
  padding-left: 1.2em;
}
.apf-cmn h2.apf-hd-symbol::before {
  content: "";
  position: absolute;
  background: url(/img/apf/apf_favicon.png) no-repeat;
  background-size: contain;
  width: 1em;
  height: 100%;
  left: 0;
  top: 0.3em;
  bottom: 0;
  margin: auto;
}
.apf-cmn h3 {
  font-size: 1.2em;
}
.apf-cmn h3.apf-hd-primary {
  position: relative;
  padding-left: 16px;
}
.apf-cmn h3.apf-hd-primary::before {
  content: "";
  position: absolute;
  background: linear-gradient(to bottom, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 5px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.apf-cmn h4 {
  font-size: 1.1em;
}
.apf-cmn h5 {
  font-size: 1em;
}
.apf-cmn .apf-list-title {
  font-weight: normal;
}
.apf-cmn .apf-hd-cmn {
  color: white;
  padding: 6px 8px;
  border-radius: 8px 8px 0 0;
}
.apf-cmn .apf-hd-leaf {
  background-color: #6bb640;
}
.apf-cmn .apf-hd-foot {
  background-color: #0d79be;
}
.apf-cmn .apf-hd-action {
  background-color: #df2516;
}
.apf-cmn .apf-hd-action span.uk-icon-image {
  margin-right: 0.3em;
}
.apf-cmn .apf-hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.apf-cmn .apf-hd-deco::before, .apf-cmn .apf-hd-deco::after {
  content: "";
  background-color: #231815;
  width: 1.2em;
  height: 1px;
  border-radius: 2px;
}
.apf-cmn .apf-hd-deco::before {
  transform: rotate(60deg);
}
.apf-cmn .apf-hd-deco::after {
  transform: rotate(-60deg);
}
.apf-cmn .apf-text-link {
  color: #000;
  font-size: 1.1em;
  padding-bottom: 1px;
  border-bottom: solid 1px;
}
.apf-cmn .apf-text-emphasis {
  font-weight: bold;
  font-size: 1.1em;
}
.apf-cmn .apf-note-accent {
  background-color: #f3f3f3;
  border: 2px solid #231815;
  padding: 1em;
}
.apf-cmn .apf-number, .apf-cmn .apf-number-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  padding: 2px;
}
.apf-cmn .apf-number {
  background-color: #231815;
  color: white;
}
.apf-cmn .apf-number-secondary {
  background-color: white;
  color: #231815;
}
.apf-cmn code {
  display: inline-block;
  background-color: #ff1815;
  color: white;
  line-height: 1;
  padding: 4px 6px;
  margin-bottom: 0.5em;
}
.apf-cmn .apf-bg {
  background-color: #f3f3f3;
}
.apf-cmn .apf-bg-primary {
  background-color: #231815;
  color: white;
}
.apf-cmn .apf-bg-primary h1, .apf-cmn .apf-bg-primary h2, .apf-cmn .apf-bg-primary h3, .apf-cmn .apf-bg-primary h4, .apf-cmn .apf-bg-primary h5,
.apf-cmn .apf-bg-primary p, .apf-cmn .apf-bg-primary ul, .apf-cmn .apf-bg-primary ol, .apf-cmn .apf-bg-primary dl, .apf-cmn .apf-bg-primary a {
  color: white;
}
.apf-cmn .apf-bg-primary .cls-1 {
  fill: white;
}
.apf-cmn .apf-bg-secondary {
  background-color: #9fa0a0;
  color: white;
}
.apf-cmn .apf-bg-secondary h1, .apf-cmn .apf-bg-secondary h2, .apf-cmn .apf-bg-secondary h3, .apf-cmn .apf-bg-secondary h4, .apf-cmn .apf-bg-secondary h5,
.apf-cmn .apf-bg-secondary p, .apf-cmn .apf-bg-secondary ul, .apf-cmn .apf-bg-secondary ol, .apf-cmn .apf-bg-secondary dl, .apf-cmn .apf-bg-secondary a {
  color: white;
}
.apf-cmn .apf-bg-secondary .cls-1 {
  fill: white;
}
.apf-cmn .apf-bg-special {
  background: url(/img/apf/apf-index/apf_cam_bk.jpg);
  border-top: solid 2px #f3f3f3;
  border-bottom: solid 2px #f3f3f3;
}
.apf-cmn .apf-card {
  background-color: white;
  border-radius: 8px;
}
.apf-cmn .apf-btn-s, .apf-cmn .apf-btn-m, .apf-cmn .apf-btn-l {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  border: solid 1.5px;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
}
.apf-cmn .apf-btn-s {
  max-width: 120px;
  height: 2em;
  padding: 4px 8px;
  font-size: 1em;
}
.apf-cmn .apf-btn-s img, .apf-cmn .apf-btn-s svg {
  width: 1em;
}
.apf-cmn .apf-btn-m {
  max-width: 160px;
  padding: 8px;
  font-size: 1.3em;
}
.apf-cmn .apf-btn-l {
  max-width: 240px;
  padding: 8px;
  font-size: 1.3em;
}
.apf-cmn .apf-btn-primary {
  border: solid 1.5px #231815;
  background-color: #231815;
  color: white;
}
.apf-cmn .apf-btn-primary .cls-1 {
  fill: white;
}
.apf-cmn .apf-btn-primary:hover {
  opacity: 1;
  border: solid 1.5px #231815;
  background-color: white;
  color: #231815;
}
.apf-cmn .apf-btn-primary:hover .cls-1 {
  fill: #231815;
}
.apf-cmn .apf-btn-secondary {
  border-color: #9fa0a0;
  background-color: white;
  color: #9fa0a0;
}
.apf-cmn .apf-btn-secondary:hover {
  opacity: 1;
  background-color: #9fa0a0;
  color: white;
}
.apf-cmn .apf-btn-secondary:hover .cls-1 {
  fill: white;
}
.apf-cmn .apf-btn-icon {
  position: relative;
}
.apf-cmn .apf-btn-icon .apf-btn-icon-left, .apf-cmn .apf-btn-icon .apf-btn-icon-right {
  position: absolute;
  width: 1em;
  height: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
}
.apf-cmn .apf-btn-icon .apf-btn-icon-right {
  right: 0.5em;
}
.apf-cmn .apf-btn-icon img, .apf-cmn .apf-btn-icon svg {
  width: 1em;
}
.apf-cmn .apf-btn-leaf {
  position: relative;
  padding-right: 1em;
}
.apf-cmn .apf-btn-leaf .apf-btn-icon-leaf {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  right: 2px;
  margin: auto;
}
.apf-cmn .apf-btn-leaf .apf-btn-icon-leaf img {
  width: 1em;
}
.apf-cmn .apf-btn-select {
  border: solid 2px #9fa0a0;
  background-color: white;
  color: #9fa0a0;
  justify-content: flex-start;
}
.apf-cmn .apf-btn-select.active {
  border-color: #231815;
  background-color: white;
  color: #231815;
}
.apf-cmn .apf-btn-select.active .cls-1 {
  fill: #231815;
}
.apf-cmn .apf-btn-sub {
  border: solid 1px #231815;
  background-color: white;
  color: #231815;
  font-weight: normal;
  font-size: 1em;
}
.apf-cmn .apf-btn-more {
  position: relative;
  display: inline-block;
  max-width: 420px;
  width: 100%;
  border: solid 2px #f3f3f3;
  color: #231815;
  font-size: 1.2em;
  text-align: center;
  padding: 4px 8px;
}
.apf-cmn .apf-btn-more .apf-btn-icon {
  position: absolute;
}
.apf-cmn .apf-btn-more img, .apf-cmn .apf-btn-more svg {
  width: 0.8em;
}
.apf-cmn .apf-btn-more .cls-1 {
  fill: #231815;
}
.apf-cmn .apf-btn-more:active {
  opacity: 1;
  background-color: #f3f3f3;
}
.apf-cmn .apf-btn-item {
  display: inline-block;
  background-color: white;
  color: #9fa0a0;
  border-radius: 50px;
  text-align: center;
  font-weight: bold;
  margin: 6px;
  padding: 4px 8px;
  opacity: 0.7;
}
.apf-cmn .apf-btn-item.active {
  opacity: 1;
}
.apf-cmn .apf-btn-item:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
}
.apf-cmn .apf-btn-accent {
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  overflow: visible;
}
.apf-cmn .apf-btn-accent:before, .apf-cmn .apf-btn-accent:after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 130%;
  left: -20%;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
  z-index: 100;
}
.apf-cmn .apf-btn-accent:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #df2516 20%, transparent 20%), radial-gradient(circle, transparent 20%, #0d79be 20%, transparent 30%), radial-gradient(circle, #6bb640 20%, transparent 20%), radial-gradient(circle, #672e8d 20%, transparent 20%), radial-gradient(circle, transparent 10%, #df2516 15%, transparent 20%), radial-gradient(circle, #0d79be 20%, transparent 20%), radial-gradient(circle, #6bb640 20%, transparent 20%), radial-gradient(circle, #672e8d 20%, transparent 20%), radial-gradient(circle, #f0ae22 20%, transparent 20%);
  background-size: 14% 14%, 24% 24%, 19% 19%, 24% 24%, 22% 22%, 14% 14%, 19% 19%, 14% 14%, 22% 22%;
}
.apf-cmn .apf-btn-accent:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #0d79be 20%, transparent 20%), radial-gradient(circle, #df2516 20%, transparent 20%), radial-gradient(circle, transparent 10%, #0d79be 15%, transparent 20%), radial-gradient(circle, #6bb640 20%, transparent 20%), radial-gradient(circle, #f0ae22 20%, transparent 20%), radial-gradient(circle, #df2516 20%, transparent 20%), radial-gradient(circle, #f0ae22 20%, transparent 20%);
  background-size: 19% 19%, 24% 24%, 22% 22%, 24% 24%, 19% 19%, 14% 14%, 24% 24%;
}
.apf-cmn .apf-btn-accent:active {
  transform: scale(0.9);
}
.apf-cmn .apf-btn-accent.apf-btn-accent-animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.apf-cmn .apf-btn-accent.apf-btn-accent-animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.apf-cmn .apf-tag {
  display: inline-block;
  font-size: 0.5em;
  font-weight: bold;
  border: solid 1px;
  border-radius: 50px;
  background-color: white;
  padding: 2px 8px;
  text-align: center;
  margin: 2px 0 0 2px;
}
.apf-cmn .apf-tag-campaign {
  color: #f0ae22;
  border-color: #f0ae22;
}
.apf-cmn .apf-tag-move {
  color: #6bb640;
  border-color: #6bb640;
}
.apf-cmn .apf-tag-energy {
  color: #f0ae22;
  border-color: #f0ae22;
}
.apf-cmn .apf-tag-food {
  color: #df2516;
  border-color: #df2516;
}
.apf-cmn .apf-tag-chores {
  color: #672e8d;
  border-color: #672e8d;
}
.apf-cmn .apf-tag-goods {
  color: #0d79be;
  border-color: #0d79be;
}
.apf-cmn .apf-tag-other {
  color: #464646;
  border-color: #464646;
}
.apf-cmn .apf-list {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.apf-cmn .apf-list > :nth-child(n) {
  border-bottom: solid 1px #f3f3f3;
  padding: 0 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.apf-cmn .apf-list > :last-child {
  margin-bottom: 0;
}
.apf-cmn .apf-separate {
  border: solid 2px #f3f3f3;
  margin: 8px -8px;
}
.apf-cmn .apf-hd-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
.apf-cmn .apf-hd-deco:before, .apf-cmn .apf-hd-deco::after {
  content: "";
  width: 1.6em;
  height: 2px;
  border-radius: 2px;
  background-color: #231815;
}
.apf-cmn .apf-hd-deco:before {
  transform: rotate(60deg);
}
.apf-cmn .apf-hd-deco:after {
  transform: rotate(-60deg);
}
.apf-cmn .apf-tab-wrap {
  position: relative;
  width: 100%;
}
.apf-cmn .apf-tab-wrap .apf-tab-active {
  position: absolute;
  width: 25%;
  background-color: #231815;
  height: 6px;
  border-radius: 5px;
  font-size: 0.8em;
  left: 0;
  bottom: 0;
  z-index: 2;
  transition: all 0.5s;
}
.apf-cmn .apf-tab {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-bottom: 0.5em;
}
.apf-cmn .apf-tab::before {
  content: "";
  position: absolute;
  background-color: #9fa0a0;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  left: 0;
  bottom: 0;
  transition: left 1s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}
.apf-cmn .apf-tab .apf-tab-content {
  position: relative;
  width: 25%;
  color: #9fa0a0;
  text-align: center;
}
.apf-cmn .apf-tab .apf-tab-content.active {
  color: #231815;
  transition: all 0.5s;
}
.apf-cmn .apf-pagenation {
  display: flex;
  align-items: center;
}
.apf-cmn .apf-pagenation .apf-pagenation-parts {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #9fa0a0;
  color: white;
  padding: 6px;
}
.apf-cmn .apf-pagenation .apf-pagenation-parts .cls-1 {
  fill: white;
}
.apf-cmn .apf-pagenation .apf-pagenation-parts.apf-pagenation-parts-active {
  background-color: #231815;
}
.apf-cmn .apf-pagenation #apf-prev {
  transform: scale(-1, 1);
}
.apf-cmn #regist-step li.step-active {
  background-color: #231815;
}
.apf-cmn #regist-step li.step-active:after {
  border-left: 10px solid #231815;
}
.apf-cmn .apf-confetti {
  display: block;
  position: relative;
  z-index: 1000;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.apf-cmn .apf-confetti .paper {
  opacity: 0;
  position: absolute;
}
.apf-cmn .apf-confetti .paper:nth-child(odd) {
  animation: confetti1 3.5s ease-in;
}
.apf-cmn .apf-confetti .paper:nth-child(even) {
  animation: confetti2 3.5s ease-in;
}
.apf-cmn .apf-confetti .paper.c1 {
  background-color: #6bb640;
}
.apf-cmn .apf-confetti .paper.c2 {
  background-color: #f0ae22;
}
.apf-cmn .apf-confetti .paper.c3 {
  background-color: #df2516;
}
.apf-cmn .apf-confetti .paper.c4 {
  background-color: #672e8d;
}
.apf-cmn .apf-confetti .paper.c5 {
  background-color: #0d79be;
}
@keyframes confetti1 {
  0% {
    opacity: 0;
    transform: translate(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(500%, -1000%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-500%, 2500%) rotate(720deg);
  }
}
@keyframes confetti2 {
  0% {
    opacity: 0;
    transform: translateY(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(-500%, -1800%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(500%, 2500%) rotate(720deg);
  }
}
.apf-cmn .apf-leaf-get-card-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  transition: opacity 0.6s;
  opacity: 0;
  z-index: -1;
}
.apf-cmn .apf-leaf-get-card-wrap .apf-contents-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.apf-cmn .apf-leaf-get-card-wrap .apf-leaf-get-card {
  max-width: 520px;
  width: 100%;
  margin: auto;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}
.apf-cmn .apf-leaf-get-card-wrap .apf-leaf-get-close img {
  width: 30px;
}
.apf-cmn .apf-leaf-get-card-wrap .img-wrap img {
  width: 180px;
}
@media screen and (min-width: 640px) {
  .apf-cmn .apf-leaf-get-card {
    padding: 32px 16px;
  }
}
.apf-cmn .footprint-supervision-wrap {
  border: solid 1.5px #000;
  width: auto;
  padding: 16px;
  margin: 40px auto;
}
.apf-cmn .footprint-supervision-wrap p {
  font-size: 1.4em;
}
.apf-cmn .apf-footprint-supervision {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  transform: translateX(100%);
  transition: 0.5s ease-in-out;
  padding: 40px 24px;
  overflow-y: scroll;
  z-index: 2000;
}
.apf-cmn .apf-footprint-supervision .apf-footprint-supervision-close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 5%;
  right: 5%;
}
.apf-cmn .apf-footprint-supervision .supervision-img img {
  height: 220px;
}
.apf-cmn .apf-footprint-supervision .notes1 {
  padding-left: 1.2em;
}
.apf-cmn .js-footprint-supervision-active {
  transform: translateX(0);
}
.apf-cmn .uk-alert-danger {
  color: #ff1815;
}
.apf-cmn .uk-alert-danger p {
  color: #ff1815;
}
@media screen and (min-width: 640px) {
  .apf-cmn {
    font-size: 16px;
  }
  .apf-cmn .apf-padding-l {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .apf-cmn .apf-padding-m {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .apf-cmn .apf-card-padding {
    padding: 20px;
  }
  .apf-cmn .apf-btn-l, .apf-cmn .apf-btn-m {
    font-size: 1.1em;
    padding: 10px;
  }
}

/**********************
    ヘッダ・フッタ共通
    (toggleメニュー)
**********************/
.apf-cmn .apf-toggle-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: #231815;
  width: 100%;
  height: 100%;
  top: 100%;
  color: white;
  text-align: left;
  font-size: 1.1em;
  font-weight: bold;
  padding: 40px 20px 90px 20px;
  overflow: hidden;
  z-index: 999;
  transition: all 0.6s ease;
}
.apf-cmn .apf-toggle-menu.active {
  top: 0;
}
.apf-cmn .apf-toggle-menu #apf-toggle-close {
  display: none;
}
.apf-cmn .apf-toggle-menu .apf-list .apf-list-item {
  position: relative;
  color: white;
  cursor: pointer;
}
.apf-cmn .apf-toggle-menu .apf-list .apf-list-item::after {
  content: "";
  position: absolute;
  background: url(/img/apf/apf_icon_arrow.svg) no-repeat;
  background-size: contain;
  width: 20px;
  height: 100%;
  top: 0.5em;
  bottom: 0;
  margin: auto;
  right: 0;
}
.apf-cmn .apf-toggle-menu .apf-list .apf-list-item:hover {
  opacity: 0.8;
}
.apf-cmn .apf-toggle-menu .apf-list a {
  display: block;
  color: white;
}
.apf-cmn .apf-toggle-menu #apf-banner {
  margin-top: auto;
  padding-top: 20px;
}
.apf-cmn .apf-toggle-menu #apf-banner li {
  max-width: 320px;
}
.apf-cmn .apf-toggle-menu #apf-banner li:nth-child(2) {
  margin-bottom: 0;
}
.apf-cmn .apf-toggle-menu #apf-banner li:nth-child(n+3) {
  display: none;
}
@media screen and (max-width: 380px) {
  .apf-cmn .apf-toggle-menu {
    padding-top: 20px;
    padding-bottom: 80px;
  }
  .apf-cmn .apf-toggle-menu .apf-list {
    font-size: 0.9em;
  }
  .apf-cmn .apf-toggle-menu .apf-list > :nth-child(n) {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .apf-cmn .apf-toggle-menu .apf-list .apf-list-item::after {
    width: 1.2em;
  }
}
@media screen and (min-width: 640px) {
  .apf-cmn .apf-toggle-menu {
    padding-top: 80px;
    padding-bottom: 40px;
    top: 0;
    right: -100%;
    transition: 0.8s;
  }
  .apf-cmn .apf-toggle-menu.active {
    right: 0;
  }
  .apf-cmn .apf-toggle-menu #apf-toggle-close {
    display: block;
    position: absolute;
    width: 30px;
    padding: 0;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  .apf-cmn .apf-toggle-menu #apf-toggle-close:hover {
    opacity: 0.8;
  }
  .apf-cmn .apf-toggle-menu .apf-list, .apf-cmn .apf-toggle-menu #apf-banner {
    max-width: 640px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .apf-cmn .apf-toggle-menu #apf-banner li {
    width: 48%;
  }
}
@media screen and (min-width: 960px) {
  .apf-cmn .apf-toggle-menu {
    width: 40%;
    right: -40%;
  }
  .apf-cmn .apf-toggle-menu.active {
    right: 0;
  }
  .apf-cmn .apf-toggle-menu #apf-banner li {
    width: 100%;
    margin-top: 3%;
    margin-right: auto;
    margin-left: auto;
  }
}
.apf-cmn #apf-credit {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 100%;
  height: 100%;
  top: 0;
  right: -100%;
  padding: 40px;
  overflow: hidden;
  overscroll-behavior: none;
  transition: all 0.6s ease;
  z-index: 9999;
}
.apf-cmn #apf-credit.active {
  right: 0;
}
.apf-cmn #apf-credit > div {
  max-width: 25em;
  width: 100%;
  margin: 0 auto;
}
.apf-cmn #apf-credit .company-name {
  font-size: 1.3em;
  font-weight: bold;
}
.apf-cmn #apf-credit #ft-mark {
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.apf-cmn #apf-credit #ft-mark img {
  height: 80px;
  margin: 0 20px;
}
.apf-cmn #apf-credit #ft-right #ft-terms {
  flex-direction: column;
  margin-top: 0;
}
.apf-cmn #apf-credit #ft-right #ft-terms li {
  position: relative;
  padding-left: 16px;
}
.apf-cmn #apf-credit #ft-right #ft-terms li::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #231815;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.apf-cmn #apf-credit #ft-right .copyright {
  font-size: 0.6em;
}
.apf-cmn #apf-credit #apf-totop {
  position: absolute;
  width: 30px;
  top: 10px;
  right: 10px;
  padding: 0;
}
.apf-cmn #apf-credit #apf-totop svg {
  display: none;
}

/********************
        ヘッダ
********************/
#apf-hd {
  /* ロゴのみの場合 */
  /* 新規登録 */
}
#apf-hd .container {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}
#apf-hd #apf-logo {
  max-width: 240px;
  min-width: 140px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-self: center;
}
#apf-hd .apf-notice {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
}
#apf-hd .apf-notice a {
  position: relative;
}
#apf-hd .apf-notice a .apf-notify {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ff1815;
  border-radius: 50%;
  right: -2px;
}
#apf-hd.apf-inactive-hd .container {
  display: none;
}
#apf-hd.apf-regist-hd #apf-logo {
  min-width: 200px;
}
#apf-hd.apf-regist-hd .apf-notice {
  display: none;
}
@media screen and (min-width: 640px) {
  #apf-hd .container {
    display: flex;
  }
  #apf-hd #apf-logo {
    margin: 0 auto 0 0;
    width: 20%;
  }
  #apf-hd #apf-login {
    position: absolute;
    width: 21em;
    top: 0;
    right: 0;
  }
  #apf-hd #apf-login a {
    width: 50%;
    padding: 8px;
  }
  #apf-hd #apf-login svg {
    width: 0.8em;
    vertical-align: text-bottom;
  }
  #apf-hd .apf-notice {
    position: initial;
    width: 40px;
    margin: 0;
  }
  #apf-hd #apf-global-nav {
    padding-top: 32px;
  }
  #apf-hd #apf-nav-menu {
    font-size: 1.1em;
  }
  #apf-hd #apf-nav-menu li {
    padding: 4px 8px 0;
  }
  #apf-hd #apf-nav-menu li img {
    width: 30px;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2 {
    border-color: #fbb03b;
    background-color: #fbb03b;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2 .cls-1 {
    fill: white;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2:hover {
    background-color: white;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2:hover .cls-1 {
    fill: #fbb03b;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw {
    border-color: #81c725;
    background-color: #81c725;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw .cls-1 {
    fill: white;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw .cls-2 {
    fill: #81c725;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw:hover {
    background-color: white;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw:hover .cls-1 {
    fill: #81c725;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-main2.btn-grw:hover .cls-2 {
    fill: white;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-ss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-ss img, #apf-hd #apf-nav-menu .apf-hd-menu-change .btn-ss svg {
    width: 1em;
  }
  #apf-hd #apf-menu-open {
    cursor: pointer;
  }
  #apf-hd #apf-menu-open:hover {
    opacity: 0.8;
  }
  #apf-hd #apf-hd-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #apf-hd.apf-regist-hd {
    /* 新規登録・ログイン */
  }
  #apf-hd.apf-regist-hd #apf-global-nav, #apf-hd.apf-regist-hd #apf-login {
    display: none;
  }
  #apf-hd.apf-regist-hd #apf-logo {
    margin: 0 auto;
  }
}
@media screen and (min-width: 840px) {
  #apf-hd .apf-toggle-menu {
    width: 30%;
    right: -30%;
  }
}

/********************
        フッタ
********************/
#apf-ft {
  padding-bottom: 60px;
  /* ラインのみ */
  /* 新規登録 */
}
#apf-ft #apf-bottom-nav {
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 60px;
  box-shadow: 0 0 6px rgba(28, 26, 26, 0.6);
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding-bottom: 4px;
  z-index: 1000;
}
#apf-ft #apf-bottom-nav::after {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #6bb640 0%, #6bb640 20%, #f0ae22 20%, #f0ae22 40%, #df2516 40%, #df2516 60%, #672e8d 60%, #672e8d 80%, #0d79be 80%, #0d79be 100%);
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
}
#apf-ft #apf-bottom-nav #apf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn {
  width: 25%;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active * {
  color: #231815;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #home1, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #mypage1-1-2, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #leaf1-2 {
  fill: #231815 !important;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #home1, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #mypage1-3, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #mypage1-1-3, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #leaf1-2 {
  stroke: #231815 !important;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #mypage1-2 {
  stroke: transparent !important;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #leaf1-1-1-1, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn.ft-nav-active #leaf1-1-2-1 {
  fill: white !important;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn#apf-bottom-close * {
  color: #231815;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn#apf-bottom-close #close1-1-2-3 {
  fill: #231815 !important;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn img, #apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn svg {
  width: auto;
  height: 36px;
  padding: 4px 4px 6px 4px;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn p {
  text-align: center;
  font-weight: bold;
  font-size: 0.6em;
  letter-spacing: 0;
  color: #9fa0a0;
  line-height: 1;
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn a .ft-apf-notify {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ff1815;
  border-radius: 50%;
  top: -5px;
  right: calc(100% - 34px);
}
#apf-ft #apf-bottom-nav #apf-bottom .apf-bottom-btn a:hover {
  opacity: 1;
}
#apf-ft .apf-main {
  display: none;
}
#apf-ft.apf-inactive-ft {
  padding-bottom: 0;
}
#apf-ft.apf-inactive-ft #copyright, #apf-ft.apf-inactive-ft #apf-bottom-nav {
  display: none;
}
#apf-ft.apf-inactive-ft .apf-main {
  display: block;
  height: 8px;
}
#apf-ft.apf-regist-ft {
  position: relative;
  box-sizing: border-box;
  padding-bottom: 20px;
}
#apf-ft.apf-regist-ft #apf-bottom-nav {
  display: none;
}
#apf-ft.apf-regist-ft #apf-ft-fixed {
  position: absolute;
  width: 100%;
  bottom: 0;
}
#apf-ft.apf-regist-ft .apf-main {
  display: block;
}
@media screen and (min-width: 640px) {
  #apf-ft {
    position: static;
    bottom: 0;
    padding-bottom: 0;
  }
  #apf-ft #apf-bottom-nav {
    display: none;
  }
  #apf-ft #copyright {
    padding: 8px;
  }
  #apf-ft .apf-main {
    display: block;
  }
}

/*
 *
 * スプラッシュ、ストーリー画面
 *
 */
/*--------- スプラッシュ、ストーリー、計測共通 -----------*/
#apf-splash, #apf-story, #apf-measure {
  overflow-x: hidden;
}
#apf-splash .apf-card-contents-wrap, #apf-story .apf-card-contents-wrap, #apf-measure .apf-card-contents-wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#apf-splash .apf-card, #apf-story .apf-card, #apf-measure .apf-card {
  width: 80%;
  max-height: 70vh;
  overflow-y: scroll;
  margin: 0px auto;
  padding: 16px 10px;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
}
#apf-splash .apf-card::-webkit-scrollbar, #apf-story .apf-card::-webkit-scrollbar, #apf-measure .apf-card::-webkit-scrollbar {
  width: 4px;
}
#apf-splash .apf-card::-webkit-scrollbar-thumb, #apf-story .apf-card::-webkit-scrollbar-thumb, #apf-measure .apf-card::-webkit-scrollbar-thumb {
  background: #9fa0a0;
  border-radius: 2px;
}
#apf-splash #apf-video-area, #apf-story #apf-video-area, #apf-measure #apf-video-area {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#apf-splash .apf-video, #apf-story .apf-video, #apf-measure .apf-video {
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*--------- スプラッシュ画面 -----------*/
#apf-splash .apf-card-contents-wrap {
  width: 60%;
  max-width: 300px;
}
#apf-splash .logo-img {
  max-width: 180px;
  margin: auto;
}
#apf-splash .btn-start {
  color: #231815;
  background-color: #fff;
  font-size: 1.2em;
  padding: 12px 8px;
  border: none;
}
#apf-splash .btn-start a {
  border: none;
}

/*--------- ストーリー -----------*/
#apf-story {
  overflow-y: hidden;
}
#apf-story .arrow-white .cls-1 {
  fill: #9fa0a0;
}
#apf-story .arrow-white:hover svg .cls-1 {
  fill: #fff;
}
#apf-story #get-story-offset-point {
  color: #231815;
}
#apf-story #get-story-offset-point .apf-btn-icon-leaf {
  background-color: #6bb640;
}
#apf-story #get-story-offset-point .apf-btn-icon-leaf .cls-1 {
  fill: #fff;
}
#apf-story #get-story-offset-point:hover {
  color: #fff;
  background-color: #231815;
}
#apf-story #get-story-offset-point.apf-btn-accent::before, #apf-story #get-story-offset-point.apf-btn-accent::after {
  width: 110%;
  left: -5%;
}

/*--------- ストーリー、測る共通 -----------*/
#apf-story ul, #apf-measure ul {
  padding: 0;
  margin: 0;
}
#apf-story .apf-bottom-logo, #apf-measure .apf-bottom-logo {
  position: absolute;
  width: 150px;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: 0.5s ease-in-out;
}
#apf-story .apf-btn-back, #apf-measure .apf-btn-back {
  position: absolute;
  z-index: 100;
  width: 30px;
  height: 30px;
  top: 2%;
  left: 3%;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
}
#apf-story .apf-btn-back span, #apf-measure .apf-btn-back span {
  line-height: 30px;
}
#apf-story .apf-btn-next svg, #apf-measure .apf-btn-next svg {
  width: 24px;
}
#apf-story .apf-btn-next:hover .cls-1, #apf-measure .apf-btn-next:hover .cls-1 {
  fill: #231815;
}
#apf-story button span, #apf-measure button span {
  position: relative;
}
#apf-story .apf-card, #apf-measure .apf-card {
  width: 100%;
}
#apf-story .card-text, #apf-measure .card-text {
  font-size: 1.1em;
  font-weight: bold;
}
#apf-story .apf-carousel, #apf-measure .apf-carousel {
  width: 300px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
#apf-story .apf-carousel-area, #apf-measure .apf-carousel-area {
  display: flex;
  position: absolute;
  top: 48%;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
#apf-story .apf-carousel-list, #apf-measure .apf-carousel-list {
  width: 300px;
  opacity: 0;
}
#apf-story .story-detail-text, #apf-measure .story-detail-text {
  text-align: left;
}
#apf-story .card-img img, #apf-measure .card-img img {
  max-width: 200px;
}
#apf-story .card-detail-text, #apf-measure .card-detail-text {
  font-size: 0.8em;
  text-align: left;
}
#apf-story .apf-story-offcanvas, #apf-measure .apf-story-offcanvas {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  transform: translateX(100%);
  transition: 0.6s ease-in-out;
  padding: 40px 24px;
  overflow-y: scroll;
  z-index: 1000;
}
#apf-story .js-apf-story-open, #apf-measure .js-apf-story-open {
  transform: translateX(0);
}
#apf-story .js-display-none, #apf-measure .js-display-none {
  opacity: 0;
}
#apf-story .story-detail-title, #apf-measure .story-detail-title {
  font-size: 1.6em;
  font-weight: bold;
}
#apf-story .story-detail-poem, #apf-measure .story-detail-poem {
  font-size: 1.2em;
  line-height: 2;
}
#apf-story .story-detail-text p, #apf-measure .story-detail-text p {
  color: #fff;
}
#apf-story .apf-story-close-btn, #apf-measure .apf-story-close-btn {
  padding: 0;
  width: 24px;
  position: absolute;
  top: 3%;
  right: 5%;
}
#apf-story .story-skip, #apf-measure .story-skip {
  position: absolute;
  bottom: 5%;
  right: 5%;
  font-size: 0.8em;
  border: solid 1px #9fa0a0;
  padding: 2px 10px;
  border-radius: 50px;
}
#apf-story .story-skip:hover, #apf-measure .story-skip:hover {
  color: #fff;
  background-color: #9fa0a0;
}
#apf-story .apf-hd-story-detail-secondary, #apf-measure .apf-hd-story-detail-secondary {
  position: relative;
  width: 7em;
  font-size: 0.8em;
  padding-bottom: 0.3em;
  margin: auto;
}
#apf-story .apf-hd-story-detail-secondary::before, #apf-measure .apf-hd-story-detail-secondary::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 2px;
  background-color: #fff;
  left: 0;
  bottom: 0;
}
#apf-story .apf-hd-story-detail-secondary::after, #apf-measure .apf-hd-story-detail-secondary::after {
  content: "";
  position: absolute;
  background: url(/img/apf/story/apf_img_story_secondary.png) no-repeat;
  background-size: contain;
  width: 1.375em;
  height: 2.2em;
  right: 0;
  bottom: 0;
}
#apf-story #apf-disabled-btn, #apf-measure #apf-disabled-btn {
  background-color: #9fa0a0;
  border-color: #9fa0a0;
  color: #fff;
  font-size: 1em;
}
#apf-story .apf-display-none, #apf-measure .apf-display-none {
  display: none;
}
#apf-story .fade-up,
#apf-story .fade-in, #apf-measure .fade-up,
#apf-measure .fade-in {
  opacity: 0;
}
#apf-story .fade-wrap .fade-up, #apf-measure .fade-wrap .fade-up {
  transform: translateY(120px);
  animation: fadeText1 1.5s 0.3s forwards, fadeText2 1.5s 1.8s forwards;
}
#apf-story .fade-wrap .fade-in, #apf-measure .fade-wrap .fade-in {
  animation: fadeIn 1.9s 2.5s forwards;
}
#apf-story #measure-content .fade-up, #apf-measure #measure-content .fade-up {
  transform: translateY(120px);
  animation: fadeText1 1.5s 9.5s forwards, fadeText2 1.5s 11s forwards;
}
#apf-story #measure-content .fade-in, #apf-measure #measure-content .fade-in {
  animation: fadeIn 1.9s 11.7s forwards;
}
@keyframes fadeText1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeText2 {
  100% {
    transform: translateY(0px);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 640px) {
  #apf-story .apf-carousel, #apf-measure .apf-carousel {
    width: 450px;
  }
  #apf-story .apf-carousel-list, #apf-measure .apf-carousel-list {
    width: 450px;
  }
  #apf-story .apf-card, #apf-measure .apf-card {
    padding: 32px 16px;
  }
}
@media screen and (max-width: 374px) {
  #apf-story .apf-card, #apf-measure .apf-card {
    max-height: 400px;
  }
}

/*--------- 測る画面 -----------*/
#apf-measure {
  overflow: hidden;
}
#apf-measure p {
  margin-bottom: 10px;
}
#apf-measure .container {
  min-height: 100vh;
}
#apf-measure .apf-bg {
  height: 100%;
}
#apf-measure .measure-center-img img {
  width: 200px;
}
#apf-measure .apf-measure-card {
  padding: 8px;
  margin: auto;
  max-width: 400px;
}
#apf-measure .apf-measure-card dt {
  text-align: left;
}
#apf-measure .page-num {
  font-weight: normal;
}
#apf-measure .answer-select p {
  text-align: left;
}
#apf-measure .answer-select-option {
  font-size: 1.1em;
  text-align: left;
  border-left: 2px solid #d1d1d1;
  padding-left: 8px;
}
#apf-measure .apf-check-wrap {
  display: block;
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
  user-select: none;
}
#apf-measure .apf-check-wrap input {
  display: none;
}
#apf-measure .apf-checkbox-mark {
  position: absolute;
  top: 18%;
  left: 0%;
  height: 13px;
  width: 13px;
  border: 1px solid #231815;
  box-sizing: border-box;
  border-radius: 3px;
}
#apf-measure .apf-checkbox-mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#apf-measure .apf-check-wrap input:checked + .apf-checkbox-mark {
  background-color: #231815;
}
#apf-measure .apf-check-wrap input:checked + .apf-checkbox-mark:after {
  display: block;
}
#apf-measure .apf-radio-mark {
  position: absolute;
  top: 18%;
  left: 0%;
  height: 14px;
  width: 14px;
  border: 1px solid #231815;
  box-sizing: border-box;
  border-radius: 50%;
}
#apf-measure .apf-radio-mark:after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #231815;
}
#apf-measure .apf-check-wrap input:checked + .apf-radio-mark:after {
  display: block;
}
#apf-measure .apf-card-result {
  background-color: #fff;
  border-radius: 8px;
}
#apf-measure .question-text {
  text-align: left;
}
#apf-measure .apf-date-of-birth {
  display: flex;
  white-space: nowrap;
  align-items: center;
}
#apf-measure .apf-date-of-birth select {
  margin-right: 4px;
}
#apf-measure .apf-date-width {
  width: 54px;
  margin-left: 10px;
}
#apf-measure .apf-measure-text-accent {
  font-size: 1.2em;
}
#apf-measure .apf-already-input-text {
  font-weight: normal;
  text-align: right;
  border-bottom: 1px solid #9fa0a0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/*--------- 測定完了画面 -----------*/
#apf-foot-result #measure-animation {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#apf-foot-result #measure-animation img {
  max-width: 240px;
}
#apf-foot-result #measure-animation .apf-logo img {
  max-width: 160px;
}
#apf-foot-result .apf-foot-answer {
  background: #fff;
  padding: 20px 0;
  margin-bottom: 140px;
}
#apf-foot-result .apf-list > :nth-child(n) {
  border-bottom: solid 1px #f3f3f3;
  padding: 0 10px;
}
#apf-foot-result .apf-foot-logo img {
  max-width: 160px;
}

/*---------- ホームとストーリー一覧共通 ----------*/
#apf-index #apf-story .apf-hd-story-secondary, #apf-story-index #apf-story .apf-hd-story-secondary {
  position: relative;
  font-size: 0.8em;
  padding-bottom: 0.3em;
}
#apf-index #apf-story .apf-hd-story-secondary::before, #apf-story-index #apf-story .apf-hd-story-secondary::before {
  content: "";
  position: absolute;
  width: 7em;
  height: 2px;
  background-color: #231815;
  left: 0;
  bottom: 0;
}
#apf-index #apf-story .apf-hd-story-secondary::after, #apf-story-index #apf-story .apf-hd-story-secondary::after {
  content: "";
  position: absolute;
  background: url(/img/apf/story/apf_img_story.png) no-repeat;
  background-size: contain;
  width: 1.375em;
  height: 2.2em;
  left: 6em;
  bottom: 0;
}
#apf-index #apf-story .apf-story-title, #apf-story-index #apf-story .apf-story-title {
  font-size: 1.1em;
  font-weight: normal;
  -webkit-text-stroke: 0.3px #231815;
}
#apf-index #apf-story .apf-story-read-common, #apf-story-index #apf-story .apf-story-read-common {
  position: absolute;
  bottom: 20px;
  left: 20px;
  border: solid 1px #6bb640;
  border-radius: 50px;
  font-size: 0.6em;
  padding: 2px 4px;
}
#apf-index #apf-story .apf-story-read-common svg, #apf-story-index #apf-story .apf-story-read-common svg {
  padding: 1px;
  vertical-align: sub;
}
#apf-index #apf-story .apf-story-unread, #apf-story-index #apf-story .apf-story-unread {
  background-color: #6bb640;
  color: white;
}
#apf-index #apf-story .apf-story-unread .cls-1, #apf-story-index #apf-story .apf-story-unread .cls-1 {
  fill: white;
}
#apf-index #apf-story .apf-story-read, #apf-story-index #apf-story .apf-story-read {
  background-color: white;
  color: #231815;
}
#apf-index #apf-story .apf-story-read .cls-1, #apf-story-index #apf-story .apf-story-read .cls-1 {
  fill: #6bb640;
}
#apf-index #apf-story .apf-story-read-leaf, #apf-story-index #apf-story .apf-story-read-leaf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px 1px 1px 1px;
}
#apf-index #apf-story .apf-story-read-leaf svg, #apf-story-index #apf-story .apf-story-read-leaf svg {
  width: 16px;
}
#apf-index #apf-story .apf-story-read-leaf .cls-1, #apf-story-index #apf-story .apf-story-read-leaf .cls-1 {
  fill: #6bb640;
}
#apf-index #apf-story .card-left, #apf-story-index #apf-story .card-left {
  padding-bottom: 2.5em;
  width: 62%;
}
#apf-index #apf-story .card-right, #apf-story-index #apf-story .card-right {
  width: 36%;
}
#apf-index #apf-story .apf-card, #apf-story-index #apf-story .apf-card {
  padding: 20px;
}

/* ストーリー一覧 */
#apf-story-index #apf-video-area {
  height: 100%;
}
#apf-story-index #apf-video-area::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
#apf-story-index #apf-story-lists {
  position: relative;
  z-index: 2;
}
#apf-story-index .apf-hd-story {
  position: relative;
  color: white;
  font-size: 1.6em;
  padding-left: 1em;
  margin-top: 1em;
  margin-bottom: 1.3em;
  line-height: 0.8;
}
#apf-story-index .apf-hd-story img {
  position: absolute;
  width: 1em;
  height: 1.6em;
  left: 0;
  bottom: 0;
}
#apf-story-index .apf-hd-story .apf-text-muted {
  font-weight: normal;
}
#apf-story-index .apf-card {
  margin-bottom: 4%;
  width: 100%;
  overflow: hidden;
}
#apf-story-index .apf-card:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 640px) {
  #apf-story-index .apf-hd-story {
    width: 13em;
    margin-right: auto;
    margin-left: auto;
  }
  #apf-story-index .apf-card {
    width: 47%;
    margin-bottom: 0;
  }
  #apf-story-index .apf-card:nth-child(-n+2) {
    margin-bottom: 3%;
  }
}

/*
*
* APFホーム
*
*/
#apf-index .js-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.5s;
  z-index: 30;
}
#apf-index #apf-top {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#apf-index #apf-top .apf-video-area {
  position: absolute;
  width: 200%;
  top: 0;
  left: 50%;
  transform: translateY(0) translateX(-50%);
  -webkit-transform: translateY(0) translateX(-50%);
}
#apf-index #apf-top .apf-video-area video {
  width: 100%;
}
#apf-index #apf-top-slide {
  /**** スライダー ****/
  /**** 前へ／次へ ****/
}
#apf-index #apf-top-slide #apf-item-btn {
  display: flex;
}
#apf-index #apf-top-slide #apf-item-btn .apf-list-option {
  color: #464646;
  width: 140px;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
#apf-index #apf-top-slide #apf-item-btn .apf-list-option:first-child {
  margin: 0 8px;
}
#apf-index #apf-top-slide #apf-item-btn .apf-list-option.active, #apf-index #apf-top-slide #apf-item-btn .apf-list-option:hover {
  opacity: 1;
}
#apf-index #apf-top-slide .apf-slide {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 200px;
  overflow: hidden;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-list {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item {
  min-width: 100%;
  height: 100%;
  padding: 0 40px;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item dt, #apf-index #apf-top-slide .apf-slide .apf-slide-item dd {
  padding: 6px 8px;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item p {
  margin: 6px 0;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-inner {
  max-width: 500px;
  width: 100%;
  height: 200px;
  background: white;
  overflow: hidden;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-inner svg {
  width: 0.8em;
  vertical-align: initial;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-inner svg .cls-1 {
  fill: #231815;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-slide-hd {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-text-accent {
  font-size: 2em;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-slide-dd {
  height: calc(100% - 35px);
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-total {
  margin: 12px 0 8px 0;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-total.apf-text-accent {
  margin: 8px 0;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-data {
  background-color: #f3f3f3;
  padding: 4px;
  margin: 0;
  white-space: nowrap;
  flex-wrap: wrap;
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-data.apf-data-leaf {
  background-color: rgba(107, 182, 64, 0.1);
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-data.apf-data-foot {
  background-color: rgba(13, 121, 190, 0.09);
}
#apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-data.apf-data-action {
  background-color: rgba(223, 37, 22, 0.07);
}
#apf-index #apf-top-slide .apf-slide .apf-list-data-wrap {
  width: 100%;
}
#apf-index #apf-top-slide .apf-slide .apf-list-data-wrap dd {
  margin-left: auto;
}
#apf-index #apf-top-slide .apf-slide .apf-list-data-wrap dd.apf-action-plus {
  position: relative;
  padding-left: 0.8em;
}
#apf-index #apf-top-slide .apf-slide .apf-list-data-wrap dd.apf-action-plus::before {
  content: "+";
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 0;
  margin: auto;
}
#apf-index #apf-top-slide .apf-pagenation-parts {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 2;
}
#apf-index #apf-top-slide .apf-pagenation-parts .apf-arrow {
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 0;
}
#apf-index #apf-top-slide .apf-pagenation-parts .apf-arrow:hover {
  opacity: 0.8;
}
#apf-index #apf-top-slide .apf-pagenation-parts .apf-next {
  transform: rotate(180deg);
}
#apf-index #apf-story .apf-hd-story {
  position: relative;
  margin: 12px 0 10px 0;
  padding-left: 0.9em;
}
#apf-index #apf-story .apf-hd-story img {
  position: absolute;
  width: 0.875em;
  height: 1.4em;
  left: 0;
  top: -0.4em;
}
#apf-index #apf-story .apf-hd-story .apf-text-muted {
  font-weight: normal;
}
#apf-index #apf-home-action-rec a {
  display: block;
}
#apf-index #apf-home-action-rec ul {
  width: 1650px;
}
#apf-index #apf-home-action-rec .apf-home-action-list {
  display: inline-block;
  margin-right: 1%;
  max-width: 240px;
  width: 100%;
  padding: 2px 0 1.5em 2px;
}
#apf-index #apf-home-action-rec .apf-home-action-list:last-child {
  margin-right: 0;
}
#apf-index #apf-home-action-rec .apf-home-action-list .text-wrap {
  margin-top: 1em;
}
#apf-index #apf-home-action-rec .apf-action-category {
  position: relative;
}
#apf-index #apf-home-action-rec .apf-action-category::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: -2px;
  left: -2px;
  z-index: 1;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-move::before {
  background: url(/img/apf/apf_icon_move_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-energy::before {
  background: url(/img/apf/apf_icon_energy_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-food::before {
  background: url(/img/apf/apf_icon_food_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-housework::before {
  background: url(/img/apf/apf_icon_housework_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-goods::before {
  background: url(/img/apf/apf_icon_goods_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-special::before {
  background: url(/img/apf/apf_icon_special_primary.png) no-repeat;
  background-size: contain;
}
#apf-index #apf-home-action-rec .apf-action-category.apf-category-other::before {
  background: url(/img/apf/apf_icon_other_primary.png) no-repeat;
  background-size: contain;
}
@media screen and (min-width: 480px) {
  #apf-index #apf-top-slide .apf-slide .apf-list-data-wrap {
    width: auto;
  }
}
@media screen and (min-width: 640px) {
  #apf-index h2 {
    text-align: center;
  }
  #apf-index #apf-top {
    padding-bottom: 50%;
    height: 0;
  }
  #apf-index #apf-top .apf-video-area {
    width: 100%;
  }
  #apf-index #apf-home-mv {
    position: relative;
  }
  #apf-index #apf-home-mv #apf-top-slide .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #apf-index #apf-story .apf-hd-story {
    width: 13em;
    margin-right: auto;
    margin-left: auto;
  }
  #apf-index #apf-top-campaign li {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  #apf-index #apf-home-action-rec .apf-home-action-list {
    padding: 4px 0 1.5em 4px;
  }
  #apf-index #apf-home-action-rec .apf-action-category::before {
    width: 45px;
    height: 45px;
    top: -4px;
    left: -4px;
  }
}
@media screen and (min-width: 960px) {
  #apf-index #apf-top {
    padding-bottom: 30%;
  }
  #apf-index #apf-top-slide #apf-item-btn {
    display: none;
  }
  #apf-index #apf-top-slide .apf-pagenation-parts {
    display: none;
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-list {
    left: 0 !important;
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-item {
    min-width: 0;
    width: 100%;
    padding: 0 20px;
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-slide-hd {
    height: 38px;
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-slide-dd {
    height: calc(100% - 38px);
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-item .apf-list-inner {
    height: 200px;
  }
  #apf-index #apf-top-slide .apf-slide .apf-slide-item dd {
    line-height: 1;
  }
  #apf-index #apf-top-slide .apf-slide .apf-list-data-wrap {
    width: 100%;
  }
  #apf-index #apf-top-slide .apf-slide .apf-list-data-wrap dd {
    margin-left: auto;
  }
}

/********************
* ホーム、お知らせ共通 *
********************/
#apf-index #apf-announce .apf-notice-list .img-wrap, #apf-announce-index #apf-announce .apf-notice-list .img-wrap {
  width: 38%;
}
#apf-index #apf-announce .apf-notice-list .text-wrap, #apf-announce-index #apf-announce .apf-notice-list .text-wrap {
  width: 59%;
}
#apf-index #apf-announce .apf-tab .apf-tab-content, #apf-announce-index #apf-announce .apf-tab .apf-tab-content {
  width: 50%;
}
#apf-index #apf-announce .apf-tab-wrap .apf-tab-active, #apf-announce-index #apf-announce .apf-tab-wrap .apf-tab-active {
  width: 50%;
}
@media screen and (min-width: 768px) {
  #apf-index #apf-announce .apf-notice-list, #apf-announce-index #apf-announce .apf-notice-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #apf-index #apf-announce .apf-notice-list > li, #apf-announce-index #apf-announce .apf-notice-list > li {
    width: 49%;
    margin-bottom: 4%;
  }
}

#apf-index #apf-announce .apf-img-trim, #apf-announce-index #apf-announce .apf-img-trim {
  padding-top: 52%;
}

#apf-index #apf-category li, #apf-category-index #apf-category li {
  width: 25%;
  padding: 8px;
}
#apf-index #apf-category li img, #apf-category-index #apf-category li img {
  max-width: 80px;
  min-width: 60px;
  width: 25%;
}
#apf-index #apf-category .apf-font-item, #apf-category-index #apf-category .apf-font-item {
  font-size: 0.8em;
  margin: 0.5em 0 0 0;
}
@media screen and (min-width: 640px) {
  #apf-index #apf-category ul, #apf-category-index #apf-category ul {
    justify-content: center;
  }
  #apf-index #apf-category li, #apf-category-index #apf-category li {
    width: auto;
    margin: 0 auto;
  }
  #apf-index #apf-category li img, #apf-category-index #apf-category li img {
    width: 100%;
  }
}

/*---------- newマーク ----------*/
#apf-index .apf-new, #apf-category-index .apf-new {
  width: 20px;
}
#apf-index #apf-home-action-rec .apf-list-title,
#apf-index .apf-category-inner .apf-list-title, #apf-category-index #apf-home-action-rec .apf-list-title,
#apf-category-index .apf-category-inner .apf-list-title {
  text-indent: 2.3em;
  display: inline;
}

/*
*
* APFカテゴリ・APFアクション
*
*/
/********** APFカテゴリ・キャンペーン一覧見出し共通 **********/
#apf-category-hd .img-wrap {
  width: 60px;
}
#apf-category-hd .text-wrap {
  width: calc(100% - 70px);
}
@media screen and (min-width: 768px) {
  #apf-category-hd .img-wrap {
    width: 80px;
  }
  #apf-category-hd .text-wrap {
    width: calc(100% - 100px);
  }
}

/********** APFカテゴリ一覧 **********/
#apf-category-index #apf-category-contents .apf-category-inner {
  width: 47.5%;
}
#apf-category-index #apf-category-contents .apf-category-inner:nth-child(odd) {
  margin-right: 5%;
}
#apf-category-index #apf-category-contents .apf-category-inner:not(:nth-last-child(-n+2)) {
  margin-bottom: 6%;
}
#apf-category-index #apf-category-contents .apf-leaf-get {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  padding: 3px;
}
#apf-category-index #apf-category-contents .apf-leaf-get .cls-1 {
  fill: #6bb640;
}
@media screen and (min-width: 768px) {
  #apf-category-index #apf-category-contents .apf-category-inner {
    width: 23%;
  }
  #apf-category-index #apf-category-contents .apf-category-inner:not(:nth-child(4n)) {
    margin-right: 2.6%;
  }
  #apf-category-index #apf-category-contents .apf-category-inner:not(:nth-last-child(-n+2)) {
    margin-bottom: 0;
  }
  #apf-category-index #apf-category-contents .apf-category-inner:not(:nth-child(4n)) {
    margin-bottom: 3%;
  }
}

/********** end APFカテゴリ一覧 **********/
/********** APFアクション(記事詳細) **********/
#apf-action-index .apf-btn-accent {
  font-size: 1.3em;
  width: 100%;
}
#apf-action-index .apf-btn-accent:before, #apf-action-index .apf-btn-accent:after {
  width: 110%;
  left: -5%;
}
#apf-action-index #apf-action-top dt {
  min-width: 9em;
  width: 40%;
}
#apf-action-index #apf-action-top dd {
  width: 60%;
}
#apf-action-index #apf-action-top .apf-category-icon {
  width: 30px;
  margin-right: 4px;
}
#apf-action-index #apf-action-top .apf-contribution svg {
  width: 16px;
  margin: 0 2px;
}
#apf-action-index #apf-action-top .apf-contribution .cls-1 {
  fill: #231815;
}
#apf-action-index #apf-action-top .apf-contribution .score-active .cls-1 {
  fill: #6bb640;
}
#apf-action-index #apf-action-contents article ul {
  list-style-type: disc;
}
#apf-action-index #apf-action-contents article ol {
  list-style-type: decimal;
}
#apf-action-index #apf-action-contents article p {
  text-align: left;
}
#apf-action-index #apf-action-contents article .apf-action-article > :last-child {
  margin-bottom: 0;
}
#apf-action-index #apf-action-contents article a {
  color: #9fa0a0;
  padding-bottom: 1px;
  border-bottom: solid 1px;
}
#apf-action-index #apf-action-contents .apf-movie-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
#apf-action-index #apf-action-contents .apf-movie-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  transform: translate(50%, 50%);
}
#apf-action-index #apf-action-contents .apf-text-link {
  color: #9fa0a0;
  padding-bottom: 0;
  border-bottom: none;
}
#apf-action-index #apf-action-contents .apf-text-link svg {
  vertical-align: initial;
}
#apf-action-index #apf-action-contents .apf-text-link .cls-1 {
  fill: #9fa0a0;
}
#apf-action-index #apf-action-offset .apf-card dt {
  margin-bottom: 20px;
}
#apf-action-index #apf-action-offset .apf-card dd {
  font-weight: bold;
}

/********** end APFカテゴリ(記事詳細) **********/
/*
*
* APFモーダル(シェア・クイズ)
*
*/
.apf-modal {
  position: relative;
  width: 320px;
  height: 100vh;
  margin: 0 auto;
}
.apf-modal .img-wrap {
  text-align: center;
}
.apf-modal .img-wrap img {
  max-width: 180px;
  width: 100%;
}
.apf-modal .apf-modal-inner {
  position: absolute;
  width: 100%;
  top: 5%;
  height: calc(100vh - (70px + 10%));
}
.apf-modal .apf-modal-card-contents {
  width: 320px;
  height: 100%;
  transform: translateX(200%);
  position: absolute;
  top: 0;
  left: 0;
}
.apf-modal .apf-card {
  position: relative;
  width: 100%;
  min-height: calc(100vh - (140px + 10%));
  max-height: 50vh;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.apf-modal .apf-modal-close {
  display: inline-block;
  width: 30px;
  padding: 0;
}
@media screen and (min-width: 640px) {
  .apf-modal {
    width: 480px;
  }
  .apf-modal .img-wrap img {
    max-width: 220px;
  }
  .apf-modal .apf-modal-inner {
    height: calc(100vh - 10%);
  }
  .apf-modal .apf-modal-card-contents {
    width: 480px;
  }
  .apf-modal .apf-card {
    min-height: calc(100vh - (60px + 10%));
  }
}

#apf-share, #apf-quiz {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
}

/***** クイズ *****/
#apf-quiz .apf-modal .apf-modal-card-contents {
  transition: all 0.8s;
}
#apf-quiz .apf-modal .apf-question .img-wrap img {
  max-width: 100%;
  width: 100%;
}
#apf-quiz .apf-modal .apf-result-text {
  position: relative;
  padding-left: 2em;
}
#apf-quiz .apf-modal .apf-result-text span {
  margin-right: 0.5em;
}
#apf-quiz .apf-modal .apf-btn-result-cmn.inactive {
  border-color: #9fa0a0;
  background-color: #9fa0a0;
  color: white;
  font-size: 1em;
}
#apf-quiz .apf-modal .apf-btn-result-cmn.inactive .cls-1 {
  fill: #9fa0a0;
}
#apf-quiz .apf-modal .apf-btn-select {
  max-width: 320px;
}
#apf-quiz .apf-modal .apf-btn-select.notes2 {
  padding-left: 2.5em;
}
#apf-quiz .apf-modal .apf-btn-select .apf-number {
  background-color: #9fa0a0;
}
#apf-quiz .apf-modal .apf-btn-select.active .apf-number {
  background-color: #231815;
}
#apf-quiz .apf-modal .apf-btn-select .notes-span {
  left: 8px;
  bottom: 0;
  margin: auto;
}
#apf-quiz .apf-modal .apf-modal-close.apf-btn-m {
  width: 100%;
}

/***** シェア *****/
#apf-share .apf-list {
  border: solid 1px #f3f3f3;
}
#apf-share .apf-list > :nth-child(n) {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#apf-share .apf-list > :first-child {
  padding-top: 10px;
}
#apf-share .apf-list > :last-child {
  margin-bottom: 0;
  border-bottom: none;
}
#apf-share .apf-share-icon {
  width: 30px;
  margin-right: 0.5em;
}

/*
*
* APFキャンペーン共通
*
*/
/*------ キャンペーン一覧 ------*/
#apf-campaign-index .apf-cam-list {
  margin-bottom: 4%;
}
#apf-campaign-index .apf-cam-list:last-child {
  margin-bottom: 0;
}
#apf-campaign-index #apf-no-campaign {
  padding-bottom: 20px;
}
@media screen and (min-width: 640px) {
  #apf-campaign-index .apf-cam-list {
    width: 48%;
  }
  #apf-campaign-index .apf-cam-list:nth-child(odd) {
    margin-right: 4%;
  }
  #apf-campaign-index .apf-cam-list:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}
#apf-campaign-index #cam-close h2 {
  padding: 0.5em 0;
}
#apf-campaign-index #cam-close ul {
  margin: 0;
  display: none;
}
#apf-campaign-index #cam-close li {
  border-bottom: 1px solid #dddddd;
  background-color: #f3f3f3;
}
#apf-campaign-index #cam-close li a {
  padding: 1em 0.5em;
  align-items: center;
}
#apf-campaign-index #cam-close li p {
  margin: 0;
}
#apf-campaign-index #cam-close li .end {
  background-color: #9fa0a0;
  color: #fff;
  padding: 4px 6px;
  margin-right: 12px;
}
#apf-campaign-index #cam-close li:last-child {
  border: none;
}

/*---- end キャンペーン一覧 ----*/
/*---- キャンペーンページ共通 ----*/
#apf-cam-end {
  display: none;
  background-color: #f3f3f3;
  color: #231815;
  border-top: 2px solid;
  border-bottom: 2px solid;
  text-align: center;
  font-size: 0.4em;
  padding: 30px 0;
  margin-top: 20px;
}

.apf-dl-wrap {
  background-color: #fff;
  padding: 8px;
}
.apf-dl-wrap dl {
  border-bottom: 1.5px solid #f3f3f3;
  padding: 8px;
  margin: 0;
}
.apf-dl-wrap dl:last-child {
  border: none;
}
.apf-dl-wrap dd {
  text-align: left;
}

@media screen and (min-width: 640px) {
  .adp-dl-wrap dl {
    padding: 16px;
  }
}
/*---- キャンペーンページ共通 end ----*/
/*
*
* APFパーツ共通
*
*/
/********** バナー **********/
#apf-banner {
  margin: 0;
  padding: 0;
}
#apf-banner li {
  max-width: 420px;
  width: 80%;
  margin: 0 1% 4% 1%;
}
#apf-banner li:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 640px) {
  #apf-banner {
    justify-content: space-evenly;
  }
  #apf-banner li {
    width: 31%;
    margin-bottom: 0;
  }
  #apf-banner li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}

/******** end バナー ********/
/*
*
* APFリーフ履歴共通
*
*/
/********** リーフ履歴 **********/
#apf-leaf-history .apf-card dt {
  background-color: #6bb640;
  border-radius: 8px 8px 0 0;
  padding: 6px 8px;
}
#apf-leaf-history .apf-history-list-wrap.apf-list > :nth-child(n) {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#apf-leaf-history .apf-history-list-wrap.apf-list > :last-child {
  margin-bottom: 0;
}
#apf-leaf-history .apf-history-list .apf-offset-data {
  width: calc(100% - 30px);
}
#apf-leaf-history .apf-history-list .img-wrap {
  width: 30px;
  transform: scale(-1, -1);
}

/******** end リーフ履歴 ********/
/******** リーフ履歴詳細 ********/
#apf-leaf-detail #apf-leaf-detail-list {
  border: solid 1px #676767;
}
#apf-leaf-detail #apf-leaf-detail-list .apf-hd-cmn {
  border-radius: 7px 7px 0 0;
}
#apf-leaf-detail #apf-leaf-detail-list dl {
  padding: 10px;
  border-bottom: solid 1px #676767;
}
#apf-leaf-detail #apf-leaf-detail-list dl .apf-text-accent {
  font-size: 1.1em;
}
#apf-leaf-detail #apf-leaf-detail-list #apf-history-jcredit {
  padding: 10px;
  border-radius: 0 0 7px 7px;
  background-color: rgba(107, 182, 64, 0.1);
}
#apf-leaf-detail #apf-leaf-detail-list #apf-history-jcredit dl {
  border-bottom: none;
}
#apf-leaf-detail #apf-leaf-detail-list #apf-history-jcredit .img-wrap {
  width: 50px;
}
#apf-leaf-detail #apf-leaf-detail-equip li {
  border: solid 1px #231815;
  padding: 10px;
}
#apf-leaf-detail #apf-leaf-detail-equip .img-wrap {
  width: 16px;
}
#apf-leaf-detail #apf-leaf-detail-equip .img-wrap .cls-1 {
  fill: #231815;
}
@media screen and (min-width: 640px) {
  #apf-leaf-detail #apf-leaf-detail-list dl {
    padding: 20px;
  }
  #apf-leaf-detail #apf-leaf-detail-list #apf-history-jcredit {
    padding: 20px;
  }
  #apf-leaf-detail #apf-leaf-detail-list #apf-history-jcredit .img-wrap {
    width: 60px;
  }
}

/****** end リーフ履歴詳細 ******/
/****** cam2201 ******/
#apf-campaign-2201 .bg-2201 {
  background-color: #f3f3f3;
  color: #000;
}
#apf-campaign-2201 .text-accent-cam2201 {
  color: #0CAB8B;
}
#apf-campaign-2201 #mv .mv-img {
  padding: 30px 0;
}
#apf-campaign-2201 #contents .card-wrap {
  box-shadow: 1px 1px 10px gray;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#apf-campaign-2201 #contents .card-wrap .card-title {
  background-color: #0CAB8B;
  color: #fff;
  padding: 6px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#apf-campaign-2201 #contents .card-wrap .card-detail {
  padding: 16px;
}
#apf-campaign-2201 #contents .card-wrap .cam2201-overlay {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
  font-weight: bold;
}
#apf-campaign-2201 #contents .twitter-share-btn img {
  margin-right: 4px;
  width: 28px;
  height: 28px;
}
#apf-campaign-2201 #detail {
  background: linear-gradient(-45deg, #fff 25%, #f3f3f3 25%, #f3f3f3 50%, #fff 50%, #fff 75%, #f3f3f3 75%, #f3f3f3);
  background-size: 8px 8px;
}
@media screen and (min-width: 640px) {
  #apf-campaign-2201 #present .img-wrap {
    display: flex;
    justify-content: space-between;
  }
  #apf-campaign-2201 #present .img-wrap img {
    width: 100%;
    height: 100%;
  }
  #apf-campaign-2201 #contents .kao-wrap {
    margin: 0 10px;
  }
  #apf-campaign-2201 #contents .card-contents-wrap {
    display: flex;
    justify-content: space-between;
  }
  #apf-campaign-2201 #contents .card-wrap {
    width: 32%;
  }
  #apf-campaign-2201 #contents .card-wrap-res {
    justify-content: flex-start;
  }
  #apf-campaign-2201 #contents .card-margin-res {
    margin-right: 2%;
  }
}

/****** cam2201 end ******/
#apf-lp-lp01a .apf-btn-start {
  color: #231815;
  background-color: #fff;
  font-size: 1.2em;
  padding: 12px 8px;
  border: none;
}
#apf-lp-lp01a .apf-bg-black {
  background-color: #000;
  padding: 40px 16px;
  position: relative;
  z-index: 100;
}
#apf-lp-lp01a .apf-bg-black .form-area-wrap {
  max-width: 480px;
  margin: auto;
}
#apf-lp-lp01a .apf-bg-black h3 {
  color: #fff;
  position: relative;
}
#apf-lp-lp01a .sp-img-margin-left {
  margin-left: 4px;
}
#apf-lp-lp01a .section-top-icon img {
  max-width: 60px;
}
#apf-lp-lp01a .apf-hr {
  border-top: 2px solid #fff;
}
#apf-lp-lp01a .apf-main {
  position: relative;
  z-index: 100;
}
#apf-lp-lp01a #top {
  position: relative;
}
#apf-lp-lp01a #top .apf-main {
  position: absolute;
  top: 0;
  z-index: 100;
}
#apf-lp-lp01a #top #apf-video-area-lp {
  position: relative;
  overflow: hidden;
  min-height: 630px;
  height: 100vh;
}
#apf-lp-lp01a #top .apf-video {
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
#apf-lp-lp01a #top .top-contents {
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0%;
  left: 50%;
  height: 100%;
  width: 100%;
  padding: 20px 16px 60px;
  text-align: center;
}
#apf-lp-lp01a #top .top-contents h2 {
  color: #fff;
  margin: 12px 0;
}
#apf-lp-lp01a #top .apf-logo {
  margin: 0 0 20px 0;
}
#apf-lp-lp01a #top .apf-logo img {
  max-width: 200px;
}
#apf-lp-lp01a #top .apf-sp-img {
  height: 65%;
}
#apf-lp-lp01a #top .apf-sp-img img {
  height: 100%;
  margin-right: 8px;
}
#apf-lp-lp01a #top .apf-sp-img-pc {
  display: none;
}
#apf-lp-lp01a #top .apf-scroll-down {
  position: absolute;
  bottom: 3%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
#apf-lp-lp01a #top .apf-scroll-down p {
  color: #fff;
  line-height: 1;
}
#apf-lp-lp01a #top .apf-scroll-down span {
  color: #fff;
}
#apf-lp-lp01a #intro {
  position: relative;
  z-index: 100;
  height: 600px;
}
#apf-lp-lp01a #intro p {
  letter-spacing: 0.1em;
  line-height: 1.6em;
}
#apf-lp-lp01a #intro .mist-bg-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: -webkit-radial-gradient(circle, #E5E5E5, #E1E1E1, #A7A7A7 400px);
  background: radial-gradient(circle, #E5E5E5, #E1E1E1, #A7A7A7 400px);
}
#apf-lp-lp01a #intro .wrap-contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 100;
  width: 100%;
  padding: 16px;
}
#apf-lp-lp01a #intro .img-contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
#apf-lp-lp01a #intro .img-contents img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  max-width: 100%;
  animation: animateSteam calc(2s * var(--i)) linear infinite;
}
@keyframes animateSteam {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  25%, 75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}
#apf-lp-lp01a #intro .intro-top-img img {
  max-width: 200px;
}
#apf-lp-lp01a #explanation {
  position: relative;
  overflow: hidden;
}
#apf-lp-lp01a #explanation .apf-circles {
  overflow: hidden;
}
#apf-lp-lp01a #explanation .apf-circles li {
  position: absolute;
  display: block;
  animation: animate 25s linear infinite;
  bottom: -25%;
  border-radius: 50%;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(1) {
  left: 25%;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation-duration: 30s;
  border: 4px solid #6bb640;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 27s;
  background-color: #f0ae22;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 8s;
  background-color: #df2516;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 4s;
  animation-duration: 28s;
  background-color: #672e8d;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  background-color: #0d79be;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
  animation-duration: 28;
  background-color: #6bb640;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 12s;
  animation-duration: 32s;
  border: 3px solid #f0ae22;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(8) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 12s;
  animation-duration: 20s;
  background-color: #672e8d;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(9) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 10s;
  animation-duration: 32s;
  background-color: #0d79be;
}
#apf-lp-lp01a #explanation .apf-circles li:nth-child(10) {
  left: 90%;
  width: 180px;
  height: 180px;
  animation-delay: 18s;
  animation-duration: 36s;
  border: 3px solid #df2516;
  bottom: -28%;
}
@keyframes animate {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}
#apf-lp-lp01a #explanation h2 {
  position: relative;
  z-index: 100;
}
#apf-lp-lp01a #explanation .apf-slide {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 480px;
  overflow: hidden;
}
#apf-lp-lp01a #explanation .apf-slide-list {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
}
#apf-lp-lp01a #explanation .apf-pagination-parts {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 100;
}
#apf-lp-lp01a #explanation .apf-pagination-parts .apf-arrow {
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 0;
}
#apf-lp-lp01a #explanation .apf-pagination-parts .apf-arrow svg {
  color: #231815;
}
#apf-lp-lp01a #explanation .apf-pagination-parts .apf-arrow:hover {
  opacity: 0.8;
}
#apf-lp-lp01a #explanation .apf-pagination-parts .apf-next {
  transform: rotate(180deg);
}
#apf-lp-lp01a #explanation .action-wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#apf-lp-lp01a #explanation .action-cmn {
  position: relative;
  text-align: center;
  z-index: 100;
  margin-top: 140px;
  min-width: 100%;
}
#apf-lp-lp01a #explanation .action-cmn img {
  max-height: 300px;
}
#apf-lp-lp01a #explanation .circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -38%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: -1;
}
#apf-lp-lp01a #explanation .circle-top-text {
  position: absolute;
  left: 50%;
  top: -46%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 10;
  font-size: 1.8em;
  font-weight: bold;
  text-shadow: 3px 3px 3px #fff, -3px -3px 3px #fff, -3px 3px 3px #fff, 3px -3px 3px #fff, 3px 0px 3px #fff, -3px 0px 3px #fff, 0px 3px 3px #fff, 0px -3px 3px #fff;
}
#apf-lp-lp01a #explanation .circle-top-text span {
  font-size: 1.4em;
}
#apf-lp-lp01a #explanation .circle-text {
  position: absolute;
  left: 50%;
  top: -24%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 10;
  color: #fff;
  font-size: 1.2em;
  width: 100%;
}
#apf-lp-lp01a #explanation .action-circle1 {
  background-color: #6bb640;
}
#apf-lp-lp01a #explanation .visual-circle1 {
  color: #6bb640;
}
#apf-lp-lp01a #explanation .action-circle2 {
  background-color: #f0ae22;
}
#apf-lp-lp01a #explanation .visual-circle2 {
  color: #f0ae22;
}
#apf-lp-lp01a #explanation .action-circle3 {
  background-color: #df2516;
}
#apf-lp-lp01a #explanation .visual-circle3 {
  color: #df2516;
}
#apf-lp-lp01a #explanation .action-circle4 {
  background-color: #672e8d;
}
#apf-lp-lp01a #explanation .visual-circle4 {
  color: #672e8d;
}
#apf-lp-lp01a #video .explanation-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#apf-lp-lp01a #video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#apf-lp-lp01a #reason {
  position: relative;
  z-index: 100;
  background-color: #fff;
}
#apf-lp-lp01a #reason .reason-point {
  position: relative;
  margin-bottom: 60px;
}
#apf-lp-lp01a #reason .sp-img {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  text-align: center;
}
#apf-lp-lp01a #reason .sp-img img {
  width: 75%;
  max-width: 280px;
}
#apf-lp-lp01a #reason .point-contents-wrap {
  margin-top: 76px;
  padding: 0 16px;
}
#apf-lp-lp01a #reason .point-top-text p {
  font-size: 1.4em;
}
#apf-lp-lp01a #reason .point-top-text p span {
  font-size: 1.4em;
}
#apf-lp-lp01a #reason .point-top-text .point1 {
  color: #0d79be;
}
#apf-lp-lp01a #reason .point-top-text .point2 {
  color: #672e8d;
}
#apf-lp-lp01a #reason .point-top-text .point3 {
  color: #df2516;
}
#apf-lp-lp01a #reason .point-title {
  font-size: 1.4em;
}
#apf-lp-lp01a #reason .point-img-wrap {
  position: absolute;
  width: 25%;
}
#apf-lp-lp01a #reason .img-wrap-lg {
  width: 28%;
}
#apf-lp-lp01a #reason .point1-img1 {
  top: 40%;
  left: 3%;
}
#apf-lp-lp01a #reason .point1-img2 {
  top: 52%;
  right: 3%;
}
#apf-lp-lp01a #reason .point2-img1 {
  top: 40%;
  right: 3%;
}
#apf-lp-lp01a #reason .point2-img2 {
  top: 52%;
  left: 3%;
}
#apf-lp-lp01a #reason .point3-img1 {
  top: 32%;
  left: 3%;
  width: 110px;
}
#apf-lp-lp01a #reason .point3-img2 {
  top: 52%;
  right: 3%;
}
#apf-lp-lp01a #thought {
  background-image: url(/img/apf/lp/thought_bg.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
#apf-lp-lp01a #thought .thought-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#apf-lp-lp01a #thought h2, #apf-lp-lp01a #thought p {
  color: #fff;
}
#apf-lp-lp01a #thought p {
  padding: 0 16px;
}
#apf-lp-lp01a #copyright {
  background-color: #000;
  color: #fff;
  padding: 16px 12px;
}
@media screen and (min-width: 640px) {
  #apf-lp-lp01a .apf-bg-black {
    padding: 60px 16px;
  }
  #apf-lp-lp01a .apf-bg-black h3::before, #apf-lp-lp01a .apf-bg-black h3::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    width: 100px;
    height: 100px;
  }
  #apf-lp-lp01a .apf-bg-black h3::before {
    background-image: url(/img/apf/lp/lp_cv_anime1.gif);
    left: -20%;
  }
  #apf-lp-lp01a .apf-bg-black h3::after {
    background-image: url(/img/apf/lp/lp_cv_anime2.gif);
    right: -25%;
  }
  #apf-lp-lp01a #intro p {
    text-align: center;
  }
  #apf-lp-lp01a #reason .reason-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #apf-lp-lp01a #reason .background-img {
    width: 46%;
    order: 1;
  }
  #apf-lp-lp01a #reason .sp-img {
    left: 57%;
    top: 53%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  #apf-lp-lp01a #reason .point-contents-wrap {
    width: 46%;
    margin: 0;
    padding-left: 8%;
  }
  #apf-lp-lp01a #reason .contents-wrap-right {
    padding-left: 40px;
  }
  #apf-lp-lp01a #reason .point-top-text {
    text-align: left;
  }
  #apf-lp-lp01a #reason .point-title {
    text-align: left;
  }
  #apf-lp-lp01a #reason .order-point2 {
    order: 2;
  }
  #apf-lp-lp01a #reason .img-position-left {
    left: 43%;
  }
  #apf-lp-lp01a #reason .point-wrap li:not(:last-child) {
    margin-bottom: 100px;
  }
  #apf-lp-lp01a #reason .point-img-wrap img {
    max-width: 120px;
  }
  #apf-lp-lp01a #reason .point1-img1 {
    top: -10%;
    left: 30%;
  }
  #apf-lp-lp01a #reason .point1-img1 img {
    max-width: 100px;
  }
  #apf-lp-lp01a #reason .point1-img2 {
    top: 80%;
    right: 0%;
  }
  #apf-lp-lp01a #reason .point1-img2 img {
    max-width: 160px;
  }
  #apf-lp-lp01a #reason .point2-img1 {
    top: -5%;
    right: 65%;
  }
  #apf-lp-lp01a #reason .point2-img2 {
    top: 80%;
    left: 1%;
  }
  #apf-lp-lp01a #reason .point2-img2 img {
    max-width: 160px;
  }
  #apf-lp-lp01a #reason .point3-img1 {
    top: -18%;
    left: 30%;
  }
  #apf-lp-lp01a #reason .point3-img1 img {
    max-width: 100px;
  }
  #apf-lp-lp01a #reason .point3-img2 {
    top: 80%;
    right: 0%;
  }
  #apf-lp-lp01a #reason .point3-img2 img {
    max-width: 160px;
  }
}
@media screen and (min-width: 840px) {
  #apf-lp-lp01a .margin-remove-res {
    margin: 0;
  }
  #apf-lp-lp01a #top .apf-logo img {
    max-width: 400px;
  }
  #apf-lp-lp01a #top h2 {
    margin: 20px 0;
  }
  #apf-lp-lp01a #top #apf-video-area-lp {
    max-height: 500px;
    min-height: auto;
  }
  #apf-lp-lp01a #top .apf-sp-img {
    display: none;
  }
  #apf-lp-lp01a #top .apf-sp-img-pc {
    display: block;
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 1000;
    padding-left: 10%;
  }
  #apf-lp-lp01a #top .apf-sp-img-pc img {
    max-width: 300px;
  }
  #apf-lp-lp01a #top .top-contents {
    text-align: left;
    max-width: 900px;
    padding-left: 40px;
    padding-bottom: 20px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    height: auto;
  }
  #apf-lp-lp01a #top .apf-input-wrap {
    margin: 0;
  }
  #apf-lp-lp01a #top .apf-scroll-down {
    display: none;
  }
}
@media screen and (min-width: 840px) and (min-width: 1080px) {
  #apf-lp-lp01a #explanation .apf-slide-list {
    left: 0;
  }
  #apf-lp-lp01a #explanation .action-cmn {
    min-width: 25%;
  }
  #apf-lp-lp01a #explanation .action4 {
    order: 4 !important;
  }
  #apf-lp-lp01a #explanation .apf-pagination-parts {
    display: none;
  }
  #apf-lp-lp01a #reason .point-img-wrap img {
    max-width: 140px;
  }
  #apf-lp-lp01a #reason .point1-img1 {
    top: 0;
  }
  #apf-lp-lp01a #reason .point1-img1 img {
    max-width: 120px;
  }
  #apf-lp-lp01a #reason .point1-img2 img {
    max-width: 180px;
  }
  #apf-lp-lp01a #reason .point2-img2 img {
    max-width: 180px;
  }
  #apf-lp-lp01a #reason .point3-img1 {
    top: -2%;
  }
  #apf-lp-lp01a #reason .point3-img1 img {
    max-width: 120px;
  }
  #apf-lp-lp01a #reason .point3-img2 img {
    max-width: 180px;
  }
}

#terms-agreement label {
  display: inline-block;
}
#terms-agreement .watt-title {
  font-size: 1.3em;
  border-left: 5px solid #0095ff;
  padding-left: 10px;
}
#terms-agreement .terms-wrap {
  background: #f5f5f5;
  padding: 12px;
  width: 100%;
}
#terms-agreement .terms-common h2 {
  border: none;
  padding: 0;
}
#terms-agreement .terms-contents {
  height: 240px;
  overflow-y: scroll;
  font-size: 80%;
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fff;
}
#terms-agreement .terms-contents h2 {
  font-size: 110%;
  margin-top: 20px;
}
#terms-agreement .terms-contents h3 {
  font-size: 100%;
}
#terms-agreement .terms-contents h4 {
  font-size: 100%;
  font-weight: bold;
}
#terms-agreement .terms-contents ol {
  list-style: decimal;
}
#terms-agreement .terms-modal h2 {
  font-size: 1.3em;
  margin-top: 20px;
}
#terms-agreement .terms-modal h3 {
  font-size: 1.1em;
}
#terms-agreement .terms-modal h4 {
  font-size: 1.1em;
  font-weight: bold;
}
#terms-agreement .terms-modal ol {
  list-style: decimal;
}
#terms-agreement .terms-btn-wrap {
  padding: 0;
}
#terms-agreement .modal-button {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
}
#terms-agreement .btn-disable {
  color: #ddd;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: default;
}
#terms-agreement .text-caution {
  color: red;
}
#terms-agreement .mail-setting-wrap {
  text-align: left;
  border: solid 2px red;
  padding: 16px;
}
#terms-agreement .apf-check-wrap {
  display: block;
  position: relative;
  padding-left: 18px;
  user-select: none;
  max-width: 190px;
  margin: auto;
}
#terms-agreement .apf-check-wrap input {
  display: none;
}
#terms-agreement .apf-checkbox-mark {
  position: absolute;
  top: 20%;
  left: 0%;
  height: 15px;
  width: 15px;
  border: 1px solid #231815;
  box-sizing: border-box;
  border-radius: 3px;
}
#terms-agreement .apf-checkbox-mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#terms-agreement .apf-check-wrap input:checked + .apf-checkbox-mark {
  background-color: #231815;
}
#terms-agreement .apf-check-wrap input:checked + .apf-checkbox-mark:after {
  display: block;
}
@media screen and (min-width: 640px) {
  #terms-agreement .terms-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #terms-agreement .terms-wrap {
    width: 49%;
  }
  #terms-agreement .terms-btn-wrap {
    padding: 0 12px;
  }
  #terms-agreement .mail-setting-wrap {
    text-align: center;
  }
}

/****** 個人情報同意ページ ******/
#user-onetimeagree #identify-info {
  border: solid 2px #0086ff;
  background-color: white;
}
@media screen and (max-width: 640px) {
  #user-onetimeagree #identify-info {
    background-color: #f5f9ff;
  }
}

/**** end 個人情報同意ページ ****/
#modal-share li {
  font-weight: bold;
  font-size: 1.5em;
  font-size: 1.1em;
  width: calc(49% - 10px);
  box-shadow: 0 0 5px rgba(206, 206, 206, 0.75);
  margin: 5px 5px 1em;
}
#modal-share a {
  color: #232323;
  background: #f1f5f5;
  display: block;
  padding: 8px;
}
#modal-share a:hover {
  opacity: 1;
  background: #fff;
}
#modal-share #btn-copy {
  position: relative;
}
#modal-share #publish_url {
  width: 0;
  height: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: -99;
}

@media screen and (max-width: 640px) {
  #modal-share h3 {
    font-size: 1.2em;
  }
  #modal-share li {
    width: 100%;
  }
}
/*
*
* ワットプレゼント機能
*
*/
/*--- ワット贈呈共通 ---*/
.present-cmn {
  /*** 紙吹雪 ****/
}
.present-cmn .no-identified {
  color: #e20000;
  max-width: 420px;
  width: 100%;
  margin: 0 auto 20px;
  border: solid 2px #e20000;
  border-radius: 3px;
}
@media screen and (max-width: 640px) {
  .present-cmn #mv-title {
    background-position-x: 20%;
  }
  .present-cmn .h-left-blue {
    font-size: 1.2em;
  }
  .present-cmn h2 {
    font-size: 1.3em;
  }
  .present-cmn h4 {
    font-size: 1.1em;
  }
  .present-cmn .font-l {
    font-size: 1.6em;
  }
  .present-cmn .font-m {
    font-size: 1.1em;
  }
  .present-cmn .uk-card-body {
    padding: 15px;
  }
}
.present-cmn .confetti {
  display: block;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.present-cmn .confetti .paper {
  opacity: 0;
  position: absolute;
}
.present-cmn .confetti .paper:nth-child(odd) {
  animation: confetti1 3.5s ease-in;
}
.present-cmn .confetti .paper:nth-child(even) {
  animation: confetti2 3.5s ease-in;
}
.present-cmn .confetti .paper.c1 {
  background-color: #79bf7f;
}
.present-cmn .confetti .paper.c2 {
  background-color: #51aef1;
}
.present-cmn .confetti .paper.c3 {
  background-color: #ffab54;
}
.present-cmn .confetti .paper.c4 {
  background-color: #f15383;
}
.present-cmn .confetti .paper.c5 {
  background-color: #ac5ab7;
}
@keyframes confetti1 {
  0% {
    opacity: 0;
    transform: translate(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(500%, -1000%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-500%, 2500%) rotate(720deg);
  }
}
@keyframes confetti2 {
  0% {
    opacity: 0;
    transform: translateY(0%, 0%) rotate(0deg);
  }
  2% {
    opacity: 1;
  }
  15% {
    transform: translate(-500%, -1800%) rotate(270deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(500%, 2500%) rotate(720deg);
  }
}

/*--- 贈呈ワット数入力 ---*/
#present-input dl .flex:nth-child(odd) {
  background-color: #f5f9ff;
}
#present-input dl dt, #present-input dl dd {
  padding: 8px;
}

/*--- URLの発行・送付 ---*/
#present-send #present-invite .present-amount {
  border: 4px solid #0095ff;
}
#present-send #present-invite .present-amount h2 {
  position: relative;
  padding: 16px;
}
#present-send #present-invite .present-amount h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #0095ff;
  bottom: 0;
  left: 0;
  right: 0;
}
#present-send #present-invite .present-amount p {
  font-size: 2em;
  line-height: 1;
  padding: 16px;
}
#present-send #present-invite .present-amount span {
  color: #0095ff;
}
#present-send #present-invite .present-input {
  width: calc(100% - 6.5em);
  border-radius: 4px;
}
#present-send #present-invite #present-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 8px;
  width: 6em;
  background-color: #999999;
  border-radius: 4px;
  color: white;
}
#present-send #present-invite #present-copy:hover {
  opacity: 0.8;
}
#present-send #present-invite .btn-wrap {
  margin: 0 auto;
}
#present-send #present-invite .btn-wrap a {
  position: relative;
  color: #333333;
  font-weight: bold;
  background-color: white;
  padding-left: 48px;
  border: solid 1px #999999;
  border-radius: 50px;
  text-align: left;
}
#present-send #present-invite .btn-wrap a img {
  position: absolute;
  width: 30px;
  margin-right: 2px;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#present-send #present-invite .btn-wrap a span {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media screen and (max-width: 640px) {
  #present-send #present-invite .present-amount h2 {
    padding: 8px;
  }
  #present-send #present-invite .present-amount p {
    font-size: 1.6em;
    padding: 8px;
  }
  #present-send #present-invite .present-input {
    width: calc(100% - 5em);
  }
  #present-send #present-invite #present-copy {
    font-size: 0.8em;
  }
}

/*--- ワット贈呈受取依頼承認 ---*/
#present-confirm .btn-present-cmn {
  display: inline-block;
  font-weight: bold;
  width: 10em;
  font-size: 0.8em;
  margin: 4px;
  padding: 4px;
  border-radius: 21px;
  text-align: center;
}
#present-confirm .btn-present-accept {
  background-color: #FFA41C;
  border: solid 1px #FFA41C;
  color: white;
}
#present-confirm .btn-present-accept:hover {
  background-color: white;
  color: #FFA41C;
}
@media screen and (max-width: 640px) {
  #present-confirm .present-confirm-table tbody tr {
    display: flex;
    flex-direction: column;
  }
  #present-confirm .present-confirm-table tbody tr:nth-child(odd) {
    background-color: #f5f9ff;
  }
  #present-confirm .present-confirm-table tbody td {
    padding: 8px;
  }
  #present-confirm .present-confirm-table tbody td::before {
    content: attr(data-title);
    display: block;
    left: 0;
    font-size: 0.8em;
    color: #999999;
    width: 100%;
    text-align: left;
  }
  #present-confirm .present-confirm-table #present-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px;
  }
  #present-confirm .present-confirm-table .btn-present-cmn {
    max-width: 220px;
    width: 100%;
    font-size: 1em;
    padding: 6px;
    margin: 0 4px 8px;
  }
}

/*--- ワット贈呈説明ページ ---*/
#docs-present .section-title {
  font-size: 1.6em;
  color: #fff;
  font-weight: bold;
  background-color: #0095ff;
  padding: 12px;
}
#docs-present .anchor-btn {
  font-size: 0.9em;
}
#docs-present .anchor-btn span {
  color: #0095ff;
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}
#docs-present .notes-wrap {
  padding: 0;
}
#docs-present .notes-wrap li:not(:last-child) {
  margin-bottom: 6px;
}
#docs-present .notes-span-dot {
  font-size: 0.7em;
  vertical-align: text-top;
}
@media screen and (max-width: 740px) {
  #docs-present .anchor-btn-wrap {
    flex-direction: column;
    align-items: center;
  }
  #docs-present .anchor-btn:not(:last-child) {
    margin-bottom: 16px;
  }
}

/*
*
* サイト内検索
*
*/
#siteseach .gs-result {
  width: 100%;
}
#siteseach .gs-result .gs-image, #siteseach .gs-result .gs-promotion-image {
  border: none;
}
#siteseach .gs-web-image-box, #siteseach .gs-promotion-image-box {
  padding: 0;
  margin-right: 5px;
}
#siteseach .gs-webResult .gs-snippet {
  margin-left: 5px;
}
#siteseach .gsc-results .gsc-cursor-box {
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
}
#siteseach .gsc-results .gsc-cursor-box .gsc-cursor-page {
  color: #0095ff;
  font-weight: bold;
  padding: 7px 8px;
  margin: 0 5px;
  border: 1px solid #0095ff;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
#siteseach .gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
  opacity: 0.7;
  color: white;
  background-color: #0095ff;
  text-decoration: none;
}
#siteseach .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
  color: white;
  background-color: #0095ff;
  text-decoration: none;
  box-shadow: none;
}
#siteseach .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover {
  opacity: 1;
}
#siteseach .gsc-results .gsc-webResult.gsc-result {
  border-bottom: 1px solid #e9e9e9;
}

#dividend-interim_notice .dividend-right,
#dividend-interim_rates_notice .dividend-right {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
}
#dividend-interim_notice .dividend-indent,
#dividend-interim_rates_notice .dividend-indent {
  text-indent: 1em;
}
#dividend-interim_notice .dividend-table,
#dividend-interim_rates_notice .dividend-table {
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-left: solid 1px #000;
}
#dividend-interim_notice .dividend-table .dividend-table-container,
#dividend-interim_rates_notice .dividend-table .dividend-table-container {
  border-bottom: solid 1px #000;
  display: flex;
  flex-direction: row;
}
#dividend-interim_notice .dividend-table .dividend-table-container dt,
#dividend-interim_rates_notice .dividend-table .dividend-table-container dt {
  font-weight: normal;
  border-right: solid 1px #000;
  width: 50%;
  padding: 14px;
}
#dividend-interim_notice .dividend-table .dividend-table-container dd,
#dividend-interim_rates_notice .dividend-table .dividend-table-container dd {
  width: 50%;
  text-align: right;
  padding: 14px;
}
@media screen and (max-width: 640px) {
  #dividend-interim_notice .dividend-table .dividend-table-container,
#dividend-interim_rates_notice .dividend-table .dividend-table-container {
    flex-direction: column;
  }
  #dividend-interim_notice .dividend-table .dividend-table-container dt,
#dividend-interim_rates_notice .dividend-table .dividend-table-container dt {
    border-right: none;
    width: 100%;
  }
  #dividend-interim_notice .dividend-table .dividend-table-container dd,
#dividend-interim_rates_notice .dividend-table .dividend-table-container dd {
    width: 100%;
  }
}