@charset "UTF-8";
/* vender */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute; }
  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before,
  .react-datepicker__month-year-read-view--down-arrow::before {
    box-sizing: content-box;
    position: absolute;
    border: 8px solid transparent;
    height: 0;
    width: 1px; }
  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before,
  .react-datepicker__month-year-read-view--down-arrow::before {
    content: "";
    z-index: -1;
    border-width: 8px;
    left: -8px;
    border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px; }
  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
    border-top: none;
    border-bottom-color: #f0f0f0; }
  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
    top: -1px;
    border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px; }
  .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before,
  .react-datepicker__month-year-read-view--down-arrow::before {
    border-bottom: none;
    border-top-color: #fff; }
  .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before,
  .react-datepicker__month-year-read-view--down-arrow::before {
    bottom: -1px;
    border-top-color: #aeaeae; }

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0; }

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative; }

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px; }

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0; }

.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem; }

.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem; }

.react-datepicker__triangle {
  position: absolute;
  left: 50px; }

.react-datepicker-popper {
  z-index: 1; }
  .react-datepicker-popper[data-placement^="bottom"] {
    margin-top: 10px; }
  .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
    left: auto;
    right: 50px; }
  .react-datepicker-popper[data-placement^="top"] {
    margin-bottom: 10px; }
  .react-datepicker-popper[data-placement^="right"] {
    margin-left: 8px; }
    .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
      left: auto;
      right: 42px; }
  .react-datepicker-popper[data-placement^="left"] {
    margin-right: 8px; }
    .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
      left: 42px;
      right: auto; }

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative; }
  .react-datepicker__header--time {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px; }

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px; }

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem; }

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden; }
  .react-datepicker__navigation--previous {
    left: 10px;
    border-right-color: #ccc; }
    .react-datepicker__navigation--previous:hover {
      border-right-color: #b3b3b3; }
    .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
      border-right-color: #e6e6e6;
      cursor: default; }
  .react-datepicker__navigation--next {
    right: 10px;
    border-left-color: #ccc; }
    .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
      right: 80px; }
    .react-datepicker__navigation--next:hover {
      border-left-color: #b3b3b3; }
    .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
      border-left-color: #e6e6e6;
      cursor: default; }
  .react-datepicker__navigation--years {
    position: relative;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto; }
    .react-datepicker__navigation--years-previous {
      top: 4px;
      border-top-color: #ccc; }
      .react-datepicker__navigation--years-previous:hover {
        border-top-color: #b3b3b3; }
    .react-datepicker__navigation--years-upcoming {
      top: -4px;
      border-bottom-color: #ccc; }
      .react-datepicker__navigation--years-upcoming:hover {
        border-bottom-color: #b3b3b3; }

.react-datepicker__month-container {
  float: left; }

.react-datepicker__year-container {
  margin: 0.4rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap; }
  .react-datepicker__year-container-text {
    display: inline-block;
    cursor: pointer;
    flex: 1 0 30%;
    width: 12px;
    padding: 2px; }

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center; }
  .react-datepicker__month .react-datepicker__month-text,
  .react-datepicker__month .react-datepicker__quarter-text {
    display: inline-block;
    width: 4rem;
    margin: 2px; }

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left; }
  .react-datepicker__input-time-container .react-datepicker-time__caption {
    display: inline-block; }
  .react-datepicker__input-time-container .react-datepicker-time__input-container {
    display: inline-block; }
    .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
      display: inline-block;
      margin-left: 10px; }
      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
        width: 85px; }
      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0; }
      .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
        -moz-appearance: textfield; }
    .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
      margin-left: 5px;
      display: inline-block; }

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px; }
  .react-datepicker__time-container--with-today-button {
    display: inline;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    position: absolute;
    right: -72px;
    top: 0; }
  .react-datepicker__time-container .react-datepicker__time {
    position: relative;
    background: white; }
    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
      width: 85px;
      overflow-x: hidden;
      margin: 0 auto;
      text-align: center; }
      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
        list-style: none;
        margin: 0;
        height: calc(195px + (1.7rem / 2));
        overflow-y: scroll;
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
        box-sizing: content-box; }
        .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
          height: 30px;
          padding: 5px 10px;
          white-space: nowrap; }
          .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
            cursor: pointer;
            background-color: #f0f0f0; }
          .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
            background-color: #216ba5;
            color: white;
            font-weight: bold; }
            .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
              background-color: #216ba5; }
          .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
            color: #ccc; }
            .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
              cursor: default;
              background-color: transparent; }

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem; }
  .react-datepicker__week-number.react-datepicker__week-number--clickable {
    cursor: pointer; }
    .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
      border-radius: 0.3rem;
      background-color: #f0f0f0; }

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap; }

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem; }

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff; }
  .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
  .react-datepicker__quarter--selected:hover,
  .react-datepicker__quarter--in-selecting-range:hover,
  .react-datepicker__quarter--in-range:hover {
    background-color: #1d5d90; }

.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none; }
  .react-datepicker__month--disabled:hover,
  .react-datepicker__quarter--disabled:hover {
    cursor: default;
    background-color: transparent; }

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text {
  cursor: pointer; }
  .react-datepicker__day:hover,
  .react-datepicker__month-text:hover,
  .react-datepicker__quarter-text:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0; }
  .react-datepicker__day--today,
  .react-datepicker__month-text--today,
  .react-datepicker__quarter-text--today {
    font-weight: bold; }
  .react-datepicker__day--highlighted,
  .react-datepicker__month-text--highlighted,
  .react-datepicker__quarter-text--highlighted {
    border-radius: 0.3rem;
    background-color: #3dcc4a;
    color: #fff; }
    .react-datepicker__day--highlighted:hover,
    .react-datepicker__month-text--highlighted:hover,
    .react-datepicker__quarter-text--highlighted:hover {
      background-color: #32be3f; }
    .react-datepicker__day--highlighted-custom-1,
    .react-datepicker__month-text--highlighted-custom-1,
    .react-datepicker__quarter-text--highlighted-custom-1 {
      color: magenta; }
    .react-datepicker__day--highlighted-custom-2,
    .react-datepicker__month-text--highlighted-custom-2,
    .react-datepicker__quarter-text--highlighted-custom-2 {
      color: green; }
  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
  .react-datepicker__month-text--selected,
  .react-datepicker__month-text--in-selecting-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--selected,
  .react-datepicker__quarter-text--in-selecting-range,
  .react-datepicker__quarter-text--in-range {
    border-radius: 0.3rem;
    background-color: #216ba5;
    color: #fff; }
    .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
    .react-datepicker__month-text--selected:hover,
    .react-datepicker__month-text--in-selecting-range:hover,
    .react-datepicker__month-text--in-range:hover,
    .react-datepicker__quarter-text--selected:hover,
    .react-datepicker__quarter-text--in-selecting-range:hover,
    .react-datepicker__quarter-text--in-range:hover {
      background-color: #1d5d90; }
  .react-datepicker__day--keyboard-selected,
  .react-datepicker__month-text--keyboard-selected,
  .react-datepicker__quarter-text--keyboard-selected {
    border-radius: 0.3rem;
    background-color: #2a87d0;
    color: #fff; }
    .react-datepicker__day--keyboard-selected:hover,
    .react-datepicker__month-text--keyboard-selected:hover,
    .react-datepicker__quarter-text--keyboard-selected:hover {
      background-color: #1d5d90; }
  .react-datepicker__day--in-selecting-range ,
  .react-datepicker__month-text--in-selecting-range ,
  .react-datepicker__quarter-text--in-selecting-range {
    background-color: rgba(33, 107, 165, 0.5); }
  .react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
  .react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
  .react-datepicker__quarter-text--in-range {
    background-color: #f0f0f0;
    color: #000; }
  .react-datepicker__day--disabled,
  .react-datepicker__month-text--disabled,
  .react-datepicker__quarter-text--disabled {
    cursor: default;
    color: #ccc; }
    .react-datepicker__day--disabled:hover,
    .react-datepicker__month-text--disabled:hover,
    .react-datepicker__quarter-text--disabled:hover {
      background-color: transparent; }

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5; }

.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0; }

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%; }

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem; }
  .react-datepicker__year-read-view:hover,
  .react-datepicker__month-read-view:hover,
  .react-datepicker__month-year-read-view:hover {
    cursor: pointer; }
    .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
    .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
    .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
    .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
    .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
    .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
      border-top-color: #b3b3b3; }
  .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow {
    border-top-color: #ccc;
    float: right;
    margin-left: 20px;
    top: 8px;
    position: relative;
    border-width: 0.45rem; }

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae; }
  .react-datepicker__year-dropdown:hover,
  .react-datepicker__month-dropdown:hover,
  .react-datepicker__month-year-dropdown:hover {
    cursor: pointer; }
  .react-datepicker__year-dropdown--scrollable,
  .react-datepicker__month-dropdown--scrollable,
  .react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll; }

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .react-datepicker__year-option:first-of-type,
  .react-datepicker__month-option:first-of-type,
  .react-datepicker__month-year-option:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem; }
  .react-datepicker__year-option:last-of-type,
  .react-datepicker__month-option:last-of-type,
  .react-datepicker__month-year-option:last-of-type {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem; }
  .react-datepicker__year-option:hover,
  .react-datepicker__month-option:hover,
  .react-datepicker__month-year-option:hover {
    background-color: #ccc; }
    .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
    .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
    .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
      border-bottom-color: #b3b3b3; }
    .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
    .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
    .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
      border-top-color: #b3b3b3; }
  .react-datepicker__year-option--selected,
  .react-datepicker__month-option--selected,
  .react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px; }

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle; }
  .react-datepicker__close-icon::after {
    cursor: pointer;
    background-color: #216ba5;
    color: #fff;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    padding: 2px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    content: "\00d7"; }

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left; }

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647; }
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 3rem;
    line-height: 3rem; }
  @media (max-width: 400px), (max-height: 550px) {
    .react-datepicker__portal .react-datepicker__day-name,
    .react-datepicker__portal .react-datepicker__day,
    .react-datepicker__portal .react-datepicker__time-name {
      width: 2rem;
      line-height: 2rem; } }
  .react-datepicker__portal .react-datepicker__current-month,
  .react-datepicker__portal .react-datepicker-time__header {
    font-size: 1.44rem; }
  .react-datepicker__portal .react-datepicker__navigation {
    border: 0.81rem solid transparent; }
  .react-datepicker__portal .react-datepicker__navigation--previous {
    border-right-color: #ccc; }
    .react-datepicker__portal .react-datepicker__navigation--previous:hover {
      border-right-color: #b3b3b3; }
    .react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
      border-right-color: #e6e6e6;
      cursor: default; }
  .react-datepicker__portal .react-datepicker__navigation--next {
    border-left-color: #ccc; }
    .react-datepicker__portal .react-datepicker__navigation--next:hover {
      border-left-color: #b3b3b3; }
    .react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
      border-left-color: #e6e6e6;
      cursor: default; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/* foundation */
@media all and (max-width: 767px) {
  .m-sp {
    display: block; }
  .m-pc {
    display: none; } }

@media (min-width: 768px) {
  .m-sp {
    display: none; }
  .m-pc {
    display: block; } }

/* cider */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

select,
textarea,
button {
  outline: none;
  margin: 0;
  cursor: pointer; }

input {
  outline: none;
  margin: 0; }

textarea,
button,
input:not([type=checkbox]):not([type=radio]) {
  -webkit-appearance: none;
          appearance: none;
  border-radius: none;
  border: solid 1px #333;
  padding: 3px; }

textarea {
  resize: none; }

/*
Font Style
 */
fieldset textarea,
.list textarea, html,
body, input,
button, .gothic, #unsubscribe .wrap .question ol li:nth-last-of-type(1) textarea {
  font-family: '游ゴシック体', '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }

.mincho {
  font-family: "游明朝体", "Yu Mincho", YuMincho, 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho', serif; }

.robotoM {
  font-family: 'Roboto', sans-serif;
  font-weight: 500; }

.asapM, #new a:before, #producer .detail main .detail_contents .wrap .message_wrap h2 span, #support .support_contents .support_history .now .right p span,
#support .support_contents .support_history .next_month .right p span,
#support .support_contents .letssupport_contents .now .right p span,
#support .support_contents .letssupport_contents .next_month .right p span, #contract .plant_info .right .plant_name, #contract .plant_info .right p span, #plant_select .plant_info .right .plant_name, #plant_select .plant_info .right p span {
  font-family: 'Asap', sans-serif;
  font-weight: 500; }

html,
body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'palt';
  overflow-wrap: break-word; }

/*
Clear Fix
 */
.clear,
.clearfix {
  zoom: 100%; }
  .clear:before,
  .clearfix:before, .clear:after,
  .clearfix:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
    visibility: hidden; }

/*
Transition
 */
#top_contents .top_right .login form input[type=text]:-ms-input-placeholder, #top_contents .top_right .login form input[type=password]:-ms-input-placeholder {
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out; }
button.orange:after, button.gray:after,
a.orange:after,
a.gray:after, button.orange.no_arrow, button.gray.no_arrow,
a.orange.no_arrow,
a.gray.no_arrow, .modal .close, #wrapper .plancolor li a, #wrapper.purple .plancolor li a, .globalMenu #globalmenu_btn button .line hr, #globalmenu .logout, #sp_con .sp_left button:before, #top .top_bottom button, #top .top_bottom button:after, #top_contents .top_left .pp_support:after, #top_contents .top_left .forecast .weather a, #top_contents .top_left .support .history:after, #top_contents .top_left .support .about_support, #top_contents .top_right .my_data a:after, #top_contents .top_right .login form input[type=text]::placeholder,
#top_contents .top_right .login form input[type=password]::placeholder, #top_contents .top_right .login form p .message, #top_contents .top_right .login form button:after, #producer .pickup_wrap button img,
#consumer .pickup_wrap button img, #producer .pickup_p a .pickup_text,
#consumer .pickup_p a .pickup_text, #producer .summary,
#consumer .summary, #banners a, #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button img, #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 ul li,
#detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 ul li, #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button, #process .area a:after,
.button.orange.no_arrow,
.button.gray.no_arrow, #contact .history ul a p, #contact .history ul a p:after, .md-pickup-carousel .pickup_wrap button img, .md-pickup-carousel .pickup_p a .pickup_text, #top_contents .top_left .md-matching .md-result:after, .md-global-menu .logout__link {
  transition: all .2s ease-out; }

/*
Inline Block
 */
fieldset label dl,
fieldset .label dl,
fieldset li dl,
.list label dl,
.list .label dl,
.list li dl, .step, #support .support_contents .letssupport_contents .list, #unsubscribe .wrap .question ol, #contact .login_modal label, #contact .name_label div, #contact .history ul a, .login_modal .scroll_area .remember label {
  font-size: 0;
  letter-spacing: 0; }

/*
Middle Center
 */
/*
Center
 */
/*
Color
 */
#use_30min {
  transform: translate(0, 70px); }

.bg_blue {
  background: #E2F0FC !important; }

button,
a {
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  cursor: pointer; }
  button.orange, button.gray,
  a.orange,
  a.gray {
    background: #FF9425;
    width: 300px;
    height: 42px;
    border-radius: 4px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    position: relative; }
    button.orange:after, button.gray:after,
    a.orange:after,
    a.gray:after {
      content: '';
      position: absolute;
      border: solid 4px transparent;
      border-left-color: #fff;
      border-right-width: 0;
      top: 50%;
      right: 15px;
      transform: translate(0, -50%); }
    button.orange:hover:after, button.gray:hover:after,
    a.orange:hover:after,
    a.gray:hover:after {
      right: 10px; }
    button.orange.no_arrow:hover, button.gray.no_arrow:hover,
    a.orange.no_arrow:hover,
    a.gray.no_arrow:hover {
      color: #fff;
      background: #B4B4B4; }
    button.orange.no_arrow:after, button.gray.no_arrow:after,
    a.orange.no_arrow:after,
    a.gray.no_arrow:after {
      display: none; }
  button.gray,
  a.gray {
    background: none;
    border: solid 1px #B4B4B4;
    color: #666; }
    button.gray:after,
    a.gray:after {
      border-left-color: #666; }
  button.center,
  a.center {
    margin: 25px auto 0;
    display: block; }

fieldset,
.list {
  margin-top: 25px; }
  fieldset:nth-of-type(1),
  .list:nth-of-type(1) {
    margin-top: 0; }
  fieldset label,
  fieldset .label,
  fieldset li,
  .list label,
  .list .label,
  .list li {
    display: block;
    border: solid 1px #CDCDCD;
    height: 60px;
    border-bottom: none; }
    fieldset label:nth-last-of-type(1),
    fieldset .label:nth-last-of-type(1),
    fieldset li:nth-last-of-type(1),
    .list label:nth-last-of-type(1),
    .list .label:nth-last-of-type(1),
    .list li:nth-last-of-type(1) {
      border-bottom: solid 1px #CDCDCD; }
      fieldset label:nth-last-of-type(1).no_border,
      fieldset .label:nth-last-of-type(1).no_border,
      fieldset li:nth-last-of-type(1).no_border,
      .list label:nth-last-of-type(1).no_border,
      .list .label:nth-last-of-type(1).no_border,
      .list li:nth-last-of-type(1).no_border {
        border-bottom: none; }
    fieldset label.auto_height,
    fieldset .label.auto_height,
    fieldset li.auto_height,
    .list label.auto_height,
    .list .label.auto_height,
    .list li.auto_height {
      height: auto; }
      fieldset label.auto_height dl dt,
      fieldset label.auto_height dl dd,
      fieldset .label.auto_height dl dt,
      fieldset .label.auto_height dl dd,
      fieldset li.auto_height dl dt,
      fieldset li.auto_height dl dd,
      .list label.auto_height dl dt,
      .list label.auto_height dl dd,
      .list .label.auto_height dl dt,
      .list .label.auto_height dl dd,
      .list li.auto_height dl dt,
      .list li.auto_height dl dd {
        display: table-cell; }
      fieldset label.auto_height dl dt.required:after,
      fieldset .label.auto_height dl dt.required:after,
      fieldset li.auto_height dl dt.required:after,
      .list label.auto_height dl dt.required:after,
      .list .label.auto_height dl dt.required:after,
      .list li.auto_height dl dt.required:after {
        top: 20px;
        transform: translate(0, 0); }
    fieldset label dl,
    fieldset .label dl,
    fieldset li dl,
    .list label dl,
    .list .label dl,
    .list li dl {
      height: 100%; }
      fieldset label dl dt,
      fieldset .label dl dt,
      fieldset li dl dt,
      .list label dl dt,
      .list .label dl dt,
      .list li dl dt {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        width: 240px;
        background: #F2F2F2;
        line-height: 60px;
        padding: 0 15px;
        position: relative;
        font-weight: bold;
        font-size: 15px; }
        fieldset label dl dt span,
        fieldset .label dl dt span,
        fieldset li dl dt span,
        .list label dl dt span,
        .list .label dl dt span,
        .list li dl dt span {
          position: absolute;
          font-size: 12px;
          color: #FF1122;
          left: 15px;
          bottom: -1.5em; }
        fieldset label dl dt.required:after,
        fieldset .label dl dt.required:after,
        fieldset li dl dt.required:after,
        .list label dl dt.required:after,
        .list .label dl dt.required:after,
        .list li dl dt.required:after {
          content: '必須';
          position: absolute;
          width: 44px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          font-size: 12px;
          top: 50%;
          right: 15px;
          transform: translate(0, -50%);
          background: #FFB13D; }
      fieldset label dl dd,
      fieldset .label dl dd,
      fieldset li dl dd,
      .list label dl dd,
      .list .label dl dd,
      .list li dl dd {
        vertical-align: top;
        display: inline-block;
        padding-left: 20px;
        font-size: 15px;
        line-height: 60px;
        width: 478px;
        position: relative; }
        fieldset label dl dd .error,
        fieldset .label dl dd .error,
        fieldset li dl dd .error,
        .list label dl dd .error,
        .list .label dl dd .error,
        .list li dl dd .error {
          position: absolute;
          top: 100%;
          top: calc(100% - 5px);
          border: solid 1px red;
          background: #fff;
          z-index: 10;
          padding: 5px 10px;
          font-size: 13px;
          height: auto;
          line-height: 1;
          left: 20px;
          display: none;
          color: red;
          font-weight: bold; }
          fieldset label dl dd .error:before,
          fieldset .label dl dd .error:before,
          fieldset li dl dd .error:before,
          .list label dl dd .error:before,
          .list .label dl dd .error:before,
          .list li dl dd .error:before {
            content: '';
            position: absolute;
            border-top: solid 1px red;
            border-left: solid 1px red;
            top: -6px;
            left: 20px;
            background: #fff;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            z-index: -1; }
          fieldset label dl dd .error.show,
          fieldset .label dl dd .error.show,
          fieldset li dl dd .error.show,
          .list label dl dd .error.show,
          .list .label dl dd .error.show,
          .list li dl dd .error.show {
            display: block; }
        fieldset label dl dd input:not([type=checkbox]):not([type=radio]),
        fieldset .label dl dd input:not([type=checkbox]):not([type=radio]),
        fieldset li dl dd input:not([type=checkbox]):not([type=radio]),
        .list label dl dd input:not([type=checkbox]):not([type=radio]),
        .list .label dl dd input:not([type=checkbox]):not([type=radio]),
        .list li dl dd input:not([type=checkbox]):not([type=radio]) {
          border-color: #CDCDCD; }
        fieldset label dl dd input[type=text],
        fieldset label dl dd input[type=password],
        fieldset .label dl dd input[type=text],
        fieldset .label dl dd input[type=password],
        fieldset li dl dd input[type=text],
        fieldset li dl dd input[type=password],
        .list label dl dd input[type=text],
        .list label dl dd input[type=password],
        .list .label dl dd input[type=text],
        .list .label dl dd input[type=password],
        .list li dl dd input[type=text],
        .list li dl dd input[type=password] {
          display: inline-block;
          border: solid 1px #CDCDCD;
          height: 30px;
          line-height: 30px;
          font-size: 15px;
          margin-top: 14px;
          width: 300px; }
          fieldset label dl dd input[type=text].short,
          fieldset label dl dd input[type=password].short,
          fieldset .label dl dd input[type=text].short,
          fieldset .label dl dd input[type=password].short,
          fieldset li dl dd input[type=text].short,
          fieldset li dl dd input[type=password].short,
          .list label dl dd input[type=text].short,
          .list label dl dd input[type=password].short,
          .list .label dl dd input[type=text].short,
          .list .label dl dd input[type=password].short,
          .list li dl dd input[type=text].short,
          .list li dl dd input[type=password].short {
            width: 200px; }
        fieldset label dl dd p,
        fieldset .label dl dd p,
        fieldset li dl dd p,
        .list label dl dd p,
        .list .label dl dd p,
        .list li dl dd p {
          display: inline-block;
          font-size: 12px; }
        fieldset label dl dd label,
        fieldset .label dl dd label,
        fieldset li dl dd label,
        .list label dl dd label,
        .list .label dl dd label,
        .list li dl dd label {
          height: auto; }
    fieldset label .select,
    fieldset .label .select,
    fieldset li .select,
    .list label .select,
    .list .label .select,
    .list li .select {
      width: 200px;
      height: 30px;
      border: solid 1px #CDCDCD;
      position: relative;
      cursor: pointer;
      margin-top: 15px; }
      fieldset label .select p,
      fieldset .label .select p,
      fieldset li .select p,
      .list label .select p,
      .list .label .select p,
      .list li .select p {
        line-height: 30px;
        font-size: 15px;
        padding-left: 10px; }
        fieldset label .select p:after,
        fieldset .label .select p:after,
        fieldset li .select p:after,
        .list label .select p:after,
        .list .label .select p:after,
        .list li .select p:after {
          content: '';
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translate(0, -50%);
          border: solid 5px transparent;
          border-top-color: #818181;
          border-bottom-width: 0; }
      fieldset label .select select,
      fieldset .label .select select,
      fieldset li .select select,
      .list label .select select,
      .list .label .select select,
      .list li .select select {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-appearance: none;
                appearance: none;
        z-index: 1;
        border: none;
        border-radius: 0;
        background: none;
        font-size: 13px;
        opacity: 0; }
    fieldset label.horizon,
    fieldset .label.horizon,
    fieldset li.horizon,
    .list label.horizon,
    .list .label.horizon,
    .list li.horizon {
      height: auto; }
      fieldset label.horizon dl dt,
      fieldset .label.horizon dl dt,
      fieldset li.horizon dl dt,
      .list label.horizon dl dt,
      .list .label.horizon dl dt,
      .list li.horizon dl dt {
        display: block;
        height: 40px;
        line-height: 40px;
        width: auto;
        border-bottom: solid 1px #CDCDCD; }
        fieldset label.horizon dl dt.required:after,
        fieldset .label.horizon dl dt.required:after,
        fieldset li.horizon dl dt.required:after,
        .list label.horizon dl dt.required:after,
        .list .label.horizon dl dt.required:after,
        .list li.horizon dl dt.required:after {
          position: static;
          display: inline-block;
          vertical-align: middle;
          margin-left: 30px;
          top: 20px;
          transform: translate(0, 0); }
      fieldset label.horizon dl dd,
      fieldset .label.horizon dl dd,
      fieldset li.horizon dl dd,
      .list label.horizon dl dd,
      .list .label.horizon dl dd,
      .list li.horizon dl dd {
        padding: 0;
        display: block;
        width: 100%; }
        fieldset label.horizon dl dd textarea,
        fieldset .label.horizon dl dd textarea,
        fieldset li.horizon dl dd textarea,
        .list label.horizon dl dd textarea,
        .list .label.horizon dl dd textarea,
        .list li.horizon dl dd textarea {
          display: block;
          width: 100%;
          height: 190px;
          border: none;
          padding: 10px;
          font-size: 15px; }
  fieldset .label label,
  .list .label label {
    display: inline-block;
    border: none;
    padding-top: 10px;
    cursor: pointer;
    margin-right: 10px; }

.modal {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.8);
  transition: opacity .4s ease-out;
  opacity: 0; }
  .modal.show {
    left: 0;
    opacity: 1; }
    .modal.show.out {
      opacity: 0; }
  .modal .scroll_area {
    padding: 85px 0 50px;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; }
    .modal .scroll_area .wrap {
      position: relative;
      top: auto;
      display: block;
      margin: 0 auto;
      left: auto;
      transform: translate(0, 0); }
  .modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    z-index: 1; }
    .modal .close:hover {
      transform: scale(1.2); }
    .modal .close hr {
      position: absolute;
      border: none;
      padding: 0;
      margin: 0;
      top: 0;
      left: 50%;
      transform: rotate(45deg);
      width: 1px;
      height: 100%;
      background: #000; }
      .modal .close hr:nth-of-type(2) {
        transform: rotate(-45deg); }
  .modal .wrap {
    position: absolute;
    width: 460px;
    border-radius: 8px;
    background: #fff;
    left: 50%;
    transform: translate(-50%, 0);
    background: #fff;
    padding: 35px 50px 25px;
    top: 85px; }

label.check {
  display: block;
  position: relative;
  padding-left: 25px;
  font-size: 15px;
  min-height: 20px;
  margin-top: 15px;
  line-height: 1.5;
  cursor: pointer; }
  label.check input {
    position: absolute;
    width: 20px;
    height: 20px;
    border: solid 1px #000;
    background: #fff;
    margin: 0;
    padding: 0;
    left: 0;
    -webkit-appearance: none;
            appearance: none;
    top: 0; }
    label.check input:checked {
      background: no-repeat center/auto url(/assets/images/common/check.svg) #fff; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #use_30min {
    transform: translate(0, 0); }
    #use_30min.scroll {
      transform: translate(0, 0); } }

@media screen and (max-width: 767px) {
  button.orange, button.gray,
  a.orange,
  a.gray {
    display: block;
    width: 100%;
    height: 29px;
    line-height: 29px;
    font-size: 12px; }
    button.orange:hover:after, button.gray:hover:after,
    a.orange:hover:after,
    a.gray:hover:after {
      right: 15px; }
  button + .gray,
  a + .gray {
    margin-top: 15px; }
  fieldset,
  .list {
    margin-top: 15px; }
    fieldset label,
    fieldset .label,
    fieldset li,
    .list label,
    .list .label,
    .list li {
      height: auto;
      width: auto; }
      fieldset label dl,
      fieldset .label dl,
      fieldset li dl,
      .list label dl,
      .list .label dl,
      .list li dl {
        height: auto; }
        fieldset label dl dt,
        fieldset .label dl dt,
        fieldset li dl dt,
        .list label dl dt,
        .list .label dl dt,
        .list li dl dt {
          display: block;
          height: 40px;
          width: auto;
          line-height: 40px;
          font-size: 13px;
          padding-left: 10px;
          padding-right: 10px; }
          fieldset label dl dt span,
          fieldset .label dl dt span,
          fieldset li dl dt span,
          .list label dl dt span,
          .list .label dl dt span,
          .list li dl dt span {
            left: auto;
            right: 10px;
            font-size: 11px;
            bottom: auto; }
          fieldset label dl dt.required:after,
          fieldset .label dl dt.required:after,
          fieldset li dl dt.required:after,
          .list label dl dt.required:after,
          .list .label dl dt.required:after,
          .list li dl dt.required:after {
            right: 10px; }
        fieldset label dl dd,
        fieldset .label dl dd,
        fieldset li dl dd,
        .list label dl dd,
        .list .label dl dd,
        .list li dl dd {
          display: block;
          padding: 10px;
          line-height: 1;
          width: 100%; }
          fieldset label dl dd .error,
          fieldset .label dl dd .error,
          fieldset li dl dd .error,
          .list label dl dd .error,
          .list .label dl dd .error,
          .list li dl dd .error {
            font-size: 12px;
            left: 10px; }
          fieldset label dl dd textarea + .error,
          fieldset .label dl dd textarea + .error,
          fieldset li dl dd textarea + .error,
          .list label dl dd textarea + .error,
          .list .label dl dd textarea + .error,
          .list li dl dd textarea + .error {
            left: 0;
            top: calc(100% + 5px); }
          fieldset label dl dd input:not([type=checkbox]):not([type=radio]),
          fieldset .label dl dd input:not([type=checkbox]):not([type=radio]),
          fieldset li dl dd input:not([type=checkbox]):not([type=radio]),
          .list label dl dd input:not([type=checkbox]):not([type=radio]),
          .list .label dl dd input:not([type=checkbox]):not([type=radio]),
          .list li dl dd input:not([type=checkbox]):not([type=radio]) {
            padding: 0 3px; }
          fieldset label dl dd input[type=text],
          fieldset label dl dd input[type=password],
          fieldset .label dl dd input[type=text],
          fieldset .label dl dd input[type=password],
          fieldset li dl dd input[type=text],
          fieldset li dl dd input[type=password],
          .list label dl dd input[type=text],
          .list label dl dd input[type=password],
          .list .label dl dd input[type=text],
          .list .label dl dd input[type=password],
          .list li dl dd input[type=text],
          .list li dl dd input[type=password] {
            height: 22px;
            line-height: 22px;
            margin: 0;
            width: 100%;
            font-size: 14px; }
            fieldset label dl dd input[type=text].short,
            fieldset label dl dd input[type=password].short,
            fieldset .label dl dd input[type=text].short,
            fieldset .label dl dd input[type=password].short,
            fieldset li dl dd input[type=text].short,
            fieldset li dl dd input[type=password].short,
            .list label dl dd input[type=text].short,
            .list label dl dd input[type=password].short,
            .list .label dl dd input[type=text].short,
            .list .label dl dd input[type=password].short,
            .list li dl dd input[type=text].short,
            .list li dl dd input[type=password].short {
              width: 100%; }
          fieldset label dl dd p,
          fieldset .label dl dd p,
          fieldset li dl dd p,
          .list label dl dd p,
          .list .label dl dd p,
          .list li dl dd p {
            display: block;
            margin-top: 5px; }
      fieldset label.auto_height dl dt,
      fieldset label.auto_height dl dd,
      fieldset .label.auto_height dl dt,
      fieldset .label.auto_height dl dd,
      fieldset li.auto_height dl dt,
      fieldset li.auto_height dl dd,
      .list label.auto_height dl dt,
      .list label.auto_height dl dd,
      .list .label.auto_height dl dt,
      .list .label.auto_height dl dd,
      .list li.auto_height dl dt,
      .list li.auto_height dl dd {
        display: block;
        width: 100%; }
      fieldset label.auto_height dl dt.required:after,
      fieldset .label.auto_height dl dt.required:after,
      fieldset li.auto_height dl dt.required:after,
      .list label.auto_height dl dt.required:after,
      .list .label.auto_height dl dt.required:after,
      .list li.auto_height dl dt.required:after {
        top: 20px;
        transform: translate(0, 0); }
      fieldset label .select,
      fieldset .label .select,
      fieldset li .select,
      .list label .select,
      .list .label .select,
      .list li .select {
        width: 140px;
        height: 22px;
        margin-top: 0; }
        fieldset label .select p,
        fieldset .label .select p,
        fieldset li .select p,
        .list label .select p,
        .list .label .select p,
        .list li .select p {
          line-height: 22px;
          margin: 0;
          font-size: 13px; }
      fieldset label.horizon,
      fieldset .label.horizon,
      fieldset li.horizon,
      .list label.horizon,
      .list .label.horizon,
      .list li.horizon {
        height: auto; }
        fieldset label.horizon dl dt.required:after,
        fieldset .label.horizon dl dt.required:after,
        fieldset li.horizon dl dt.required:after,
        .list label.horizon dl dt.required:after,
        .list .label.horizon dl dt.required:after,
        .list li.horizon dl dt.required:after {
          position: absolute;
          margin-left: 0;
          top: 50%;
          transform: translate(0, -50%); }
        fieldset label.horizon dl dd textarea,
        fieldset .label.horizon dl dd textarea,
        fieldset li.horizon dl dd textarea,
        .list label.horizon dl dd textarea,
        .list .label.horizon dl dd textarea,
        .list li.horizon dl dd textarea {
          height: 150px; }
  .modal .scroll_area {
    padding: 30px 15px 30px; }
  .modal .close {
    top: 5px;
    right: 5px; }
  .modal .wrap {
    position: static;
    display: block;
    width: auto;
    margin: 0 auto;
    border-radius: 8px;
    transform: translate(0, 0);
    padding: 25px 15px; }
  label.check {
    font-size: 13px; } }

.step {
  text-align: center; }
  .step.currentHidden {
    display: none; }
  .step li {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    padding: 25px 20px 0;
    position: relative;
    line-height: 1.3; }
    .step li.current:before {
      background: #3748EB; }
    .step li.current2:before {
      background: #f7931e; }
    .step li:before {
      position: absolute;
      content: '';
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 1;
      width: 12px;
      height: 12px;
      border-radius: 12px;
      background: #B4B4B4; }
    .step li:after {
      content: '';
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #B4B4B4; }
    .step li:nth-of-type(1):after {
      left: 50%;
      width: 50%; }
    .step li:nth-last-of-type(1):after {
      left: 0;
      width: 50%; }

.done {
  width: 720px;
  margin: 40px auto 0;
  font-size: 15px;
  line-height: 2; }
  .done h2 {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: solid 1px #D9D9D9;
    position: relative;
    line-height: 1;
    margin-bottom: .5em; }
    .done h2:before {
      content: '';
      position: absolute;
      left: 0;
      width: 20px;
      height: 1px;
      background: #3748EB;
      bottom: -1px; }

@media screen and (max-width: 767px) {
  .step li {
    display: block;
    font-size: 14px;
    padding: 0;
    text-align: center;
    display: none; }
    .step li.current {
      display: block; }
    .step li.current2 {
      display: block; }
    .step li:before {
      position: static;
      display: inline-block;
      transform: translate(0, 0);
      margin-right: 5px; }
    .step li:after {
      display: none; }
    .step li br {
      display: none; }
  .done {
    width: auto;
    margin-top: 20px;
    font-size: 13px; }
    .done h2 {
      font-size: 16px;
      text-align: left; }
      .done h2:before {
        width: 30px; } }

.react-datepicker__navigation {
  top: 17px; }

.react-datepicker__day-names div:nth-of-type(6),
.react-datepicker__week div:nth-of-type(6) {
  color: #3D9EDF; }
  .react-datepicker__day-names div:nth-of-type(6).react-datepicker__day--disabled,
  .react-datepicker__week div:nth-of-type(6).react-datepicker__day--disabled {
    opacity: .3; }

.react-datepicker__day-names div:nth-of-type(7),
.react-datepicker__week div:nth-of-type(7) {
  color: #DF3D42; }
  .react-datepicker__day-names div:nth-of-type(7).react-datepicker__day--disabled,
  .react-datepicker__week div:nth-of-type(7).react-datepicker__day--disabled {
    opacity: .3; }

.react-datepicker__day-names div.react-datepicker__day--selected,
.react-datepicker__week div.react-datepicker__day--selected {
  color: #fff; }

.react-datepicker__day--outside-month {
  opacity: .3; }
  .react-datepicker__day--outside-month.react-datepicker__day--disabled {
    opacity: 1; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

#alert {
  height: 100vh; }
  #alert .modal .wrap {
    width: 640px;
    text-align: center;
    line-height: 28px;
    border-radius: 3px;
    font-size: 24px; }
    #alert .modal .wrap img {
      display: block;
      width: 146px;
      height: auto;
      margin: 0 auto 30px; }

@media screen and (max-width: 767px) {
  #alert .modal .wrap {
    width: 100%;
    line-height: 28px;
    font-size: 20px; }
    #alert .modal .wrap img {
      width: 87px;
      margin: 0 auto 40px; }
    #alert .modal .wrap a {
      width: 100%; } }

/*
set font
 */
*::-webkit-scrollbar {
  display: none; }

/*
clear fix
 */
/*
fonts
 */
a {
  text-decoration: none;
  color: #333; }

.sp {
  display: none !important; }

/*
key color
 */
#wrapper {
  overflow-wrap: break-word; }
  #wrapper .color,
  #wrapper .hover_color:hover {
    color: #f7931e !important;
    transition: all .2s ease-out; }
  #wrapper .plancolor li a {
    background: #fbb03b; }
    #wrapper .plancolor li a:hover {
      color: #fbb03b;
      background: #fff; }
  #wrapper .svg_color * {
    stroke: #f7931e;
    transition: all .2s ease-out; }
  #wrapper .bgcolor,
  #wrapper .before_bg:before,
  #wrapper .after_bg:after,
  #wrapper .hover_bg:hover {
    background-color: #f7931e !important;
    transition: all .2s ease-out; }
  #wrapper .icon {
    fill: #f7931e;
    stroke: #f7931e; }
  #wrapper .hover_bg {
    transition: all .2s ease-out; }
  #wrapper .bgcolor2 {
    background: #fbb03b;
    transition: all .2s ease-out; }
  #wrapper .border_color {
    border-color: #f7931e !important;
    transition: all .2s ease-out; }
  #wrapper .border_color2 {
    border-color: #fbb03b !important;
    transition: all .2s ease-out; }
  #wrapper .topcolor_filter:after {
    background: rgba(247, 147, 30, 0.8);
    transition: all .2s ease-out; }
  #wrapper .border_left_color_after:after {
    border-left-color: #f7931e !important;
    transition: all .2s ease-out; }
  #wrapper .listcolor li:before {
    background: #f7931e;
    transition: all .2s ease-out; }
  #wrapper .grad,
  #wrapper .grad_before:before {
    background: -ms-linear-gradient(-90deg, rgba(247, 147, 30, 0.7) 0%, #f15a24 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7931E', endColorstr='#F15A24' ,GradientType=0)";
    background: linear-gradient(180deg, rgba(247, 147, 30, 0.7) 0%, #f15a24 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7931E',endColorstr='#F15A24' , GradientType=0);
    transition: all .2s ease-out; }
  #wrapper.green .color,
  #wrapper.green .hover_color:hover {
    color: #5eac86 !important; }
  #wrapper.green .plancolor li a {
    background: #74b7aa; }
    #wrapper.green .plancolor li a:hover {
      color: #74b7aa;
      background: #fff; }
  #wrapper.green .svg_color * {
    stroke: #5eac86; }
  #wrapper.green .bgcolor,
  #wrapper.green .before_bg:before,
  #wrapper.green .after_bg:after,
  #wrapper.green .hover_bg:hover {
    background-color: #5eac86 !important; }
  #wrapper.green .icon {
    fill: #5eac86;
    stroke: #5eac86; }
  #wrapper.green .bgcolor2 {
    background: #74b7aa; }
  #wrapper.green .border_color {
    border-color: #5eac86 !important; }
  #wrapper.green .border_color2 {
    border-color: #74b7aa !important; }
  #wrapper.green .topcolor_filter:after {
    background: rgba(94, 172, 134, 0.8); }
  #wrapper.green .border_left_color_after:after {
    border-left-color: #5eac86 !important; }
  #wrapper.green .listcolor li:before {
    background: #5eac86; }
  #wrapper.green .grad,
  #wrapper.green .grad_before:before {
    background: -ms-linear-gradient(-90deg, rgba(95, 173, 135, 0.8) 0%, #009b71 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#5FAD87', endColorstr='#009B71' ,GradientType=0)";
    background: linear-gradient(180deg, rgba(95, 173, 135, 0.8) 0%, #009b71 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5FAD87',endColorstr='#009B71' , GradientType=0); }
  #wrapper.purple .color,
  #wrapper.purple .hover_color:hover {
    color: #c76da2 !important; }
  #wrapper.purple .plancolor li a {
    background: #c798bf; }
    #wrapper.purple .plancolor li a:hover {
      color: #c798bf;
      background: #fff; }
  #wrapper.purple .svg_color * {
    stroke: #c76da2; }
  #wrapper.purple .bgcolor,
  #wrapper.purple .before_bg:before,
  #wrapper.purple .after_bg:after,
  #wrapper.purple .hover_bg:hover {
    background-color: #c76da2 !important; }
  #wrapper.purple .icon {
    fill: #c76da2;
    stroke: #c76da2; }
  #wrapper.purple .bgcolor2 {
    background: #c798bf; }
  #wrapper.purple .border_color {
    border-color: #c76da2 !important; }
  #wrapper.purple .border_color2 {
    border-color: #c798bf !important; }
  #wrapper.purple .topcolor_filter:after {
    background: rgba(199, 109, 162, 0.8); }
  #wrapper.purple .border_left_color_after:after {
    border-left-color: #c76da2 !important; }
  #wrapper.purple .listcolor li:before {
    background: #c76da2; }
  #wrapper.purple .grad,
  #wrapper.purple .grad_before:before {
    background: -ms-linear-gradient(-90deg, rgba(199, 152, 192, 0.9) 0%, #9d438f 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C798C0', endColorstr='#9D438F' ,GradientType=0)";
    background: linear-gradient(180deg, rgba(199, 152, 192, 0.9) 0%, #9d438f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C798C0',endColorstr='#9D438F' , GradientType=0); }
  #wrapper.menu_open #globalmenu_btn button .line hr:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg); }
  #wrapper.menu_open #globalmenu_btn button .line hr:nth-of-type(2) {
    opacity: 0; }
  #wrapper.menu_open #globalmenu_btn button .line hr:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg); }
  #wrapper.menu_open #globalmenu .menu_wrap {
    transform: translate(0, 0); }

/*
badge
 */
.badge {
  display: inline-block;
  min-width: 20px;
  min-height: 20px;
  background: #ff0000;
  padding: 0 2px;
  border-radius: 40px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  line-height: 20px; }

/*
30分毎電気使用量
 */
#use_30min {
  position: fixed;
  perspective: 100px;
  z-index: 100;
  bottom: 95px;
  left: 45px;
  width: 260px;
  height: 74px;
  transition: transform .2s ease-in-out; }
  #use_30min.animation .flip {
    transition: 1s; }
  #use_30min.scroll {
    transform: translate(0, 70px); }
  #use_30min.stop {
    position: absolute; }
  #use_30min.rotate .flip {
    transform: rotateX(180deg); }
  #use_30min.rotate.rotate2 .flip {
    transform: rotateX(360deg); }
  #use_30min .flip {
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%; }
    #use_30min .flip a {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 60px;
      color: #333;
      box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      display: none; }
      #use_30min .flip a.show {
        display: block; }
      #use_30min .flip a.front {
        z-index: 2;
        transform: rotateX(0deg); }
      #use_30min .flip a.back {
        transform: rotateX(180deg); }
      #use_30min .flip a:before {
        content: '';
        margin: 17px;
        width: 38px;
        height: 38px;
        display: inline-block;
        border-radius: 38px;
        position: relative;
        z-index: 1;
        background: #00ACF5; }
      #use_30min .flip a:after {
        content: '';
        position: absolute;
        width: 38px;
        height: 38px;
        border-radius: 38px;
        top: 50%;
        margin-top: -19px;
        left: 17px;
        animation: use_30min 2s infinite;
        background: #00D5F9; }
      #use_30min .flip a:nth-of-type(1):before {
        background: #FF5B2C; }
      #use_30min .flip a:nth-of-type(1):after {
        background: #f7931e; }
  #use_30min .u_3_right {
    display: inline-block;
    width: 150px;
    height: auto;
    vertical-align: top;
    margin-top: 10px; }
    #use_30min .u_3_right .title {
      font-size: 14px; }
      #use_30min .u_3_right .title span {
        font-size: 12px;
        color: #8e8e8e; }
    #use_30min .u_3_right .text {
      font-size: 12px;
      line-height: 1.3;
      color: #818181;
      margin-top: 5px;
      height: 2.6em;
      overflow: hidden; }
    #use_30min .u_3_right .kwh {
      font-size: 32px;
      position: relative;
      display: inline-block; }
      #use_30min .u_3_right .kwh span {
        position: relative; }
        #use_30min .u_3_right .kwh span:after {
          content: 'kWh';
          font-size: 20px; }
      #use_30min .u_3_right .kwh:after {
        content: '';
        width: 17px;
        height: 17px;
        border-radius: 17px;
        display: inline-block;
        background-image: url(/assets/images/common/arrow_up.svg);
        background-position: center;
        background-repeat: no-repeat; }

/*
下層ページ共通
 */
section.page {
  padding: 150px 0 0;
  background: #f5f5f5; }
  section.page h1 {
    text-align: center;
    font-size: 24px;
    padding-bottom: 30px; }
  section.page main {
    width: 1000px;
    margin: 0 auto;
    padding: 33px 0 100px;
    background: #fff;
    display: block; }

/*
Global Menu
 */
.plan_select {
  display: block;
  font-size: 14px;
  letter-spacing: 0;
  width: 104px;
  position: relative; }
  .plan_select button {
    padding: 4px 0 0 6px;
    border: none;
    background: none;
    font-size: 14px;
    border-bottom: solid 1px #333; }
    .plan_select button:after {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border: 2px solid;
      border-color: transparent transparent #333 #333;
      transform: rotate(-45deg);
      position: absolute;
      top: 6px;
      right: 8px; }
  .plan_select .hide {
    position: absolute;
    left: 0;
    width: 100%;
    top: 24px;
    height: 0;
    overflow: hidden;
    transition: height .4s ease-out; }
    .plan_select .hide ul {
      border: 1px solid #fff; }
    .plan_select .hide li {
      border-bottom: 1px solid #fff; }
      .plan_select .hide li:last-of-type {
        border: none; }
    .plan_select .hide a {
      color: #fff;
      display: block;
      height: 24px;
      line-height: 24px;
      padding-left: 5px; }

.globalMenu .logout {
  position: fixed;
  top: 15px;
  right: 35px;
  z-index: 1001;
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, #F5365C 0%, #F56636 100%);
  cursor: pointer;
  border-radius: 50%;
  transition: all .2s ease-in-out; }
  .globalMenu .logout .logout__link {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 1; }
    .globalMenu .logout .logout__link::before {
      content: '';
      background: url(/assets/images/common/logout_icon_white.svg);
      width: 24px;
      height: 24px;
      display: block; }
  .globalMenu .logout:hover {
    background: linear-gradient(90deg, #F56636 0%, #F5365C 100%);
    transition: all .2s ease-in-out; }
    .globalMenu .logout:hover .logout__link::after {
      content: 'ログアウト';
      position: absolute;
      left: 50%;
      bottom: -25px;
      transform: translateX(-50%);
      background: #4d4d4d;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      padding: 2px 10px;
      white-space: nowrap; }
  @media screen and (max-width: 767px) {
    .globalMenu .logout {
      display: none; } }

.globalMenu #globalmenu_btn {
  position: fixed;
  top: 15px;
  right: 100px;
  z-index: 1001;
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, #5e72e4 0%, #825ee4 100%);
  border-radius: 50%; }
  .globalMenu #globalmenu_btn:hover {
    background: linear-gradient(90deg, #825ee4 0%, #5e72e4 100%);
    transition: all .2s ease-in-out; }
  .globalMenu #globalmenu_btn button {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    border: none;
    background: none;
    display: block;
    z-index: 1; }
    .globalMenu #globalmenu_btn button.line-open:hover::before {
      content: 'MENU';
      position: absolute;
      left: 50%;
      bottom: -25px;
      transform: translateX(-50%);
      background: #4d4d4d;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      padding: 2px 10px; }
    .globalMenu #globalmenu_btn button.line-open.line-close:hover::before {
      content: 'CLOSE'; }
    .globalMenu #globalmenu_btn button.line-open.line-close .line hr {
      position: absolute; }
      .globalMenu #globalmenu_btn button.line-open.line-close .line hr:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0; }
      .globalMenu #globalmenu_btn button.line-open.line-close .line hr:nth-of-type(2) {
        display: none; }
      .globalMenu #globalmenu_btn button.line-open.line-close .line hr:nth-of-type(3) {
        transform: rotate(-45deg); }
    .globalMenu #globalmenu_btn button .line {
      width: 28px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      .globalMenu #globalmenu_btn button .line hr {
        width: 100%;
        height: 2px;
        background: #fff;
        border: none;
        padding: 0;
        margin: 0 0 7px 0; }
        .globalMenu #globalmenu_btn button .line hr:nth-of-type(3) {
          margin: 0; }
  .globalMenu #globalmenu_btn .badge {
    position: absolute;
    top: 56px;
    left: 53px;
    z-index: 1; }
  .globalMenu #globalmenu_btn svg {
    position: absolute;
    top: -2px;
    left: -2px;
    transform: rotate(-90deg); }
    .globalMenu #globalmenu_btn svg circle {
      stroke-width: 2px;
      stroke: #FF5B2C;
      fill: none;
      stroke-dasharray: 232.36px 232.36px;
      stroke-dashoffset: 232.36px;
      animation: circle 10s linear infinite; }
  @media screen and (max-width: 767px) {
    .globalMenu #globalmenu_btn {
      width: 50px;
      height: 50px;
      top: 6px;
      right: 6px; }
      .globalMenu #globalmenu_btn button {
        font-size: 12px; }
        .globalMenu #globalmenu_btn button.line-open::before {
          display: none; }
        .globalMenu #globalmenu_btn button.line-open.line-close::before {
          display: none; } }

@keyframes circle {
  0% {
    stroke-dashoffset: 232.36px; }
  99.9% {
    stroke-dashoffset: -232.36px; } }

#globalmenu {
  z-index: 1000;
  position: fixed;
  left: 0;
  width: 100%;
  height: 118px; }
  #globalmenu header {
    width: 100%;
    height: 118px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    font-size: 0;
    box-shadow: 0 1px 20px 10px rgba(0, 0, 0, 0.2);
    background: #f5f5f5;
    position: absolute;
    left: 0;
    z-index: 10; }
    #globalmenu header .left {
      float: left;
      margin-left: 30px;
      position: relative;
      top: 50%;
      transform: translate(0, -55%); }
      #globalmenu header .left .logo {
        display: inline-block;
        vertical-align: middle;
        transform: translate(0, -8%); }
      #globalmenu header .left .member {
        display: inline-block;
        margin-left: 30px;
        position: relative;
        vertical-align: middle; }
        #globalmenu header .left .member .photo_img {
          line-height: 118px;
          width: 46px;
          height: 46px;
          border-radius: 40px;
          overflow: hidden;
          display: inline-block;
          vertical-align: middle; }
          #globalmenu header .left .member .photo_img img {
            display: block;
            width: 100%;
            height: 100%; }
        #globalmenu header .left .member .member_name {
          display: flex;
          flex-direction: column;
          vertical-align: middle;
          margin-left: 8px; }
        #globalmenu header .left .member .name {
          font-size: 15px;
          display: inline-block;
          vertical-align: middle; }
          #globalmenu header .left .member .name:after {
            content: 'さん'; }
  #globalmenu .menu_wrap {
    background: #f5f5f5;
    padding-top: 118px;
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    transition: all .6s ease-in-out;
    transform: translate(0, -100%); }
  #globalmenu #menu {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 0;
    padding-top: 38px; }
    #globalmenu #menu h2 {
      font-size: 24px;
      letter-spacing: 0;
      margin: 0 0 22px; }
    #globalmenu #menu .badge {
      position: relative;
      top: -2px;
      left: 5px; }
    #globalmenu #menu #mainnav {
      width: 720px;
      height: auto;
      margin: auto; }
      #globalmenu #menu #mainnav a {
        text-decoration: none;
        color: #000;
        display: inline-block;
        width: 230px;
        height: 170px;
        margin: 20px 10px;
        background: #fff;
        border-radius: 5px;
        border: 2px solid #d9d9d9;
        font-size: 18px;
        box-shadow: 3px 2px 10px 2px #d9d9d9; }
        #globalmenu #menu #mainnav a div {
          width: 67px;
          height: 67px;
          margin: 25px auto 20px;
          border: 2px solid #999999;
          border-radius: 100px;
          position: relative; }
          #globalmenu #menu #mainnav a div svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); }
    #globalmenu #menu #othernav {
      padding-top: 10px; }
      #globalmenu #menu #othernav p {
        font-weight: bold;
        display: inline-block;
        margin-bottom: 10px;
        line-height: 25px; }
      #globalmenu #menu #othernav ul {
        font-size: 16px;
        letter-spacing: 0;
        width: 230px;
        height: auto;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 12px; }
        #globalmenu #menu #othernav ul:nth-of-type(1) {
          margin-left: 0; }
        #globalmenu #menu #othernav ul li {
          margin-bottom: 8px; }
          #globalmenu #menu #othernav ul li:before {
            content: '';
            display: inline-block;
            border-radius: 30px;
            width: 12px;
            height: 12px;
            vertical-align: top;
            margin-top: 6px; }
          #globalmenu #menu #othernav ul li a {
            color: #000;
            line-height: 25px;
            text-decoration: none;
            display: inline-block;
            margin-left: 10px; }
            #globalmenu #menu #othernav ul li a:hover {
              text-decoration: underline; }
        #globalmenu #menu #othernav ul div {
          margin-top: 40px; }
  #globalmenu .logout {
    margin: 40px auto 80px;
    width: 200px;
    height: 34px;
    font-size: 15px;
    border-radius: 6px;
    text-align: center;
    line-height: 34px;
    background: #000;
    color: #fff;
    text-decoration: none;
    display: block;
    border: solid 1px #000;
    padding: 0; }
    #globalmenu .logout:hover {
      background: #fff;
      color: #333; }

/*
footer
 */
footer {
  color: #fff;
  font-size: 13px;
  background: #F5F5F5;
  position: relative;
  padding: 30px 78px 15px; }
  footer nav {
    text-align: left;
    display: inline-block;
    font-size: 13px;
    width: 100%;
    height: auto;
    line-height: 30px;
    margin-bottom: 40px; }
    footer nav div {
      display: inline-block;
      vertical-align: top;
      margin-right: 70px;
      text-align: left; }
      footer nav div:nth-last-of-type(1) {
        margin-right: 0; }
      footer nav div p {
        font-size: 16px;
        font-weight: bold;
        color: #333; }
      footer nav div a {
        color: #626262;
        display: block;
        font-size: 13px; }
        footer nav div a:hover {
          text-decoration: underline; }
        footer nav div a.mt {
          margin-top: 2.15385em; }
        footer nav div a:before {
          content: '';
          width: 12px;
          height: 12px;
          border-radius: 20px;
          background: #626262;
          display: inline-block;
          margin-right: 9px; }
  footer #footer_bottom {
    width: 100%;
    text-align: center; }
    footer #footer_bottom .footer_bottom_sns {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px; }
      footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item {
        margin: 0 5px;
        width: 40px; }
        footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge {
          width: 40px;
          height: 40px;
          display: inline-block;
          position: relative;
          border: 0;
          border-radius: 50%;
          background: #666;
          vertical-align: middle;
          font-size: 20px;
          -webkit-appearance: none; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge::before {
            content: '';
            display: block;
            opacity: 1;
            position: absolute;
            top: 3px;
            right: 3px;
            bottom: 3px;
            left: 3px;
            margin: auto;
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.58, 1);
            transform: scale(1);
            background: #666;
            will-change: transform; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 0; }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon::before, footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon::after {
              content: '';
              display: inline-block;
              width: 24px;
              height: 24px;
              vertical-align: text-top;
              letter-spacing: normal; }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon::after {
              position: absolute;
              top: 0;
              left: 0; }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon.m-icon-facebook::after {
              content: url(/assets/minden/images/icon_facebook_white.svg); }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon.m-icon-instagram::after {
              content: url(/assets/minden/images/icon_instagram_white.svg); }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon.m-icon-twitter::after {
              content: url(/assets/minden/images/icon_twitter_white.svg); }
            footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge .m-icon.m-icon-youtube::after {
              content: url(/assets/minden/images/icon_youtube_white.svg); }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover.m-iconBadge-facebook {
            background-color: #3b5998; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover.m-iconBadge-instagram {
            background-color: #b932a8; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover.m-iconBadge-twitter {
            background-color: #55acee; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover.m-iconBadge-youtube {
            background-color: #f00; }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover::before {
            transition: opacity 0.45s cubic-bezier(0.23, 1, 0.58, 1), transform 0.6s cubic-bezier(0.23, 1, 0.58, 1);
            transform: scale(0); }
          footer #footer_bottom .footer_bottom_sns .footer_bottom_sns_item .m-iconBadge:hover .m-icon::after {
            transition: all 0.3s cubic-bezier(0.23, 1, 0.58, 1); }
    footer #footer_bottom .cr {
      font-size: 10px;
      letter-spacing: .05em;
      color: #626262; }
    footer #footer_bottom .list {
      margin-bottom: 20px; }
      footer #footer_bottom .list a {
        color: #626262;
        padding: 0 15px; }
        footer #footer_bottom .list a:hover {
          text-decoration: underline; }
        footer #footer_bottom .list a:first-child {
          padding-left: 0; }
        footer #footer_bottom .list a:last-of-type {
          border-right: none;
          padding-right: 0; }

/*
SP layout
 */
@media screen and (max-width: 767px) {
  #wrapper {
    min-width: 100%; }
    #wrapper .plancolor li a:hover {
      color: #fff;
      background: #fbb03b; }
    #wrapper .sp_color_bg {
      background: #f7931e;
      transition: all .2s ease-out; }
    #wrapper.green .plancolor li a:hover {
      color: #fff;
      background: #74b7aa; }
    #wrapper.green .sp_color_bg {
      background: #5eac86; }
    #wrapper.purple .plancolor li a:hover {
      color: #fff;
      background: #c798bf; }
    #wrapper.purple .sp_color_bg {
      background: #c76da2; }
    #wrapper.menu_open #globalmenu_btn button .line hr:nth-of-type(1) {
      transform: translateY(6px) rotate(-45deg); }
    #wrapper.menu_open #globalmenu_btn button .line hr:nth-of-type(3) {
      transform: translateY(-6px) rotate(45deg); }
  .sp {
    display: block !important; }
  /*
    下層ページ共通
     */
  section.page {
    padding: 120px 0 50px; }
    section.page h1 {
      font-size: 18px;
      padding: 22px 0 15px; }
    section.page main {
      width: auto;
      padding: 0; }
  /*
    30分毎電気使用量
     */
  #use_30min {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    border-radius: 0;
    font-size: 0;
    letter-spacing: 0;
    box-shadow: none;
    perspective: 1000px; }
    #use_30min.scroll {
      transform: translate(0, 0); }
    #use_30min.fix {
      bottom: 0; }
    #use_30min .flip a {
      border-radius: 0;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.15); }
      #use_30min .flip a:before {
        margin: 15px 17px 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        border-radius: 20px;
        position: relative; }
      #use_30min .flip a:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin-top: -10px;
        left: 17px; }
    #use_30min .u_3_right {
      width: calc(100vw - 60px);
      vertical-align: middle;
      margin: 0;
      position: relative;
      top: 7px; }
      #use_30min .u_3_right .title {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px; }
        #use_30min .u_3_right .title span {
          display: block;
          margin-top: 3px; }
      #use_30min .u_3_right .text {
        font-size: 12px;
        line-height: 1;
        margin-top: 5px;
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      #use_30min .u_3_right .kwh {
        font-size: 25px;
        display: inline-block;
        vertical-align: middle; }
        #use_30min .u_3_right .kwh span:after {
          font-size: 15px; }
  /*
    Global Menu
     */
  #globalmenu_btn {
    top: 63px;
    right: 6px;
    width: 54px;
    height: 54px; }
    #globalmenu_btn button {
      font-size: 12px; }
    #globalmenu_btn .badge {
      top: 90%;
      left: 60%; }
    #globalmenu_btn svg {
      display: none; }
      #globalmenu_btn svg circle {
        stroke-dasharray: 169.56px 169.56px;
        stroke-dashoffset: 169.56px;
        animation: circleSP 10s linear infinite; }
  #globalmenu {
    background: #fff;
    display: block; }
    #globalmenu header {
      width: 100%;
      height: 120px; }
      #globalmenu header .left {
        float: none;
        margin: auto;
        position: relative;
        z-index: 100;
        text-align: center;
        top: 30%;
        transform: translate(0, -55%); }
        #globalmenu header .left .logo {
          width: 90px;
          margin: auto;
          display: block;
          transform: translate(0, 0); }
        #globalmenu header .left .member {
          margin-left: 11px;
          padding: 10px 0;
          float: left;
          position: absolute;
          bottom: 0;
          left: 12px;
          margin-left: 0; }
          #globalmenu header .left .member .photo_img {
            line-height: 118px;
            width: 46px;
            height: 46px;
            border-radius: 40px;
            overflow: hidden;
            display: inline-block; }
            #globalmenu header .left .member .photo_img img {
              display: block;
              width: 100%;
              height: 100%; }
          #globalmenu header .left .member .name {
            line-height: 1; }
          #globalmenu header .left .member .plan_select {
            display: block;
            margin-top: 5px; }
            #globalmenu header .left .member .plan_select button {
              color: #333;
              text-align: left;
              padding: 0; }
              #globalmenu header .left .member .plan_select button:after {
                border-color: transparent transparent #333 #333; }
            #globalmenu header .left .member .plan_select .hide li a {
              display: block;
              color: #fff;
              font-size: 14px;
              padding: 0; }
    #globalmenu #menu {
      text-align: left;
      padding-top: 22px; }
      #globalmenu #menu h2 {
        display: none; }
      #globalmenu #menu .badge {
        position: relative;
        top: -2px;
        left: 5px; }
      #globalmenu #menu #mainnav {
        width: 100%;
        padding: 0 12px;
        line-height: 40px; }
        #globalmenu #menu #mainnav a {
          display: block;
          width: 100%;
          height: auto;
          margin: 6px 0;
          border: 1px solid #d9d9d9;
          font-size: 13px;
          box-shadow: none;
          position: relative;
          padding: 0 53px;
          height: 40px;
          line-height: 40px; }
          #globalmenu #menu #mainnav a:nth-of-type(1) {
            margin-top: 0; }
          #globalmenu #menu #mainnav a div {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%); }
            #globalmenu #menu #mainnav a div svg {
              width: 55%; }
            #globalmenu #menu #mainnav a div .heart {
              margin-top: 1px;
              width: 65%; }
            #globalmenu #menu #mainnav a div .news_icon {
              width: 65%; }
            #globalmenu #menu #mainnav a div .letter {
              width: 80%; }
      #globalmenu #menu #othernav {
        width: 90%;
        margin: auto;
        padding: 0;
        position: relative;
        padding-top: 10px; }
        #globalmenu #menu #othernav p {
          margin-bottom: 0;
          line-height: 8px; }
          #globalmenu #menu #othernav p:nth-of-type(2) {
            margin-top: 16px; }
        #globalmenu #menu #othernav .right {
          position: absolute;
          top: 25px;
          right: 0; }
        #globalmenu #menu #othernav ul {
          font-size: 13px;
          width: 50%;
          display: block;
          margin: 0;
          position: relative; }
          #globalmenu #menu #othernav ul:nth-of-type(2) {
            margin-top: 27px; }
          #globalmenu #menu #othernav ul li {
            margin: 13px 0; }
            #globalmenu #menu #othernav ul li:before {
              width: 10px;
              height: 10px;
              position: relative;
              top: 4px;
              margin: 0; }
            #globalmenu #menu #othernav ul li a {
              line-height: 1.5;
              margin-left: 5px; }
    #globalmenu .logout {
      margin: 40px auto 80px;
      width: 200px;
      height: 34px;
      font-size: 15px;
      border-radius: 6px;
      text-align: center;
      line-height: 34px;
      background: #000;
      color: #fff;
      text-decoration: none;
      display: block; }
  /*
    footer
     */
  footer {
    padding: 20px 0 0 0; }
    footer nav {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      line-height: 2.6;
      padding: 20px; }
      footer nav > div {
        width: 100%;
        margin-right: 0; }
    footer #footer_bottom {
      width: 100%;
      margin: 0 auto;
      position: unset;
      bottom: unset;
      right: unset;
      text-align: center;
      line-height: 28px;
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
      padding-bottom: 60px; }
      footer #footer_bottom .footer_bottom_sns {
        justify-content: center; }
      footer #footer_bottom .cr {
        width: 100%; }
      footer #footer_bottom .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap; }
        footer #footer_bottom .list a {
          width: 50%;
          padding: 0;
          border-right: 0; } }

@keyframes circleSP {
  0% {
    stroke-dashoffset: 169.56px; }
  99.9% {
    stroke-dashoffset: -169.56px; } }

@media all and (-ms-high-contrast: none) and (max-width: 767px) {
  #use_30min .u_3_right {
    width: calc(100vw - 80px); } }

@supports (-ms-ime-align: auto) {
  #use_30min .u_3_right {
    width: calc(100vw - 80px); } }

@-moz-document url-prefix() {
  #use_30min .u_3_right {
    width: calc(100vw - 80px); } }

/*
tablet layout
 */
@media screen and (min-width: 768px) and (max-width: 960px) {
  #wrapper {
    min-width: auto; }
  section.page {
    padding-left: 0;
    padding-right: 0; }
    section.page main {
      width: auto; }
  #globalmenu_btn {
    top: 20px;
    right: 20px; }
  #use_30min {
    transform: translate(0, 0);
    bottom: 25px;
    left: 20px;
    transition: none; }
    #use_30min.stop.scroll {
      transform: translate(0, 70px); }
  footer {
    padding: 30px 30px 15px; }
    footer nav div {
      margin-right: 30px; }
      footer nav div:nth-last-of-type(1) {
        margin-right: 0; }
    footer #footer_bottom {
      right: 25px; } }

/*
ページトップのカラーオーバーレイ
 */
#wrapper {
  width: 100%;
  height: 100%;
  position: relative; }
  #wrapper.login #top .top_bottom button {
    opacity: 1;
    transform: scale(1); }
  #wrapper.login #top_contents .top_right .my_data {
    transform: scale(1);
    filter: blur(0);
    opacity: 1; }
  #wrapper.login #top_contents .top_right .login {
    transform: scale(0.5);
    filter: blur(5px);
    opacity: 0; }
  #wrapper.green #top_contents .top_left .recommend {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); }
  #wrapper.orange #top_contents .top_left .this_month {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); }
  #wrapper.purple #top_contents .top_left .next_month {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); }
  #wrapper.menu_open #globalmenu {
    transform: translate(0, 0); }

/*
グローバルメニュー
（下層ページと若干仕様が違う）
 */
#globalmenu {
  transition: all .6s ease-in-out;
  transform: translate(0, -100%);
  height: 100vh; }
  #globalmenu header .left .member_name .plan_select {
    display: none; }
  #globalmenu .menu_wrap {
    transform: translate(0, 0); }

.plan_select {
  color: #fff; }
  .plan_select button {
    color: #fff;
    border-bottom: none; }
    .plan_select button:after {
      border-color: transparent transparent #8898AA #8898AA; }

@media screen and (max-height: 677px) and (min-width: 768px) {
  #use_30min {
    bottom: auto;
    top: 508px;
    position: absolute; }
    #use_30min.scroll {
      transform: translate(0, 0); }
    #use_30min.fix {
      position: fixed;
      top: auto;
      bottom: 20px; } }

@keyframes use_30min {
  0% {
    opacity: .8; }
  60% {
    opacity: 0;
    transform: scale(1.7); }
  100% {
    opacity: 0; } }

@media all and (-ms-high-contrast: none) {
  #use_30min.rotate .flip {
    transform: rotateX(0); }
  #use_30min.rotate.rotate2 .flip {
    transform: rotateX(0); }
  #use_30min .flip.back {
    transform: rotateX(0); } }

/*
スペシャルコンテンツ タブ
 */
#sp_con {
  width: 350px;
  height: 202px;
  position: fixed;
  right: 0;
  top: 330px;
  z-index: 100;
  border-radius: 11px 0 0 11px;
  transform: translate(300px, 0);
  transition: all .4s ease-in-out; }
  #sp_con.open {
    transform: translate(0, 0); }
    #sp_con.open .sp_left button:before {
      transform: translate(7px, -50%) rotate(180deg); }
    #sp_con.open .sp_left button:hover:before {
      transform: translate(10px, -50%) rotate(180deg); }
  #sp_con svg {
    position: absolute;
    top: -2px;
    left: -2px; }
    #sp_con svg path {
      stroke: #FF5B2C;
      stroke-width: 2px;
      stroke-dasharray: 291.40771484375 291.40771484375;
      stroke-dashoffset: 291.40771484375;
      animation: rect 5s linear infinite; }
  #sp_con .sp_left {
    width: 52px;
    height: 100%;
    border: 2px solid #fff;
    position: relative;
    border-radius: 11px 0 0 11px;
    display: inline-block;
    text-align: right;
    box-shadow: -10px 0 20px -5px rgba(0, 0, 0, 0.1) inset; }
    #sp_con .sp_left button {
      display: block;
      height: 100%;
      width: 100%;
      border: none;
      background: none;
      position: relative;
      border-radius: 10px 0 0 10px;
      z-index: 1; }
      #sp_con .sp_left button:before {
        content: '';
        width: 0;
        height: 0;
        display: inline-block;
        border-top: solid 6px transparent;
        border-left: solid 6px transparent;
        border-bottom: solid 6px transparent;
        border-right: solid 7px	#fff;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%); }
      #sp_con .sp_left button:hover:before {
        transform: translate(-3px, -50%); }
    #sp_con .sp_left .sp_title {
      height: 100%;
      font-size: 16px;
      font-weight: bold;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
      color: #fff;
      text-align: center;
      display: inline-block;
      padding-left: 10px; }
  #sp_con a {
    width: 300px;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 2;
    background: no-repeat center / cover;
    border: solid 16px #fff; }
    #sp_con a img {
      width: 100%;
      height: 100%; }
    #sp_con a .sp_text {
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: 20px;
      font-weight: bold;
      font-size: 20px;
      line-height: 24px; }
      #sp_con a .sp_text .val {
        font-size: 14px;
        font-weight: bold;
        line-height: 10px; }
      #sp_con a .sp_text span {
        font-size: 15px;
        line-height: 10px; }

@media all and (-ms-high-contrast: none) {
  #sp_con.open {
    transform: translate(300px, 0);
    right: 300px; } }

@keyframes rect {
  0% {
    stroke-dashoffset: 291.40771484375px; }
  99.9% {
    stroke-dashoffset: -291.40771484375px; } }

/*
top area
 */
#top {
  height: 100vh;
  min-height: 677px;
  color: #fff;
  position: relative;
  z-index: 0; }
  #top .top_bottom {
    width: 100%;
    font-size: 0;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
    @media screen and (min-width: 768px) and (max-width: 960px) {
      #top .top_bottom {
        width: 100%; } }
    #top .top_bottom.orange_set .orange {
      transform: translate(100%, 0); }
    #top .top_bottom.orange_set .green {
      transform: translate(-100%, 0); }
    #top .top_bottom.orange_set .purple {
      transform: translate(0, 0); }
    #top .top_bottom.purple_set .orange {
      transform: translate(200%, 0); }
    #top .top_bottom.purple_set .green {
      transform: translate(-100%, 0); }
    #top .top_bottom.purple_set .purple {
      transform: translate(-100%, 0); }
    #top .top_bottom.green_set .orange {
      transform: translate(0, 0); }
    #top .top_bottom.green_set .green {
      transform: translate(0, 0); }
    #top .top_bottom button {
      color: #fff;
      text-align: center;
      line-height: 50px;
      font-size: 13px;
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
      width: 188px;
      height: 50px;
      background: rgba(0, 0, 0, 0.5);
      padding: 0;
      position: relative;
      opacity: 0;
      transform: scale(0);
      border-radius: 0; }
      #top .top_bottom button:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; }
      #top .top_bottom button:after {
        content: '';
        position: absolute;
        border: solid 4px transparent;
        border-left-color: #fff;
        border-right-width: 0;
        top: 50%;
        right: 15px;
        transform: translate(0, -50%); }
      #top .top_bottom button.green {
        opacity: 1;
        transform: scale(1); }
      #top .top_bottom button.active {
        line-height: 28px;
        color: #fff;
        border-width: 5px;
        z-index: 0; }
        #top .top_bottom button.active.orange {
          background: linear-gradient(90deg, #fee140 0%, #f06a30 100%); }
          #top .top_bottom button.active.orange:before {
            background: linear-gradient(90deg, #fee140 0%, #f06a30 100%); }
        #top .top_bottom button.active.green {
          background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
          #top .top_bottom button.active.green:before {
            background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
        #top .top_bottom button.active.purple {
          background: linear-gradient(90deg, #c76da2 0%, #825ee4 100%); }
          #top .top_bottom button.active.purple:before {
            background: linear-gradient(90deg, #c76da2 0%, #825ee4 100%); }
        #top .top_bottom button.active.carrot {
          background: linear-gradient(90deg, #ff7251 0%, #ec3d16 100%); }
          #top .top_bottom button.active.carrot:before {
            background: linear-gradient(90deg, #ff7251 0%, #ec3d16 100%); }
        #top .top_bottom button.active.coral {
          background: linear-gradient(90deg, #ffa0a8 0%, #e55965 100%); }
          #top .top_bottom button.active.coral:before {
            background: linear-gradient(90deg, #ffa0a8 0%, #e55965 100%); }
      #top .top_bottom button:hover {
        color: #fff !important;
        border-width: 5px;
        line-height: 26px; }
        #top .top_bottom button:hover.orange {
          background: linear-gradient(90deg, #fee140 0%, #f06a30 100%); }
          #top .top_bottom button:hover.orange:before {
            background: linear-gradient(90deg, #fee140 0%, #f06a30 100%); }
        #top .top_bottom button:hover.green {
          background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
          #top .top_bottom button:hover.green:before {
            background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
        #top .top_bottom button:hover.purple {
          background: linear-gradient(90deg, #c76da2 0%, #825ee4 100%); }
          #top .top_bottom button:hover.purple:before {
            background: linear-gradient(90deg, #c76da2 0%, #825ee4 100%); }
        #top .top_bottom button:hover.carrot {
          background: linear-gradient(90deg, #ff7251 0%, #ec3d16 100%); }
          #top .top_bottom button:hover.carrot:before {
            background: linear-gradient(90deg, #ff7251 0%, #ec3d16 100%); }
        #top .top_bottom button:hover.coral {
          background: linear-gradient(90deg, #ffa0a8 0%, #e55965 100%); }
          #top .top_bottom button:hover.coral:before {
            background: linear-gradient(90deg, #ffa0a8 0%, #e55965 100%); }
        #top .top_bottom button:hover:before {
          animation: active_button 2s infinite; }
        #top .top_bottom button:hover:after {
          right: 10px; }

@keyframes active_button {
  0% {
    opacity: .8;
    filter: blur(5px);
    transform: scale(1); }
  60% {
    opacity: 0;
    transform: scale(1.3, 3); }
  100% {
    opacity: 0; } }

#top_main {
  width: 100%;
  min-height: 617px;
  height: 100vh;
  background: no-repeat center / cover;
  position: relative; }
  #top_main:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  #top_main .top_head {
    width: 100%;
    height: 80px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    font-size: 0;
    position: relative;
    z-index: 1000;
    background: linear-gradient(90deg, #2DCE89 0%, #2DCECC 100%);
    box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15); }
    #top_main .top_head .left {
      float: left;
      margin-left: 45px;
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
      #top_main .top_head .left a {
        width: 100%;
        max-width: 218px; }
      #top_main .top_head .left .logo {
        width: 100%;
        display: inline-block;
        vertical-align: middle; }
        #top_main .top_head .left .logo path {
          fill: #fff; }
      #top_main .top_head .left .member {
        display: inline-block;
        position: relative;
        font-size: 0;
        letter-spacing: 0;
        vertical-align: middle; }
        #top_main .top_head .left .member .photo_img {
          line-height: 118px;
          width: 46px;
          height: 46px;
          border-radius: 40px;
          overflow: hidden;
          display: inline-block;
          border: 1px solid #fff;
          vertical-align: middle; }
          #top_main .top_head .left .member .photo_img img {
            display: block;
            width: 100%;
            height: 100%; }
        #top_main .top_head .left .member .member_name {
          display: flex;
          flex-direction: column;
          margin-left: 8px; }
        #top_main .top_head .left .member .name {
          font-size: 15px;
          vertical-align: top;
          display: inline-block;
          color: #fff; }
          #top_main .top_head .left .member .name:after {
            content: 'さん'; }
    #top_main .top_head .right {
      float: right;
      margin-right: 180px;
      position: relative;
      top: 50%;
      transform: translate(0, -50%); }
      #top_main .top_head .right .hachibe-icon {
        width: 54px; }
      #top_main .top_head .right .hachibe {
        width: 100%;
        display: none; }
        #top_main .top_head .right .hachibe.show {
          display: inline-block; }
        #top_main .top_head .right .hachibe img {
          width: 100%; }
      #top_main .top_head .right .message {
        vertical-align: top;
        display: inline-block;
        width: 300px;
        height: 32px;
        border-radius: 4px;
        background: #fff;
        margin-left: 10px;
        position: relative; }
        #top_main .top_head .right .message:after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 50%;
          left: -18px;
          transform: translate(0, -50%);
          width: 0;
          height: 0;
          border-top: solid 8px transparent;
          border-left: solid 9px transparent;
          border-bottom: solid 8px transparent;
          border-right: solid 9px #fff; }
        #top_main .top_head .right .message ul {
          width: 95%;
          height: 100%;
          margin: 0 auto;
          position: relative;
          overflow: hidden; }
          #top_main .top_head .right .message ul.animation li {
            transition: top .6s ease-out; }
          #top_main .top_head .right .message ul li {
            position: absolute;
            top: 100%;
            left: 0;
            height: 100%;
            line-height: 32px;
            font-size: 12px;
            color: #333;
            width: 10000px; }
            #top_main .top_head .right .message ul li:nth-of-type(1) {
              top: 0; }

@media all and (-ms-high-contrast: none) {
  #top_main {
    height: calc(100vh - 80px);
    margin-bottom: 20px; } }

#top_contents {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 30px 45px; }
  #top_contents .top_left {
    width: 50%;
    height: auto;
    font-size: 0;
    letter-spacing: 0; }
    #top_contents .top_left .plant_area {
      opacity: 0;
      filter: blur(5px);
      transform: scale(0.5);
      transition: all .4s ease-out; }
    #top_contents .top_left .date {
      font-size: 13px;
      line-height: 33px; }
    #top_contents .top_left .pp_support {
      font-size: 18px;
      background: #fff;
      padding: 10px;
      font-weight: bold;
      border-radius: 30px;
      display: inline-block; }
      #top_contents .top_left .pp_support:hover:after {
        margin-left: 15px; }
      #top_contents .top_left .pp_support:after {
        content: '';
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
        width: 0;
        height: 0;
        border-top: solid 6px transparent;
        border-right: solid 7px transparent;
        border-bottom: solid 6px transparent;
        border-left: solid 7px #fff;
        position: relative;
        top: -2px; }
    #top_contents .top_left .power_plant {
      width: 100%;
      height: auto;
      display: inline-block;
      font-size: 15px;
      font-weight: bold;
      margin: 20px 0 10px;
      position: relative;
      font-size: 0;
      letter-spacing: 0; }
      #top_contents .top_left .power_plant p {
        font-size: 15px; }
      #top_contents .top_left .power_plant .name {
        font-size: 34px;
        display: block;
        margin: 18px 0; }
        #top_contents .top_left .power_plant .name.small {
          font-size: 20px;
          line-height: 1.1; }
      #top_contents .top_left .power_plant .company {
        padding-right: 15px;
        display: inline-block;
        vertical-align: middle;
        font-size: 15px;
        line-height: 1.1; }
      #top_contents .top_left .power_plant .ranking {
        vertical-align: middle;
        font-size: 18px;
        border: 1px solid #fff;
        border-radius: 20px;
        display: inline-block;
        width: 180px;
        height: 27px;
        text-align: center;
        line-height: 27px; }
        #top_contents .top_left .power_plant .ranking span {
          font-size: 13px;
          margin: 0;
          display: inline-block;
          vertical-align: middle; }
    #top_contents .top_left .forecast {
      border: 1px solid #fff;
      border-radius: 6px;
      font-size: 18px;
      width: 100%;
      height: auto; }
      #top_contents .top_left .forecast .electric {
        display: inline-block;
        padding: 11px 0 9px 13px;
        border-right: 1px solid #fff;
        width: 42%;
        height: 100%; }
        #top_contents .top_left .forecast .electric .ele_date {
          font-size: 16px;
          line-height: 26px; }
          #top_contents .top_left .forecast .electric .ele_date span {
            font-size: 12px; }
        #top_contents .top_left .forecast .electric .asapM {
          font-size: 40px; }
          #top_contents .top_left .forecast .electric .asapM:after {
            content: 'kWh';
            font-size: 20px; }
      #top_contents .top_left .forecast .weather {
        font-size: 18px;
        width: 55%;
        display: inline-block;
        padding: 11px 0 9px 10px;
        position: relative; }
        #top_contents .top_left .forecast .weather .W_location {
          font-size: 12px;
          margin-top: 6px;
          line-height: 14px; }
        #top_contents .top_left .forecast .weather a {
          font-size: 12px;
          text-decoration: none;
          text-align: center;
          line-height: 20px;
          border-radius: 4px;
          width: 84px;
          height: 20px;
          margin-top: 9px;
          display: inline-block;
          background: rgba(255, 255, 255, 0.8);
          font-weight: bold; }
          #top_contents .top_left .forecast .weather a:hover {
            opacity: .7; }
        #top_contents .top_left .forecast .weather img {
          display: inline-block;
          position: absolute;
          top: 20px;
          right: 20px; }
    #top_contents .top_left .support {
      margin-top: 130px;
      position: relative; }
      #top_contents .top_left .support .history {
        text-decoration: none;
        font-size: 14px;
        width: 160px;
        height: 40px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 7px;
        display: inline-block;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        position: relative; }
        #top_contents .top_left .support .history:hover {
          color: #fff !important; }
          #top_contents .top_left .support .history:hover img:nth-of-type(1) {
            animation: support_icon1 .5s infinite; }
          #top_contents .top_left .support .history:hover img:nth-of-type(2) {
            animation: support_icon2 .5s infinite; }
          #top_contents .top_left .support .history:hover:after {
            border-left-color: #fff !important; }
        #top_contents .top_left .support .history img {
          position: absolute;
          top: -6px;
          left: 3px; }
          #top_contents .top_left .support .history img:nth-of-type(2) {
            opacity: 0; }
        #top_contents .top_left .support .history:after {
          content: '';
          position: absolute;
          top: 50%;
          right: 18px;
          transform: translate(0, -50%);
          display: inline-block;
          vertical-align: middle;
          width: 0;
          height: 0;
          border-top: solid 5px transparent;
          border-right: solid 6px transparent;
          border-bottom: solid 5px transparent;
          border-left: solid 6px; }
        #top_contents .top_left .support .history:hover:after {
          right: 13px; }
      #top_contents .top_left .support .about_support {
        margin-left: 4px;
        text-decoration: none;
        font-size: 12px;
        border: 1px solid #fff;
        color: #fff;
        width: 70px;
        height: 40px;
        line-height: 38px;
        display: inline-block;
        border-radius: 20px;
        text-align: center; }
  #top_contents .top_right {
    width: 380px; }
    #top_contents .top_right .my_data {
      width: 100%;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      font-size: 14px;
      transition: all .4s ease-out;
      transform: scale(0.5);
      filter: blur(5px);
      opacity: 0;
      border-radius: 15px; }
      #top_contents .top_right .my_data .right_title {
        text-align: center;
        font-size: 22px;
        margin-bottom: 15px; }
      #top_contents .top_right .my_data .kwh {
        display: block;
        position: relative;
        width: 100%;
        height: 50px;
        margin-bottom: 8px; }
        #top_contents .top_right .my_data .kwh .date {
          position: absolute;
          bottom: 11px;
          display: inline-block;
          font-size: 19px; }
          #top_contents .top_right .my_data .kwh .date span {
            font-size: 12px; }
        #top_contents .top_right .my_data .kwh .asapM {
          float: right;
          display: inline-block; }
          #top_contents .top_right .my_data .kwh .asapM:after {
            content: 'kWh';
            font-size: 40px; }
      #top_contents .top_right .my_data .week {
        position: relative;
        width: 100%;
        height: 15px; }
        #top_contents .top_right .my_data .week p {
          font-size: 14px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%); }
        #top_contents .top_right .my_data .week div {
          display: block;
          position: relative;
          width: 70%;
          height: 100%;
          margin-left: 70px; }
          #top_contents .top_right .my_data .week div hr {
            background: #f2f2f2;
            border-radius: 10px;
            height: 6px;
            border: none;
            display: block;
            margin: 0;
            position: relative;
            top: 50%;
            transform: translate(0, -50%); }
          #top_contents .top_right .my_data .week div button {
            width: 16px;
            height: 16px;
            border: solid 1px #b3b3b3;
            background: #fff;
            border-radius: 30px;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            left: 100%;
            margin-left: -8px; }
        #top_contents .top_right .my_data .week .yesterday {
          left: auto;
          right: 0; }
      #top_contents .top_right .my_data .d_before,
      #top_contents .top_right .my_data .last_month,
      #top_contents .top_right .my_data .bill {
        margin: 26px 0;
        position: relative; }
        #top_contents .top_right .my_data .d_before .tooltip,
        #top_contents .top_right .my_data .last_month .tooltip,
        #top_contents .top_right .my_data .bill .tooltip {
          position: absolute;
          background: #fff;
          top: -35px;
          left: -100vw;
          padding: 5px;
          border: solid 1px;
          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
          opacity: 0;
          transition: opacity .2s ease-out, transform .2s ease-out;
          transform: translate(0, 10px); }
          #top_contents .top_right .my_data .d_before .tooltip.show,
          #top_contents .top_right .my_data .last_month .tooltip.show,
          #top_contents .top_right .my_data .bill .tooltip.show {
            opacity: 1;
            left: auto;
            right: 0;
            transform: translate(0, 0); }
            #top_contents .top_right .my_data .d_before .tooltip.show.out,
            #top_contents .top_right .my_data .last_month .tooltip.show.out,
            #top_contents .top_right .my_data .bill .tooltip.show.out {
              opacity: 0; }
        #top_contents .top_right .my_data .d_before .right,
        #top_contents .top_right .my_data .last_month .right,
        #top_contents .top_right .my_data .bill .right {
          float: right; }
          #top_contents .top_right .my_data .d_before .right .figures,
          #top_contents .top_right .my_data .last_month .right .figures,
          #top_contents .top_right .my_data .bill .right .figures {
            border: 1px solid #fff;
            text-align: center;
            display: inline-block;
            position: relative;
            top: -8px;
            border-radius: 20px;
            font-weight: bold;
            height: 28px;
            line-height: 28px; }
            #top_contents .top_right .my_data .d_before .right .figures p,
            #top_contents .top_right .my_data .last_month .right .figures p,
            #top_contents .top_right .my_data .bill .right .figures p {
              display: inline-block; }
              #top_contents .top_right .my_data .d_before .right .figures p:after,
              #top_contents .top_right .my_data .last_month .right .figures p:after,
              #top_contents .top_right .my_data .bill .right .figures p:after {
                content: 'kWh';
                display: inline-block;
                margin-left: 0; }
            #top_contents .top_right .my_data .d_before .right .figures span,
            #top_contents .top_right .my_data .last_month .right .figures span,
            #top_contents .top_right .my_data .bill .right .figures span {
              display: inline-block;
              font-size: 13px;
              font-weight: 400;
              margin-left: 4px; }
          #top_contents .top_right .my_data .d_before .right button,
          #top_contents .top_right .my_data .last_month .right button,
          #top_contents .top_right .my_data .bill .right button {
            margin-left: 1px;
            border-radius: 30px;
            width: 16px;
            height: 16px;
            display: inline-block;
            background: none;
            outline: none;
            padding: 0;
            -webkit-appearance: none;
                    appearance: none;
            border: 1px solid #fff;
            color: #fff;
            line-height: 16px;
            position: relative;
            top: -9px; }
      #top_contents .top_right .my_data .d_before .figures {
        width: 190px; }
      #top_contents .top_right .my_data .last_month .figures,
      #top_contents .top_right .my_data .bill .figures {
        width: 245px; }
      #top_contents .top_right .my_data .bill .right .figures p:after {
        display: none; }
      #top_contents .top_right .my_data a {
        display: block;
        border-radius: 30px;
        text-align: center;
        line-height: 46px;
        width: 100%;
        height: 46px;
        background: #fff;
        font-size: 18px;
        font-weight: bold;
        position: relative; }
        #top_contents .top_right .my_data a:after {
          content: '';
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -50%);
          display: inline-block;
          vertical-align: middle;
          width: 0;
          height: 0;
          border-top: solid 4px transparent;
          border-right: solid 5px transparent;
          border-bottom: solid 4px transparent;
          border-left: solid 5px; }
        #top_contents .top_right .my_data a:hover {
          color: #fff !important; }
          #top_contents .top_right .my_data a:hover:after {
            border-left-color: #fff !important;
            right: 5px; }
    #top_contents .top_right .login {
      padding: 45px 0 20px;
      transition: all .4s ease-out;
      border-radius: 20px;
      width: 100%;
      background: rgba(255, 255, 255, 0.7); }
      #top_contents .top_right .login.remove {
        display: none; }
      #top_contents .top_right .login .login_title {
        font-size: 18px;
        color: #000;
        text-align: center;
        padding-bottom: 21px;
        font-weight: bold; }
      #top_contents .top_right .login form {
        padding: 0 15px; }
        #top_contents .top_right .login form input[type=text],
        #top_contents .top_right .login form input[type=password] {
          font-size: 18px;
          width: 100%;
          height: 40px;
          background: #fff;
          border: 1px solid #cccccc;
          border-radius: 3px;
          margin: 12px 0;
          padding-left: 5px; }
          #top_contents .top_right .login form input[type=text]:focus:-ms-input-placeholder, #top_contents .top_right .login form input[type=password]:focus:-ms-input-placeholder {
            opacity: 0; }
          #top_contents .top_right .login form input[type=text]:focus::placeholder,
          #top_contents .top_right .login form input[type=password]:focus::placeholder {
            opacity: 0; }
        #top_contents .top_right .login form p {
          position: relative;
          text-align: center; }
          #top_contents .top_right .login form p .message {
            position: absolute;
            top: -7px;
            left: 0;
            font-size: 11px;
            font-weight: bold;
            color: #fff;
            padding: 2px 5px;
            background: red;
            border-radius: 3px;
            transform: translate(0, 7px);
            opacity: 0; }
            #top_contents .top_right .login form p .message.show {
              transform: translate(0, 0);
              opacity: 1; }
        #top_contents .top_right .login form button {
          width: 100%;
          height: 40px;
          border-radius: 3px;
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%);
          border: none;
          position: relative; }
          #top_contents .top_right .login form button:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translate(0, -50%);
            display: block;
            width: 0;
            height: 0;
            border-top: solid 5px transparent;
            border-right: solid 6px transparent;
            border-bottom: solid 5px transparent;
            border-left: solid 6px #fff !important; }
          #top_contents .top_right .login form button:hover:after {
            transform: translate(5px, -50%); }
        #top_contents .top_right .login form label {
          display: inline-block;
          margin-top: 25px;
          cursor: pointer; }
          #top_contents .top_right .login form label input[type=checkbox],
          #top_contents .top_right .login form label p {
            display: inline-block;
            vertical-align: middle;
            color: #333;
            font-weight: bold; }
          #top_contents .top_right .login form label input[type=checkbox] {
            border: solid 1px #5eac86;
            width: 24px;
            height: 24px;
            background: none;
            -webkit-appearance: none;
                    appearance: none;
            margin-right: 10px; }
            #top_contents .top_right .login form label input[type=checkbox]:checked {
              background: no-repeat center/auto url(/assets/images/top/check.svg);
              background-color: #5eac86; }

@media all and (-ms-high-contrast: none) {
  #top_contents .top_right .d_before .right .figures,
  #top_contents .top_right .last_month .right .figures,
  #top_contents .top_right .bill .right .figures {
    margin-top: 0;
    position: relative;
    top: -10px; }
  #top_contents .top_right .d_before .right button,
  #top_contents .top_right .last_month .right button,
  #top_contents .top_right .bill .right button {
    font-size: 10px;
    top: -11px; } }

@keyframes support_icon1 {
  0% {
    opacity: 0; }
  49% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes support_icon2 {
  0% {
    opacity: 1; }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0; } }

/*
NEW
 */
#new {
  margin-top: 40px; }
  #new a {
    margin: 0 auto;
    width: 858px;
    height: 62px;
    display: block;
    border: 1px solid #cccccc;
    border-radius: 30px;
    line-height: 62px;
    font-size: 13px;
    padding: 0 30px; }
    #new a:before {
      content: 'NEW!';
      font-size: 26px;
      color: #b3b3b3;
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px; }
  #new p {
    display: inline-block;
    width: 720px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle; }
    #new p span {
      color: #999999;
      margin: 0 10px; }

/*
生産者
 */
#producer,
#consumer {
  position: relative; }
  #producer .pickup_wrap,
  #consumer .pickup_wrap {
    width: 960px;
    margin: 30px auto 35px;
    position: relative; }
    #producer .pickup_wrap.no_slide,
    #consumer .pickup_wrap.no_slide {
      padding-top: 60px; }
      #producer .pickup_wrap.no_slide button,
      #consumer .pickup_wrap.no_slide button {
        display: none; }
      #producer .pickup_wrap.no_slide .pickup_p a .pickup_text,
      #consumer .pickup_wrap.no_slide .pickup_p a .pickup_text {
        opacity: 1; }
    #producer .pickup_wrap button,
    #consumer .pickup_wrap button {
      position: absolute;
      top: 181px;
      transform: translate(0, -50%);
      border: none;
      background: none; }
      #producer .pickup_wrap button.prev,
      #consumer .pickup_wrap button.prev {
        left: -20px; }
        #producer .pickup_wrap button.prev:hover img,
        #consumer .pickup_wrap button.prev:hover img {
          transform: translate(-5px, 0); }
      #producer .pickup_wrap button.next,
      #consumer .pickup_wrap button.next {
        right: -20px; }
        #producer .pickup_wrap button.next:hover img,
        #consumer .pickup_wrap button.next:hover img {
          transform: translate(5px, 0); }
      #producer .pickup_wrap button img,
      #consumer .pickup_wrap button img {
        display: block; }
  #producer .pickup_p,
  #consumer .pickup_p {
    text-align: center;
    position: relative; }
    #producer .pickup_p a,
    #consumer .pickup_p a {
      display: inline-block;
      width: 300px;
      height: auto;
      color: #fff;
      margin: 0 10px;
      outline: none; }
      #producer .pickup_p a.slick-current .pickup_text, #producer .pickup_p a.other-current .pickup_text,
      #consumer .pickup_p a.slick-current .pickup_text,
      #consumer .pickup_p a.other-current .pickup_text {
        opacity: 1; }
      #producer .pickup_p a .pickup_image,
      #consumer .pickup_p a .pickup_image {
        display: flex;
        max-width: 100%;
        max-height: 168px;
        min-height: 168px;
        overflow: hidden;
        vertical-align: middle;
        background-color: #fff; }
        #producer .pickup_p a .pickup_image img,
        #consumer .pickup_p a .pickup_image img {
          width: 100%;
          object-fit: contain;
          transition: all .4s ease-in-out; }
      #producer .pickup_p a .pickup_text,
      #consumer .pickup_p a .pickup_text {
        text-align: left;
        margin-top: 12px; }
        #producer .pickup_p a .pickup_text .output_capacity,
        #consumer .pickup_p a .pickup_text .output_capacity {
          font-size: 18px;
          font-weight: bold;
          padding-top: 10px; }
          #producer .pickup_p a .pickup_text .output_capacity span,
          #consumer .pickup_p a .pickup_text .output_capacity span {
            font-size: 14px;
            font-weight: bold;
            margin-right: 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid #fff; }
        #producer .pickup_p a .pickup_text .address,
        #consumer .pickup_p a .pickup_text .address {
          font-size: 18px;
          font-weight: bold; }
          #producer .pickup_p a .pickup_text .address span,
          #consumer .pickup_p a .pickup_text .address span {
            display: block;
            font-size: 12px;
            line-height: 100%;
            color: #fff;
            background: #160403;
            border-radius: 10px 4px;
            padding: 6px 10px; }
        #producer .pickup_p a .pickup_text .company,
        #consumer .pickup_p a .pickup_text .company {
          font-size: 14px;
          padding-top: 10px;
          font-weight: bold; }
  #producer .summary,
  #consumer .summary {
    border-radius: 35px;
    background: #fff;
    width: 180px;
    height: 70px;
    display: block;
    font-weight: bold;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    bottom: 54px;
    z-index: 1;
    transform: translate(-50%, 0); }
    #producer .summary:hover,
    #consumer .summary:hover {
      transform: translate(-50%, 0) scale(1.05);
      color: #fff !important;
      border-color: #fff; }
      #producer .summary:hover .icn_t .svg_color *,
      #consumer .summary:hover .icn_t .svg_color * {
        stroke: #fff !important; }
    #producer .summary .icn_t,
    #consumer .summary .icn_t {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      #producer .summary .icn_t svg,
      #consumer .summary .icn_t svg {
        display: block;
        margin: 0 auto 20px; }

@media all and (-ms-high-contrast: none) {
  #producer .summary,
  #consumer .summary {
    bottom: -20px; } }

/*
バナー
 */
#banners {
  padding: 93px 0 176px;
  text-align: center; }
  #banners a {
    display: inline-block;
    width: 177px;
    height: auto;
    margin: 0 15px; }
    #banners a:hover {
      transform: scale(1.05); }
    #banners a img {
      display: block;
      width: 100%;
      height: auto; }

/*
tablet layout
 */
@media screen and (min-width: 768px) and (max-width: 960px) {
  #wrapper:before, #wrapper:after {
    display: none; }
  #use_30min {
    transform: translate(0, 0); }
    #use_30min.scroll {
      transform: translate(0, 0); }
  #top {
    height: auto; }
  #top_main {
    min-height: 800px;
    height: 100%; }
    #top_main .top_head .left {
      margin-left: 20px; }
    #top_main .top_head .right {
      float: right;
      margin-right: 180px;
      position: relative;
      top: 50%;
      transform: translate(0, -50%); }
      #top_main .top_head .right .hachibe {
        display: none;
        margin-top: -13px; }
        #top_main .top_head .right .hachibe.show {
          display: inline-block; }
  #top_contents {
    margin-top: 20px;
    flex-direction: column; }
    #top_contents .top_left {
      width: 100%;
      float: none;
      margin-top: 20px;
      margin-bottom: 80px;
      position: relative;
      font-size: 0;
      letter-spacing: 0;
      order: 1; }
      #top_contents .top_left .plant_area {
        top: 465px;
        width: 100%; }
      #top_contents .top_left .forecast {
        width: 43%;
        margin-left: 2%;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0; }
        #top_contents .top_left .forecast .electric {
          border-right: none;
          width: 40%; }
          #top_contents .top_left .forecast .electric .ele_date {
            font-size: 14px; }
            #top_contents .top_left .forecast .electric .ele_date span {
              font-size: 11px; }
          #top_contents .top_left .forecast .electric .asapM {
            font-size: 30px; }
            #top_contents .top_left .forecast .electric .asapM:after {
              font-size: 17px; }
        #top_contents .top_left .forecast .weather {
          width: 57%;
          font-size: 16px;
          border-left: solid 1px #fff; }
          #top_contents .top_left .forecast .weather img {
            right: 5px; }
      #top_contents .top_left .support {
        margin-top: 0;
        position: unset; }
    #top_contents .top_right {
      float: none;
      width: 100%;
      order: 0; }
      #top_contents .top_right .my_data .kwh .asapM {
        padding-top: 0; }
  #new {
    padding: 0 20px; }
    #new a {
      width: 100%; }
    #new p {
      width: calc(100vw - 40px - 130px); }
  #producer .pickup_wrap {
    width: auto;
    padding: 0 20px; }
    #producer .pickup_wrap button {
      display: none !important; }
  #producer .pickup_p a {
    width: 300px; }
    #producer .pickup_p a.slick-current .pickup_text, #producer .pickup_p a.other-current .pickup_text {
      opacity: 1; }
    #producer .pickup_p a .pickup_text {
      opacity: 0; }
  #banners a {
    display: inline-block;
    width: 170px;
    height: auto;
    margin: 0 8px; }
    #banners a:nth-of-type(1) {
      margin: 0 8px 0 0; }
    #banners a:nth-of-type(4) {
      margin: 0 0 0 8px; } }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #top_main .top_head .right {
    position: absolute;
    top: 90px;
    right: 20px;
    margin-right: unset;
    transform: unset; }
    #top_main .top_head .right .hachibe-icon {
      width: 37px; }
      #top_main .top_head .right .hachibe-icon img {
        margin-top: 0; } }

@media screen and (min-width: 768px) and (max-width: 1150px) {
  #top_main .top_head .right .message {
    width: 200px; } }

/*
SP layout
 */
@media screen and (max-width: 767px) {
  #wrapper:before, #wrapper:after {
    display: none; }
  #wrapper.login #top_contents .top_right .my_data {
    transform: translate(0, -50%) scale(1);
    z-index: 1; }
  #wrapper.login #top_contents .top_right .login {
    transform: translate(0, -50%) scale(0.5);
    z-index: 0; }
  /*
    スペシャルコンテンツ タブ
     */
  #sp_con {
    width: 260px;
    height: 152px;
    top: 235px;
    transform: translate(225px, 0); }
    #sp_con.open .sp_left button:before {
      transform: translate(5px, -50%) rotate(180deg); }
    #sp_con.open .sp_left button:hover:before {
      transform: translate(5px, -50%) rotate(180deg); }
    #sp_con svg {
      display: none; }
    #sp_con .sp_left {
      width: 36px;
      border-right: none;
      border-radius: 6px 0 0 6px; }
      #sp_con .sp_left button {
        border-radius: 6px 0 0 6px; }
        #sp_con .sp_left button:before {
          border-top: solid 4px transparent;
          border-left: solid 4px transparent;
          border-bottom: solid 4px transparent;
          border-right: solid 5px	#fff;
          left: 0; }
        #sp_con .sp_left button:hover:before {
          left: 0; }
      #sp_con .sp_left .sp_title {
        font-size: 12px;
        padding-left: 7px; }
    #sp_con a {
      width: 225px;
      border-width: 6px; }
      #sp_con a .sp_text {
        left: 15px;
        font-size: 15px;
        line-height: 1.5; }
        #sp_con a .sp_text .val {
          font-size: 12px; }
        #sp_con a .sp_text span {
          font-size: 12px; }
  #use_30min.fix {
    bottom: 0; }
  /*
    top area
     */
  #top {
    height: auto;
    min-height: 0;
    border-top: none;
    position: relative; }
    #top .top_bottom {
      position: absolute;
      top: 120px;
      left: 0;
      width: 100%;
      height: 78px;
      z-index: 50;
      padding: 0 12px;
      background: #fff;
      transform: unset; }
      #top .top_bottom:before {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle; }
      #top .top_bottom button {
        font-size: 12px;
        width: calc(100% / 3);
        height: 45px;
        position: relative; }
        #top .top_bottom button span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          line-height: 1.2;
          width: 100%; }
        #top .top_bottom button::after {
          display: none; }
        #top .top_bottom button:hover:before {
          animation: active_buttonSP 2s infinite; }
  #top_main {
    min-height: 0;
    height: auto;
    -webkit-clip-path: none;
            clip-path: none;
    padding-top: 160px; }
    #top_main .top_head {
      height: 120px;
      position: absolute;
      top: 0;
      left: 0;
      box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2); }
      #top_main .top_head .left {
        float: none;
        margin: 0;
        height: 60px;
        position: relative;
        top: 60px;
        transform: translate(0, 0); }
        #top_main .top_head .left .logo {
          width: 112px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
        #top_main .top_head .left .member {
          margin-left: 0;
          position: absolute;
          top: 50%;
          left: 12px;
          transform: translate(0, -50%); }
          #top_main .top_head .left .member .photo_img {
            width: 40px;
            height: 40px; }
          #top_main .top_head .left .member .member_name {
            top: 0; }
      #top_main .top_head .right {
        float: none;
        margin-right: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        transform: translate(0, 0);
        border-bottom: solid 1px #fff;
        padding: 0 0 0 12px; }
        #top_main .top_head .right:before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 0;
          height: 100%; }
        #top_main .top_head .right .hachibe-icon {
          width: 30px; }
        #top_main .top_head .right .hachibe {
          margin-top: 0;
          vertical-align: middle; }
          #top_main .top_head .right .hachibe.show {
            display: inline-block; }
        #top_main .top_head .right .message {
          width: calc(100% - 40px);
          vertical-align: middle;
          height: 30px;
          border-radius: 4px;
          margin-left: 10px;
          top: auto; }
          #top_main .top_head .right .message:after {
            display: none; }
          #top_main .top_head .right .message ul li {
            line-height: 42px;
            font-size: 15px; }
  #top_contents {
    position: relative;
    z-index: 1;
    margin-top: 78px;
    flex-wrap: wrap;
    padding: 0; }
    #top_contents .top_left {
      width: 100%;
      order: 2;
      padding: 20px;
      background: unset !important; }
      #top_contents .top_left .plant_area {
        top: 35px;
        left: 12px;
        width: calc(100vw - 24px); }
      #top_contents .top_left .date {
        font-size: 12px;
        line-height: 1; }
      #top_contents .top_left .pp_support {
        font-size: 16px;
        margin-top: 5px; }
        #top_contents .top_left .pp_support:hover:after {
          margin-left: 5px; }
        #top_contents .top_left .pp_support:after {
          content: '';
          display: inline-block;
          margin-left: 5px;
          vertical-align: middle;
          width: 0;
          height: 0;
          border-top: solid 4px transparent;
          border-right: solid 5px transparent;
          border-bottom: solid 4px transparent;
          border-left: solid 5px #fff;
          position: relative;
          top: -2px; }
      #top_contents .top_left .power_plant {
        margin: 10px 0; }
        #top_contents .top_left .power_plant p {
          font-size: 12px; }
        #top_contents .top_left .power_plant .name {
          font-size: 16px;
          margin: 5px 0; }
          #top_contents .top_left .power_plant .name.small {
            font-size: 16px; }
        #top_contents .top_left .power_plant .company {
          display: block;
          margin-bottom: 5px;
          width: auto; }
        #top_contents .top_left .power_plant .ranking {
          position: static;
          bottom: auto;
          font-size: 15px;
          border-radius: 20px;
          display: inline-block;
          width: auto;
          padding: 0 30px; }
      #top_contents .top_left .forecast {
        font-size: 14px;
        width: 266px; }
        #top_contents .top_left .forecast .electric {
          padding: 7px 24px 7px 10px;
          width: auto;
          height: 70px;
          vertical-align: top; }
          #top_contents .top_left .forecast .electric .ele_date {
            font-size: 12px;
            line-height: 1; }
          #top_contents .top_left .forecast .electric .asapM {
            font-size: 27px; }
            #top_contents .top_left .forecast .electric .asapM:after {
              font-size: 15px; }
        #top_contents .top_left .forecast .weather {
          font-size: 14px;
          width: auto;
          padding: 4px 7px;
          vertical-align: top; }
          #top_contents .top_left .forecast .weather .W_location {
            font-size: 12px;
            margin-top: 3px;
            line-height: 1; }
          #top_contents .top_left .forecast .weather a {
            line-height: 15px;
            width: 71px;
            height: 15px;
            margin-top: 5px; }
          #top_contents .top_left .forecast .weather img {
            top: 50%;
            right: -42px;
            width: 42px;
            height: auto;
            transform: translate(0, -50%); }
      #top_contents .top_left .support {
        margin-top: 235px; }
        #top_contents .top_left .support .history {
          font-size: 13px;
          width: 140px;
          height: 45px;
          line-height: 45px; }
        #top_contents .top_left .support .about_support {
          margin-left: 15px;
          font-size: 12px;
          width: 105px;
          height: 45px;
          line-height: 45px; }
    #top_contents .top_right {
      display: block;
      font-size: 14px;
      width: 100%;
      padding: 40px 20px 20px;
      order: 1; }
      #top_contents .top_right .my_data {
        top: 50%;
        right: 12px;
        width: 100%;
        transform: translate(0, -50%) scale(0.5);
        z-index: 0; }
        #top_contents .top_right .my_data .right_title {
          font-size: 14px;
          margin-bottom: 15px; }
        #top_contents .top_right .my_data .kwh {
          width: auto;
          height: auto;
          margin-bottom: 15px;
          text-align: center; }
          #top_contents .top_right .my_data .kwh .date {
            position: static;
            bottom: auto;
            font-size: 14px;
            text-align: left; }
            #top_contents .top_right .my_data .kwh .date span {
              font-size: 14px; }
          #top_contents .top_right .my_data .kwh .asapM {
            float: none; }
            #top_contents .top_right .my_data .kwh .asapM:after {
              font-size: 30px; }
        #top_contents .top_right .my_data .week {
          width: auto;
          height: auto;
          margin-bottom: 30px; }
          #top_contents .top_right .my_data .week p {
            font-size: 12px;
            top: 0;
            left: 0;
            transform: translate(0, 0); }
          #top_contents .top_right .my_data .week div {
            width: 100%;
            margin-left: 0;
            top: 20px; }
            #top_contents .top_right .my_data .week div hr {
              top: 0;
              transform: translate(0, 0); }
            #top_contents .top_right .my_data .week div button {
              width: 16px;
              height: 16px;
              border: solid 1px #b3b3b3;
              background: #fff;
              border-radius: 30px;
              position: absolute;
              top: 50%;
              transform: translate(0, -50%);
              left: 100%;
              margin-left: -8px; }
          #top_contents .top_right .my_data .week .yesterday {
            left: auto;
            right: 0; }
        #top_contents .top_right .my_data .d_before,
        #top_contents .top_right .my_data .last_month,
        #top_contents .top_right .my_data .bill {
          margin: 10px 0 0;
          font-size: 12px; }
          #top_contents .top_right .my_data .d_before .tooltip,
          #top_contents .top_right .my_data .last_month .tooltip,
          #top_contents .top_right .my_data .bill .tooltip {
            top: -15px; }
          #top_contents .top_right .my_data .d_before .right,
          #top_contents .top_right .my_data .last_month .right,
          #top_contents .top_right .my_data .bill .right {
            float: none;
            margin-top: 5px;
            position: relative; }
            #top_contents .top_right .my_data .d_before .right .figures,
            #top_contents .top_right .my_data .last_month .right .figures,
            #top_contents .top_right .my_data .bill .right .figures {
              width: 100%;
              display: block;
              top: auto;
              border-radius: 20px;
              padding: 0;
              height: 25px;
              line-height: 25px;
              background: #fff;
              color: #000; }
            #top_contents .top_right .my_data .d_before .right button,
            #top_contents .top_right .my_data .last_month .right button,
            #top_contents .top_right .my_data .bill .right button {
              margin-left: 0;
              width: 20px;
              height: 20px;
              display: block;
              line-height: 20px;
              position: absolute;
              right: 0;
              top: 0; }
        #top_contents .top_right .my_data .d_before .figures {
          width: 190px; }
        #top_contents .top_right .my_data .last_month .figures,
        #top_contents .top_right .my_data .bill .figures {
          width: 245px; }
        #top_contents .top_right .my_data .bill .right .figures p:after {
          display: none; }
        #top_contents .top_right .my_data a {
          display: block;
          margin: 20px auto 0;
          border: solid 1px transparent; }
          #top_contents .top_right .my_data a:hover {
            border-color: #fff; }
      #top_contents .top_right .login {
        z-index: 1;
        padding: 20px; }
        #top_contents .top_right .login .login_title {
          font-size: 18px;
          text-align: center;
          padding-bottom: 21px;
          font-weight: bold; }
        #top_contents .top_right .login form {
          padding: 0; }
          #top_contents .top_right .login form input[type=text],
          #top_contents .top_right .login form input[type=password] {
            font-size: 18px;
            width: 100%;
            height: 40px;
            background: rgba(249, 249, 249, 0.9);
            border: 1px solid #cccccc;
            border-radius: 3px;
            margin: 12px 0;
            padding-left: 5px; }
            #top_contents .top_right .login form input[type=text]:focus:-ms-input-placeholder, #top_contents .top_right .login form input[type=password]:focus:-ms-input-placeholder {
              opacity: 0; }
            #top_contents .top_right .login form input[type=text]:focus::placeholder,
            #top_contents .top_right .login form input[type=password]:focus::placeholder {
              opacity: 0; }
          #top_contents .top_right .login form button {
            border-radius: 3px;
            font-size: 14px;
            font-weight: bold;
            border: none;
            position: relative; }
            #top_contents .top_right .login form button:after {
              content: '';
              position: absolute;
              top: 50%;
              right: 15px;
              transform: translate(0, -50%);
              display: block;
              width: 0;
              height: 0;
              border-top: solid 5px transparent;
              border-right: solid 6px transparent;
              border-bottom: solid 5px transparent;
              border-left: solid 6px; }
            #top_contents .top_right .login form button:hover:after {
              transform: translate(5px, -50%); }
          #top_contents .top_right .login form label {
            display: block;
            margin-top: 25px;
            cursor: pointer; }
            #top_contents .top_right .login form label input[type=checkbox],
            #top_contents .top_right .login form label p {
              display: inline-block;
              vertical-align: middle; }
            #top_contents .top_right .login form label input[type=checkbox] {
              width: 24px;
              height: 24px;
              background: none;
              -webkit-appearance: none;
                      appearance: none;
              margin-right: 10px; }
  /*
    NEW
     */
  #new {
    margin-top: 0;
    position: absolute;
    top: 578px;
    left: 0;
    width: 100%;
    height: 107px;
    padding: 21px 12px 0;
    background: #fff; }
    #new a {
      margin: 0 auto;
      width: auto;
      height: 65px;
      border-radius: 100px;
      font-size: 12px;
      padding: 5px 17px 0;
      line-height: 1; }
      #new a:before {
        font-size: 15px;
        display: block;
        text-align: center;
        margin: 0; }
    #new p {
      display: block;
      width: auto;
      text-overflow: inherit;
      white-space: normal;
      line-height: 1.5;
      height: 3em; }
      #new p span {
        color: #999999;
        margin: 0 10px; }
  /*
    今月のピックアップ生産者
     */
  #producer,
  #consumer {
    width: auto; }
    #producer h2,
    #consumer h2 {
      font-size: 24px;
      padding: 35px 0 10px; }
      #producer h2 img,
      #consumer h2 img {
        width: 77px;
        padding-bottom: 10px; }
    #producer .pickup_wrap,
    #consumer .pickup_wrap {
      width: auto;
      padding: 0 12px;
      margin: 0 auto;
      overflow: hidden; }
      #producer .pickup_wrap.no_slide,
      #consumer .pickup_wrap.no_slide {
        padding-top: 60px; }
        #producer .pickup_wrap.no_slide button,
        #consumer .pickup_wrap.no_slide button {
          display: none; }
        #producer .pickup_wrap.no_slide .pickup_p a .pickup_text,
        #consumer .pickup_wrap.no_slide .pickup_p a .pickup_text {
          opacity: 1; }
      #producer .pickup_wrap button,
      #consumer .pickup_wrap button {
        display: none; }
    #producer .pickup_p,
    #consumer .pickup_p {
      font-size: 0;
      letter-spacing: 0; }
      #producer .pickup_p .slick-track,
      #consumer .pickup_p .slick-track {
        padding-top: 60px; }
      #producer .pickup_p a,
      #consumer .pickup_p a {
        width: calc((100vw - 24px)/2);
        margin: 0; }
        #producer .pickup_p a img,
        #consumer .pickup_p a img {
          margin-bottom: 45px; }
        #producer .pickup_p a .pickup_text,
        #consumer .pickup_p a .pickup_text {
          padding: 0;
          opacity: 0;
          width: 150%;
          position: relative;
          left: -25%; }
          #producer .pickup_p a .pickup_text .output_capacity,
          #consumer .pickup_p a .pickup_text .output_capacity {
            font-size: 25px; }
            #producer .pickup_p a .pickup_text .output_capacity span,
            #consumer .pickup_p a .pickup_text .output_capacity span {
              font-size: 12px;
              margin-right: 6px;
              border-bottom: none; }
          #producer .pickup_p a .pickup_text .address,
          #consumer .pickup_p a .pickup_text .address {
            font-size: 14px;
            padding-top: 5px;
            line-height: 1.5; }
            #producer .pickup_p a .pickup_text .address span,
            #consumer .pickup_p a .pickup_text .address span {
              display: block;
              font-size: 12px; }
          #producer .pickup_p a .pickup_text .company,
          #consumer .pickup_p a .pickup_text .company {
            font-size: 12px;
            padding-top: 3px; }
    #producer .summary,
    #consumer .summary {
      font-size: 15px;
      bottom: 20px; }
      #producer .summary .icn_t svg,
      #consumer .summary .icn_t svg {
        margin: 0 auto 10px; }
  /*
    バナー
     */
  #banners {
    padding: 60px 20px 0;
    font-size: 0;
    letter-spacing: 0; }
    #banners a {
      width: calc(50% - 13px);
      margin: 26px 0 0 26px; }
      #banners a:nth-of-type(odd) {
        margin-left: 0; }
      #banners a:nth-of-type(-n + 2) {
        margin-top: 0; }
  @-moz-document url-prefix() {
    #top_main .top_head .right .message {
      width: calc(100vw - 12px - 12px - 40px - 17px); } }
  @supports (-ms-ime-align: auto) {
    #top_main .top_head .right .message {
      width: calc(100vw - 12px - 12px - 40px - 17px); } } }

@media screen and (orientation: landscape) and (max-width: 767px) {
  #top_main {
    background-size: 100% auto; }
  #sp_con {
    top: 190px; } }

@media all and (-ms-high-contrast: none) and (max-width: 767px) {
  #top_main .top_head .right .message {
    width: calc(100vw - 12px - 12px - 40px - 17px); } }

@keyframes active_buttonSP {
  0% {
    filter: blur(3px); }
  60% {
    opacity: 0;
    transform: scale(1.3, 2); }
  100% {
    opacity: 0; } }

.react-datepicker__navigation {
  top: 10px; }

#contract .wrap {
  width: 720px;
  margin: 20px auto 0; }

#contract .message {
  text-align: center;
  font-weight: bold;
  font-size: 14px; }

#contract .text {
  padding: 20px;
  background: #F2F2F2;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 35px; }

#contract .number {
  font-size: 15px;
  border-bottom: solid 1px #CDCDCD;
  margin: 35px 0 15px;
  padding-bottom: 10px; }
  #contract .number:before {
    content: '供給地点番号';
    font-weight: bold;
    margin-right: 10px; }

#contract fieldset label,
#contract fieldset .label {
  height: auto; }
  #contract fieldset label dl,
  #contract fieldset .label dl {
    display: table; }
    #contract fieldset label dl dt,
    #contract fieldset .label dl dt {
      width: 200px;
      display: table-cell; }
      #contract fieldset label dl dt.required:after,
      #contract fieldset .label dl dt.required:after {
        top: 20px;
        transform: translate(0, 0); }
    #contract fieldset label dl dd,
    #contract fieldset .label dl dd {
      width: 518px;
      display: table-cell;
      line-height: 1.3;
      padding-bottom: 10px; }
      #contract fieldset label dl dd img,
      #contract fieldset .label dl dd img {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 5px;
        cursor: pointer; }
      #contract fieldset label dl dd .note,
      #contract fieldset .label dl dd .note {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 5px; }

#contract .list {
  margin-top: 35px; }
  #contract .list .horizon .text {
    margin-top: 0;
    background: #fff;
    font-size: 15px; }
    #contract .list .horizon .text strong {
      font-weight: bold;
      font-size: 15px; }
      #contract .list .horizon .text strong p {
        display: block;
        font-size: 18px; }
  #contract .list .title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px; }

@media screen and (max-width: 767px) {
  html {
    background: #f5f5f5;
    height: 100%; }
  #contract .wrap {
    width: auto;
    margin: 20px auto 0; }
  #contract main {
    background: none; }
  #contract .message {
    padding: 0 15px;
    line-height: 1.3; }
  #contract .text {
    padding: 15px;
    background: #E7E7E7;
    font-size: 13px;
    margin-top: 15px; }
  #contract form {
    padding: 0 15px; }
  #contract .number {
    font-size: 13px;
    padding-bottom: 5px; }
  #contract fieldset label dl,
  #contract fieldset .label dl {
    display: block; }
    #contract fieldset label dl dt,
    #contract fieldset .label dl dt {
      width: 100%;
      display: block;
      background: #E7E7E7; }
      #contract fieldset label dl dt.required:after,
      #contract fieldset .label dl dt.required:after {
        top: 50%;
        transform: translate(0, -50%); }
    #contract fieldset label dl dd,
    #contract fieldset .label dl dd {
      width: auto;
      display: block;
      padding: 10px;
      background: #fff; }
      #contract fieldset label dl dd .datepick,
      #contract fieldset .label dl dd .datepick {
        width: 200px; }
  #contract .list {
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px; }
    #contract .list .horizon .text {
      font-size: 12px; }
      #contract .list .horizon .text strong {
        font-size: 14px; }
        #contract .list .horizon .text strong p {
          font-size: 16px; }
    #contract .list dl {
      background: #fff; }
      #contract .list dl dt {
        background: #E7E7E7; }
  #contract .done {
    padding-left: 15px;
    padding-right: 15px; } }

#use_30min {
  transform: translate(0, 70px); }

#detailed .b_detailed {
  text-align: center; }
  #detailed .b_detailed button {
    width: 245px;
    height: 50px;
    background: #CDCDCD;
    color: #818181;
    font-size: 16px;
    font-weight: bold;
    border: none;
    margin: 0 4px;
    border-radius: 3px;
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2); }
    #detailed .b_detailed button.active {
      background: #FFB13D;
      color: #fff; }

#detailed .tab_contents {
  display: none; }
  #detailed .tab_contents.show {
    display: block; }

#detailed .detailed_frame {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  padding: 10px 0 150px; }
  #detailed .detailed_frame .detailed_contents {
    position: relative; }
    #detailed .detailed_frame .detailed_contents .statement h2,
    #detailed .detailed_frame .detailed_contents .electricity_usage h2,
    #detailed .detailed_frame .detailed_contents .usage_stats h2 {
      padding: 40px 0 0 13px;
      font-size: 20px;
      font-weight: bold;
      position: relative; }
      #detailed .detailed_frame .detailed_contents .statement h2:before,
      #detailed .detailed_frame .detailed_contents .electricity_usage h2:before,
      #detailed .detailed_frame .detailed_contents .usage_stats h2:before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 65%;
        background: #cccccc;
        position: absolute;
        top: 0;
        left: 0; }
      #detailed .detailed_frame .detailed_contents .statement h2:after,
      #detailed .detailed_frame .detailed_contents .electricity_usage h2:after,
      #detailed .detailed_frame .detailed_contents .usage_stats h2:after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 35%;
        background: #3b42ea;
        position: absolute;
        top: 65%;
        left: 0; }
    #detailed .detailed_frame .detailed_contents .statement {
      background: #f9f9f9;
      width: 720px;
      margin: 30px auto 0;
      text-align: left;
      padding: 0 30px 40px;
      font-size: 0; }
      #detailed .detailed_frame .detailed_contents .statement .month {
        width: 312px;
        height: 60px;
        background: #3b42ea;
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        line-height: 60px;
        padding-left: 20px;
        margin: 25px 0 30px;
        position: relative; }
        #detailed .detailed_frame .detailed_contents .statement .month p {
          display: inline-block; }
        #detailed .detailed_frame .detailed_contents .statement .month select {
          display: inline-block;
          width: 182px;
          height: 40px;
          background: #fff;
          font-size: 15px;
          text-align: left;
          padding: 0 15px;
          margin-left: 10px;
          border: none; }
        #detailed .detailed_frame .detailed_contents .statement .month .md-month-text {
          position: absolute;
          left: 0;
          bottom: -20px;
          color: #000;
          font-size: 12px;
          font-weight: normal;
          line-height: normal;
          display: inline-block; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents {
        background: #fff;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding: 20px;
        margin-top: 25px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .list p {
          font-size: 20px;
          padding-bottom: 8px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .list table {
          font-size: 15px;
          width: 100%; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr {
            height: 40px;
            border: #cccccc solid 1px; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr th {
              height: 40px;
              font-weight: bold;
              background: #999999;
              display: block;
              line-height: 40px;
              color: #fff;
              padding-left: 15px; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr td {
              padding-left: 15px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .list table .t_a_b {
            height: 50px;
            font-size: 15px;
            width: auto; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table .t_a_b th {
              height: 50px;
              line-height: 50px;
              background: #3b42ea; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table .t_a_b td {
              vertical-align: middle;
              font-size: 24px;
              font-weight: bold; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown {
          margin-top: 18px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr th {
            width: 360px;
            padding-left: 15px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr td {
            width: 260px;
            padding-left: 15px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .discountMessage {
          font-size: 14px;
          font-weight: bold;
          background: #bb0001;
          text-align: center;
          color: #fff;
          padding: 10px;
          line-height: 1.5;
          margin-top: 18px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr th {
          width: 160px;
          padding-left: 15px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr td {
          width: 460px;
          padding-left: 15px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table .cose {
          vertical-align: middle;
          height: 60px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table .cose th {
            line-height: 60px;
            height: 60px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table .cose td {
            vertical-align: middle; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .notice p {
          font-size: 20px;
          margin: -15px 0 8px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .notice .text {
          font-size: 15px;
          line-height: 22px;
          border: 1px solid #cccccc;
          padding: 18px; }
    #detailed .detailed_frame .detailed_contents .electricity_usage {
      background: #f9f9f9;
      width: 720px;
      margin: 30px auto 0;
      text-align: left;
      padding: 0 30px 80px;
      font-size: 0; }
      #detailed .detailed_frame .detailed_contents .electricity_usage table {
        font-size: 15px;
        width: 100%;
        margin-top: 25px;
        text-align: center;
        position: relative; }
        #detailed .detailed_frame .detailed_contents .electricity_usage table tr {
          border-top: none;
          border-bottom: solid 1px #ccc; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr:nth-last-of-type(1) td:nth-of-type(1):before, #detailed .detailed_frame .detailed_contents .electricity_usage table tr:nth-last-of-type(1) td:nth-last-of-type(1):before {
            display: none; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr th {
            position: relative;
            z-index: 5;
            height: 44px;
            line-height: 44px;
            color: #fff;
            background: #333333;
            border: solid 1px #333; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr td {
            height: 60px;
            line-height: 60px;
            position: relative;
            background: #fff; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-of-type(1) {
              border-left: solid 1px #ccc; }
              #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-of-type(1):before {
                content: '';
                position: absolute;
                width: 18px;
                height: 1px;
                left: 0;
                bottom: -1px;
                background: #f9f9f9; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-last-of-type(1) {
              border-right: solid 1px #ccc; }
              #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-last-of-type(1):before {
                content: '';
                position: absolute;
                width: 18px;
                height: 1px;
                right: 0;
                bottom: -1px;
                background: #f9f9f9; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .month {
            font-weight: bold; }
      #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button {
        float: right; }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a {
          width: 160px;
          height: 30px;
          border-radius: 20px;
          line-height: 30px;
          text-align: center;
          color: #808080;
          font-size: 15px;
          background: #fff;
          border: 1px solid #b3b3b3;
          display: inline-block;
          position: relative;
          margin: 18px 0 0 15px; }
          #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a:after {
            content: '';
            transition: all .2s ease-out;
            position: absolute;
            top: 8px;
            left: 10px;
            display: inline-block;
            margin-left: 9px;
            width: 10px;
            height: 10px;
            border: 1px solid;
            border-color: transparent transparent #565656 #565656;
            transform: rotate(45deg); }
          #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a:hover:after {
            left: 6px; }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right:after {
          content: '';
          transition: all .2s ease-out;
          position: absolute;
          top: 8px;
          left: 119px;
          display: inline-block;
          margin-left: 9px;
          width: 10px;
          height: 10px;
          border: 1px solid;
          border-color: transparent transparent #565656 #565656;
          transform: rotate(225deg); }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right:hover:after {
          left: 122px; }
    #detailed .detailed_frame .detailed_contents .usage_stats {
      background: #f9f9f9;
      width: 720px;
      margin: 30px auto 0;
      text-align: left;
      padding: 0 30px 30px;
      font-size: 0;
      position: relative; }
      #detailed .detailed_frame .detailed_contents .usage_stats .tab {
        float: right;
        display: inline-block;
        position: absolute;
        top: 30px;
        right: 30px; }
        #detailed .detailed_frame .detailed_contents .usage_stats .tab button {
          border: none;
          background: #CDCDCD;
          width: 160px;
          height: 32px;
          color: #818181;
          font-size: 14px;
          font-weight: bold;
          position: relative; }
          #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active {
            background: #000;
            color: #fff; }
            #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
              content: '';
              position: absolute;
              top: 32px;
              left: 50%;
              transform: translate(-50%, 0);
              display: block;
              width: 0;
              height: 0;
              border-top: 10px solid #000;
              border-right: 10px solid transparent;
              border-left: 10px solid transparent; }
      #detailed .detailed_frame .detailed_contents .usage_stats .graph {
        width: 660px;
        border: 1px solid #cccccc;
        background: #fff;
        margin-top: 23px;
        font-size: 0;
        padding: 0 45px 20px;
        display: none; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph.show {
          display: block; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .yoy {
          text-align: right;
          font-size: 12px;
          line-height: 1.5;
          visibility: hidden; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .yoy.show {
            visibility: visible; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .yoy p:nth-of-type(1):before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 12px;
            background: #C5C8F9;
            margin-right: 3px;
            position: relative;
            top: 1px; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area {
          position: relative; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button {
            position: absolute;
            width: 30px;
            border: none;
            background: none;
            margin: -15px 0 0;
            top: 50%;
            transform: translate(0, -50%); }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button.prev {
              left: -30px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button.prev:hover img {
                left: -5px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button.next {
              right: -30px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button.next:hover img {
                left: 5px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart_area button img {
              display: block;
              width: 100%;
              height: auto;
              position: relative;
              left: 0; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart {
          height: 300px;
          padding-bottom: 10px;
          overflow: scroll;
          -webkit-overflow-scrolling: touch; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart .chart_block {
            width: 100%;
            height: 100%; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart .chart_block.wide {
              width: 200%; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart canvas {
            width: 100%;
            height: 100%; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top {
          font-size: 14px;
          text-align: right;
          margin: 20px 0 0;
          position: relative;
          z-index: 10; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1,
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 {
            display: inline-block; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown1 .list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown1 .list {
              width: 130px;
              position: relative;
              z-index: 1; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown2 .list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown2 .list {
              width: 75px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown2 .list:nth-of-type(1),
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown2 .list:nth-of-type(1) {
                width: 100px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .label,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .label {
              display: inline-block;
              font-weight: bold;
              vertical-align: top; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .list {
              display: inline-block;
              vertical-align: top;
              margin-left: 10px;
              transform: translate(0, -25%);
              cursor: pointer;
              position: relative;
              background: #fff; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .list.disable,
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .list.disable {
                opacity: .3;
                cursor: default; }
                #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .list.disable select,
                #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .list.disable select {
                  cursor: default;
                  pointer-events: none; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .list select,
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .list select {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                -webkit-appearance: none;
                        appearance: none;
                border-radius: 0;
                border: none;
                opacity: 0;
                font-size: 13px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .selected,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .selected {
              border: 1px solid #000;
              padding: 0 10px;
              height: 30px;
              display: block;
              font-weight: 400;
              line-height: 30px;
              text-align: left;
              position: relative;
              padding-right: 30px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .selected:after,
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .selected:after {
                content: '';
                position: absolute;
                right: 10px;
                top: 50%;
                width: 5px;
                height: 5px;
                border: 1px solid;
                border-color: transparent transparent #565656 #565656;
                transform: translate(0, -80%) rotate(-45deg); }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .hide,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .hide {
              height: 0;
              overflow: hidden;
              transition: height .4s ease-out;
              position: absolute;
              left: 0;
              top: 30px;
              width: 100%; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 ul li,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 ul li {
              border: 1px solid #000;
              border-top: none;
              padding: 0 10px;
              line-height: 30px;
              height: 30px;
              display: block;
              font-weight: 400;
              text-align: left;
              background: #fff; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 ul li:hover,
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 ul li:hover {
                background: #CDCDCD; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 {
            margin-left: 20px; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #use_30min {
    transform: translate(0, 0); }
    #use_30min.scroll {
      transform: translate(0, 0); } }

@media screen and (max-width: 767px) {
  #use_30min {
    transform: translate(0, 0); }
    #use_30min.scroll {
      transform: translate(0, 0); }
  #detailed .b_detailed {
    padding: 25px 10px 0; }
    #detailed .b_detailed button {
      width: 32%;
      height: 80px;
      font-size: 16px;
      font-weight: bold;
      border: none;
      margin: 0;
      border-radius: 3px;
      box-shadow: none; }
      #detailed .b_detailed button:nth-of-type(2) {
        margin: 0 2%; }
      #detailed .b_detailed button.active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
  #detailed .detailed_frame {
    width: 100%;
    background: #fff;
    margin-top: 0;
    padding: 0; }
    #detailed .detailed_frame .detailed_contents .statement h2,
    #detailed .detailed_frame .detailed_contents .electricity_usage h2,
    #detailed .detailed_frame .detailed_contents .usage_stats h2 {
      padding: 0 10px;
      font-size: 18px; }
      #detailed .detailed_frame .detailed_contents .statement h2:before,
      #detailed .detailed_frame .detailed_contents .electricity_usage h2:before,
      #detailed .detailed_frame .detailed_contents .usage_stats h2:before {
        content: '';
        display: none; }
      #detailed .detailed_frame .detailed_contents .statement h2:after,
      #detailed .detailed_frame .detailed_contents .electricity_usage h2:after,
      #detailed .detailed_frame .detailed_contents .usage_stats h2:after {
        content: '';
        display: none; }
    #detailed .detailed_frame .detailed_contents .statement {
      background: #f9f9f9;
      width: 100%;
      margin: 20px auto 0;
      padding: 0 0 40px; }
      #detailed .detailed_frame .detailed_contents .statement .month {
        width: calc(100% - 20px);
        padding: 0 10px;
        box-sizing: border-box;
        margin: 17px auto 30px; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents {
        width: 100%;
        background: #fff;
        border: 1px solid #cccccc;
        border-radius: 0;
        padding: 15px 10px;
        margin-top: 0;
        margin-bottom: 20px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .list p {
          font-size: 15px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .list table {
          font-size: 13px;
          width: 100%; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr {
            height: 30px;
            border: #cccccc solid 1px; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr th {
              width: 130px;
              height: 30px;
              font-weight: 400;
              line-height: 30px;
              padding-left: 10px; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr td {
              padding-left: 0;
              font-size: 12px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .list table .t_a_b td {
            font-size: 18px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown {
          width: 100%;
          margin-top: 13px;
          height: auto;
          padding: 3px 0;
          line-height: 20px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table {
            text-align: center; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr th {
              width: 100%;
              padding-left: 0;
              display: block; }
            #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr td {
              width: 100%;
              display: block;
              height: 30px;
              line-height: 30px;
              padding-left: 0; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table {
          width: 100%;
          text-align: center;
          height: auto;
          padding: 3px 0;
          line-height: 20px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr th {
            display: block;
            width: 100%;
            padding-left: 0; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr td {
            line-height: 30px;
            display: block;
            width: 100%;
            padding-left: 0; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table .cose th {
            line-height: 30px;
            height: 30px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .notice p {
          font-size: 15px;
          margin: 0 0 8px; }
          #detailed .detailed_frame .detailed_contents .statement .list_contents .notice p img {
            width: 16px; }
        #detailed .detailed_frame .detailed_contents .statement .list_contents .notice .text {
          font-size: 12px;
          line-height: 22px;
          padding: 18px; }
    #detailed .detailed_frame .detailed_contents .electricity_usage {
      background: #f5f5f5;
      width: 100%;
      margin: 30px auto 0;
      padding: 0 0 80px;
      font-size: 0; }
      #detailed .detailed_frame .detailed_contents .electricity_usage table {
        font-size: 15px;
        width: 100%;
        margin-top: 0; }
        #detailed .detailed_frame .detailed_contents .electricity_usage table tr {
          display: block;
          border: none;
          width: 100%;
          padding: 0 10px;
          margin-bottom: 15px; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr th {
            display: none; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr td {
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: block;
            border: 1px solid #ccc;
            border-bottom: none;
            padding-left: 100px; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:last-of-type {
              border-bottom: 1px solid #ccc; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-of-type(1):before {
              content: '';
              display: none; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr td:nth-last-of-type(1):before {
              content: '';
              display: none; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .month {
            position: relative; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr .month:after {
              content: '請求年月';
              display: block;
              width: 100px;
              height: 30px;
              background: #999999;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0;
              font-weight: 400; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .month2 {
            position: relative; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr .month2:after {
              content: '検針期間';
              display: block;
              width: 100px;
              height: 30px;
              background: #999999;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .kwh {
            position: relative; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr .kwh:after {
              content: '使用量';
              display: block;
              width: 100px;
              height: 30px;
              background: #999999;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .price {
            position: relative; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr .price:after {
              content: '請求金額';
              display: block;
              width: 100px;
              height: 30px;
              background: #999999;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0; }
          #detailed .detailed_frame .detailed_contents .electricity_usage table tr .invoice {
            position: relative; }
            #detailed .detailed_frame .detailed_contents .electricity_usage table tr .invoice:after {
              content: '状態';
              display: block;
              width: 100px;
              height: 30px;
              background: #999999;
              color: #fff;
              position: absolute;
              top: 0;
              left: 0; }
      #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button {
        float: none;
        text-align: center; }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a {
          width: 130px;
          display: inline-block;
          position: relative;
          margin: 18px 10px 0;
          vertical-align: middle; }
          #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a:after {
            content: '';
            position: absolute;
            top: 10px;
            left: 5px;
            width: 7px;
            height: 7px; }
          #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button a:hover:after {
            left: 5px; }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right:after {
          content: '';
          position: absolute;
          top: 10px;
          left: 90px;
          width: 7px;
          height: 7px; }
        #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right:hover:after {
          left: 90px; }
    #detailed .detailed_frame .detailed_contents .usage_stats {
      width: 100%;
      margin: 20px auto 0;
      padding: 0 10px 60px;
      text-align: left; }
      #detailed .detailed_frame .detailed_contents .usage_stats h2 {
        padding: 0; }
      #detailed .detailed_frame .detailed_contents .usage_stats .tab {
        float: none;
        display: inline-block;
        position: static;
        width: 100%;
        margin-top: 15px; }
        #detailed .detailed_frame .detailed_contents .usage_stats .tab button {
          border: none;
          width: 50%;
          height: 55px;
          font-size: 14px;
          font-weight: bold;
          position: relative;
          display: inline-block; }
          #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
            top: 100%; }
      #detailed .detailed_frame .detailed_contents .usage_stats .chart_area button {
        display: none; }
      #detailed .detailed_frame .detailed_contents .usage_stats .graph {
        width: 100%;
        height: auto;
        border: none;
        background: none;
        margin-top: 23px;
        font-size: 0;
        padding: 0; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart .chart_block {
          width: 150%; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .chart .chart_block.wide {
            width: 300%; }
        #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top {
          width: 100%; }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1,
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 {
            display: block;
            width: 100%;
            margin: 4px 0; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown2 .list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown2 .list {
              width: 65px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown2 .list:nth-of-type(1),
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown2 .list:nth-of-type(1) {
                width: 90px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown3 .list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown3 .list {
              width: 70px; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown3 .list:nth-of-type(1),
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown3 .list:nth-of-type(1) {
                width: 100px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .list p,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .list p {
              padding-right: 10px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 p,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 p {
              font-size: 14px;
              display: block;
              text-align: center;
              line-height: 20px; }
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .pul_down_list,
            #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .pul_down_list {
              width: 100%;
              display: inline-block;
              vertical-align: top;
              margin: 5px 0; }
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .pul_down_list .pul_down,
              #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .pul_down_list .pul_down {
                border: 1px solid #000;
                border-top: none;
                padding: 6px 10px 6px 10px;
                display: block;
                font-weight: 400;
                margin: 0 5px;
                text-align: left; }
                #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .pul_down_list .pul_down:nth-of-type(1),
                #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .pul_down_list .pul_down:nth-of-type(1) {
                  border-top: 1px solid #000;
                  position: relative; }
                  #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1 .pul_down_list .pul_down:nth-of-type(1):after,
                  #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 .pul_down_list .pul_down:nth-of-type(1):after {
                    content: '';
                    position: absolute;
                    top: 8px;
                    right: 13px;
                    margin: 3px 0 3px 15px;
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    border: 1px solid;
                    border-color: transparent transparent #565656 #565656;
                    transform: rotate(-45deg); }
          #detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2 {
            margin-left: 0;
            margin-top: 15px; } }

@media screen and (max-width: 767px) {
  #detailed.detailed_invoice .detailed_selector {
    background: #f5f5f5; }
    #detailed.detailed_invoice .detailed_selector #selected_contract {
      margin: 0;
      padding: 20px; } }

#detailed.detailed_invoice .b_detailed {
  max-width: 796px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    #detailed.detailed_invoice .b_detailed {
      background: #f5f5f5;
      overflow: hidden; } }
  #detailed.detailed_invoice .b_detailed button {
    width: 260px;
    height: 50px;
    background: #CDCDCD;
    color: #818181;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2); }
    #detailed.detailed_invoice .b_detailed button.active {
      background: #FFB13D;
      color: #fff; }
    @media screen and (max-width: 767px) {
      #detailed.detailed_invoice .b_detailed button {
        height: 80px;
        border-radius: 3px 3px 0 0; } }

@media screen and (max-width: 767px) {
  #detailed.detailed_invoice .detailed_frame {
    padding-top: 20px; } }

#detailed.detailed_invoice .detailed_frame .detailed_contents .statement {
  width: 796px;
  margin: 30px auto 0;
  text-align: left;
  font-size: 0;
  padding: 0;
  background: none; }
  @media screen and (max-width: 768px) {
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement {
      width: 100%;
      margin: auto 0; } }
  @media screen and (max-width: 796px) {
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice {
      padding-right: 10px;
      padding-left: 10px; } }
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice h2.md-detail_title_h2 {
    padding-left: 0;
    font-size: 28px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice h2.md-detail_title_h2::before {
      display: none; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice h2.md-detail_title_h2::after {
      display: none; }
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month {
    font-size: 15px;
    font-weight: bold;
    margin-top: 24px;
    display: flex;
    align-items: center; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month p {
      display: inline-block; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month select {
      display: inline-block;
      width: 172px;
      height: 40px;
      background: #eeefef;
      font-size: 16px;
      text-align: left;
      padding: 0 25px;
      margin-left: 10px;
      border: none;
      border-radius: 5px;
      -webkit-appearance: none;
      appearance: none; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month select select::-ms-expand {
        display: none; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month .select_yazi {
      position: relative; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month .select_yazi::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 18px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #131313;
        border-left: 2px solid #131313;
        transform: translateY(-50%) rotate(-135deg);
        font-size: 20px;
        pointer-events: none; }
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .md-month-text {
    font-size: 12px;
    margin-top: 6px; }
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice {
    background: #fff;
    border-radius: 3px;
    margin-top: 25px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.co2HiddenPlusMargin {
      margin-top: 85px; }
    @media screen and (max-width: 767px) {
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.detail {
        margin-top: 0; } }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_title {
      display: flex;
      justify-content: space-between;
      color: #3ea537;
      font-weight: bold; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content {
      background: #3ea537;
      border-radius: 8px;
      font-size: 15px;
      color: #fff;
      padding: 20px;
      position: relative; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content::after {
        content: "";
        width: 140px;
        height: 188px;
        position: absolute;
        right: 45px;
        bottom: 103px;
        background-image: url(/assets/images/invoices/pricedetails_icon.png);
        background-repeat: no-repeat;
        z-index: 1; }
        @media screen and (max-width: 767px) {
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content::after {
            width: 124px;
            height: 165px;
            position: absolute;
            top: 69px;
            right: 20px;
            bottom: auto;
            background-size: 100%; } }
        @media screen and (max-width: 380px) {
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content::after {
            width: 100px;
            height: 138px;
            position: absolute;
            top: 99px;
            right: 14px;
            bottom: auto;
            background-size: 100%; } }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl {
        display: flex;
        align-items: center;
        background-image: url(/assets/images/invoices/pricedetails_line.png);
        background-repeat: repeat-x;
        background-position-y: bottom;
        padding-bottom: 8px;
        margin-bottom: 8px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl:last-child {
          background-image: none;
          margin-bottom: 0;
          padding-bottom: 0; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dt {
          max-width: 180px;
          width: 100%;
          padding-left: 16px;
          font-weight: bold; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dd {
          width: calc(100% - 180px);
          padding-left: 20px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dd.price {
            font-size: 28px;
            font-weight: bold; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dd.price span {
              font-size: 20px; }
      @media screen and (max-width: 767px) {
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content {
          height: auto;
          padding: 14px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dt {
            max-width: 64px;
            padding-left: 0;
            line-height: 1.6; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content dl dd {
            width: calc(100% - 64px); } }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content .md-bill_point-notice {
        padding-top: 25px;
        padding-bottom: 20px;
        border-top: thick double #fff;
        border-bottom: thick double #fff;
        margin-top: 23px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .md-bill_content .md-bill_point-notice a {
          color: #fff;
          font-weight: bold;
          text-decoration-line: underline; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.reduction {
      margin-bottom: 80px;
      position: relative; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.reduction::before {
        content: "";
        width: 108px;
        height: 79px;
        position: absolute;
        top: 16px;
        left: -20px;
        background-image: url(/assets/images/invoices/co2_icon.png);
        background-repeat: no-repeat; }
        @media screen and (max-width: 425px) {
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.reduction::before {
            top: 0px;
            left: 0;
            background-size: 80%; } }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction {
      padding-left: 96px;
      padding-right: 30px; }
      @media screen and (max-width: 425px) {
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction {
          padding-right: 0;
          position: relative; } }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content {
        width: 100%;
        height: 53px;
        background-image: url(/assets/images/invoices/co2.png);
        background-repeat: round;
        background-size: auto;
        font-size: 16px;
        color: #01afeb;
        display: flex;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span {
          text-align: center; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span div {
            height: 18px;
            display: inline-block; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .reduction_content_co2 {
            display: none; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon {
            width: 18px;
            height: 19px;
            margin-left: 5px;
            position: relative;
            cursor: pointer; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon.isHidden {
              display: none; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon:hover .breakdown_content_box_title_icon_modal {
              display: table; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_modal {
              display: none;
              width: 340px;
              border-radius: 5px;
              border: 1px solid #ccc;
              padding: 5px;
              position: absolute;
              top: 0;
              left: 20px;
              background: rgba(255, 255, 255, 0.9);
              box-shadow: 2px ​5px 5px rgba(0, 0, 0, 0.2);
              font-weight: normal;
              font-size: 14px;
              line-height: 1.6;
              color: #333;
              z-index: 1; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(1) {
            flex-basis: 50%;
            font-weight: bold;
            text-align: left;
            display: flex;
            align-items: center; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(2) {
            flex-basis: 25%;
            font-weight: bold; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(3) {
            flex-basis: 25%;
            font-size: 12px;
            text-align: right; }
        @media screen and (max-width: 767px) {
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content {
            height: auto;
            background-image: none;
            border-radius: 5px;
            flex-wrap: wrap;
            padding: 0;
            font-size: 14px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span {
              margin-bottom: 10px; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .reduction_content_co2 {
                display: none; } }
    @media screen and (max-width: 767px) and (max-width: 320px) {
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .reduction_content_co2 {
        display: inline-block; } }
        @media screen and (max-width: 767px) {
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon {
                position: unset; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_modal {
                  width: 100%;
                  top: 40px;
                  left: 0;
                  border-radius: 0 5px 5px 5px; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close {
                  display: none;
                  position: absolute;
                  top: 21px;
                  left: 0;
                  width: 20px;
                  height: 20px;
                  border: 1px solid #ccc;
                  border-bottom: 1px solid #fff;
                  border-radius: 50% 50% 0 0;
                  background: #fff;
                  z-index: 2; }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close::before {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 1px;
                    vertical-align: middle;
                    color: #333;
                    width: 15px;
                    height: 1px;
                    background: currentColor;
                    transform: rotate(45deg); }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close::after {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 1px;
                    vertical-align: middle;
                    color: #333;
                    width: 15px;
                    height: 1px;
                    background: currentColor;
                    transform: rotate(135deg); }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close:hover {
                    display: none !important; }
                    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close:hover ~ .breakdown_content_box_title_icon_modal {
                      display: none; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span .breakdown_content_box_title_icon:hover .breakdown_content_box_title_icon_close {
                  display: block; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(1) {
                flex-basis: 100%;
                font-weight: bold;
                justify-content: center;
                background-image: url(/assets/images/invoices/co2_sp.jpg);
                background-repeat: round;
                background-size: auto;
                padding: 10px;
                line-height: 1.6; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(2) {
                flex-basis: 50%;
                font-weight: bold;
                margin-bottom: 0; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(3) {
                flex-basis: 50%;
                font-size: 12px;
                text-align: center; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:last-child {
                margin-bottom: 0; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content::before {
              top: auto;
              bottom: -50px; } }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list p {
      font-size: 20px;
      padding-bottom: 8px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table {
      font-size: 15px;
      width: 100%; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table tr {
        height: 40px;
        border: #cccccc solid 1px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table tr th {
          height: 40px;
          font-weight: bold;
          background: #999999;
          display: block;
          line-height: 40px;
          color: #fff;
          padding-left: 15px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table tr td {
          padding-left: 15px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table .t_a_b {
        height: 50px;
        font-size: 15px;
        width: auto; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table .t_a_b th {
          height: 50px;
          line-height: 50px;
          background: #3b42ea; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list table .t_a_b td {
          vertical-align: middle;
          font-size: 24px;
          font-weight: bold; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_title {
      color: #3ea537;
      font-weight: bold;
      padding-left: 15px;
      background-image: url(/assets/images/invoices/underline_green.png);
      background-repeat: repeat-x;
      background-position-y: bottom;
      position: relative; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_title::after {
        content: '';
        width: 184px;
        height: 84px;
        position: absolute;
        right: 30px;
        bottom: 0;
        background-image: url(/assets/images/invoices/contract_title_icon.png);
        background-repeat: no-repeat;
        background-size: auto; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info {
      display: flex;
      flex-wrap: wrap; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl {
        width: 50%;
        font-size: 12px;
        display: flex;
        margin-top: 10px;
        padding-left: 15px;
        padding-right: 15px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl dt {
          width: 130px;
          font-weight: bold;
          line-height: 1.5; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl dd {
          width: calc(100% - 130px);
          line-height: 1.5; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl:nth-child(2n) dt {
          width: 100px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl:nth-child(2n) dl {
          width: calc(100% - 100px); }
      @media screen and (max-width: 767px) {
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl {
          width: 100%; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl:nth-child(2n) dt {
            width: 130px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .list .contract_info dl:nth-child(2n) dl {
            width: calc(100% - 130px); } }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown {
      margin-top: 18px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown table tr th {
        width: 360px;
        padding-left: 15px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown table tr td {
        width: 260px;
        padding-left: 15px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content {
        padding: 15px;
        border: 5px solid #dbead3;
        border-radius: 8px;
        position: relative; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content::before {
          content: '';
          width: 12px;
          height: 12px;
          border: 5px solid;
          border-color: #dbead3 #dbead3 transparent transparent;
          transform: rotate(-45deg);
          position: absolute;
          top: -11px;
          left: 40px;
          background: #fff; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_title {
          font-size: 20px;
          font-weight: bold;
          color: #3ea537;
          padding-left: 10px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_title span {
            font-size: 14px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box {
          display: grid;
          grid-template-columns: minmax(110px, 210px) 1fr;
          margin-bottom: 10px;
          padding-bottom: 10px;
          font-size: 16px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box:last-child {
            grid-template-columns: minmax(110px, 302px) 1fr;
            margin-bottom: 0;
            padding-bottom: 0; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box:last-child .breakdown_content_box_wrap {
              grid-template-columns: repeat(10, 1fr); }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.title {
            margin-top: 20px;
            background-image: url(/assets/images/invoices/underline_green.png);
            background-repeat: repeat-x;
            background-position-y: bottom;
            padding-bottom: 10px;
            margin-bottom: 10px;
            padding-left: 10px;
            color: #919191;
            font-size: 12px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.title .breakdown_content_box_wrap {
              height: auto;
              line-height: unset; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.border {
            background-image: linear-gradient(to right, #dbead3, #dbead3 2px, transparent 2px, transparent 8px);
            background-size: 8px 1px;
            background-repeat: repeat-x;
            background-position-y: bottom; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.border:last-of-type {
              background: none; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title {
            grid-column: 1;
            font-weight: bold;
            line-height: 26px;
            display: flex;
            align-items: center; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon {
              width: 18px;
              height: 19px;
              margin-left: 5px;
              position: relative;
              cursor: pointer; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon.isHidden {
                display: none; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon:hover .breakdown_content_box_title_icon_modal {
                display: block; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_modal {
                display: none;
                width: 450px;
                border-radius: 5px;
                border: 1px solid #ccc;
                padding: 5px;
                position: absolute;
                top: 0;
                left: 20px;
                background: rgba(255, 255, 255, 0.9);
                box-shadow: 2px ​5px 5px rgba(0, 0, 0, 0.2);
                font-weight: normal;
                font-size: 14px;
                line-height: 1.6;
                z-index: 1; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_center {
            text-align: center; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap {
            height: 26px;
            line-height: 26px;
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-column: 2; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.price {
              height: auto;
              line-height: auto; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.price .title {
                color: #888;
                grid-column: 9 span; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.price .title.isHidden {
                  display: none; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.price .description {
                color: #888;
                grid-column: 9 span;
                display: grid;
                grid-template-columns: repeat(9, 1fr); }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list {
              height: auto;
              margin-top: 10px;
              grid-template-columns: auto; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support {
                background: #fef4e0;
                color: #ee7813;
                border-radius: 15px;
                padding: 10px 10px 10px 20px;
                margin-right: 20px;
                display: flex;
                justify-content: space-between; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_description {
                  width: calc(100% - 190px);
                  margin-right: 20px;
                  order: 1; }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_description a {
                    text-decoration: underline;
                    color: #dc752e;
                    font-weight: bold; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_img {
                  width: 170px;
                  height: 106px;
                  overflow: hidden;
                  border-radius: 0 10px 10px 0;
                  order: 2; }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    vertical-align: bottom; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_wrap_supportL {
              background: #fef4e0;
              color: #ee7813;
              border-radius: 15px 0 0 15px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_wrap_supportR {
              background: #fef4e0;
              color: #ee7813;
              border-radius: 0 15px 15px 0; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_priceTitle {
              text-align: right;
              padding-right: 40px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_right {
              text-align: right;
              padding-right: 20px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_left {
              padding-left: 20px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_fontSmall {
              font-size: 12px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .pl-30 {
            padding-left: 30px; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-1 {
            grid-column: 1 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-2 {
            grid-column: 2 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-3 {
            grid-column: 3 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-4 {
            grid-column: 4 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-6 {
            grid-column: 6 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-7 {
            grid-column: 7 span; }
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .col-9 {
            grid-column: 9 span; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_discountMessage {
          font-size: 14px;
          font-weight: bold;
          background: #bb0001;
          text-align: center;
          color: white;
          border-radius: 6px;
          padding: 10px;
          line-height: 1.5; }
        @media screen and (max-width: 767px) {
          #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content {
            background: none;
            border: 4px solid #dbead3;
            border-radius: 5px;
            padding: 10px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content::before {
              content: '';
              width: 8px;
              height: 8px;
              border: 4px solid;
              border-color: #dbead3 #dbead3 transparent transparent;
              transform: rotate(-45deg);
              position: absolute;
              top: -8px;
              left: 20px; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_title {
              padding-left: 0;
              margin-bottom: 10px;
              padding-bottom: 10px;
              border-bottom: 2px solid #dbead3; }
            #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box {
              font-size: 14px;
              grid-template-columns: 1fr;
              align-items: start;
              position: relative; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box:last-child {
                grid-template-columns: 1fr; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box:last-child .breakdown_content_box_wrap {
                  grid-template-columns: unset; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon {
                position: unset; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_modal {
                  width: 100%;
                  top: 40px;
                  left: 0;
                  border-radius: 0 5px 5px 5px; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close {
                  display: none;
                  position: absolute;
                  top: 21px;
                  left: 0;
                  width: 20px;
                  height: 20px;
                  border: 1px solid #ccc;
                  border-bottom: 1px solid #fff;
                  border-radius: 50% 50% 0 0;
                  background: #fff;
                  z-index: 2; }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close::before {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 1px;
                    vertical-align: middle;
                    color: #333;
                    width: 15px;
                    height: 1px;
                    background: currentColor;
                    transform: rotate(45deg); }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close::after {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 1px;
                    vertical-align: middle;
                    color: #333;
                    width: 15px;
                    height: 1px;
                    background: currentColor;
                    transform: rotate(135deg); }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close:hover {
                    display: none !important; }
                    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon .breakdown_content_box_title_icon_close:hover ~ .breakdown_content_box_title_icon_modal {
                      display: none; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon:hover .breakdown_content_box_title_icon_close {
                  display: block; } }
    @media screen and (max-width: 767px) and (max-width: 320px) {
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box {
        font-size: 12px; }
        #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.price {
          grid-column: 1/3; } }
        @media screen and (max-width: 767px) {
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.title {
                display: none; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.fixed {
                grid-template-columns: minmax(84px, 84px) 1fr; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap {
                height: auto;
                grid-template-columns: unset;
                grid-column: 2; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list {
                  grid-column: 1/3; }
                  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support {
                    margin-right: 0;
                    padding: 10px;
                    display: block; }
                    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_description {
                      line-height: 1.6; }
                    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support .breakdown_content_box_wrap_support_img {
                      border-radius: 10px;
                      margin-left: 10px;
                      float: right; }
                    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.support_list .breakdown_content_box_wrap_support::after {
                      content: "";
                      display: block;
                      clear: both; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.normal .col-4 {
                  grid-column: 1; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap.normal .col-2 {
                  grid-column: 4; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_right {
                  padding-right: 0; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_left {
                  padding-left: 0; }
                #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_wrap .breakdown_content_box_fontSmall {
                  text-align: right; }
              #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .pl-30 {
                padding-left: 0; } }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract table tr th {
      width: 160px;
      padding-left: 15px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract table tr td {
      width: 460px;
      padding-left: 15px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract table .cose {
      vertical-align: middle;
      height: 60px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract table .cose th {
        line-height: 60px;
        height: 60px; }
      #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract table .cose td {
        vertical-align: middle; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .notice p {
      font-size: 20px;
      margin: -15px 0 8px; }
    #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .notice .text {
      font-size: 15px;
      line-height: 22px;
      border: 1px solid #cccccc;
      padding: 18px; }
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .md-print_button,
  #detailed.detailed_invoice .detailed_frame .detailed_contents .statement .super_button {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }

@media screen and (max-width: 767px) {
  #detailed.detailed_invoice .detailed_frame .detailed_contents .usage_stats,
  #detailed.detailed_invoice .detailed_frame .detailed_contents .electricity_usage {
    margin-top: 0;
    background: #fff; } }

#contract_contents fieldset label dl dd,
#contract_contents fieldset .label dl dd,
#contract_contents fieldset li dl dd,
#contract_contents .list label dl dd,
#contract_contents .list .label dl dd,
#contract_contents .list li dl dd {
  width: 376px; }

#contract_contents .modal .wrap {
  width: 640px;
  text-align: left;
  line-height: 28px; }
  #contract_contents .modal .wrap p {
    text-align: center;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    padding: 45px 0;
    margin-bottom: 30px; }
  #contract_contents .modal .wrap ul li {
    width: 100%;
    margin: 20px 0;
    border-bottom: 1px solid #cccccc; }
    #contract_contents .modal .wrap ul li dl {
      line-height: 22px;
      display: block; }
      #contract_contents .modal .wrap ul li dl dt {
        font-weight: bold; }
      #contract_contents .modal .wrap ul li dl dd {
        padding-bottom: 15px; }
  #contract_contents .modal .wrap div {
    font-size: 14px; }

#contract_contents .wrap {
  width: 720px;
  padding: 30px;
  margin: 10px auto 0; }
  #contract_contents .wrap .induction {
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    font-weight: bold; }
  #contract_contents .wrap .comment {
    font-size: 16px;
    margin: 30px 0;
    line-height: 1.8; }
    #contract_contents .wrap .comment a {
      color: #3b42ea;
      text-decoration: underline; }
  #contract_contents .wrap h2 {
    text-align: center;
    font-size: 24px;
    margin: 40px 0 10px; }
  #contract_contents .wrap .bg_blue {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    font-weight: bold;
    font-size: 15px;
    border: solid 1px #CDCDCD;
    border-bottom: none; }
  #contract_contents .wrap .contract {
    margin: 35px 0 0; }
    #contract_contents .wrap .contract .contract_number {
      font-size: 24px;
      font-weight: bold;
      margin-right: 3px;
      display: inline-block; }
    #contract_contents .wrap .contract .number {
      display: inline-block;
      font-size: 15px;
      padding-bottom: 10px; }
      #contract_contents .wrap .contract .number:before {
        content: '供給地点番号';
        font-weight: bold;
        margin-right: 10px; }
    #contract_contents .wrap .contract .contract_contents {
      border: solid 1px #CDCDCD; }
      #contract_contents .wrap .contract .contract_contents .bg_blue {
        border: none;
        border-top: solid 1px #CDCDCD;
        border-bottom: solid 1px #CDCDCD; }
        #contract_contents .wrap .contract .contract_contents .bg_blue:nth-of-type(1) {
          border-top: none; }
      #contract_contents .wrap .contract .contract_contents .list {
        margin-top: 0; }
        #contract_contents .wrap .contract .contract_contents .list li {
          height: auto; }
        #contract_contents .wrap .contract .contract_contents .list .over dt {
          border-bottom: solid 1px #CDCDCD; }
        #contract_contents .wrap .contract .contract_contents .list .over dt, #contract_contents .wrap .contract .contract_contents .list .over dd {
          width: 100%; }
          #contract_contents .wrap .contract .contract_contents .list .over dt a, #contract_contents .wrap .contract .contract_contents .list .over dd a {
            text-decoration: underline;
            line-height: 28px;
            display: block; }
        #contract_contents .wrap .contract .contract_contents .list .over dd {
          margin: 10px 0; }
        #contract_contents .wrap .contract .contract_contents .list .plan dt {
          line-height: 120px; }
        #contract_contents .wrap .contract .contract_contents .list .plan dd {
          height: 120px;
          line-height: 20px; }
          #contract_contents .wrap .contract .contract_contents .list .plan dd:before,
          #contract_contents .wrap .contract .contract_contents .list .plan dd .plan_dd {
            display: inline-block;
            vertical-align: middle; }
          #contract_contents .wrap .contract .contract_contents .list .plan dd:before {
            content: '';
            width: 0;
            height: 100%; }
        #contract_contents .wrap .contract .contract_contents .list .plan .plan_title {
          font-size: 16px;
          font-weight: bold;
          text-align: left;
          display: block; }
          #contract_contents .wrap .contract .contract_contents .list .plan .plan_title span {
            line-height: 22px;
            font-size: 20px;
            display: block;
            margin-bottom: 5px; }
      #contract_contents .wrap .contract .contract_contents .in {
        width: 100%;
        padding: 20px; }
      #contract_contents .wrap .contract .contract_contents .contract_button {
        width: 100%;
        padding: 40px 20px; }
        #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between; }
          #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button {
            display: inline-block; }
            #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.orange, #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.gray {
              width: 200px;
              height: 42px; }
            #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.orange {
              width: calc(50% - 5px);
              background: #fff;
              border: solid 1px #f7931e;
              color: #f7931e;
              margin-bottom: 10px; }
              #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.orange:after {
                border-left-color: #f7931e; }
            #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.gray {
              display: block;
              margin: 17px auto 0; }
            #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button:hover {
              background: #f7931e;
              color: #fff; }
              #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button:hover:after {
                border-left-color: #fff; }
            #contract_contents .wrap .contract .contract_contents .contract_button .contract_button_box button.terms_btn:hover {
              background: #B4B4B4; }
        #contract_contents .wrap .contract .contract_contents .contract_button button.gray {
          display: block;
          margin: 17px auto 0; }
        #contract_contents .wrap .contract .contract_contents .contract_button button:hover {
          background: #f7931e;
          color: #fff; }
          #contract_contents .wrap .contract .contract_contents .contract_button button:hover:after {
            border-left-color: #fff; }
        #contract_contents .wrap .contract .contract_contents .contract_button button.terms_btn:hover {
          background: #B4B4B4; }
  #contract_contents .wrap #change {
    margin: 35px 0 0; }
  #contract_contents .wrap #confirm {
    margin: 35px 0 0; }
  #contract_contents .wrap #done h2 {
    font-size: 24px;
    font-weight: bold;
    padding: 13px;
    margin-bottom: 23px;
    border-bottom: 1px solid #cccccc;
    position: relative; }
    #contract_contents .wrap #done h2:before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: #3b42ea;
      position: absolute;
      bottom: -1px;
      left: 0; }
  #contract_contents .wrap #done .text {
    margin-bottom: 70px;
    font-size: 15px;
    line-height: 1.8; }

@media screen and (max-width: 767px) {
  #contract_contents {
    background: none; }
    #contract_contents fieldset label dl dd,
    #contract_contents fieldset .label dl dd,
    #contract_contents fieldset li dl dd,
    #contract_contents .list label dl dd,
    #contract_contents .list .label dl dd,
    #contract_contents .list li dl dd {
      width: auto; }
    #contract_contents .modal .wrap {
      width: 100%;
      line-height: 28px;
      padding-bottom: 10px; }
      #contract_contents .modal .wrap p {
        text-align: center;
        font-size: 24px;
        border-bottom: 1px solid #cccccc;
        padding: 45px 0;
        margin-bottom: 30px; }
    #contract_contents .step {
      display: block;
      margin: 10px 0 0; }
      #contract_contents .step li {
        width: 100%; }
    #contract_contents .wrap {
      width: 100%;
      padding: 0 10px;
      margin: 10px auto 0; }
      #contract_contents .wrap .induction {
        line-height: 1.8;
        text-align: center;
        font-weight: bold; }
        #contract_contents .wrap .induction .pc {
          display: none; }
      #contract_contents .wrap h2 {
        font-size: 18px;
        margin: 20px 0;
        line-height: 1.3; }
      #contract_contents .wrap .contract {
        margin: 0 0 30px; }
        #contract_contents .wrap .contract .contract_number {
          font-size: 20px; }
        #contract_contents .wrap .contract .number {
          font-size: 13px; }
          #contract_contents .wrap .contract .number:before {
            content: '供給地点番号';
            margin-right: 5px; }
        #contract_contents .wrap .contract .contract_contents .bg_blue {
          height: 30px;
          line-height: 30px;
          padding: 0 15px;
          font-size: 13px; }
        #contract_contents .wrap .contract .contract_contents .list li {
          height: auto; }
        #contract_contents .wrap .contract .contract_contents .list .over dt, #contract_contents .wrap .contract .contract_contents .list .over dd {
          width: 100%; }
          #contract_contents .wrap .contract .contract_contents .list .over dt a, #contract_contents .wrap .contract .contract_contents .list .over dd a {
            line-height: 20px;
            font-size: 12px; }
        #contract_contents .wrap .contract .contract_contents .list .over dd {
          margin: 2px 0; }
        #contract_contents .wrap .contract .contract_contents .list .plan dt {
          line-height: 40px; }
        #contract_contents .wrap .contract .contract_contents .list .plan dd {
          height: auto;
          line-height: 23px; }
        #contract_contents .wrap .contract .contract_contents .list .plan .plan_title span {
          line-height: 18px;
          font-size: 16px;
          margin-bottom: 10px; }
        #contract_contents .wrap .contract .contract_contents .in {
          width: 100%;
          padding: 10px; }
        #contract_contents .wrap .contract .contract_contents .contract_button {
          margin: 10px auto;
          width: 100%;
          padding: 0 10px; }
          #contract_contents .wrap .contract .contract_contents .contract_button button.gray {
            width: 70%;
            margin: 5px auto; }
          #contract_contents .wrap .contract .contract_contents .contract_button button:hover {
            background: #f7931e;
            color: #fff; }
            #contract_contents .wrap .contract .contract_contents .contract_button button:hover:after {
              border-left-color: #fff; }
      #contract_contents .wrap #done h2 {
        font-size: 16px;
        font-weight: bold;
        padding: 13px;
        margin-bottom: 23px;
        border-bottom: 1px solid #cccccc;
        position: relative; } }

#credit_card .wrap {
  width: 720px;
  background: #F2F2F2;
  padding: 30px;
  margin: 30px auto 0; }
  #credit_card .wrap .message {
    font-size: 15px;
    line-height: 1.7;
    background: #fff;
    padding: 30px; }
    #credit_card .wrap .message span {
      font-weight: bold;
      display: block; }
    #credit_card .wrap .message .cord {
      background: #f5f5f5;
      border-radius: 10px;
      border: 1px solid #cccccc;
      padding: 15px 20px;
      margin: 14px 0; }
    #credit_card .wrap .message a.orange {
      background: #fff;
      border: solid 1px #f7931e;
      color: #f7931e; }
      #credit_card .wrap .message a.orange:after {
        border-left-color: #f7931e; }
  #credit_card .wrap h2 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 25px; }

#done .wrap {
  width: 720px;
  background: #fff;
  padding: 30px;
  margin: 30px auto 0; }

#done h2 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 147px;
  border-bottom: 1px solid #cccccc;
  position: relative; }
  #done h2:before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: #3b42ea;
    position: absolute;
    bottom: -1px;
    left: 0; }

@media screen and (max-width: 767px) {
  html {
    background: #f5f5f5;
    height: 100%; }
  #credit_card .wrap {
    width: 100%;
    background: #F2F2F2;
    padding: 10px;
    margin: 0 auto; }
    #credit_card .wrap .message {
      font-size: 13px;
      padding: 20px 10px; }
      #credit_card .wrap .message .cord {
        background: #f5f5f5;
        border-radius: 10px;
        border: 1px solid #cccccc;
        padding: 10px;
        margin: 10px 0; }
    #credit_card .wrap h2 {
      display: none; }
  #done .wrap {
    width: 100%;
    background: #f5f5f5;
    padding: 10px;
    margin: 30px auto; }
  #done h2 {
    font-size: 16px; } }

#edit .message {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0; }

#edit .message2 {
  font-size: 16px;
  line-height: 1.5; }
  #edit .message2 a {
    color: #3748EB;
    text-decoration: underline; }

#edit .edit_area {
  width: 720px;
  margin: 0 auto; }
  #edit .edit_area fieldset:nth-of-type(1) {
    margin-top: 25px; }

@media screen and (max-width: 767px) {
  #edit {
    background: none;
    padding-left: 15px;
    padding-right: 15px; }
    #edit .message {
      text-align: left;
      margin: 20px 0; }
    #edit .message2 {
      font-size: 14px; }
      #edit .message2 br {
        display: none; }
    #edit .edit_area {
      width: auto; } }

#password .area {
  width: 500px;
  padding: 30px;
  border: solid 1px #CDCDCD;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
  #password .area .message {
    font-size: 16px;
    line-height: 1.5; }
  #password .area label {
    display: block;
    margin: 30px 0;
    font-size: 14px; }
    #password .area label p {
      margin-bottom: 5px; }
    #password .area label input {
      display: block;
      width: 100%;
      height: 40px;
      border: solid 1px #B4B4B4;
      border-radius: 4px;
      padding: 0 5px;
      font-size: 14px; }
    #password .area label[for=code] input {
      width: 300px;
      background: #F5F5F5; }

@media screen and (max-width: 767px) {
  body {
    background: #fff; }
  #password.page {
    padding-bottom: 0; }
  #password .area {
    width: auto;
    padding: 15px 15px 50px;
    border: none;
    box-shadow: none; }
    #password .area .message {
      font-size: 14px;
      text-align: center; }
      #password .area .message:nth-of-type(2) {
        text-align: left; }
    #password .area label {
      margin: 15px 0; }
      #password .area label[for=code] input {
        width: 100%; } }

#plan .wrap {
  width: 100%;
  max-width: 720px;
  padding: 30px;
  margin: 10px auto 0; }
  @media screen and (max-width: 767px) {
    #plan .wrap {
      padding: 30px 10px; } }
  #plan .wrap .plan .plan_contract .plan_contract_info {
    margin-bottom: 20px; }
    #plan .wrap .plan .plan_contract .plan_contract_info dl {
      display: flex;
      margin-bottom: 10px; }
      #plan .wrap .plan .plan_contract .plan_contract_info dl dt {
        width: 140px;
        font-weight: bold; }
      #plan .wrap .plan .plan_contract .plan_contract_info dl dd {
        width: calc(100% - 200px); }
    @media screen and (max-width: 767px) {
      #plan .wrap .plan .plan_contract .plan_contract_info dl {
        display: block; }
        #plan .wrap .plan .plan_contract .plan_contract_info dl dt {
          width: 100%;
          margin-bottom: 10px; }
        #plan .wrap .plan .plan_contract .plan_contract_info dl dd {
          width: 100%; } }
  #plan .wrap .plan .plan_contract .plan_contract_current {
    border: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 15px;
      font-size: 16px;
      font-weight: bold;
      background: #E2F0FC;
      border-bottom: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content {
      padding: 20px; }
      #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content .plan_contract_current_content_price {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 16px; }
      #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl {
        display: flex;
        border-right: 1px solid #cdcdcd;
        border-left: 1px solid #cdcdcd;
        border-bottom: 1px solid #cdcdcd;
        position: relative; }
        #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl:first-of-type {
          border-top: 1px solid #cdcdcd; }
        #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl dt {
          width: 200px;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          padding: 16px;
          border-right: 1px solid #cdcdcd;
          background: #f0f0f0; }
        #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl dd {
          width: calc(100% - 200px);
          display: flex;
          align-items: center;
          padding: 16px;
          font-size: 14px;
          line-height: 1.6;
          white-space: pre-wrap; }
      @media screen and (max-width: 767px) {
        #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content {
          padding: 10px; }
          #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content .plan_contract_current_content_price {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 16px; }
          #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl {
            display: block;
            border-right: 1px solid #cdcdcd;
            border-left: 1px solid #cdcdcd;
            border-bottom: 1px solid #cdcdcd;
            position: relative; }
            #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl:first-of-type {
              border-top: 1px solid #cdcdcd; }
            #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl dt {
              width: 100%;
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: bold;
              padding: 16px;
              border-right: 0;
              background: #f0f0f0; }
            #plan .wrap .plan .plan_contract .plan_contract_current .plan_contract_current_content dl dd {
              width: 100%;
              display: flex;
              align-items: center;
              padding: 16px;
              font-size: 14px; } }
  #plan .wrap .plan .plan_contract .plan_contract_description {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 1.6; }
  #plan .wrap .plan .plan_contract .plan_contract_customer {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px; }
    #plan .wrap .plan .plan_contract .plan_contract_customer a {
      color: #3b42ea;
      text-decoration: underline; }
    #plan .wrap .plan .plan_contract .plan_contract_customer .plan_contract_customer_br-sp {
      display: none; }
    @media screen and (max-width: 767px) {
      #plan .wrap .plan .plan_contract .plan_contract_customer {
        line-height: 1.6; }
        #plan .wrap .plan .plan_contract .plan_contract_customer .plan_contract_customer_br-sp {
          display: inline-block; } }
  #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan {
    border: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 15px;
      font-size: 16px;
      font-weight: bold;
      background: #E2F0FC;
      border-bottom: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content {
      padding: 20px;
      background: #f6f6f6; }
      #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul {
        overflow: scroll; }
        #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li {
          margin-top: 12px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li:nth-child(1) {
            margin-top: 0; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li.no-data {
            text-align: center;
            line-height: 1.6;
            margin-top: 20px;
            margin-bottom: 20px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li input[type=radio] {
            visibility: hidden;
            display: none; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li input[type=radio]:checked + label {
              border-color: #fec8cd;
              background-color: #fff8f8; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li input[type=radio]:checked + label .changeAblePlan_name .changeAblePlan_name_box {
                color: #fff;
                border: 1px solid #fb5060;
                background: #fb5060; }
                #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li input[type=radio]:checked + label .changeAblePlan_name .changeAblePlan_name_box:before {
                  content: '選択中'; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li label {
            border: 3px solid #e8e8e8;
            width: 100%;
            padding: 20px;
            background: #ffffff;
            border-radius: 8px;
            position: relative;
            cursor: pointer;
            display: block; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #cdcdcd;
            position: relative;
            display: flex;
            align-items: center; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_plan {
              font-size: 16px;
              font-weight: bold;
              color: #333; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_type {
              font-size: 14px;
              font-weight: bold;
              color: #666;
              margin-left: 20px; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_box {
              position: absolute;
              top: -10px;
              right: 0;
              width: 80px;
              height: 28px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 16px;
              font-weight: bold;
              color: #ff9508;
              border: 1px solid #ff9508;
              border-radius: 5px; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_box:before {
                content: '選択する'; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default {
            margin-top: 10px;
            margin-bottom: 5px;
            line-height: 1.6;
            white-space: pre-wrap; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default dl {
              width: calc(50% - 15px);
              display: flex;
              font-size: 13px; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default dl dt {
                width: 150px;
                font-weight: bold; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default dl dd {
                width: calc(100% - 150px);
                text-align: right; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage h3 {
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 10px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list dl {
              width: calc(50% - 15px);
              margin-bottom: 5px;
              display: flex;
              font-size: 13px;
              justify-content: space-between; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list dl:last-of-type {
                margin-bottom: 0; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list dl dt {
                width: 150px; }
              #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list dl dd {
                width: calc(100% - 150px);
                text-align: right; }
      @media screen and (max-width: 767px) {
        #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content {
          padding: 10px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li:before {
            top: 10px;
            left: 6px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li:after {
            top: 15px;
            left: 10px; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name {
            position: relative;
            display: block; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_plan {
              margin-bottom: 10px;
              display: block; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_type {
              margin-left: 0;
              display: block; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_name .changeAblePlan_name_box {
              top: 0; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default {
            font-size: 13px; }
            #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_default dl {
              width: 100%; }
          #plan .wrap .plan .plan_contract .plan_contract_ChangeablePlan .plan_contract_ChangeablePlan_content ul li .changeAblePlan_usage .changeAblePlan_usage_list dl {
            width: 100%; } }
  #plan .wrap .plan .plan_contract .plan_contract_button {
    margin-top: 40px;
    display: flex;
    justify-content: space-around; }
    @media screen and (max-width: 767px) {
      #plan .wrap .plan .plan_contract .plan_contract_button {
        gap: 10px; }
        #plan .wrap .plan .plan_contract .plan_contract_button .orange,
        #plan .wrap .plan .plan_contract .plan_contract_button .gray {
          width: 100%; } }
    #plan .wrap .plan .plan_contract .plan_contract_button .orange:hover {
      opacity: 0.7; }
    #plan .wrap .plan .plan_contract .plan_contract_button .orange:disabled {
      filter: grayscale(1);
      pointer-events: none; }
    #plan .wrap .plan .plan_contract .plan_contract_button .gray {
      position: relative; }
      #plan .wrap .plan .plan_contract .plan_contract_button .gray:before {
        content: '';
        position: absolute;
        border: solid 4px transparent;
        border-right-color: #b4b4b4;
        border-left-width: 0;
        top: 50%;
        left: 15px;
        transform: translate(0, -50%); }
      #plan .wrap .plan .plan_contract .plan_contract_button .gray:hover:before {
        border-right-color: #ffffff; }
  #plan .wrap .plan .plan_confirm .plan_confirm_text {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6; }
  #plan .wrap .plan .plan_confirm .plan_confirm_info {
    margin-bottom: 20px; }
    #plan .wrap .plan .plan_confirm .plan_confirm_info dl {
      display: flex;
      margin-bottom: 10px; }
      #plan .wrap .plan .plan_confirm .plan_confirm_info dl dt {
        width: 140px;
        font-weight: bold; }
      #plan .wrap .plan .plan_confirm .plan_confirm_info dl dd {
        width: calc(100% - 200px); }
    @media screen and (max-width: 768px) {
      #plan .wrap .plan .plan_confirm .plan_confirm_info dl {
        display: block; }
        #plan .wrap .plan .plan_confirm .plan_confirm_info dl dt {
          width: 100%;
          margin-bottom: 10px; }
        #plan .wrap .plan .plan_confirm .plan_confirm_info dl dd {
          width: 100%; } }
  #plan .wrap .plan .plan_confirm .plan_confirm_selected {
    border: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 15px;
      font-size: 16px;
      font-weight: bold;
      background: #E2F0FC;
      border-bottom: solid 1px #cdcdcd; }
    #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content {
      padding: 20px; }
      #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content .plan_confirm_selected_content_price {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 16px; }
      #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl {
        display: flex;
        border-right: 1px solid #cdcdcd;
        border-left: 1px solid #cdcdcd;
        border-bottom: 1px solid #cdcdcd;
        position: relative; }
        #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl:first-of-type {
          border-top: 1px solid #cdcdcd; }
        #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl dt {
          width: 200px;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          padding: 16px;
          border-right: 1px solid #cdcdcd;
          background: #f0f0f0; }
        #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl dd {
          width: calc(100% - 200px);
          display: flex;
          align-items: center;
          padding: 16px;
          font-size: 14px;
          line-height: 1.6;
          white-space: pre-wrap; }
      @media screen and (max-width: 768px) {
        #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content {
          padding: 10px; }
          #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl {
            display: block; }
            #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl dt {
              width: 100%;
              display: block;
              border-right: 0; }
            #plan .wrap .plan .plan_confirm .plan_confirm_selected .plan_confirm_selected_content dl dd {
              width: 100%;
              display: block; } }
  #plan .wrap .plan .plan_confirm .plan_confirm_description {
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.6; }
    #plan .wrap .plan .plan_confirm .plan_confirm_description p {
      margin-bottom: 10px; }
  #plan .wrap .plan .plan_confirm .plan_confirm_agree {
    line-height: 1.6; }
    #plan .wrap .plan .plan_confirm .plan_confirm_agree label {
      display: inline-block; }
    #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_text {
      margin-bottom: 10px; }
    #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon {
      display: flex; }
      #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon a,
      #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon button {
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 16px;
        color: #3b42ea;
        text-decoration: underline; }
        #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon a:after,
        #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon button:after {
          content: '';
          width: 13px;
          height: 16px;
          margin-left: 4px;
          background: url(/assets/images/common/tbc.svg); }
      @media screen and (max-width: 767px) {
        #plan .wrap .plan .plan_confirm .plan_confirm_agree .plan_confirm_agree_icon {
          display: block; } }
  #plan .wrap .plan .plan_confirm .plan_confirm_button {
    margin-top: 40px;
    display: flex;
    justify-content: space-around; }
    #plan .wrap .plan .plan_confirm .plan_confirm_button .orange:hover {
      opacity: 0.7; }
    #plan .wrap .plan .plan_confirm .plan_confirm_button .orange.md-orange:disabled {
      filter: grayscale(1);
      pointer-events: none; }
    #plan .wrap .plan .plan_confirm .plan_confirm_button .gray {
      position: relative; }
      #plan .wrap .plan .plan_confirm .plan_confirm_button .gray:before {
        content: '';
        position: absolute;
        border: solid 4px transparent;
        border-right-color: #b4b4b4;
        border-left-width: 0;
        top: 50%;
        left: 15px;
        transform: translate(0, -50%); }
      #plan .wrap .plan .plan_confirm .plan_confirm_button .gray:hover:before {
        border-right-color: #ffffff; }
    @media screen and (max-width: 767px) {
      #plan .wrap .plan .plan_confirm .plan_confirm_button {
        gap: 10px; }
        #plan .wrap .plan .plan_confirm .plan_confirm_button .orange,
        #plan .wrap .plan .plan_confirm .plan_confirm_button .gray {
          width: 100%; } }
  #plan .wrap .plan .plan_complete {
    text-align: center; }
    #plan .wrap .plan .plan_complete .plan_complete_title {
      font-size: 24px;
      font-weight: bold;
      margin-top: 30px;
      margin-bottom: 30px; }
    #plan .wrap .plan .plan_complete .plan_complete_text {
      font-size: 18px; }
      #plan .wrap .plan .plan_complete .plan_complete_text p {
        margin-bottom: 10px;
        line-height: 1.6; }
    #plan .wrap .plan .plan_complete .plan_complete_button {
      margin-top: 50px; }

#producer .status {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  margin: 10px 0 6px; }

#producer .reservation1 {
  background: #fff;
  border: 1px solid #39b54a;
  color: #39b54a; }

#producer .reservation2 {
  background: #39b54a;
  border: 1px solid #39b54a;
  color: #fff; }

#producer .cheer {
  background: #f7931e;
  border: 1px solid #f7931e;
  color: #fff; }

#producer .none {
  padding: 13px 0;
  display: block;
  -webkit-appearance: none;
          appearance: none;
  background: #f2f2f2;
  border: 1px solid #b3b3b3;
  color: #b3b3b3; }

#producer .desc {
  font-size: 18px;
  width: 1000px;
  margin: 0 auto;
  padding: 30px 140px;
  background: #fff;
  line-height: 25px; }

#producer .search {
  text-align: center;
  margin: 20px 0;
  font-size: 0; }
  #producer .search .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: .2em; }
  #producer .search button {
    width: 102px;
    height: 40px;
    border-radius: 30px;
    font-size: 13px;
    border: 1px solid #cccccc;
    padding-top: 5px;
    margin: 0 4px; }
    #producer .search button:active {
      color: #333; }
    #producer .search button img {
      vertical-align: middle;
      margin: -5px 3px 0; }
  #producer .search .active {
    background: #0033ff;
    border: #0033ff;
    color: #fff; }

#producer .urlLink {
  display: none; }

#producer .producer_list {
  width: 1000px;
  height: auto;
  margin: auto;
  background: #fff;
  padding: 50px 68px 185px;
  font-size: 0;
  letter-spacing: 0;
  position: relative;
  /*特典あり*/
  /*特典あり*/ }
  #producer .producer_list:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid #f5f5f5; }
  #producer .producer_list .gift {
    position: relative; }
    #producer .producer_list .gift:after {
      content: '';
      display: block;
      border-top: 35px solid transparent;
      border-right: 35px solid transparent;
      border-bottom: 35px solid rgba(209, 63, 60, 0.8);
      border-left: 35px solid rgba(209, 63, 60, 0.8);
      width: 0;
      position: absolute;
      top: 120px;
      left: 0; }
    #producer .producer_list .gift:before {
      content: '特典あり';
      font-size: 14px;
      position: absolute;
      font-weight: bold;
      z-index: 2;
      top: 160px;
      left: 0;
      color: #fff;
      transform: rotate(45deg); }
  #producer .producer_list .card {
    display: inline-block;
    margin: 0 5px 25px;
    width: 278px;
    height: auto;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    position: relative; }
    #producer .producer_list .card.hide {
      display: none; }
    #producer .producer_list .card .new {
      margin: 165px 5px 5px 0;
      float: right;
      display: block;
      width: 70px;
      height: 20px;
      background: rgba(0, 204, 255, 0.8);
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      line-height: 20px;
      border-radius: 10px; }
    #producer .producer_list .card .rec {
      margin: 165px 5px 5px 0;
      float: right;
      display: block;
      width: 70px;
      height: 20px;
      background: rgba(153, 255, 51, 0.8);
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 20px;
      border-radius: 10px; }
    #producer .producer_list .card .top_img {
      width: 278px;
      height: 190px;
      background: no-repeat center / cover; }
    #producer .producer_list .card .text {
      padding: 0 10px 10px; }
      #producer .producer_list .card .text .icn {
        width: 36px;
        height: auto;
        display: inline-block;
        margin-right: 6px; }
      #producer .producer_list .card .text .kw {
        display: inline-block;
        border-bottom: 1px solid #000;
        padding-bottom: 2px;
        vertical-align: text-bottom;
        margin: 10px 0 6px;
        font-size: 13px;
        width: 214px; }
        #producer .producer_list .card .text .kw span {
          font-size: 30px;
          font-weight: bold;
          margin: 0 6px; }
          #producer .producer_list .card .text .kw span:after {
            content: 'kw';
            font-size: 20px; }
      #producer .producer_list .card .text .name {
        font-size: 18px;
        line-height: 25px;
        margin-top: 3px; }
        #producer .producer_list .card .text .name span {
          font-size: 18px;
          display: block; }
        #producer .producer_list .card .text .name .small {
          font-size: 14px; }

#producer .detail main {
  text-align: center; }
  #producer .detail main .detail_contents {
    width: 720px;
    height: auto;
    margin: auto;
    background: #f9f9f9;
    padding: 30px;
    /*発電所詳細上部*/
    /*特典*/ }
    #producer .detail main .detail_contents .wrap {
      width: 660px;
      height: auto;
      background: #fff;
      border: 1px solid #cccccc;
      padding-bottom: 55px; }
      #producer .detail main .detail_contents .wrap .main_img_wrap {
        position: relative; }
        #producer .detail main .detail_contents .wrap .main_img_wrap button {
          display: inline-block;
          width: 30px;
          height: 30px;
          transition: all .2s ease-out; }
          #producer .detail main .detail_contents .wrap .main_img_wrap button img {
            width: 100%; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .left {
          position: absolute;
          top: 50%;
          left: -40px; }
          #producer .detail main .detail_contents .wrap .main_img_wrap .left:hover {
            left: -44px; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .right {
          position: absolute;
          top: 50%;
          right: -40px; }
          #producer .detail main .detail_contents .wrap .main_img_wrap .right:hover {
            right: -44px; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .slick-dots li {
          display: inline-block;
          margin: 0 5px; }
          #producer .detail main .detail_contents .wrap .main_img_wrap .slick-dots li button {
            width: 12px;
            height: 12px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            font-size: 0; }
          #producer .detail main .detail_contents .wrap .main_img_wrap .slick-dots li.slick-active button {
            background: #ccc; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .main_img img {
          display: block;
          width: 100%;
          height: auto; }
      #producer .detail main .detail_contents .wrap .icn {
        margin: 10px 0; }
      #producer .detail main .detail_contents .wrap .name {
        font-size: 24px;
        line-height: 26px;
        font-weight: bold;
        padding: 0 40px; }
      #producer .detail main .detail_contents .wrap .status_wrap {
        width: 330px;
        height: auto;
        padding: 20px 15px;
        margin: 30px auto 35px;
        background: #e6e6e6;
        line-height: 24px;
        text-align: left; }
        #producer .detail main .detail_contents .wrap .status_wrap .status {
          margin: 0 0 6px; }
      #producer .detail main .detail_contents .wrap .message_wrap {
        padding: 30px 40px;
        line-height: 26px;
        text-align: left; }
        #producer .detail main .detail_contents .wrap .message_wrap:last-of-type {
          padding: 30px 40px 0; }
        #producer .detail main .detail_contents .wrap .message_wrap h2 {
          font-size: 24px;
          font-weight: bold;
          padding-bottom: 8px;
          border-bottom: solid 1px #D9D9D9;
          position: relative;
          margin-bottom: 10px; }
          #producer .detail main .detail_contents .wrap .message_wrap h2 span {
            font-size: 18px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0, -50%); }
          #producer .detail main .detail_contents .wrap .message_wrap h2:before {
            content: '';
            position: absolute;
            left: 0;
            width: 20px;
            height: 1px;
            background: #3748EB;
            bottom: -1px; }
        #producer .detail main .detail_contents .wrap .message_wrap a:hover {
          text-decoration: underline; }
        #producer .detail main .detail_contents .wrap .message_wrap .message_title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px; }
    #producer .detail main .detail_contents .date {
      width: 100%;
      background: #e5effc;
      border: 1px solid #cccccc;
      margin: 40px 0 0;
      text-align: left;
      padding: 20px 40px;
      font-size: 0; }
      #producer .detail main .detail_contents .date .asapM {
        font-size: 30px; }
      #producer .detail main .detail_contents .date ul {
        width: 580px;
        margin: 10px 0; }
        #producer .detail main .detail_contents .date ul li {
          font-size: 16px;
          width: 290px;
          height: auto;
          padding-bottom: 6px;
          margin: 8px 0;
          display: inline-block;
          border-bottom: 1px solid #cccccc; }
          #producer .detail main .detail_contents .date ul li:last-of-type {
            border-bottom: none;
            width: 100%; }
          #producer .detail main .detail_contents .date ul li img {
            vertical-align: middle;
            padding-right: 4px;
            height: 24px; }
          #producer .detail main .detail_contents .date ul li .size {
            padding: 0 4px; }
          #producer .detail main .detail_contents .date ul li a {
            text-decoration: underline; }
          #producer .detail main .detail_contents .date ul li .share {
            margin-top: 8px;
            background: #fff;
            border: 1px solid #cccccc;
            padding: 10px 15px 0;
            display: block;
            font-size: 13px;
            text-decoration: none;
            width: 100%;
            resize: none;
            line-height: 1.5;
            height: auto; }
            #producer .detail main .detail_contents .date ul li .share:focus {
              background: #eee; }
    #producer .detail main .detail_contents .wrap2 {
      width: 660px;
      height: auto;
      background: #fff;
      border: 1px solid #cccccc;
      overflow: hidden;
      padding-bottom: 55px; }
      #producer .detail main .detail_contents .wrap2 .gift_title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        background: #ef3737;
        color: #fff; }
        #producer .detail main .detail_contents .wrap2 .gift_title img {
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 40px;
          vertical-align: middle;
          margin: -8px 6px 0; }
      #producer .detail main .detail_contents .wrap2 .gift_name {
        text-align: center;
        display: inline-block;
        color: #fff;
        line-height: 26px;
        font-size: 20px;
        background: rgba(247, 62, 62, 0.7);
        margin: 25px 0 35px; }
      #producer .detail main .detail_contents .wrap2 .gift_text {
        text-align: left;
        padding: 0 40px;
        line-height: 26px; }
        #producer .detail main .detail_contents .wrap2 .gift_text img {
          display: block;
          width: 580px;
          height: auto;
          margin: 15px auto;
          padding: 20px;
          border: 1px solid #e6e6e6; }
          #producer .detail main .detail_contents .wrap2 .gift_text img:nth-of-type(1) {
            margin: 0 auto 15px; }

#producer.notFound {
  background: unset;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 !important; }
  #producer.notFound .notFound_icon {
    width: 120px;
    margin: 0 auto 20px; }
    #producer.notFound .notFound_icon img {
      width: 100%;
      position: relative;
      top: 10px;
      animation: bounce .5s ease infinite alternate; }

@keyframes bounce {
  100% {
    top: -10px; } }
  #producer.notFound h1 {
    padding-bottom: 0;
    font-weight: bold; }
  #producer.notFound main {
    line-height: 2.4;
    padding: 0;
    margin-top: 30px; }
    #producer.notFound main b {
      font-weight: bold; }
    #producer.notFound main .link {
      margin-top: 20px; }
      #producer.notFound main .link .md-text-link {
        text-decoration: unset;
        background: #FF9425;
        width: 300px;
        height: 42px;
        line-height: 42px;
        font-weight: bold;
        color: white;
        display: inline-block;
        border-radius: 5px; }
        #producer.notFound main .link .md-text-link:hover {
          opacity: 0.7; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #producer .desc {
    width: 100%;
    padding: 30px 100px; }
  #producer .search {
    margin: 20px 0;
    padding: 0 100px; }
    #producer .search button {
      margin: 4px; }
  #producer .producer_list {
    width: 100%;
    padding: 50px 70px 185px; }
    #producer .producer_list:after {
      content: '';
      display: none; }
    #producer .producer_list .card {
      width: 49%; }
      #producer .producer_list .card:nth-of-type(3n + 1) {
        margin-left: 5px; }
      #producer .producer_list .card:nth-of-type(3n) {
        margin-right: 5px; }
      #producer .producer_list .card:nth-of-type(2n + 1) {
        margin-left: 0; }
      #producer .producer_list .card:nth-of-type(2n) {
        margin-right: 0; }
      #producer .producer_list .card .top_img {
        width: 100%;
        height: 190px;
        background: no-repeat center / cover; }
      #producer .producer_list .card .text {
        padding: 0 10px 10px; }
        #producer .producer_list .card .text .icn {
          width: 36px;
          height: auto;
          display: inline-block;
          margin-right: 6px; }
        #producer .producer_list .card .text .kw {
          display: inline-block;
          border-bottom: 1px solid #000;
          padding-bottom: 2px;
          vertical-align: text-bottom;
          margin: 10px 0 6px;
          font-size: 13px;
          width: 214px; }
          #producer .producer_list .card .text .kw span {
            font-size: 30px;
            font-weight: bold;
            margin: 0 6px; }
            #producer .producer_list .card .text .kw span:after {
              content: 'kw';
              font-size: 20px; }
        #producer .producer_list .card .text .name {
          font-size: 18px;
          line-height: 25px;
          margin-top: 3px; }
          #producer .producer_list .card .text .name span {
            font-size: 18px;
            display: block; }
          #producer .producer_list .card .text .name .small {
            font-size: 14px; } }

@media screen and (max-width: 767px) {
  section.page {
    padding-bottom: 0; }
  #producer .status {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    margin: 10px 0 6px; }
  #producer .reservation1 {
    background: #fff;
    border: 1px solid #39b54a;
    color: #39b54a; }
  #producer .reservation2 {
    background: #39b54a;
    border: 1px solid #39b54a;
    color: #fff; }
  #producer .cheer {
    background: #f7931e;
    border: 1px solid #f7931e;
    color: #fff; }
  #producer .none {
    padding: 13px 0;
    display: block;
    -webkit-appearance: none;
            appearance: none;
    background: #f2f2f2;
    border: 1px solid #b3b3b3;
    color: #b3b3b3; }
  #producer .desc {
    font-size: 12px;
    width: 100%;
    padding: 15px 20px;
    line-height: 17px; }
  #producer .search {
    margin: 12px 0;
    width: 100%;
    padding: 0 50px;
    font-size: 0; }
    #producer .search .title {
      font-size: 15px;
      margin-bottom: 10px; }
    #producer .search button {
      width: 48%;
      height: 40px;
      border-radius: 30px;
      font-size: 13px;
      padding-top: 5px;
      margin: 1%; }
      #producer .search button img {
        vertical-align: middle;
        margin: -5px 3px 0; }
    #producer .search .all {
      width: 99%; }
    #producer .search .active {
      background: #0033ff;
      border: #0033ff;
      color: #fff; }
  #producer .producer_list {
    width: 100%;
    padding: 20px 20px 100px;
    /*特典あり*/
    /*特典あり*/ }
    #producer .producer_list:after {
      content: '';
      display: none; }
    #producer .producer_list .gift:after {
      content: '';
      display: block;
      border-top: 35px solid transparent;
      border-right: 35px solid transparent;
      border-bottom: 35px solid rgba(209, 63, 60, 0.8);
      border-left: 35px solid rgba(209, 63, 60, 0.8);
      width: 0;
      position: absolute;
      top: 120px;
      left: 0; }
    #producer .producer_list .gift:before {
      content: '特典あり';
      font-size: 14px;
      position: absolute;
      font-weight: bold;
      z-index: 2;
      top: 160px;
      left: 0;
      color: #fff;
      transform: rotate(45deg); }
    #producer .producer_list .card {
      display: block;
      margin: 0 0 25px;
      width: 100%;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); }
      #producer .producer_list .card .top_img {
        width: 100%;
        height: 190px; }
      #producer .producer_list .card .text {
        font-size: 0;
        padding: 10px; }
        #producer .producer_list .card .text .icn {
          width: 13%;
          margin-right: 6px; }
        #producer .producer_list .card .text .kw {
          margin: 10px auto 6px;
          font-size: 13px;
          width: 84%; }
        #producer .producer_list .card .text .name span {
          font-size: 14px; }
        #producer .producer_list .card .text .name .small {
          font-size: 12px; }
  #producer .detail main .detail_contents {
    width: 100%;
    padding: 20px;
    /*発電所詳細上部*/
    /*特典*/ }
    #producer .detail main .detail_contents .wrap {
      width: 100%;
      padding-bottom: 33px; }
      #producer .detail main .detail_contents .wrap .main_img_wrap button {
        width: 21px;
        height: 21px;
        margin: -20px 0 0;
        position: relative;
        z-index: 3; }
        #producer .detail main .detail_contents .wrap .main_img_wrap button img {
          width: 100%; }
      #producer .detail main .detail_contents .wrap .main_img_wrap .left {
        left: -14px; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .left:hover {
          left: -14px; }
      #producer .detail main .detail_contents .wrap .main_img_wrap .right {
        right: -14px; }
        #producer .detail main .detail_contents .wrap .main_img_wrap .right:hover {
          right: -14px; }
      #producer .detail main .detail_contents .wrap .main_img_wrap ul li {
        display: none; }
      #producer .detail main .detail_contents .wrap .icn {
        margin: 8px 0; }
      #producer .detail main .detail_contents .wrap .name {
        font-size: 17px;
        line-height: 22px;
        padding: 0 15px; }
      #producer .detail main .detail_contents .wrap .status_wrap {
        width: 100%;
        padding: 20px 15px;
        margin: 0 auto;
        background: none; }
      #producer .detail main .detail_contents .wrap .message_wrap {
        padding: 20px 10px; }
        #producer .detail main .detail_contents .wrap .message_wrap:last-of-type {
          padding: 20px 10px 0; }
        #producer .detail main .detail_contents .wrap .message_wrap h2 {
          font-size: 18px;
          padding-bottom: 20px;
          position: relative;
          margin-bottom: 10px; }
          #producer .detail main .detail_contents .wrap .message_wrap h2 span {
            font-size: 18px;
            position: absolute;
            right: auto;
            left: 0;
            top: 35px; }
        #producer .detail main .detail_contents .wrap .message_wrap .message_title {
          font-size: 15px;
          margin-bottom: 15px; }
    #producer .detail main .detail_contents .date {
      margin: 30px 0 0;
      padding: 20px 10px; }
      #producer .detail main .detail_contents .date ul {
        width: 100%; }
        #producer .detail main .detail_contents .date ul li {
          width: 100%;
          margin: 14px 0;
          display: block; }
          #producer .detail main .detail_contents .date ul li .share {
            padding: 9px 0 9px 10px; }
    #producer .detail main .detail_contents .wrap2 {
      width: 100%;
      padding-bottom: 35px; }
      #producer .detail main .detail_contents .wrap2 .gift_title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 24px; }
      #producer .detail main .detail_contents .wrap2 .gift_name {
        font-size: 18px;
        margin: 25px 20px 35px; }
      #producer .detail main .detail_contents .wrap2 .gift_text {
        padding: 0 20px; }
        #producer .detail main .detail_contents .wrap2 .gift_text img {
          width: 100%;
          margin: 15px auto;
          padding: 10px; }
  #producer.notFound {
    background: white; }
    #producer.notFound .detail {
      padding: 20px; }
      #producer.notFound .detail h1 {
        font-size: 24px;
        text-align: left; }
      #producer.notFound .detail main {
        text-align: left;
        line-height: 2; }
        #producer.notFound .detail main .link .md-text-link {
          width: 100%;
          text-align: center; } }

#process .area {
  width: 500px;
  padding: 30px;
  border: solid 1px #CDCDCD;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
  #process .area h2 {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #cccccc;
    position: relative; }
    #process .area h2:nth-of-type(2) {
      margin-top: 45px; }
    #process .area h2:before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: #3b42ea;
      position: absolute;
      bottom: -1px;
      left: 0; }
  #process .area a {
    display: block;
    margin: 16px 0;
    transition: all .2s ease-out; }
    #process .area a:before {
      content: '';
      display: inline-block;
      border-radius: 10px;
      width: 10px;
      height: 10px;
      background: #fbb03b;
      margin: 2px 6px 2px 0; }
    #process .area a:after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      margin: 0 6px;
      border-left: 5px solid #808080;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      position: relative;
      right: 0; }
    #process .area a:hover:after {
      right: -3px; }
  #process .area p {
    text-indent: 1em; }

@media screen and (max-width: 767px) {
  html {
    background: #f5f5f5;
    height: 100%; }
  #process main {
    background: none; }
  #process .area {
    width: 100%;
    padding: 30px;
    border: none;
    margin: 0 auto;
    box-shadow: none; }
    #process .area h2 {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #cccccc;
      position: relative; }
      #process .area h2:nth-of-type(2) {
        margin-top: 45px; }
      #process .area h2:before {
        content: '';
        display: block;
        width: 20px;
        height: 1px;
        background: #3b42ea;
        position: absolute;
        bottom: -1px;
        left: 0; }
    #process .area a {
      display: block;
      margin: 16px 0; }
    #process .area p {
      text-indent: 1em; } }

#support .b_support {
  text-align: center; }
  #support .b_support button {
    width: 245px;
    height: 50px;
    background: #CDCDCD;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    border: none;
    margin: 0 4px;
    position: relative; }
    #support .b_support button.active {
      background: #FFB13D;
      color: #fff; }
      #support .b_support button.active:after {
        position: absolute;
        border: solid 10px transparent;
        border-top-color: #FFB13D;
        border-bottom-width: 0;
        content: '';
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 100%); }

#support .tab_contents {
  display: none; }
  #support .tab_contents.show {
    display: block; }

#support .support_contents {
  width: 100%;
  background: #fff;
  text-align: center;
  padding-bottom: 20px; }
  #support .support_contents .support_history,
  #support .support_contents .letssupport_contents {
    font-size: 0; }
    #support .support_contents .support_history h2,
    #support .support_contents .letssupport_contents h2 {
      padding: 40px 0;
      font-size: 24px;
      font-weight: bold; }
      #support .support_contents .support_history h2 img,
      #support .support_contents .letssupport_contents h2 img {
        margin-top: -7px;
        vertical-align: middle; }
    #support .support_contents .support_history .history_list,
    #support .support_contents .letssupport_contents .history_list {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      gap: 20px; }
    #support .support_contents .support_history .now,
    #support .support_contents .support_history .next_month,
    #support .support_contents .letssupport_contents .now,
    #support .support_contents .letssupport_contents .next_month {
      width: 720px;
      height: auto;
      background: #f9f9f9;
      border-radius: 10px;
      margin: auto;
      text-align: left;
      overflow: hidden;
      position: relative;
      box-shadow: 3px 3px 7px -3px rgba(0, 0, 0, 0.8);
      display: flex;
      flex-wrap: wrap; }
      #support .support_contents .support_history .now .left,
      #support .support_contents .support_history .next_month .left,
      #support .support_contents .letssupport_contents .now .left,
      #support .support_contents .letssupport_contents .next_month .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 316px;
        height: 100%;
        background: no-repeat center / cover; }
      #support .support_contents .support_history .now .right,
      #support .support_contents .support_history .next_month .right,
      #support .support_contents .letssupport_contents .now .right,
      #support .support_contents .letssupport_contents .next_month .right {
        vertical-align: top;
        margin-left: 315px;
        width: 400px;
        padding: 0 27px;
        font-size: 14px;
        display: inline-block; }
        #support .support_contents .support_history .now .right a,
        #support .support_contents .support_history .next_month .right a,
        #support .support_contents .letssupport_contents .now .right a,
        #support .support_contents .letssupport_contents .next_month .right a {
          width: 100%;
          display: inline-block;
          padding: 10px 10px 0;
          line-height: 24px;
          position: relative; }
          #support .support_contents .support_history .now .right a:before,
          #support .support_contents .support_history .next_month .right a:before,
          #support .support_contents .letssupport_contents .now .right a:before,
          #support .support_contents .letssupport_contents .next_month .right a:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 70%;
            background: #cccccc;
            position: absolute;
            top: 0;
            left: 0; }
          #support .support_contents .support_history .now .right a:after,
          #support .support_contents .support_history .next_month .right a:after,
          #support .support_contents .letssupport_contents .now .right a:after,
          #support .support_contents .letssupport_contents .next_month .right a:after {
            content: '';
            display: inline-block;
            width: 1px;
            height: 30%;
            background: #3b42ea;
            position: absolute;
            top: 70%;
            left: 0; }
          #support .support_contents .support_history .now .right a span,
          #support .support_contents .support_history .next_month .right a span,
          #support .support_contents .letssupport_contents .now .right a span,
          #support .support_contents .letssupport_contents .next_month .right a span {
            font-size: 14px;
            display: block;
            position: relative; }
          #support .support_contents .support_history .now .right a p,
          #support .support_contents .support_history .next_month .right a p,
          #support .support_contents .letssupport_contents .now .right a p,
          #support .support_contents .letssupport_contents .next_month .right a p {
            font-size: 18px; }
            #support .support_contents .support_history .now .right a p:after,
            #support .support_contents .support_history .next_month .right a p:after,
            #support .support_contents .letssupport_contents .now .right a p:after,
            #support .support_contents .letssupport_contents .next_month .right a p:after {
              content: '';
              transition: all .2s ease-out;
              position: relative;
              right: -5px;
              display: inline-block;
              margin-left: 9px;
              width: 0;
              height: 0;
              border-left: 8px solid transparent;
              border-left: 7px solid #b3b3b3;
              border-top: 7px solid transparent;
              border-bottom: 7px solid transparent; }
            #support .support_contents .support_history .now .right a p:hover:after,
            #support .support_contents .support_history .next_month .right a p:hover:after,
            #support .support_contents .letssupport_contents .now .right a p:hover:after,
            #support .support_contents .letssupport_contents .next_month .right a p:hover:after {
              right: -8px; }
        #support .support_contents .support_history .now .right p,
        #support .support_contents .support_history .next_month .right p,
        #support .support_contents .letssupport_contents .now .right p,
        #support .support_contents .letssupport_contents .next_month .right p {
          font-size: 14px; }
          #support .support_contents .support_history .now .right p span,
          #support .support_contents .support_history .next_month .right p span,
          #support .support_contents .letssupport_contents .now .right p span,
          #support .support_contents .letssupport_contents .next_month .right p span {
            font-size: 40px;
            margin-left: 10px; }
            #support .support_contents .support_history .now .right p span:after,
            #support .support_contents .support_history .next_month .right p span:after,
            #support .support_contents .letssupport_contents .now .right p span:after,
            #support .support_contents .letssupport_contents .next_month .right p span:after {
              content: 'kWh';
              font-size: 24px; }
        #support .support_contents .support_history .now .right .comment,
        #support .support_contents .support_history .next_month .right .comment,
        #support .support_contents .letssupport_contents .now .right .comment,
        #support .support_contents .letssupport_contents .next_month .right .comment {
          color: #808080;
          font-size: 14px;
          line-height: 20px;
          padding: 20px 0; }
          #support .support_contents .support_history .now .right .comment img,
          #support .support_contents .support_history .next_month .right .comment img,
          #support .support_contents .letssupport_contents .now .right .comment img,
          #support .support_contents .letssupport_contents .next_month .right .comment img {
            display: inline-block;
            margin-bottom: -5px; }
          #support .support_contents .support_history .now .right .comment p,
          #support .support_contents .support_history .next_month .right .comment p,
          #support .support_contents .letssupport_contents .now .right .comment p,
          #support .support_contents .letssupport_contents .next_month .right .comment p {
            color: #000; }
  #support .support_contents .none .none_,
  #support .support_contents .letssupport_contents .none_ {
    text-align: left;
    width: 720px;
    display: inline-block;
    background: #f9f9f9;
    border-radius: 10px;
    position: relative;
    padding: 6px 5px 6px 40px;
    box-shadow: 3px 3px 8px -2px rgba(0, 0, 0, 0.5); }
    #support .support_contents .none .none_:before,
    #support .support_contents .letssupport_contents .none_:before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 40px;
      background: #cccccc;
      position: absolute;
      top: 0;
      left: 20px; }
    #support .support_contents .none .none_:after,
    #support .support_contents .letssupport_contents .none_:after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 20px;
      background: #3b42ea;
      position: absolute;
      top: 40px;
      left: 20px; }
    #support .support_contents .none .none_ .none_left,
    #support .support_contents .letssupport_contents .none_ .none_left {
      font-size: 20px;
      display: inline-block;
      text-align: left;
      width: 420px; }
      #support .support_contents .none .none_ .none_left p,
      #support .support_contents .letssupport_contents .none_ .none_left p {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px; }
      #support .support_contents .none .none_ .none_left button,
      #support .support_contents .letssupport_contents .none_ .none_left button {
        margin-left: 13px;
        display: inline-block;
        background: #3b42ea;
        padding: 1px 16px 1px 18px;
        border-radius: 6px;
        color: #fff;
        border: none;
        font-size: 14px;
        font-weight: bold; }
        #support .support_contents .none .none_ .none_left button:after,
        #support .support_contents .letssupport_contents .none_ .none_left button:after {
          content: '';
          transition: all .2s ease-out;
          position: relative;
          top: 0;
          right: -6px;
          display: inline-block;
          margin-left: 9px;
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-left: 5px solid #fff;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent; }
        #support .support_contents .none .none_ .none_left button:hover:after,
        #support .support_contents .letssupport_contents .none_ .none_left button:hover:after {
          right: -8px; }
    #support .support_contents .none .none_ .none_right,
    #support .support_contents .letssupport_contents .none_ .none_right {
      display: inline-block;
      vertical-align: top; }
      #support .support_contents .none .none_ .none_right a,
      #support .support_contents .letssupport_contents .none_ .none_right a {
        background: #f7931e;
        display: inline-block;
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        padding: 9px 50px 5px;
        position: relative; }
        #support .support_contents .none .none_ .none_right a:after,
        #support .support_contents .letssupport_contents .none_ .none_right a:after {
          content: '';
          transition: all .2s ease-out;
          position: absolute;
          top: 50%;
          right: 16px;
          transform: translate(0, -50%);
          display: block;
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-left: 5px solid #fff;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent; }
        #support .support_contents .none .none_ .none_right a:hover:after,
        #support .support_contents .letssupport_contents .none_ .none_right a:hover:after {
          right: 14px; }
        #support .support_contents .none .none_ .none_right a img,
        #support .support_contents .letssupport_contents .none_ .none_right a img {
          width: 31px;
          padding-right: 5px;
          vertical-align: middle; }
  #support .support_contents .letssupport_contents {
    margin: 75px 0 70px; }
    #support .support_contents .letssupport_contents img {
      display: block;
      margin: 0 auto -3px;
      position: relative;
      z-index: 2; }
    #support .support_contents .letssupport_contents .none_ {
      padding: 25px 0 25px 40px; }
    #support .support_contents .letssupport_contents .list {
      width: 920px;
      height: auto;
      padding: 45px 20px 40px;
      background: #e5effc;
      margin: -35px auto 0;
      border-radius: 10px;
      box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.6);
      position: relative; }
      #support .support_contents .letssupport_contents .list button {
        border: none;
        background: none;
        padding: 0;
        position: absolute;
        z-index: 3;
        top: 50%;
        width: 51px;
        height: 51px; }
        #support .support_contents .letssupport_contents .list button img {
          transition: all .2s ease-out;
          position: relative;
          left: 0; }
      #support .support_contents .letssupport_contents .list .arrow_left {
        left: -50px; }
        #support .support_contents .letssupport_contents .list .arrow_left:hover img {
          left: -10px; }
      #support .support_contents .letssupport_contents .list .arrow_right {
        right: -50px; }
        #support .support_contents .letssupport_contents .list .arrow_right:hover img {
          left: 10px; }
      #support .support_contents .letssupport_contents .list .gift {
        position: relative; }
        #support .support_contents .letssupport_contents .list .gift:after {
          content: '';
          width: 60px;
          height: 60px;
          display: block;
          position: absolute;
          z-index: 3;
          top: -15px;
          left: -15px;
          background: no-repeat center/cover url(/assets/images/support/present.svg); }
      #support .support_contents .letssupport_contents .list .card {
        display: inline-block;
        vertical-align: top;
        width: 205px;
        position: relative;
        background: #3ac4be;
        margin: 20px 0 0 20px;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); }
        #support .support_contents .letssupport_contents .list .card:nth-of-type(4n + 1) {
          margin-left: 0; }
        #support .support_contents .letssupport_contents .list .card:before {
          content: '';
          display: block;
          padding-top: 131.7%; }
        #support .support_contents .letssupport_contents .list .card .card_ {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 10px; }
          #support .support_contents .letssupport_contents .list .card .card_ .frame {
            height: 100%;
            background: #fff;
            padding: 5px;
            overflow: hidden;
            -webkit-clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
                    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px); }
          #support .support_contents .letssupport_contents .list .card .card_ .base {
            height: 100%;
            height: 100%;
            background: #efefef;
            -webkit-clip-path: polygon(38px 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%, 0 38px);
                    clip-path: polygon(38px 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%, 0 38px);
            overflow: hidden;
            position: relative; }
          #support .support_contents .letssupport_contents .list .card .card_ .card_img {
            height: 160px;
            background: no-repeat center / cover;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
                    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); }
          #support .support_contents .letssupport_contents .list .card .card_ p {
            text-align: left;
            margin: 15px 8px 0;
            font-size: 14px;
            line-height: 1.3; }
            #support .support_contents .letssupport_contents .list .card .card_ p span {
              font-size: 12px; }
          #support .support_contents .letssupport_contents .list .card .card_ .icn {
            position: absolute;
            top: 137px;
            right: 4px;
            z-index: 4; }
        #support .support_contents .letssupport_contents .list .card .date {
          display: inline-block;
          padding: 7px 12px;
          font-size: 12px;
          font-weight: bold;
          background: #ff9933;
          border-radius: 20px;
          border: solid 1px #000;
          position: absolute;
          bottom: 4px;
          right: 7px; }
        #support .support_contents .letssupport_contents .list .card.back_card {
          box-shadow: none;
          background: #fff; }
          #support .support_contents .letssupport_contents .list .card.back_card img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); }
  #support .support_contents .pp_letter_contents {
    font-size: 24px; }
    #support .support_contents .pp_letter_contents .post {
      display: inline-block; }
    #support .support_contents .pp_letter_contents .none_letters {
      width: 720px;
      height: auto;
      margin: 20px auto 0;
      border-radius: 10px;
      background: #e9e8fc;
      padding: 22px 0; }
      #support .support_contents .pp_letter_contents .none_letters .letters {
        width: 220px;
        display: inline-block;
        background: #fff;
        font-size: 14px;
        text-align: left;
        padding: 0 12px 20px;
        margin: 0 4px;
        box-shadow: 4px 4px 9px -3px rgba(0, 0, 0, 0.5); }
        #support .support_contents .pp_letter_contents .none_letters .letters img {
          display: block;
          width: 200px;
          height: 136px;
          overflow: hidden;
          margin: 13px auto; }
        #support .support_contents .pp_letter_contents .none_letters .letters p {
          font-size: 15px;
          font-weight: bold;
          position: relative;
          padding: 0 8px;
          margin: 0 auto 15px;
          line-height: 22px; }
          #support .support_contents .pp_letter_contents .none_letters .letters p:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 50%;
            background: #cccccc;
            position: absolute;
            top: 0;
            left: 0; }
          #support .support_contents .pp_letter_contents .none_letters .letters p:after {
            content: '';
            display: inline-block;
            width: 1px;
            height: 50%;
            background: #3b42ea;
            position: absolute;
            top: 50%;
            left: 0; }
  #support .support_contents .choose {
    margin: 58px auto 0;
    display: block;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    padding: 3px 0;
    width: 240px;
    height: 58px;
    line-height: 58px;
    background: #f7931e;
    position: relative; }
    #support .support_contents .choose img {
      display: inline-block;
      vertical-align: middle;
      width: 31px;
      margin-bottom: 8px; }
    #support .support_contents .choose:after {
      content: '';
      transition: all .2s ease-out;
      position: relative;
      top: -4px;
      right: -26px;
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-left: 5px solid #fff;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    #support .support_contents .choose:hover:after {
      right: -28px; }

#support .management_contents {
  width: 100%;
  background: #fff;
  text-align: center;
  padding-top: 30px; }
  #support .management_contents .archived {
    width: 720px;
    height: auto;
    margin: auto;
    padding-bottom: 7px;
    background: #e5e5e5; }
    #support .management_contents .archived .archived_title {
      background: #3b42ea;
      color: #fff;
      font-size: 18px;
      line-height: 60px;
      width: 100%;
      height: 60px; }
      #support .management_contents .archived .archived_title img {
        width: 40px;
        vertical-align: middle;
        background: #9dcbea;
        border-radius: 30px;
        margin-right: 8px; }
    #support .management_contents .archived .archived_contents {
      background: #fff;
      width: 660px;
      border-radius: 10px;
      margin: 10px auto 25px;
      text-align: left;
      padding: 14px;
      font-size: 0;
      box-shadow: 2px 1px 5px 0px rgba(0, 0, 0, 0.2); }
      #support .management_contents .archived .archived_contents .archived_left {
        width: 270px;
        height: 180px;
        display: inline-block;
        background: no-repeat center / cover; }
      #support .management_contents .archived .archived_contents .archived_right {
        width: 350px;
        height: auto;
        margin-left: 10px;
        display: inline-block;
        vertical-align: top;
        font-size: 0; }
        #support .management_contents .archived .archived_contents .archived_right .address {
          font-size: 20px;
          line-height: 26px;
          position: relative;
          height: 80px;
          overflow: hidden;
          display: block; }
          #support .management_contents .archived .archived_contents .archived_right .address p:after {
            content: '';
            display: inline-block;
            position: relative;
            top: 0;
            left: 10px;
            transition: all .2s ease-out;
            width: 0;
            height: 0;
            border-left: 8px solid #b3b3b3;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent; }
          #support .management_contents .archived .archived_contents .archived_right .address:hover p:after {
            left: 13px; }
          #support .management_contents .archived .archived_contents .archived_right .address span {
            vertical-align: top;
            font-size: 14px; }
        #support .management_contents .archived .archived_contents .archived_right .gift {
          height: 39px;
          overflow: hidden;
          font-size: 17px;
          line-height: 20px;
          font-weight: bold;
          color: #3b42ea;
          margin-top: 3px;
          display: block;
          text-decoration: underline; }
        #support .management_contents .archived .archived_contents .archived_right .gift_contents {
          display: block;
          width: 225px;
          height: 58px;
          color: #fff;
          line-height: 58px;
          text-align: center;
          background: #f7931e;
          border-radius: 3px;
          float: right;
          margin-top: 5px; }
          #support .management_contents .archived .archived_contents .archived_right .gift_contents p {
            font-size: 20px;
            font-weight: bold;
            position: relative;
            margin-left: 24px; }
            #support .management_contents .archived .archived_contents .archived_right .gift_contents p:before {
              content: '';
              display: block;
              width: 18px;
              height: 24px;
              position: absolute;
              top: 16px;
              left: 8px;
              background: no-repeat center/cover url(/assets/images/support/present_white.svg); }
            #support .management_contents .archived .archived_contents .archived_right .gift_contents p:after {
              content: '';
              display: inline-block;
              position: relative;
              top: -2px;
              left: 10px;
              transition: all .2s ease-out;
              width: 0;
              height: 0;
              border-left: 5px solid #fff;
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent; }
            #support .management_contents .archived .archived_contents .archived_right .gift_contents p:hover:after {
              left: 13px; }
  #support .management_contents .not_archived,
  #support .management_contents .receipt {
    width: 720px;
    height: auto;
    margin: 35px auto 25px;
    background: #e5e5e5; }
    #support .management_contents .not_archived .not_archived_title,
    #support .management_contents .not_archived .receipt_title,
    #support .management_contents .receipt .not_archived_title,
    #support .management_contents .receipt .receipt_title {
      background: #e5effc;
      color: #000;
      font-size: 18px;
      line-height: 60px;
      width: 100%;
      height: 60px; }
      #support .management_contents .not_archived .not_archived_title img,
      #support .management_contents .not_archived .receipt_title img,
      #support .management_contents .receipt .not_archived_title img,
      #support .management_contents .receipt .receipt_title img {
        width: 40px;
        vertical-align: middle;
        background: #9dcbea;
        border-radius: 30px;
        margin-right: 8px; }
    #support .management_contents .not_archived .receipt_title,
    #support .management_contents .receipt .receipt_title {
      background: #e9e8fc; }
      #support .management_contents .not_archived .receipt_title img,
      #support .management_contents .receipt .receipt_title img {
        width: 40px;
        vertical-align: middle;
        background: #9dcbea;
        border-radius: 30px;
        margin-right: 8px; }
    #support .management_contents .not_archived .not_archived_contents,
    #support .management_contents .not_archived .receipt_contents,
    #support .management_contents .receipt .not_archived_contents,
    #support .management_contents .receipt .receipt_contents {
      width: 225px;
      height: auto;
      vertical-align: top;
      min-height: 305px;
      padding: 12px 14px;
      background: #fff;
      text-align: left;
      display: inline-block;
      margin: 20px 3px;
      box-shadow: 2px 1px 5px 0px rgba(0, 0, 0, 0.2); }
      #support .management_contents .not_archived .not_archived_contents img,
      #support .management_contents .not_archived .receipt_contents img,
      #support .management_contents .receipt .not_archived_contents img,
      #support .management_contents .receipt .receipt_contents img {
        width: 200px;
        height: 136px;
        overflow: hidden; }
      #support .management_contents .not_archived .not_archived_contents .address,
      #support .management_contents .not_archived .receipt_contents .address,
      #support .management_contents .receipt .not_archived_contents .address,
      #support .management_contents .receipt .receipt_contents .address {
        height: 64px;
        overflow: hidden;
        display: block;
        font-size: 15px;
        line-height: 22px; }
        #support .management_contents .not_archived .not_archived_contents .address span,
        #support .management_contents .not_archived .receipt_contents .address span,
        #support .management_contents .receipt .not_archived_contents .address span,
        #support .management_contents .receipt .receipt_contents .address span {
          font-size: 14px; }
      #support .management_contents .not_archived .not_archived_contents .gift,
      #support .management_contents .not_archived .receipt_contents .gift,
      #support .management_contents .receipt .not_archived_contents .gift,
      #support .management_contents .receipt .receipt_contents .gift {
        height: 53px;
        overflow: hidden;
        line-height: 18px;
        font-size: 14px;
        font-weight: bold;
        color: #3b42ea;
        margin: 10px 0;
        display: block; }
      #support .management_contents .not_archived .not_archived_contents .month,
      #support .management_contents .not_archived .receipt_contents .month,
      #support .management_contents .receipt .not_archived_contents .month,
      #support .management_contents .receipt .receipt_contents .month {
        font-size: 15px;
        font-weight: bold;
        display: block;
        background: #f2f2f2;
        border: solid #cccccc 1px;
        border-radius: 3px;
        text-align: center;
        padding: 3px 0; }

#banners {
  text-align: center;
  padding: 95px 0 140px;
  background: #fff; }
  #banners a {
    display: inline-block;
    width: 300px;
    height: 150px;
    margin: 0 15px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 15px; }
    #banners a:hover {
      transform: scale(1.05); }
    #banners a img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #support .support_contents .letssupport_contents {
    margin: 75px 0 70px; }
    #support .support_contents .letssupport_contents .list {
      width: 700px;
      height: auto;
      padding: 45px 10px 40px;
      margin: -35px auto 0;
      border-radius: 10px;
      position: relative; }
      #support .support_contents .letssupport_contents .list .suit {
        text-align: left;
        display: flex !important;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
        padding: 6px; }
      #support .support_contents .letssupport_contents .list button {
        border: none;
        background: none;
        padding: 0;
        position: absolute;
        z-index: 3;
        top: 50%;
        width: 0px;
        height: 40px; }
        #support .support_contents .letssupport_contents .list button img {
          transition: all .2s ease-out;
          position: relative;
          left: 0; }
      #support .support_contents .letssupport_contents .list .arrow_left {
        left: -45px; }
        #support .support_contents .letssupport_contents .list .arrow_left:hover img {
          left: auto; }
      #support .support_contents .letssupport_contents .list .arrow_right {
        right: 10px; }
        #support .support_contents .letssupport_contents .list .arrow_right:hover img {
          left: auto; }
      #support .support_contents .letssupport_contents .list .card {
        display: inline-block;
        vertical-align: top;
        width: 205px;
        position: relative; }
  #support .support_contents .pp_letter_contents {
    font-size: 24px; }
    #support .support_contents .pp_letter_contents .post {
      display: inline-block; }
    #support .support_contents .pp_letter_contents .none_letters {
      width: 720px;
      height: auto;
      margin: 20px auto 0;
      border-radius: 10px;
      background: #e9e8fc;
      padding: 22px 0; }
      #support .support_contents .pp_letter_contents .none_letters .letters {
        width: 220px;
        display: inline-block;
        background: #fff;
        font-size: 14px;
        text-align: left;
        padding: 0 12px 20px;
        margin: 0 4px;
        box-shadow: 4px 4px 9px -3px rgba(0, 0, 0, 0.5); }
        #support .support_contents .pp_letter_contents .none_letters .letters img {
          display: block;
          width: 200px;
          height: 136px;
          overflow: hidden;
          margin: 13px auto; }
        #support .support_contents .pp_letter_contents .none_letters .letters p {
          font-size: 15px;
          font-weight: bold;
          position: relative;
          padding: 0 8px;
          margin: 0 auto 15px;
          line-height: 22px; }
          #support .support_contents .pp_letter_contents .none_letters .letters p:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 50%;
            background: #cccccc;
            position: absolute;
            top: 0;
            left: 0; }
          #support .support_contents .pp_letter_contents .none_letters .letters p:after {
            content: '';
            display: inline-block;
            width: 1px;
            height: 50%;
            background: #3b42ea;
            position: absolute;
            top: 50%;
            left: 0; }
  #banners a {
    display: inline-block;
    width: 170px;
    height: auto;
    margin: 0 8px; }
    #banners a:nth-of-type(1) {
      margin: 0 8px 0 0; }
    #banners a:nth-of-type(4) {
      margin: 0 0 0 8px; } }

@media screen and (max-width: 767px) {
  #support .b_support {
    width: 100%;
    padding: 0 10px; }
    #support .b_support button {
      width: 47%;
      height: 50px;
      font-size: 14px;
      margin: 0 1px; }
  #support .support_contents {
    width: 100%;
    background: #fff; }
    #support .support_contents .support_history,
    #support .support_contents .letssupport_contents {
      padding: 0; }
      #support .support_contents .support_history h2,
      #support .support_contents .letssupport_contents h2 {
        padding: 20px 0 12px;
        font-size: 19px; }
        #support .support_contents .support_history h2 img,
        #support .support_contents .letssupport_contents h2 img {
          width: 29px; }
      #support .support_contents .support_history .history_list,
      #support .support_contents .letssupport_contents .history_list {
        padding: 0; }
      #support .support_contents .support_history .now,
      #support .support_contents .support_history .next_month,
      #support .support_contents .letssupport_contents .now,
      #support .support_contents .letssupport_contents .next_month {
        width: 100%;
        background: #f9f9f9;
        border-radius: 10px;
        margin: auto;
        text-align: left;
        overflow: hidden;
        position: relative;
        box-shadow: 2px 4px 4px 2px #d3d3d3; }
        #support .support_contents .support_history .now .left,
        #support .support_contents .support_history .next_month .left,
        #support .support_contents .letssupport_contents .now .left,
        #support .support_contents .letssupport_contents .next_month .left {
          position: static;
          width: 100%;
          height: 116px;
          display: block;
          background: no-repeat center / cover; }
        #support .support_contents .support_history .now .right,
        #support .support_contents .support_history .next_month .right,
        #support .support_contents .letssupport_contents .now .right,
        #support .support_contents .letssupport_contents .next_month .right {
          margin-left: 0;
          width: 100%;
          padding-top: 0;
          padding: 10px;
          font-size: 14px;
          display: block; }
          #support .support_contents .support_history .now .right a,
          #support .support_contents .support_history .next_month .right a,
          #support .support_contents .letssupport_contents .now .right a,
          #support .support_contents .letssupport_contents .next_month .right a {
            width: 100%;
            line-height: 24px; }
            #support .support_contents .support_history .now .right a:before,
            #support .support_contents .support_history .next_month .right a:before,
            #support .support_contents .letssupport_contents .now .right a:before,
            #support .support_contents .letssupport_contents .next_month .right a:before {
              content: '';
              display: none; }
            #support .support_contents .support_history .now .right a:after,
            #support .support_contents .support_history .next_month .right a:after,
            #support .support_contents .letssupport_contents .now .right a:after,
            #support .support_contents .letssupport_contents .next_month .right a:after {
              content: '';
              display: none; }
            #support .support_contents .support_history .now .right a span,
            #support .support_contents .support_history .next_month .right a span,
            #support .support_contents .letssupport_contents .now .right a span,
            #support .support_contents .letssupport_contents .next_month .right a span {
              font-size: 12px;
              display: block;
              position: relative; }
            #support .support_contents .support_history .now .right a p,
            #support .support_contents .support_history .next_month .right a p,
            #support .support_contents .letssupport_contents .now .right a p,
            #support .support_contents .letssupport_contents .next_month .right a p {
              font-size: 15px; }
              #support .support_contents .support_history .now .right a p:after,
              #support .support_contents .support_history .next_month .right a p:after,
              #support .support_contents .letssupport_contents .now .right a p:after,
              #support .support_contents .letssupport_contents .next_month .right a p:after {
                content: '';
                border-left: 7px solid transparent;
                border-left: 6px solid #b3b3b3;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent; }
          #support .support_contents .support_history .now .right .comment,
          #support .support_contents .support_history .next_month .right .comment,
          #support .support_contents .letssupport_contents .now .right .comment,
          #support .support_contents .letssupport_contents .next_month .right .comment {
            font-size: 13px;
            line-height: 22px;
            padding: 20px 0; }
    #support .support_contents .none,
    #support .support_contents .letssupport_contents {
      margin: 0 10px; }
      #support .support_contents .none .none_,
      #support .support_contents .letssupport_contents .none_ {
        width: 100%;
        padding: 18px 5px 6px 5px;
        box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.5); }
        #support .support_contents .none .none_:before,
        #support .support_contents .letssupport_contents .none_:before {
          content: '';
          display: none; }
        #support .support_contents .none .none_:after,
        #support .support_contents .letssupport_contents .none_:after {
          content: '';
          display: none; }
        #support .support_contents .none .none_ .none_left,
        #support .support_contents .letssupport_contents .none_ .none_left {
          font-size: 18px;
          width: 100%;
          text-align: center; }
          #support .support_contents .none .none_ .none_left p,
          #support .support_contents .letssupport_contents .none_ .none_left p {
            font-size: 12px;
            margin-top: 25px;
            position: relative; }
          #support .support_contents .none .none_ .none_left button,
          #support .support_contents .letssupport_contents .none_ .none_left button {
            vertical-align: middle;
            display: inline-block;
            margin-left: 15px;
            padding: 2px 13px 2px 10px;
            border-radius: 3px;
            font-size: 12px;
            text-align: left;
            line-height: 12px; }
            #support .support_contents .none .none_ .none_left button:after,
            #support .support_contents .letssupport_contents .none_ .none_left button:after {
              content: '';
              position: relative;
              top: -8px;
              right: -4px; }
        #support .support_contents .none .none_ .none_right,
        #support .support_contents .letssupport_contents .none_ .none_right {
          text-align: center;
          display: block;
          margin-top: 20px;
          vertical-align: top; }
          #support .support_contents .none .none_ .none_right a,
          #support .support_contents .letssupport_contents .none_ .none_right a {
            display: inline-block;
            font-size: 14px;
            padding: 9px 30px 5px;
            position: relative; }
            #support .support_contents .none .none_ .none_right a:after,
            #support .support_contents .letssupport_contents .none_ .none_right a:after {
              content: '';
              transition: all .2s ease-out;
              position: absolute;
              top: 50%;
              right: 16px;
              transform: translate(0, -50%);
              display: block;
              width: 0;
              height: 0;
              border-left: 6px solid transparent;
              border-left: 5px solid #fff;
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent; }
            #support .support_contents .none .none_ .none_right a img,
            #support .support_contents .letssupport_contents .none_ .none_right a img {
              width: 31px;
              padding-right: 5px;
              vertical-align: middle; }
    #support .support_contents .history_contents {
      margin: 0 10px; }
    #support .support_contents .letssupport_contents {
      margin: 75px 0 70px; }
      #support .support_contents .letssupport_contents img {
        width: 80%;
        display: block;
        margin: 0 auto -3px;
        position: relative;
        z-index: 2; }
      #support .support_contents .letssupport_contents .none_ {
        padding: 25px 0;
        display: none; }
        #support .support_contents .letssupport_contents .none_ .none_left {
          font-size: 15px; }
      #support .support_contents .letssupport_contents .list {
        width: 100%;
        height: auto;
        padding: 30px 0 50px;
        margin: -20px auto 0;
        border-radius: 0;
        box-shadow: none;
        position: relative; }
        #support .support_contents .letssupport_contents .list .gift:after {
          width: 40px;
          height: 40px;
          top: 0;
          left: 0; }
        #support .support_contents .letssupport_contents .list button {
          border: none;
          background: none; }
        #support .support_contents .letssupport_contents .list .arrow_left {
          top: auto;
          bottom: -70px;
          left: 0; }
          #support .support_contents .letssupport_contents .list .arrow_left:hover img {
            left: 0; }
        #support .support_contents .letssupport_contents .list .arrow_right {
          top: auto;
          bottom: -70px;
          right: 0; }
          #support .support_contents .letssupport_contents .list .arrow_right:hover img {
            left: 0; }
        #support .support_contents .letssupport_contents .list .card {
          width: calc((100vw - 20px - 15px) / 2);
          margin: 10px 0 10px 15px; }
          #support .support_contents .letssupport_contents .list .card:nth-of-type(odd) {
            margin-left: 0; }
          #support .support_contents .letssupport_contents .list .card .card_ .card_img {
            height: 68%; }
          #support .support_contents .letssupport_contents .list .card .card_ p {
            margin: 8px 5px 0;
            font-size: 12px;
            line-height: 15px;
            padding-right: 15px; }
            #support .support_contents .letssupport_contents .list .card .card_ p span {
              font-size: 10px; }
          #support .support_contents .letssupport_contents .list .card .card_ .icn {
            width: 25%;
            position: absolute;
            top: 45%;
            right: 4px;
            z-index: 4; }
          #support .support_contents .letssupport_contents .list .card .date {
            font-size: 10px;
            position: absolute;
            bottom: 4px;
            right: 4px;
            padding: 3px 8px; }
          #support .support_contents .letssupport_contents .list .card.back_card {
            box-shadow: none;
            background: #fff; }
            #support .support_contents .letssupport_contents .list .card.back_card img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%); }
    #support .support_contents .pp_letter_contents {
      font-size: 19px; }
      #support .support_contents .pp_letter_contents .post {
        width: 25px; }
      #support .support_contents .pp_letter_contents .none_letters {
        width: 100%;
        height: auto;
        margin: 15px auto 0;
        border-radius: 0;
        padding: 15px 4px; }
        #support .support_contents .pp_letter_contents .none_letters .letters {
          width: 47%;
          display: inline-block;
          background: #fff;
          font-size: 14px;
          text-align: left;
          padding: 0 12px 20px;
          margin: 1%; }
          #support .support_contents .pp_letter_contents .none_letters .letters:nth-of-type(3) {
            display: none; }
          #support .support_contents .pp_letter_contents .none_letters .letters img {
            display: block;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 13px auto; }
          #support .support_contents .pp_letter_contents .none_letters .letters p {
            font-size: 12px;
            font-weight: bold;
            position: relative;
            padding: 0 8px;
            margin: 0 auto 15px;
            line-height: 15px; }
            #support .support_contents .pp_letter_contents .none_letters .letters p:before {
              content: '';
              display: inline-block;
              width: 1px;
              height: 50%;
              background: #cccccc;
              position: absolute;
              top: 0;
              left: 0; }
            #support .support_contents .pp_letter_contents .none_letters .letters p:after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 50%;
              background: #3b42ea;
              position: absolute;
              top: 50%;
              left: 0; }
    #support .support_contents .choose {
      margin: 28px auto 0;
      display: block;
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      border-radius: 3px;
      padding: 3px 0;
      width: 240px;
      height: 58px;
      line-height: 58px;
      background: #f7931e;
      position: relative; }
      #support .support_contents .choose img {
        display: inline-block;
        vertical-align: middle;
        width: 31px;
        margin-bottom: 8px; }
      #support .support_contents .choose:after {
        content: ''; }
      #support .support_contents .choose:hover:after {
        right: none; }
  #support .management_contents {
    padding-top: 20px; }
    #support .management_contents .archived {
      width: 96%;
      height: auto;
      margin: auto;
      background: #e5e5e5;
      padding: 0 10px 7px; }
      #support .management_contents .archived .archived_title {
        font-size: 15px;
        line-height: 40px;
        height: 40px; }
        #support .management_contents .archived .archived_title img {
          width: 31px;
          margin-right: 8px; }
      #support .management_contents .archived .archived_contents {
        width: 90%;
        margin: 10px auto 25px;
        text-align: center;
        padding: 14px; }
        #support .management_contents .archived .archived_contents .archived_left {
          width: 201px;
          height: 136px;
          display: inline-block;
          background: no-repeat center / cover; }
        #support .management_contents .archived .archived_contents .archived_right {
          text-align: left;
          width: 100%;
          height: auto;
          margin-left: 0; }
          #support .management_contents .archived .archived_contents .archived_right .address {
            font-size: 14px;
            line-height: 17px;
            width: 100%;
            height: 55px;
            margin-top: 10px;
            position: relative;
            display: inline-block; }
            #support .management_contents .archived .archived_contents .archived_right .address span {
              vertical-align: top;
              font-size: 14px; }
          #support .management_contents .archived .archived_contents .archived_right .gift {
            height: 40px;
            overflow: hidden;
            font-size: 17px;
            font-weight: bold;
            color: #3b42ea;
            margin-top: 3px;
            display: block; }
          #support .management_contents .archived .archived_contents .archived_right .gift_contents {
            display: block;
            width: 160px;
            height: 45px;
            line-height: 45px;
            float: none;
            margin: 10px auto 0; }
            #support .management_contents .archived .archived_contents .archived_right .gift_contents p {
              font-size: 14px;
              margin-left: 11px; }
              #support .management_contents .archived .archived_contents .archived_right .gift_contents p:before {
                content: '';
                display: block;
                width: 18px;
                height: 24px;
                position: absolute;
                top: 9px;
                left: 3px;
                background: no-repeat center/cover url(/assets/images/support/present_white.svg); }
              #support .management_contents .archived .archived_contents .archived_right .gift_contents p:after {
                content: '';
                position: relative;
                top: 0;
                left: 10px; }
              #support .management_contents .archived .archived_contents .archived_right .gift_contents p:hover:after {
                left: 13px; }
    #support .management_contents .not_archived,
    #support .management_contents .receipt {
      width: 100%;
      margin: 35px auto 0;
      background: none; }
      #support .management_contents .not_archived .not_archived_title,
      #support .management_contents .not_archived .receipt_title,
      #support .management_contents .receipt .not_archived_title,
      #support .management_contents .receipt .receipt_title {
        font-size: 15px;
        line-height: 40px;
        height: 40px;
        width: 97%;
        margin: auto; }
        #support .management_contents .not_archived .not_archived_title img,
        #support .management_contents .not_archived .receipt_title img,
        #support .management_contents .receipt .not_archived_title img,
        #support .management_contents .receipt .receipt_title img {
          width: 31px; }
      #support .management_contents .not_archived .receipt_title img,
      #support .management_contents .receipt .receipt_title img {
        width: 31px; }
      #support .management_contents .not_archived .not_archived_contents,
      #support .management_contents .not_archived .receipt_contents,
      #support .management_contents .receipt .not_archived_contents,
      #support .management_contents .receipt .receipt_contents {
        width: calc((100vw - 20px - 15px) / 2);
        margin: 0;
        min-height: inherit;
        padding: 10px;
        margin: 10px 3px;
        box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.2); }
        #support .management_contents .not_archived .not_archived_contents:nth-of-type(3),
        #support .management_contents .not_archived .receipt_contents:nth-of-type(3),
        #support .management_contents .receipt .not_archived_contents:nth-of-type(3),
        #support .management_contents .receipt .receipt_contents:nth-of-type(3) {
          display: none; }
        #support .management_contents .not_archived .not_archived_contents img,
        #support .management_contents .not_archived .receipt_contents img,
        #support .management_contents .receipt .not_archived_contents img,
        #support .management_contents .receipt .receipt_contents img {
          width: 100%;
          object-fit: cover;
          height: 25vw;
          display: block; }
        #support .management_contents .not_archived .not_archived_contents .address,
        #support .management_contents .not_archived .receipt_contents .address,
        #support .management_contents .receipt .not_archived_contents .address,
        #support .management_contents .receipt .receipt_contents .address {
          height: 67px;
          font-size: 12px;
          line-height: 16px; }
          #support .management_contents .not_archived .not_archived_contents .address span,
          #support .management_contents .not_archived .receipt_contents .address span,
          #support .management_contents .receipt .not_archived_contents .address span,
          #support .management_contents .receipt .receipt_contents .address span {
            font-size: 10px; }
        #support .management_contents .not_archived .not_archived_contents .gift,
        #support .management_contents .not_archived .receipt_contents .gift,
        #support .management_contents .receipt .not_archived_contents .gift,
        #support .management_contents .receipt .receipt_contents .gift {
          height: 50px;
          line-height: 16px;
          font-size: 12px;
          margin: 7px 0; }
        #support .management_contents .not_archived .not_archived_contents .month,
        #support .management_contents .not_archived .receipt_contents .month,
        #support .management_contents .receipt .not_archived_contents .month,
        #support .management_contents .receipt .receipt_contents .month {
          font-size: 12px;
          padding: 3px 0; }
  #banners {
    padding: 20px 20px 40px;
    font-size: 0;
    letter-spacing: 0; }
    #banners a {
      width: calc(50% - 13px);
      margin: 26px 0 0 26px; }
      #banners a:nth-of-type(odd) {
        margin-left: 0; }
      #banners a:nth-of-type(-n + 2) {
        margin-top: 0; } }

.next {
  margin: 15px auto 0;
  border-radius: 3px;
  display: block;
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 42px;
  background: #f7931e;
  width: 300px;
  height: 42px;
  position: relative; }
  .next:after {
    content: '';
    transition: all .2s ease-out;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; }
  .next:hover:after {
    right: 13px; }

.return {
  background: #fff;
  border: 1px solid #cccccc;
  color: #666666; }

#moving fieldset label dl dd,
#moving fieldset .label dl dd,
#moving fieldset li dl dd,
#moving .list label dl dd,
#moving .list .label dl dd,
#moving .list li dl dd {
  width: 478px; }

#moving .modal .wrap {
  width: 640px;
  text-align: left;
  line-height: 28px; }
  #moving .modal .wrap p {
    text-align: center;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    padding: 45px 0;
    margin-bottom: 30px; }
  #moving .modal .wrap img {
    display: block;
    width: 560px;
    height: auto;
    margin: 30px 0; }
  #moving .modal .wrap .price_block {
    margin-top: 5px; }
    #moving .modal .wrap .price_block h3 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: .05em;
      margin-bottom: 0;
      margin: 40px 0 0; }
    #moving .modal .wrap .price_block .type {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 15px 0 10px;
      padding: 0;
      border: none; }
    #moving .modal .wrap .price_block.tohoku table.left tr:nth-of-type(1) th {
      background: #9DC3E3; }
    #moving .modal .wrap .price_block.tohoku table.center tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.tohoku table.center tr:nth-of-type(2) th:nth-last-of-type(1), #moving .modal .wrap .price_block.tohoku table.right tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.tohoku table.right tr:nth-of-type(2) th:nth-last-of-type(1) {
      background: #9DC3E3; }
    #moving .modal .wrap .price_block.tohoku table.center tr:nth-of-type(2) th:not(:last-child), #moving .modal .wrap .price_block.tohoku table.right tr:nth-of-type(2) th:not(:last-child) {
      background: #DDEBF5; }
    #moving .modal .wrap .price_block.tokyo table.left tr:nth-of-type(1) th {
      background: #FB7F7F; }
    #moving .modal .wrap .price_block.tokyo table.center tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.tokyo table.center tr:nth-of-type(2) th:nth-last-of-type(1), #moving .modal .wrap .price_block.tokyo table.right tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.tokyo table.right tr:nth-of-type(2) th:nth-last-of-type(1) {
      background: #FB7F7F; }
    #moving .modal .wrap .price_block.tokyo table.center tr:nth-of-type(2) th:not(:last-child), #moving .modal .wrap .price_block.tokyo table.right tr:nth-of-type(2) th:not(:last-child) {
      background: #FDD7D8; }
    #moving .modal .wrap .price_block.chubu table.left tr:nth-of-type(1) th {
      background: #FDD777; }
    #moving .modal .wrap .price_block.chubu table.center tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.chubu table.center tr:nth-of-type(2) th:nth-last-of-type(1), #moving .modal .wrap .price_block.chubu table.right tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.chubu table.right tr:nth-of-type(2) th:nth-last-of-type(1) {
      background: #FDD777; }
    #moving .modal .wrap .price_block.chubu table.center tr:nth-of-type(2) th:not(:last-child), #moving .modal .wrap .price_block.chubu table.right tr:nth-of-type(2) th:not(:last-child) {
      background: #FFF0D0; }
    #moving .modal .wrap .price_block.kansai table.left tr:nth-of-type(1) th {
      background: #ABCE94; }
    #moving .modal .wrap .price_block.kansai table.center tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.kansai table.center tr:nth-of-type(2) th:nth-last-of-type(1), #moving .modal .wrap .price_block.kansai table.right tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.kansai table.right tr:nth-of-type(2) th:nth-last-of-type(1) {
      background: #ABCE94; }
    #moving .modal .wrap .price_block.kansai table.center tr:nth-of-type(2) th:not(:last-child), #moving .modal .wrap .price_block.kansai table.right tr:nth-of-type(2) th:not(:last-child) {
      background: #E2EFDC; }
    #moving .modal .wrap .price_block.kyushu table.left tr:nth-of-type(1) th {
      background: #F1B08A; }
    #moving .modal .wrap .price_block.kyushu table.center tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.kyushu table.center tr:nth-of-type(2) th:nth-last-of-type(1), #moving .modal .wrap .price_block.kyushu table.right tr:nth-of-type(1) th,
    #moving .modal .wrap .price_block.kyushu table.right tr:nth-of-type(2) th:nth-last-of-type(1) {
      background: #F1B08A; }
    #moving .modal .wrap .price_block.kyushu table.center tr:nth-of-type(2) th:not(:last-child), #moving .modal .wrap .price_block.kyushu table.right tr:nth-of-type(2) th:not(:last-child) {
      background: #FAE4D8; }
    #moving .modal .wrap .price_block table {
      border: solid 1px #000;
      font-size: 14px;
      float: left;
      text-align: center;
      line-height: 1.3; }
      #moving .modal .wrap .price_block table.left {
        width: 20%; }
        #moving .modal .wrap .price_block table.left tr:nth-of-type(1) th {
          height: 80px; }
      #moving .modal .wrap .price_block table.center, #moving .modal .wrap .price_block table.right {
        width: 39%; }
        #moving .modal .wrap .price_block table.center tr:nth-of-type(1) th, #moving .modal .wrap .price_block table.right tr:nth-of-type(1) th {
          height: 30px; }
        #moving .modal .wrap .price_block table.center tr:nth-of-type(2) th, #moving .modal .wrap .price_block table.right tr:nth-of-type(2) th {
          height: 50px;
          border-left: solid 1px #000; }
        #moving .modal .wrap .price_block table.center .bt:before, #moving .modal .wrap .price_block table.right .bt:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 1px;
          background: #000; }
      #moving .modal .wrap .price_block table.left, #moving .modal .wrap .price_block table.center {
        margin-right: 1%; }
      #moving .modal .wrap .price_block table th,
      #moving .modal .wrap .price_block table td {
        padding: 0;
        box-sizing: border-box;
        font-weight: bold;
        vertical-align: middle;
        position: relative; }
      #moving .modal .wrap .price_block table td {
        height: 30px;
        border: solid 1px #000; }
        #moving .modal .wrap .price_block table td.row7 {
          height: 210px; }
        #moving .modal .wrap .price_block table td.row15 {
          height: 450px; }
        #moving .modal .wrap .price_block table td.row20 {
          height: 600px; }
      #moving .modal .wrap .price_block table .gray {
        color: #999; }

#moving .step {
  margin-bottom: 30px; }
  #moving .step li {
    width: 160px; }

#moving .induction {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0 52px; }

#moving .number {
  font-size: 15px;
  border-bottom: solid 1px #CDCDCD;
  margin: 35px 0 15px;
  padding-bottom: 10px; }
  #moving .number:before {
    content: '供給地点番号';
    font-weight: bold;
    margin-right: 10px; }

#moving .contents_title {
  font-size: 16px;
  font-weight: bold;
  margin: 0; }

#moving h2 {
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 23px;
  border-bottom: 1px solid #cccccc;
  position: relative; }
  #moving h2:before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: #3b42ea;
    position: absolute;
    top: 50px;
    left: 0; }

#moving .wrap,
#moving .done {
  width: 720px;
  padding: 30px;
  margin: 0 auto;
  text-align: center; }
  #moving .wrap .message,
  #moving .done .message {
    text-align: left;
    font-size: 15px;
    line-height: 2.2;
    padding-bottom: 30px; }
    #moving .wrap .message a,
    #moving .done .message a {
      color: #3b42ea;
      text-decoration: underline; }

#moving .confirm .check_contents,
#moving .application2 .check_contents {
  width: 720px;
  margin: auto; }
  #moving .confirm .check_contents:nth-of-type(2) .plan,
  #moving .application2 .check_contents:nth-of-type(2) .plan {
    border: none; }
  #moving .confirm .check_contents .title,
  #moving .application2 .check_contents .title {
    font-size: 16px;
    background: #e5effc;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    padding-left: 25px;
    margin: 0;
    text-align: left; }
  #moving .confirm .check_contents .p,
  #moving .application2 .check_contents .p {
    background: #e9e8fc; }
  #moving .confirm .check_contents .plan,
  #moving .application2 .check_contents .plan {
    border: 1px solid #cccccc;
    padding: 20px;
    margin-bottom: 25px;
    line-height: 20px; }
    #moving .confirm .check_contents .plan .plan_title,
    #moving .application2 .check_contents .plan .plan_title {
      font-size: 16px;
      font-weight: bold;
      text-align: left;
      margin: 0 0 17px; }
      #moving .confirm .check_contents .plan .plan_title span,
      #moving .application2 .check_contents .plan .plan_title span {
        font-size: 20px;
        display: block;
        margin-top: 7px; }
  #moving .confirm .check_contents .plan2,
  #moving .application2 .check_contents .plan2 {
    width: 100%;
    margin-bottom: 42px; }
    #moving .confirm .check_contents .plan2 div,
    #moving .application2 .check_contents .plan2 div {
      padding: 0 20px;
      border-bottom: 1px solid #cccccc; }
      #moving .confirm .check_contents .plan2 div p,
      #moving .application2 .check_contents .plan2 div p {
        font-weight: 400;
        display: inline-block;
        margin: 13px 0; }
        #moving .confirm .check_contents .plan2 div p:nth-of-type(2),
        #moving .application2 .check_contents .plan2 div p:nth-of-type(2) {
          float: right; }

#moving .cancel {
  width: 720px;
  padding: 30px 0;
  margin: 0 auto; }
  #moving .cancel .message2 {
    width: 100%;
    background: #f2f2f2;
    padding: 20px;
    line-height: 24px;
    letter-spacing: .01em; }
  #moving .cancel ol {
    display: block;
    margin: 23px 0 45px;
    letter-spacing: .05em; }

#moving .cancel2 {
  width: 720px;
  padding: 30px 0;
  margin: 0 auto; }
  #moving .cancel2 dd {
    width: 448px;
    padding-right: 20px;
    line-height: 30px; }
  #moving .cancel2 .note {
    line-height: 1.7; }

#moving .application {
  width: 720px;
  padding: 30px 0;
  margin: 0 auto; }
  #moving .application fieldset label dl dd,
  #moving .application fieldset .label dl dd,
  #moving .application fieldset li dl dd,
  #moving .application .list label dl dd,
  #moving .application .list .label dl dd,
  #moving .application .list li dl dd {
    width: 448px; }
  #moving .application .induction {
    margin: 0 0 52px;
    padding: 0; }
  #moving .application .come {
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 52px; }
  #moving .application .text {
    padding: 20px;
    background: #F2F2F2;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 5px; }
    #moving .application .text a:hover {
      text-decoration: underline; }
  #moving .application .start_date .contents_title {
    font-size: 16px;
    font-weight: bold;
    margin: 37px 0 13px; }
  #moving .application .start_date fieldset dt {
    width: 270px; }
  #moving .application .start_date fieldset dd {
    line-height: 30px; }
  #moving .application .start_date fieldset .pref {
    height: auto;
    border-top: 0; }
    #moving .application .start_date fieldset .pref dt,
    #moving .application .start_date fieldset .pref dd {
      padding-bottom: 15px;
      display: table-cell; }
    #moving .application .start_date fieldset .pref dt:after {
      top: 20px;
      transform: translate(0, 0); }
    #moving .application .start_date fieldset .pref dd {
      width: 448px;
      padding-right: 20px; }
      #moving .application .start_date fieldset .pref dd #address {
        display: block;
        width: 100%; }
  #moving .application .start_date .note {
    font-size: 13px;
    line-height: 20px;
    margin: 10px 0 25px;
    font-weight: 400; }
  #moving .application .start_date .tos {
    font-size: 16px; }
    #moving .application .start_date .tos span {
      display: block;
      margin-bottom: 20px;
      line-height: 22px; }
    #moving .application .start_date .tos button {
      position: relative;
      margin-right: 60px;
      font-size: 16px;
      color: #3b42ea; }
      #moving .application .start_date .tos button:after {
        content: '';
        display: block;
        position: absolute;
        top: 4px;
        right: -18px;
        width: 13px;
        height: 16px;
        background: no-repeat center/cover url(/assets/images/common/tbc.svg); }
    #moving .application .start_date .tos .check {
      font-weight: bold; }

#moving .application2 {
  width: 720px;
  padding: 30px 0;
  margin: 0 auto; }
  #moving .application2 .check_contents .p {
    background: #e5effc; }
  #moving .application2 .list {
    margin-bottom: 32px;
    margin-top: 10px; }
    #moving .application2 .list .ad {
      width: 478px;
      line-height: 1;
      font-size: 0;
      letter-spacing: 0;
      height: 60px; }
      #moving .application2 .list .ad:before,
      #moving .application2 .list .ad p {
        display: inline-block;
        vertical-align: middle; }
      #moving .application2 .list .ad:before {
        content: '';
        width: 0;
        height: 100%; }
      #moving .application2 .list .ad p {
        line-height: 1.3;
        font-size: 15px; }
  #moving .application2 .contents_title {
    margin: 0; }
  #moving .application2 .check {
    font-weight: bold; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #moving {
    margin-bottom: 80px; }
    #moving .step {
      margin-bottom: 30px; }
      #moving .step li {
        width: 150px; } }

@media screen and (max-width: 767px) {
  section.page {
    background: #fff; }
  #moving {
    margin-bottom: 80px; }
    #moving fieldset label dl dt:after,
    #moving fieldset .label dl dt:after {
      top: 50%;
      transform: translate(0, -50%); }
    #moving fieldset label dl dd,
    #moving fieldset .label dl dd {
      width: 100%; }
    #moving .modal .wrap {
      width: 100%;
      line-height: 28px;
      padding-bottom: 10px; }
      #moving .modal .wrap p {
        text-align: center;
        font-size: 24px;
        border-bottom: 1px solid #cccccc;
        padding: 45px 0;
        margin-bottom: 30px; }
      #moving .modal .wrap img {
        display: block;
        width: 100%;
        height: auto;
        margin: 30px 0; }
      #moving .modal .wrap .price_block {
        padding: 0 7px; }
        #moving .modal .wrap .price_block h3 {
          font-size: 16px;
          margin-bottom: -20px; }
        #moving .modal .wrap .price_block .type {
          font-size: 14px; }
        #moving .modal .wrap .price_block table {
          font-size: 8px; }
          #moving .modal .wrap .price_block table .sp {
            display: block; }
          #moving .modal .wrap .price_block table.left {
            width: 14%; }
            #moving .modal .wrap .price_block table.left tr:nth-of-type(1) th {
              height: 50px; }
          #moving .modal .wrap .price_block table.center, #moving .modal .wrap .price_block table.right {
            width: 42%; }
            #moving .modal .wrap .price_block table.center tr:nth-of-type(1) th, #moving .modal .wrap .price_block table.right tr:nth-of-type(1) th {
              height: 20px; }
            #moving .modal .wrap .price_block table.center tr:nth-of-type(2) th, #moving .modal .wrap .price_block table.right tr:nth-of-type(2) th {
              height: 30px; }
          #moving .modal .wrap .price_block table td {
            height: 20px; }
            #moving .modal .wrap .price_block table td.row7 {
              height: 140px; }
            #moving .modal .wrap .price_block table td.row15 {
              height: 300px; }
            #moving .modal .wrap .price_block table td.row20 {
              height: 400px; }
    #moving .step {
      display: block;
      margin: 10px 0 0; }
      #moving .step li {
        width: 100%; }
    #moving .induction {
      margin: 25px 0;
      text-align: center;
      line-height: 20px;
      padding: 0 10px; }
    #moving .number {
      font-size: 15px;
      border-bottom: solid 1px #CDCDCD;
      margin: 35px 0 15px;
      padding-bottom: 10px; }
      #moving .number:before {
        content: '供給地点番号';
        font-weight: bold;
        margin-right: 10px; }
    #moving .contents_title {
      font-size: 16px;
      font-weight: bold;
      margin: 0; }
    #moving h2 {
      font-size: 16px;
      font-weight: bold;
      padding: 13px;
      margin-bottom: 23px;
      border-bottom: 1px solid #cccccc;
      position: relative; }
      #moving h2:before {
        content: '';
        display: block;
        width: 20px;
        height: 1px;
        background: #3b42ea;
        position: absolute;
        top: 42px;
        left: 0; }
    #moving .wrap,
    #moving .done {
      width: 100%;
      padding: 0 10px;
      margin: 0 auto; }
      #moving .wrap .message,
      #moving .done .message {
        font-size: 13px;
        line-height: 2.0;
        padding-bottom: 0; }
    #moving .confirm,
    #moving .application2 {
      padding: 0 10px; }
      #moving .confirm .check_contents,
      #moving .application2 .check_contents {
        width: 100%;
        margin: auto;
        padding: 0; }
        #moving .confirm .check_contents:nth-of-type(2) .plan,
        #moving .application2 .check_contents:nth-of-type(2) .plan {
          border: none; }
        #moving .confirm .check_contents .title,
        #moving .application2 .check_contents .title {
          font-size: 13px;
          height: 30px;
          line-height: 30px;
          padding-left: 8px; }
        #moving .confirm .check_contents .plan,
        #moving .application2 .check_contents .plan {
          padding: 15px 12px; }
          #moving .confirm .check_contents .plan .plan_title,
          #moving .application2 .check_contents .plan .plan_title {
            margin: 0 0 15px;
            font-size: 14px; }
            #moving .confirm .check_contents .plan .plan_title span,
            #moving .application2 .check_contents .plan .plan_title span {
              font-size: 16px;
              margin-top: 3px; }
        #moving .confirm .check_contents .plan2,
        #moving .application2 .check_contents .plan2 {
          margin-bottom: 42px; }
          #moving .confirm .check_contents .plan2 div,
          #moving .application2 .check_contents .plan2 div {
            padding: 0 2px;
            border-bottom: 1px solid #cccccc; }
            #moving .confirm .check_contents .plan2 div p,
            #moving .application2 .check_contents .plan2 div p {
              display: block;
              margin: 13px 0; }
              #moving .confirm .check_contents .plan2 div p:nth-of-type(2),
              #moving .application2 .check_contents .plan2 div p:nth-of-type(2) {
                float: none; }
    #moving .cancel {
      width: 100%;
      padding: 0 10px; }
      #moving .cancel .message2 {
        width: 100%;
        background: #f2f2f2;
        padding: 20px;
        line-height: 24px;
        letter-spacing: .01em; }
      #moving .cancel ol {
        display: block;
        margin: 23px 0 45px;
        letter-spacing: .05em; }
    #moving .cancel2 {
      width: 100%;
      padding: 0 10px; }
      #moving .cancel2 .note {
        line-height: 18px; }
      #moving .cancel2 dd {
        width: 100%; }
    #moving .application {
      width: 100%;
      padding: 20px 10px;
      margin: 0 auto; }
      #moving .application .start_date fieldset label dl dt,
      #moving .application .start_date fieldset label dl dd,
      #moving .application .start_date fieldset .label dl dt,
      #moving .application .start_date fieldset .label dl dd,
      #moving .application .start_date fieldset li dl dt,
      #moving .application .start_date fieldset li dl dd,
      #moving .application .start_date .list label dl dt,
      #moving .application .start_date .list label dl dd,
      #moving .application .start_date .list .label dl dt,
      #moving .application .start_date .list .label dl dd,
      #moving .application .start_date .list li dl dt,
      #moving .application .start_date .list li dl dd {
        width: 100%; }
      #moving .application .induction {
        margin-bottom: 15px; }
      #moving .application .come {
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        margin-bottom: 15px; }
      #moving .application .text {
        padding: 20px;
        font-size: 13px;
        margin-top: 5px; }
      #moving .application .start_date .contents_title {
        font-size: 15px;
        margin: 20px 0 13px; }
      #moving .application .start_date fieldset input[name=zip] {
        width: 40%; }
      #moving .application .start_date fieldset .pref dt,
      #moving .application .start_date fieldset .pref dd {
        padding-bottom: 10px;
        display: block; }
      #moving .application .start_date fieldset .pref dt:after {
        top: 50%;
        transform: translate(0, -50%); }
      #moving .application .start_date fieldset .pref dd {
        width: auto;
        padding-right: 10px; }
        #moving .application .start_date fieldset .pref dd #address {
          margin-top: 10px; }
      #moving .application .start_date .note {
        margin: 10px 0; }
      #moving .application .start_date .tos {
        font-size: 13px; }
        #moving .application .start_date .tos span {
          margin-bottom: 10px;
          line-height: 20px; }
        #moving .application .start_date .tos button {
          display: block;
          margin-right: 0; }
    #moving .application2 {
      width: 100%;
      padding: 0 10px; }
      #moving .application2 .list {
        margin-bottom: 32px;
        margin-top: 0; }
        #moving .application2 .list .ad {
          width: 100%;
          height: 75px; }
          #moving .application2 .list .ad:before,
          #moving .application2 .list .ad p {
            display: inline-block;
            vertical-align: middle; }
          #moving .application2 .list .ad:before {
            content: '';
            width: 0;
            height: 100%; }
          #moving .application2 .list .ad p {
            line-height: 1.3;
            font-size: 13px; }
      #moving .application2 .contents_title {
        margin: 0 0 5px; }
      #moving .application2 .check {
        font-weight: bold; } }

#unsubscribe .wrap {
  width: 720px;
  background: #F2F2F2;
  padding: 30px;
  margin: 30px auto 0; }
  #unsubscribe .wrap .message {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.7; }
  #unsubscribe .wrap .frame {
    background: #fff;
    border-radius: 4px;
    border: solid 1px #CDCDCD;
    padding: 25px;
    margin-top: 1em;
    font-size: 14px;
    line-height: 1.7; }
    #unsubscribe .wrap .frame ol {
      list-style: decimal;
      margin-top: 1em;
      padding-left: 1.5em; }
      #unsubscribe .wrap .frame ol li {
        margin-top: 1em; }
      #unsubscribe .wrap .frame ol ul {
        list-style: disc;
        padding-left: 1.5em; }
  #unsubscribe .wrap h2 {
    font-size: 18px;
    text-align: center;
    border-bottom: solid 1px #B4B4B4;
    padding-bottom: 5px; }
  #unsubscribe .wrap .question ol {
    list-style: decimal;
    padding-left: 1.5em; }
    #unsubscribe .wrap .question ol li {
      counter-increment: q;
      display: inline-block;
      width: 50%;
      padding-left: 20px;
      position: relative; }
      #unsubscribe .wrap .question ol li:before {
        content: counter(q) ".";
        position: absolute;
        left: 0;
        font-size: 15px;
        font-weight: bold;
        top: 15px;
        height: 20px;
        line-height: 20px; }
      #unsubscribe .wrap .question ol li:nth-last-of-type(1) {
        width: 100%; }
        #unsubscribe .wrap .question ol li:nth-last-of-type(1) textarea {
          display: block;
          width: 100%;
          height: 150px;
          margin-top: 10px;
          font-size: 15px; }

@media screen and (max-width: 767px) {
  #unsubscribe main {
    background: none;
    padding: 0 15px 50px; }
  #unsubscribe .wrap {
    width: auto;
    background: #F2F2F2;
    padding: 0;
    margin-top: 15px; }
    #unsubscribe .wrap .message {
      font-size: 14px; }
    #unsubscribe .wrap .frame {
      padding: 15px;
      font-size: 13px; }
    #unsubscribe .wrap h2 {
      font-size: 15px;
      padding-bottom: 3px; }
    #unsubscribe .wrap .question ol li {
      display: block;
      width: 100%; }
      #unsubscribe .wrap .question ol li:before {
        top: 0; } }

/* override */
#alert .modal .md-message {
  white-space: pre-line; }

/* デフォルト(みん電)の色設定 */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between; }
  #wrapper .bgcolor,
  #wrapper .before_bg:before,
  #wrapper .after_bg:after,
  #wrapper .hover_bg:hover {
    background-color: #20920e !important;
    transition: all .2s ease-out; }
  #wrapper .listcolor li:before {
    background: #20920e; }
  #wrapper .topcolor_filter:after {
    background-color: inherit; }
  #wrapper > .md-global-menu:not(.md-hidden) {
    position: -webkit-sticky;
    position: sticky;
    top: 0; }
  #wrapper > .md-global-menu + * {
    flex: auto; }

button,
.button,
a {
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  cursor: pointer; }
  button.orange, button.gray,
  .button.orange,
  .button.gray,
  a.orange,
  a.gray {
    background: #FF9425;
    width: 300px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    position: relative; }
    button.orange:hover::after, button.gray:hover::after,
    .button.orange:hover::after,
    .button.gray:hover::after,
    a.orange:hover::after,
    a.gray:hover::after {
      right: 10px; }
    button.orange.no_arrow:hover, button.gray.no_arrow:hover,
    .button.orange.no_arrow:hover,
    .button.gray.no_arrow:hover,
    a.orange.no_arrow:hover,
    a.gray.no_arrow:hover {
      color: #fff;
      background: #B4B4B4; }
    button.orange.no_arrow:after, button.gray.no_arrow:after,
    .button.orange.no_arrow:after,
    .button.gray.no_arrow:after,
    a.orange.no_arrow:after,
    a.gray.no_arrow:after {
      display: none; }
  button.gray,
  .button.gray,
  a.gray {
    background: none;
    border: solid 1px #B4B4B4;
    color: #666; }
    button.gray::after,
    .button.gray::after,
    a.gray::after {
      border-left-color: #666; }
  button.center,
  .button.center,
  a.center {
    margin: 25px auto 0;
    display: block; }

.md-button-container.sub {
  text-align: center;
  margin-bottom: 52px; }

.md-button.sub {
  margin-top: 1em;
  display: inline-block;
  font-size: 14px; }

.md-wrap {
  width: 720px;
  padding: 30px 0;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .md-wrap {
      width: 100%;
      padding: 0 10px; } }

.md-caution {
  color: red;
  font-weight: 800; }

.md-note {
  font-size: 14px;
  line-height: 1.7; }

.md-induction {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  margin: 30px 0 52px; }
  .md-induction.center {
    text-align: center; }

.md-flex {
  display: flex; }

.md-flex.is--center {
  justify-content: center;
  align-items: center; }

.md-main-container {
  width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 50px 68px 185px;
  position: relative; }
  @media screen and (max-width: 767px) {
    .md-main-container {
      width: 100%;
      padding: 30px 15px; } }

.md-customer-support {
  padding: 20px;
  background: #F2F2F2;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 5px; }

.md-modal-closer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; }

.md-suspension {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .md-suspension__message {
    margin: 20px auto 0px auto;
    padding: 0 15px;
    line-height: 1.8;
    font-size: large; }
  .md-suspension__message.is-cause + .md__message {
    margin-top: 1.5em; }
  .md-suspension__nav {
    margin: 0px auto 100px;
    width: 100%;
    max-width: calc(100vw - 30px); }
  .md-suspension__nav a {
    white-space: nowrap; }
  .md-suspension__image {
    display: inline-block;
    margin-top: 40px;
    height: 320px; }
    .md-suspension__image img {
      height: 100%; }
  @media screen and (min-width: 768px) {
    .md-suspension__nav {
      display: flex;
      width: auto; }
    .md-suspension__nav a {
      margin: 0 .5em; } }
  @media screen and (max-width: 767px) {
    .md-suspension__image {
      margin-top: 12px;
      height: 280px;
      width: auto; } }

.md-accordion > dt,
.md-accordion > dd {
  padding: 0;
  min-height: 50px; }

.md-accordion > dt {
  position: relative;
  background: #5eac86;
  color: #fff;
  line-height: 50px;
  font-weight: 800;
  padding: 0 1em;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer; }

.md-accordion > dt .md-accordion__arrow {
  display: flex;
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  left: auto;
  width: 10px;
  height: 10px;
  transform: rotateZ(45deg);
  align-items: center;
  justify-content: center;
  margin: auto;
  background: linear-gradient(0deg, #fff, #fff 2px, transparent 2px) no-repeat, linear-gradient(-90deg, #fff, #fff 2px, transparent 2px) no-repeat;
  background-size: 10px 10px, 10px, 10px;
  transition: all .4s ease-in-out; }

.md-accordion > dt.is--open .md-accordion__arrow {
  transform: rotateZ(0.625turn); }

.md-accordion > dd {
  font-size: 16px;
  padding: 30px 20px;
  line-height: 1.7;
  word-break: break-all;
  transition: all .3s ease-in-out; }

.md-accordion > dd.is--hide {
  min-height: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0 20px; }

.toggle-view.producer .md-flip-board {
  display: none; }

.md-flip-board {
  margin: auto;
  perspective: 300px;
  position: fixed;
  z-index: 100;
  bottom: 95px;
  left: 45px;
  width: 260px;
  height: 74px;
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease-out; }
  .md-flip-board.is--disable {
    display: none;
    pointer-events: none; }
  @media screen and (min-width: 768px) {
    .md-flip-board.is--landed {
      position: absolute;
      bottom: 410px;
      transform: translate3d(0, 80px, 0); } }
  @media screen and (max-width: 767px) {
    .md-flip-board {
      top: auto;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 50px;
      border-radius: 0;
      font-size: 0;
      letter-spacing: 0;
      box-shadow: none;
      perspective: 1000px; } }
  .md-flip-board .face,
  .md-flip-board .back {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 260px;
    height: 74px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transform: rotateX(-90deg);
    border-radius: 60px;
    text-decoration: none;
    background: #fff;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3); }
  .md-flip-board .back[href^="javascript"] {
    pointer-events: none; }
  @media screen and (max-width: 767px) {
    .md-flip-board .face,
    .md-flip-board .back {
      border-radius: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.15); } }
  .md-flip-board__signal {
    position: relative;
    width: 38px;
    height: 38px;
    margin: auto 17px;
    z-index: 1;
    background: #efefef;
    border-radius: 38px; }
  @media screen and (max-width: 767px) {
    .md-flip-board__signal {
      flex: auto 0;
      width: 20px;
      height: 20px;
      min-width: 20px;
      max-height: 20px;
      margin: auto 17px;
      border-radius: 20px; } }
  .md-flip-board__body {
    width: 150px;
    height: auto; }
  @media screen and (max-width: 767px) {
    .md-flip-board__body {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: center;
      width: auto;
      max-height: 32px;
      max-width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .md-flip-board .face .md-flip-board__body {
      flex-direction: row;
      align-items: center; } }
  .md-flip-board__title {
    font-size: 14px; }
  .md-flip-board__title span {
    display: block;
    font-size: 12px;
    color: #8e8e8e; }
  .md-flip-board__kwh {
    font-size: 32px;
    position: relative;
    display: inline-block;
    color: #f7931e; }
  @media screen and (max-width: 767px) {
    .md-flip-board__kwh {
      margin-left: 1em; } }
  .md-flip-board__kwh span {
    position: relative; }
  .md-flip-board__kwh span::after {
    content: 'kWh';
    font-size: 20px; }
  .md-flip-board__kwh::after {
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 17px;
    display: inline-block;
    background-image: url(/assets/images/common/arrow_up.svg);
    background-position: center;
    background-repeat: no-repeat; }
  .md-flip-board__text {
    font-size: 12px;
    line-height: 1.3;
    color: #818181;
    margin-top: 5px;
    height: 2.6em;
    overflow: hidden; }
  .md-flip-board__text:only-child {
    margin-top: 0;
    height: 3.9em; }
  @media screen and (max-width: 767px) {
    .md-flip-board__text:only-child {
      height: auto; } }
  .md-flip-board .is--flipup {
    animation: flip--up 2s ease-in-out 1 forwards; }
  .md-flip-board .is--flipdown {
    animation: flip--down 2s ease-in-out 1 forwards; }

.md-text-link {
  color: #3b42ea;
  text-decoration: underline; }

.md-text-link:not(.is--arrow)[target="_blank"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(/assets/images/common/external-link-48.png) center center no-repeat;
  margin-right: .25em;
  background-size: contain;
  vertical-align: middle; }

.md-text-link.is--arrow:not([target="_blank"])::before {
  content: '';
  display: inline-block;
  width: 0px;
  height: 0px;
  border: solid 5px;
  border-color: transparent transparent #3b42ea #3b42ea;
  transform: scale(1.25, 0.5) rotate(-135deg);
  margin-right: 1em; }

.md-providers {
  font-weight: 800; }

.md-providers::before {
  content: '、';
  display: inline-block;
  font-weight: normal; }

@media screen and (min-width: 768px) {
  .md-list li {
    height: auto;
    background: linear-gradient(90deg, #F2F2F2 240px, transparent 240px); }
  .md-list li dl {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: start; }
  .md-list li dl dt {
    display: flex;
    height: auto;
    min-height: 60px;
    flex: auto 1 0;
    align-items: center;
    background: none; }
  .md-list li dl dd {
    line-height: 1.2;
    padding: .25em 0 .25em 20px;
    word-break: break-all; } }

.md-now-loading {
  text-align: center;
  font-size: 20px;
  margin: 30px; }

.md-textarea {
  margin: 1em;
  width: calc(100% - 2em) !important;
  border: solid 1px #CDCDCD !important; }

.page {
  padding: 30px 0 0 !important; }
  .page.is--simple {
    padding-bottom: 0 !important; }
  .page.is--simple + footer {
    min-height: 100px; }
  .page.is--simple + footer > nav {
    display: none; }

.md-footer.isSimple {
  min-height: 100px; }
  .md-footer.isSimple > nav {
    display: none; }

.md-footer.isConsumer .producer-menu {
  display: none; }

.md-footer.isProducer .consumer-menu {
  display: none; }

@media screen and (max-width: 767px) {
  .page {
    padding: 0 0 50px !important; } }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .page {
    padding-top: 150px !important; } }

/* cider/home.scss で上書きされたのを、再度 cider/common.scss で上書き */
#globalmenu {
  z-index: 1000;
  position: fixed;
  left: 0;
  width: 100%;
  height: 118px; }

@keyframes flip--up {
  from {
    transform: rotateX(-180deg); }
  to {
    transform: rotateX(0); } }

@keyframes flip--down {
  from {
    transform: rotateX(0); }
  to {
    transform: rotateX(180deg); } }

.fade-enter {
  opacity: 0;
  transform: scale(0.9); }

.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms; }

.fade-exit {
  opacity: 1; }

.fade-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms; }

#contact .opmsg {
  margin: 0 auto;
  padding-bottom: 33px;
  text-align: center;
  font-weight: bold;
  font-size: 15px; }

#contact .wrap {
  width: 720px;
  margin: 0 auto; }
  #contact .wrap .login {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc; }
    #contact .wrap .login h2 {
      text-align: center;
      font-weight: bold;
      font-size: 20px; }
  #contact .wrap .form h2 {
    text-align: center;
    font-weight: bold;
    font-size: 20px; }
  #contact .wrap .form h3 {
    text-align: center;
    font-size: 19px;
    margin-bottom: 25px; }
  #contact .wrap .form form fieldset label {
    border: 0;
    height: auto; }
    #contact .wrap .form form fieldset label.label {
      margin-top: 25px; }
    #contact .wrap .form form fieldset label dl dt {
      width: 100%;
      background: none;
      display: block;
      line-height: normal;
      padding: 0; }
      #contact .wrap .form form fieldset label dl dt.required::after {
        position: unset;
        display: inline-block;
        transform: unset;
        margin-left: 20px;
        background: #ff0000;
        border-radius: 20px; }
    #contact .wrap .form form fieldset label dd input {
      width: 100%;
      border: unset;
      border-bottom: 2px solid #e4e4e4; }
    #contact .wrap .form form fieldset label.horizon dl dt {
      height: auto;
      border-bottom: unset; }
    #contact .wrap .form form fieldset label.horizon dl dd {
      margin-top: 20px; }
      #contact .wrap .form form fieldset label.horizon dl dd textarea {
        border: 2px solid #e4e4e4;
        border-radius: 20px;
        cursor: auto; }

#contact .login_modal img {
  display: block;
  width: 105px;
  height: auto;
  margin: 0 auto; }

#contact .login_modal .message {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  margin: 20px 0 30px; }

#contact .login_modal input[type=text], #contact .login_modal input[type=password] {
  display: block;
  width: 100%;
  height: 40px;
  border: solid 1px #B4B4B4 !important;
  border-radius: 3px;
  background: #F9F9F9;
  font-size: 15px;
  margin-top: 22px; }

#contact .login_modal input[type=checkbox] {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: none;
  border: solid 1px #818181;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
          appearance: none;
  vertical-align: middle; }
  #contact .login_modal input[type=checkbox]:checked {
    background: no-repeat center/auto url(/assets/images/common/check.svg); }

#contact .login_modal button[type=submit] {
  margin-top: 22px;
  width: 160px; }

#contact .login_modal label {
  display: block;
  margin-top: 20px;
  cursor: pointer; }
  #contact .login_modal label p {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 14px; }

#contact .login_modal .forget {
  text-align: right;
  font-size: 12px;
  margin-top: 5px; }
  #contact .login_modal .forget a {
    color: #818181; }
    #contact .login_modal .forget a:hover {
      text-decoration: underline; }

#contact .name_label {
  height: 60px; }
  #contact .name_label span {
    width: 60px;
    height: 60px;
    float: left;
    border-radius: 60px;
    overflow: hidden;
    border: solid 4px #FFB13D;
    background: no-repeat center / cover;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle; }
    #contact .name_label span img {
      display: block;
      width: 100%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  #contact .name_label div {
    display: block;
    margin-left: 70px;
    height: 100%; }
    #contact .name_label div p, #contact .name_label div:before {
      display: inline-block;
      vertical-align: middle; }
    #contact .name_label div p {
      font-size: 15px;
      line-height: 1.3; }
    #contact .name_label div:before {
      content: '';
      width: 0;
      height: 100%; }
  #contact .name_label.minden span {
    border-color: #b4b4b4; }
    #contact .name_label.minden span img {
      width: 65%; }

#contact .message_block {
  border-radius: 12px;
  border: solid 1px #CDCDCD;
  background: #f2f2f2;
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
  margin-top: 10px; }

#contact .check_modal .wrap {
  width: 640px; }

#contact .check_modal .title {
  text-align: center;
  font-size: 24px;
  padding-bottom: 15px;
  border-bottom: solid 1px #3748EB;
  margin-bottom: 20px; }

#contact .check_modal .message {
  font-size: 16px;
  font-weight: bold;
  margin: 25px 0; }

#contact .check_modal dd {
  width: 100%; }
  #contact .check_modal dd .non_membrt {
    width: 100%;
    padding: 0 10px;
    line-height: 1.8; }
    #contact .check_modal dd .non_membrt p {
      font-size: 16px;
      display: block;
      padding-bottom: 2px;
      margin: 12px 0;
      border-bottom: 1px solid #cccccc; }
      #contact .check_modal dd .non_membrt p span {
        display: inline-block;
        width: 190px;
        font-weight: bold; }
    #contact .check_modal dd .non_membrt p.md-title-p {
      display: flex; }
      #contact .check_modal dd .non_membrt p.md-title-p .md-title-span {
        width: 190px;
        flex: 1 0 auto; }
      #contact .check_modal dd .non_membrt p.md-title-p .md-title-value-span {
        width: 100%;
        display: block;
        font-weight: normal;
        word-break: break-all; }

#contact .history {
  margin-top: 30px; }
  #contact .history ul {
    border: solid 1px #CDCDCD; }
    #contact .history ul li {
      height: 50px;
      border-bottom: solid 1px #CDCDCD; }
      #contact .history ul li:nth-last-of-type(1) {
        border-bottom: none; }
      #contact .history ul li:nth-of-type(even) {
        background: #f2f2f2; }
    #contact .history ul a {
      display: block;
      height: 100%;
      padding: 0 15px 0 20px; }
      #contact .history ul a:hover p {
        color: #3748EB; }
        #contact .history ul a:hover p:after {
          right: -5px; }
      #contact .history ul a:before,
      #contact .history ul a time,
      #contact .history ul a p {
        display: inline-block;
        vertical-align: middle; }
      #contact .history ul a:before {
        content: '';
        width: 0;
        height: 100%;
        vertical-align: middle; }
      #contact .history ul a time {
        font-size: 15px;
        color: #9A9A9A;
        width: 100px; }
      #contact .history ul a p {
        font-size: 15px;
        color: #333;
        width: 470px;
        padding: 0 20px 0 15px;
        line-height: 1.3;
        position: relative; }
        #contact .history ul a p span {
          text-overflow: ellipsis;
          width: 430px;
          display: block;
          overflow: hidden;
          white-space: nowrap; }
        #contact .history ul a p:before {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          background: #3748EB;
          border-radius: 10px;
          left: 0;
          top: 50%;
          transform: translate(0, -50%); }
        #contact .history ul a p:after {
          content: '';
          position: absolute;
          border: solid 8px transparent;
          border-left-color: #9A9A9A;
          border-right-width: 0;
          border-top-width: 6px;
          border-bottom-width: 6px;
          right: 0;
          top: 50%;
          transform: translate(0, -50%); }

#contact .log .md-msg-nickname {
  padding-left: 70px;
  padding-right: 0; }

#contact .log .md-msg-customer-support {
  padding-right: 70px; }

#contact .log .subject {
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  font-weight: bold;
  position: relative;
  padding-bottom: 5px; }
  #contact .log .subject:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #3748EB;
    transform: translate(-50%, 0); }

#contact .log .message {
  padding-right: 70px; }
  #contact .log .message:nth-of-type(even) {
    padding-left: 70px;
    padding-right: 0; }
  #contact .log .message time {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #818181;
    margin-top: 5px; }

#contact .log time {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #818181;
  margin-top: 5px; }

#contact .md-top-note {
  font-size: 18px;
  color: #ff0101;
  line-height: 1.8; }

#contact fieldset label dl dd {
  width: 100%;
  line-height: unset;
  display: block;
  padding-left: 0; }

#contact fieldset label.horizon dl dd {
  padding: 0;
  display: block;
  width: 100%; }

#contact div.md-nickname {
  margin-left: 0px; }

#contact .md-return-btn {
  background: white; }

#contact .md-message-pre {
  white-space: pre-wrap;
  word-break: break-all; }

#contact dt.md-subject-title {
  width: 134px; }

#contact input.md-subject {
  width: 430px; }

#contact #privacy {
  text-align: center;
  font-weight: bold; }
  #contact #privacy #check_privacy {
    margin-right: 10px;
    top: 4px;
    position: relative; }
  #contact #privacy .check {
    display: inline-block;
    padding-left: 0pt; }

#contact .md-confirm-btn:disabled {
  filter: grayscale(1);
  pointer-events: none; }

@media screen and (max-width: 767px) {
  #contact .opmsg {
    font-size: 13px; }
  #contact #use_30min {
    transform: translate(0, 0); }
  #contact section.page {
    padding-bottom: 0; }
  #contact .wrap {
    width: auto;
    padding: 15px 15px 100px; }
    #contact .wrap .block {
      padding: 15px;
      margin-top: 15px; }
      #contact .wrap .block h2 {
        font-size: 15px;
        line-height: 1.3; }
      #contact .wrap .block h3 {
        font-size: 15px;
        margin-bottom: 15px; }
  #contact .message_block {
    font-size: 13px;
    padding: 10px; }
  #contact .check_modal .wrap {
    width: auto; }
  #contact .check_modal .title {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px; }
  #contact .check_modal .message {
    font-size: 14px;
    line-height: 1.3;
    margin: 15px 0; }
  #contact .check_modal dd .non_membrt {
    line-height: 1.6; }
    #contact .check_modal dd .non_membrt p {
      font-size: 14px;
      border-bottom: 1px solid #cccccc; }
      #contact .check_modal dd .non_membrt p span {
        display: block;
        width: 100%; }
    #contact .check_modal dd .non_membrt p.md-title-p {
      font-size: 14px;
      display: block;
      border-bottom: 1px solid #cccccc;
      width: 100%; }
  #contact .history ul li {
    height: 40px; }
  #contact .history ul a {
    padding: 0 15px; }
    #contact .history ul a:hover p:after {
      right: 0; }
    #contact .history ul a time {
      font-size: 12px;
      width: 75px; }
    #contact .history ul a p {
      font-size: 12px;
      width: calc(100vw - 30px - 30px - 30px - 75px - 10px);
      padding: 0 15px;
      overflow: hidden;
      white-space: nowrap;
      line-height: normal;
      height: auto; }
      #contact .history ul a p span {
        width: 100%; }
      #contact .history ul a p:after {
        border: solid 6px transparent;
        border-left-color: #9A9A9A;
        border-right-width: 0;
        border-top-width: 4px;
        border-bottom-width: 4px; }
  #contact .log .subject {
    font-size: 15px;
    margin-bottom: 15px; }
  #contact .log .message {
    padding-right: 35px; }
    #contact .log .message:nth-of-type(even) {
      padding-left: 35px; }
  #contact fieldset label dl dd {
    width: auto; }
  #contact dt.md-subject-title {
    width: auto; }
  #contact input.md-subject {
    width: 100%; }
  @-moz-document url-prefix() {
    #contact .history ul a p {
      width: calc(100vw - 30px - 30px - 30px - 75px - 30px); } }
  @supports (-ms-ime-align: auto) {
    #contact .history ul a p {
      width: calc(100vw - 30px - 30px - 30px - 75px - 30px); } } }

@media all and (-ms-high-contrast: none) and (max-width: 767px) {
  #contact .history ul a p {
    width: calc(100vw - 30px - 30px - 30px - 75px - 30px); } }

.mt-25 {
  margin-top: 25px; }

#contract .md-number {
  display: flex; }
  @media screen and (max-width: 767px) {
    #contract .md-number {
      flex-direction: column; } }

#contract .md-number::before {
  content: none; }

#contract .md-number span {
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    #contract .md-number span {
      margin-bottom: .5em; } }

#contract .md-number em {
  margin-left: 10px; }

#contract .md-number small {
  display: block;
  font-size: small;
  margin-top: .5em; }

@media screen and (max-width: 767px) {
  #contract .md-number em {
    margin-left: 0; }
  #contract .md-number small {
    display: block;
    font-size: small;
    margin-top: .5em; } }

#contract .md-text p + p {
  margin-top: 1em; }

#contract .md-orange:disabled {
  filter: grayscale(1);
  pointer-events: none; }

#contract .md-select select {
  opacity: 1 !important; }

#contract .md-select::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
  border: solid 5px transparent;
  border-top-color: #818181;
  border-bottom-width: 0; }

#contract .md-validation-message {
  display: block;
  color: red;
  font-weight: 800;
  margin-top: 0.5em;
  opacity: 0;
  pointer-events: none; }

#contract .md-validation-message.show {
  opacity: 1; }

#contract .react-datepicker-popper {
  z-index: 101; }

#contract .red_text {
  color: red; }

#contract .come {
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 52px; }

@media screen and (max-width: 767px) {
  #contract .come {
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    margin-bottom: 15px; } }

#contract .induction {
  margin: 0 0 52px;
  padding: 0; }

@media screen and (max-width: 767px) {
  #contract .induction {
    margin-bottom: 15px; } }

#moving .md-number {
  display: flex; }
  @media screen and (max-width: 767px) {
    #moving .md-number {
      flex-direction: column; } }

#moving .md-number::before {
  content: none; }

#moving .md-number span {
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    #moving .md-number span {
      margin-bottom: .5em; } }

#moving .md-number em {
  margin-left: 10px; }

#moving .md-number small {
  display: block;
  font-size: small;
  margin-top: .5em; }

#moving .md-induction {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  margin: 30px 0 52px;
  line-height: 30px; }

@media screen and (max-width: 767px) {
  #moving .md-number em {
    margin-left: 0; }
  #moving .md-number small {
    display: block;
    font-size: small;
    margin-top: .5em; } }

#moving .md-text p + p {
  margin-top: 1em; }

#moving .md-orange:disabled {
  filter: grayscale(1);
  pointer-events: none; }

#moving .md-select select {
  opacity: 1 !important; }

#moving .md-select::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
  border: solid 5px transparent;
  border-top-color: #818181;
  border-bottom-width: 0; }

#moving .md-validation-message {
  display: block;
  color: red;
  font-weight: 800;
  margin-top: 0.5em;
  opacity: 0;
  pointer-events: none; }

#moving .md-validation-message.show {
  opacity: 1; }

#moving .react-datepicker-popper {
  z-index: 101; }

#moving .discreet {
  color: #808080; }

#moving .red_text {
  color: red;
  font-size: 12px; }

#moving main .application2 form .list ul li dl dd {
  width: 100%; }

#moving .tos a {
  position: relative;
  margin-right: 60px;
  font-size: 16px;
  color: #3b42ea; }
  #moving .tos a:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    right: -18px;
    width: 13px;
    height: 16px;
    background: no-repeat center/cover url(/assets/images/common/tbc.svg); }

@media screen and (max-width: 767px) {
  #moving .tos a {
    display: block;
    margin-right: 0; } }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #moving .tos button {
    overflow: visible; }
  #moving .tos button::after {
    top: -4px !important; } }

#moving .cancel2 .come {
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 52px; }

@media screen and (max-width: 767px) {
  #moving .cancel2 .come {
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    margin-bottom: 15px; } }

#moving .cancel2 .induction {
  margin: 0 0 52px;
  padding: 0; }

@media screen and (max-width: 767px) {
  #moving .cancel2 .induction {
    margin-bottom: 15px; } }

#contract_contents #terms_modal .modal_button button {
  display: block;
  margin: 50px auto 50px; }

#contract_contents .message {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0; }
  #contract_contents .message a {
    color: #f7931e; }

#contract_contents .md-diff {
  color: red; }

#contract_contents .wrap .md-induction {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  margin: 30px 0 52px; }

#contract_contents .wrap .md-top-note {
  font-size: 18px;
  color: #ff0101; }

#contract_contents .wrap .contract .contract_button .contract_button_box button.center {
  background: #fff;
  border: solid 1px #f7931e;
  color: #f7931e;
  width: 200px;
  height: 42px;
  display: block;
  margin: 0 auto 0;
  line-height: 42px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  position: relative; }

#contract_contents .wrap .contract .contract_button .contract_button_box button.orange:disabled {
  filter: grayscale(100%);
  pointer-events: none;
  background: #FF9425;
  color: #FFF; }

#contract_contents .wrap .contract .contract_contents .list ul li dl {
  display: flex;
  justify-content: center; }
  #contract_contents .wrap .contract .contract_contents .list ul li dl dt {
    display: flex;
    align-items: center;
    height: auto;
    line-height: 1.5;
    min-height: 60px; }
  #contract_contents .wrap .contract .contract_contents .list ul li dl dd {
    display: flex;
    flex: auto;
    align-items: center;
    line-height: 1.5;
    min-height: 60px; }

#contract_contents .wrap .contract .contract_contents .list .plan .no_height_dd {
  height: auto;
  margin: 20px 0px; }
  #contract_contents .wrap .contract .contract_contents .list .plan .no_height_dd .red_text {
    color: red; }

#contract_contents .wrap .contract .number:before {
  content: '契約番号'; }

#contract_contents .wrap #confirm ul li {
  height: auto; }
  #contract_contents .wrap #confirm ul li dl {
    display: flex;
    justify-content: center;
    height: 100%; }
    #contract_contents .wrap #confirm ul li dl dt {
      display: flex;
      align-items: center;
      height: auto;
      line-height: 1.5;
      min-height: 60px; }
    #contract_contents .wrap #confirm ul li dl dd {
      display: flex;
      flex: auto;
      align-items: center;
      line-height: 1.5;
      min-height: 60px; }

@media screen and (max-width: 767px) {
  #contract_contents #terms_modal .modal_button button {
    width: 70%;
    margin: 50px auto; }
  #contract_contents .wrap .contract .contract_contents .list ul li dl {
    display: block; }
    #contract_contents .wrap .contract .contract_contents .list ul li dl dt {
      height: 40px;
      line-height: 1;
      min-height: auto; }
    #contract_contents .wrap .contract .contract_contents .list ul li dl dd {
      line-height: 1;
      min-height: auto; }
  #contract_contents .wrap .contract .contract_contents .list .plan .no_height_dd {
    margin: 0px; }
  #contract_contents .wrap .contract .number:before {
    content: '契約番号'; }
  #contract_contents .wrap .contract .contract_button button.center {
    background: #fff;
    border: solid 1px #f7931e;
    color: #f7931e;
    width: 100%;
    height: 30px;
    margin: 10px 0;
    line-height: 29px;
    font-size: 12px; }
  #contract_contents .wrap #confirm ul li {
    height: auto; }
    #contract_contents .wrap #confirm ul li dl {
      display: block; }
      #contract_contents .wrap #confirm ul li dl dt {
        height: 40px;
        line-height: 1;
        min-height: auto; }
      #contract_contents .wrap #confirm ul li dl dd {
        line-height: 1;
        min-height: auto; } }

.bg_green {
  background: rgba(94, 172, 134, 0.8) !important;
  color: #ffffff;
  font-weight: bold;
  line-height: 40px;
  padding-left: 20px; }

#done h2 {
  margin-bottom: 30px; }

#done span {
  line-height: 30px; }

#done .choose {
  text-align: center;
  margin: 58px auto 0;
  display: block;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  border-radius: 3px;
  padding: 3px 0;
  width: 240px;
  height: 58px;
  line-height: 58px;
  background: #f7931e;
  position: relative; }
  #done .choose img {
    display: inline-block;
    vertical-align: middle;
    width: 31px;
    margin-bottom: 8px; }
  #done .choose:after {
    content: '';
    transition: all .2s ease-out;
    position: relative;
    top: -4px;
    right: -26px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; }
  #done .choose:hover:after {
    right: -28px; }

@media screen and (max-width: 767px) {
  #done .choose {
    margin: 28px auto 0;
    display: block;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    padding: 3px 0;
    width: 240px;
    height: 58px;
    line-height: 58px;
    background: #f7931e;
    position: relative; }
    #done .choose img {
      display: inline-block;
      vertical-align: middle;
      width: 31px;
      margin-bottom: 8px; }
    #done .choose:after {
      content: ''; }
    #done .choose:hover:after {
      right: none; } }

#credit_card .cr_msg {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  margin: 20px 0;
  color: red; }

@media screen and (max-width: 767px) {
  #credit_card .cr_msg {
    text-align: left;
    font-size: 9px; } }

#demandClause .modal .wrap {
  width: 640px;
  text-align: left;
  line-height: 28px; }
  #demandClause .modal .wrap p {
    text-align: center;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    padding: 45px 0;
    margin-bottom: 30px; }
  #demandClause .modal .wrap img {
    display: block;
    width: 560px;
    height: auto;
    margin: 30px 0; }
  #demandClause .modal .wrap .price_block {
    margin-top: 5px; }
    #demandClause .modal .wrap .price_block h3 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 40px 0 0; }
    #demandClause .modal .wrap .price_block .type {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 15px 0 10px;
      padding: 0;
      border: none; }

#demandClause .modal .md-demand-clause-center {
  text-align: center; }

#demandClause .modal .md-title {
  text-align: center;
  font-weight: bold;
  font-size: 120%; }

#demandClause .modal .md-underline {
  font-weight: bold;
  text-decoration: underline; }

#demandClause .modal .md-bold {
  font-weight: bold; }

#demandClause table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: solid 1px black; }
  #demandClause table td {
    border: solid 1px black; }

@media screen and (max-width: 767px) {
  #demandClause .modal .wrap {
    width: 100%;
    line-height: 28px;
    padding-bottom: 10px; }
    #demandClause .modal .wrap p {
      text-align: center;
      font-size: 24px;
      border-bottom: 1px solid #cccccc;
      padding: 45px 0;
      margin-bottom: 30px; }
    #demandClause .modal .wrap img {
      display: block;
      width: 100%;
      height: auto;
      margin: 30px 0; } }

#detailed .next:after {
  border-left: 6px solid transparent; }

#detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button {
  margin-bottom: 25px; }
  #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button {
    width: 160px;
    height: 30px;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
    color: #808080;
    font-size: 15px;
    background: #fff;
    border: 1px solid #b3b3b3;
    display: inline-block;
    position: relative;
    margin: 18px 0 0 15px; }
    #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button:after {
      content: '';
      transition: all .2s ease-out;
      position: absolute;
      top: 8px;
      left: 10px;
      display: inline-block;
      margin-left: 9px;
      width: 10px;
      height: 10px;
      border: 1px solid;
      border-color: transparent transparent #565656 #565656;
      transform: rotate(45deg); }
    #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button:hover:after {
      left: 6px; }
  #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right_b:after {
    content: '';
    transition: all .2s ease-out;
    position: absolute;
    top: 8px;
    left: 119px;
    display: inline-block;
    margin-left: 9px;
    width: 10px;
    height: 10px;
    border: 1px solid;
    border-color: transparent transparent #565656 #565656;
    transform: rotate(225deg); }
  #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right_b:hover:after {
    left: 122px; }

#detailed .detailed_frame .detailed_contents .usage_stats h3 {
  padding: 50px 0 0 13px;
  font-size: 15px;
  font-weight: bold;
  position: relative; }

#detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown2 .list,
#detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown2 .list {
  margin-top: 0px; }

#detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top1#dropdown3 .list,
#detailed .detailed_frame .detailed_contents .usage_stats .graph .graph_top .top2#dropdown3 .list {
  margin-top: 0px; }

#detailed .detailed_frame .detailed_contents .md-detail_header {
  display: none; }

#detailed .detailed_frame .detailed_contents .md-detail_title_print {
  display: none; }

#detailed .detailed_frame .detailed_contents .statement .md-bill_title {
  display: flex;
  justify-content: space-between; }

#detailed .detailed_frame .detailed_contents .statement h3 {
  padding: 50px 0 0 13px;
  font-size: 15px;
  font-weight: bold;
  position: relative; }

#detailed .detailed_frame .detailed_contents .statement .md-print_button, #detailed .detailed_frame .detailed_contents .statement .super_button {
  background-color: orange;
  color: #FFFFFF;
  font-weight: bold;
  width: 145px;
  padding: 4px 10px;
  margin: 15px 5px 15px 8px;
  border-radius: 8px;
  border: none; }
  #detailed .detailed_frame .detailed_contents .statement .md-print_button img, #detailed .detailed_frame .detailed_contents .statement .super_button img {
    height: 25px;
    vertical-align: middle;
    margin: 5px; }

#detailed .detailed_frame .detailed_contents .statement .none-statement {
  padding: 100px 0 0 0 !important; }

#detailed .detailed_frame .detailed_contents .none-statement {
  text-align: center;
  padding: 130px 0 0 0 !important;
  font-size: 20px !important;
  font-weight: bold; }

#detailed .md-point-comment {
  margin-top: 5px;
  font-size: 15px; }

@media screen and (max-width: 767px) {
  #detailed {
    /* 買取明細リストの一覧項目 */ }
    #detailed #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button {
      width: 130px;
      display: inline-block;
      position: relative;
      margin: 18px 10px 0; }
      #detailed #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button:after {
        content: '';
        position: absolute;
        top: 8px;
        left: 5px; }
      #detailed #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button button:hover:after {
        left: 5px; }
    #detailed #detailed .detailed_frame .detailed_contents .electricity_usage .arrow_button .right_b:after {
      content: '';
      position: absolute; }
    #detailed .detailed_frame .detailed_contents .statement .list_contents .list .md-bill_title {
      display: block; }
    #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr .md-th {
      width: 175px; }
    #detailed .md-purchase-month {
      position: relative; }
      #detailed .md-purchase-month:after {
        content: '対象年月';
        display: block;
        width: 100px;
        height: 30px;
        background: #999999;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 400; }
    #detailed .md-purchase-month2 {
      position: relative; }
      #detailed .md-purchase-month2:after {
        content: '買取期間';
        display: block;
        width: 100px;
        height: 30px;
        background: #999999;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0; }
    #detailed .md-purchase-kwh {
      position: relative; }
      #detailed .md-purchase-kwh:after {
        content: '買取電力量';
        display: block;
        width: 100px;
        height: 30px;
        background: #999999;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0; }
    #detailed .md-purchase-price {
      position: relative; }
      #detailed .md-purchase-price:after {
        content: 'お支払い料金';
        display: block;
        width: 100px;
        height: 30px;
        background: #999999;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0; }
    #detailed .md-point-comment {
      font-size: 12px; } }

#edit .md-diff {
  color: red; }

#edit .md-account-change-btn:disabled,
#edit .md-fix-btn:disabled {
  filter: grayscale(100%);
  pointer-events: none;
  margin: 25px auto 0; }

#edit .md-contract_status_msg {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 25px auto 0; }

#edit .md-account-name {
  height: 80px; }
  #edit .md-account-name dd {
    line-height: 15px; }
  @media screen and (max-width: 767px) {
    #edit .md-account-name {
      height: 100%; } }

#edit .md-account-isRefuseAdvtMail dd {
  line-height: 15px;
  padding-top: 12px;
  padding-bottom: 12px; }

@media screen and (max-width: 767px) {
  #edit .md-account-isRefuseAdvtMail {
    height: 100%; } }

#wrapper.producer .md-producer,
#wrapper.consumer .md-consumer {
  display: none !important; }

.md-pickup-carousel {
  position: relative; }
  .md-pickup-carousel h2 {
    text-align: center;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    padding: 100px 0 20px; }
    @media screen and (max-width: 767px) {
      .md-pickup-carousel h2 {
        font-size: 18px;
        padding: 35px 0 10px; } }
    .md-pickup-carousel h2 img {
      display: block;
      margin: auto;
      width: 96px;
      padding-bottom: 16px; }
  .md-pickup-carousel .pickup_wrap {
    width: 960px;
    margin: 0 auto 35px;
    position: relative; }
    @media screen and (max-width: 960px) and (min-width: 768px) {
      .md-pickup-carousel .pickup_wrap {
        width: auto;
        padding: 0 20px; } }
    @media screen and (max-width: 767px) {
      .md-pickup-carousel .pickup_wrap {
        width: auto;
        padding: 0 12px;
        margin: 0 auto;
        overflow: hidden; }
        .md-pickup-carousel .pickup_wrap .pickup_p a {
          width: calc((100vw - 24px) / 2);
          margin: 0; }
        .md-pickup-carousel .pickup_wrap .pickup_p a .pickup_text .consumer-name {
          font-size: 14px;
          padding-top: 5px;
          line-height: 1.5; }
        .md-pickup-carousel .pickup_wrap.no_slide {
          padding-top: 60px; }
          .md-pickup-carousel .pickup_wrap.no_slide button {
            display: none; }
          .md-pickup-carousel .pickup_wrap.no_slide .pickup_p a .pickup_text {
            opacity: 1; }
        .md-pickup-carousel .pickup_wrap button {
          display: none; } }
    .md-pickup-carousel .pickup_wrap.no_slide {
      padding-top: 60px; }
      .md-pickup-carousel .pickup_wrap.no_slide button {
        display: none; }
      .md-pickup-carousel .pickup_wrap.no_slide .pickup_p a .pickup_text {
        opacity: 1; }
    .md-pickup-carousel .pickup_wrap button {
      position: absolute;
      top: 181px;
      transform: translate(0, -50%);
      border: none;
      background: none; }
      .md-pickup-carousel .pickup_wrap button.prev {
        left: -20px; }
        .md-pickup-carousel .pickup_wrap button.prev:hover img {
          transform: translate(-5px, 0); }
      .md-pickup-carousel .pickup_wrap button.next {
        right: -20px; }
        .md-pickup-carousel .pickup_wrap button.next:hover img {
          transform: translate(5px, 0); }
      .md-pickup-carousel .pickup_wrap button img {
        display: block; }
  .md-pickup-carousel .pickup_p {
    text-align: center;
    position: relative; }
    .md-pickup-carousel .pickup_p a {
      display: inline-block;
      width: 300px;
      height: auto;
      color: #fff;
      margin: 0 10px;
      outline: none; }
      .md-pickup-carousel .pickup_p a.slick-current .pickup_text, .md-pickup-carousel .pickup_p a.other-current .pickup_text {
        opacity: 1; }
      .md-pickup-carousel .pickup_p a img {
        width: 100%;
        display: block;
        height: auto;
        transition: all .4s ease-in-out; }
      .md-pickup-carousel .pickup_p a .pickup_text {
        text-align: left;
        margin: auto; }
        .md-pickup-carousel .pickup_p a .pickup_text .output_capacity {
          font-size: 30px; }
          .md-pickup-carousel .pickup_p a .pickup_text .output_capacity span {
            font-size: 15px;
            font-weight: 400;
            margin-right: 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid #fff; }
        .md-pickup-carousel .pickup_p a .pickup_text .consumer-name {
          font-size: 18px;
          font-weight: bold;
          line-height: 23px; }
          .md-pickup-carousel .pickup_p a .pickup_text .consumer-name span {
            display: block;
            font-size: 14px; }
        .md-pickup-carousel .pickup_p a .pickup_text .consumer-message {
          padding-top: 8px;
          font-size: 14px;
          white-space: pre-line;
          line-height: 23px; }
        .md-pickup-carousel .pickup_p a .pickup_text .company {
          font-size: 12px;
          padding-top: 8px; }
  .md-pickup-carousel .summary {
    border-radius: 35px;
    background: #fff;
    width: 180px;
    height: 70px;
    display: block;
    font-weight: bold;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    bottom: 54px;
    z-index: 1;
    transform: translate(-50%, 0); }
    .md-pickup-carousel .summary:hover {
      transform: translate(-50%, 0) scale(1.05);
      color: #fff !important;
      border-color: #fff; }
      .md-pickup-carousel .summary:hover .icn_t .svg_color * {
        stroke: #fff !important; }
    .md-pickup-carousel .summary .icn_t {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      .md-pickup-carousel .summary .icn_t svg {
        display: block;
        margin: 0 auto 20px; }

@media all and (-ms-high-contrast: none) {
  .md-consumer .summary {
    bottom: -20px; } }

/*
 * cider/support.scss で定義している #banners は使ってないっぽいので上書き
 * (cf. git grep '#banners' css/)
 */
#banners {
  background: transparent;
  padding: 93px 0;
  text-align: center; }
  @media screen and (max-width: 767px) {
    #banners {
      padding: 60px 20px 40px; } }

.md-global-menu header .right {
  display: none; }

.md-global-menu header .left .member .type-switcher {
  display: none; }

#top_main .top_head .left {
  display: flex;
  align-items: center; }

@media screen and (max-width: 767px) {
  .md-pickup-carousel .summary {
    font-size: 15px;
    bottom: 20px; }
  #top_main .top_head {
    height: 160px; }
    #top_main .top_head .left {
      top: 0;
      width: 100%;
      height: 100%; }
  #top_main .top_head .right {
    border: none;
    margin-top: 6px;
    height: 0; }
  .toggle-view #top_main .top_head .member.md-member {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    align-items: flex-start !important;
    transform: translate(0, 0); }
  #top .top_bottom {
    top: 160px; } }

.invite-friends-modal .c-modal-sns {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .invite-friends-modal .c-modal-sns .c-modal__title {
    width: 100%;
    color: #333; }
  .invite-friends-modal .c-modal-sns .c-modal__title-des {
    width: 100%; }
  .invite-friends-modal .c-modal-sns .c-modal-sns__content {
    width: 100%;
    margin-top: 30px; }
    .invite-friends-modal .c-modal-sns .c-modal-sns__content__box {
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #e6e6e6; }
      .invite-friends-modal .c-modal-sns .c-modal-sns__content__box:last-of-type {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0; }
      .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__title {
        font-size: 16px;
        font-weight: 600;
        text-align: left; }
      .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        position: relative; }
        @media screen and (max-width: 767px) {
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt {
            gap: 20px; } }
        .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__icon {
          display: flex;
          justify-content: center; }
          @media screen and (max-width: 767px) {
            .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__icon {
              width: 100%; } }
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__icon:nth-child(1) .md-modal__button .md-modal__button__img {
            background-color: #e2fed7; }
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__icon:nth-child(2) .md-modal__button .md-modal__button__img {
            background-color: #f2f2f2; }
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__icon:nth-child(3) .md-modal__button .md-modal__button__img {
            background-color: #e0f4ff; }
        .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__input {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          background: #efefef;
          padding: 10px; }
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__input .copy-input {
            width: calc(100% - 40px);
            overflow: hidden;
            white-space: nowrap;
            overflow-x: auto;
            border: none;
            background: transparent; }
          .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__input .link_copy {
            width: 20px;
            height: 20px; }
            .invite-friends-modal .c-modal-sns .c-modal-sns__content__box__cnt__input .link_copy img {
              width: 100%;
              object-fit: cover; }
  .invite-friends-modal .c-modal-sns .md-modal__button {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .invite-friends-modal .c-modal-sns .md-modal__button__img {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%; }
      @media screen and (max-width: 767px) {
        .invite-friends-modal .c-modal-sns .md-modal__button__img {
          width: 18vw;
          height: 18vw; } }
      .invite-friends-modal .c-modal-sns .md-modal__button__img img {
        width: 40px;
        height: 40px; }
    .invite-friends-modal .c-modal-sns .md-modal__button__text {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.02em;
      margin-top: 10px;
      line-height: 1; }
  .invite-friends-modal .c-modal-sns .md-tooltip {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%); }
    .invite-friends-modal .c-modal-sns .md-tooltip::before {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 10px;
      top: 100%;
      left: 45%;
      border-color: rgba(0, 0, 0, 0.6) transparent transparent transparent; }

.qr-code-modal .c-modal .c-modal__content {
  text-align: center; }

.qr-code-modal .c-modal .c-modal__btn {
  width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #2DCE8B -14%, #2DCECA 100%);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  cursor: pointer; }

#top_main .top_head .right .hachibe-message {
  display: flex;
  align-items: center; }
  @media screen and (max-width: 767px) {
    #top_main .top_head .right .hachibe-message {
      width: 80%; } }

#top_main .top_head .right .message {
  overflow: hidden;
  white-space: nowrap; }
  #top_main .top_head .right .message span {
    position: absolute;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    margin: 0 auto;
    animation: slide 20s linear infinite;
    line-height: 32px;
    font-size: 15px;
    color: #333; }

@keyframes slide {
  0% {
    transform: translatex(5%); }
  5% {
    transform: translatex(5%); }
  100% {
    transform: translatex(-100%); } }

#sp_con {
  top: 50vh;
  transform: translate(300px, -50%); }
  #sp_con.open {
    transform: translate(0, -50%); }
  #sp_con > .disable {
    pointer-events: none;
    cursor: default; }

#top_main .top_head .left .member.md-member {
  float: right;
  display: flex;
  align-items: center; }
  @media screen and (max-width: 767px) {
    #top_main .top_head .left .member.md-member {
      position: absolute;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      align-items: flex-start !important;
      transform: translate(0, 0);
      display: flex; } }

#wrapper .md-top.orange .plan_select .md-item {
  background: #f7931e; }

#wrapper .md-top.green .plan_select .md-item {
  background: #5eac86; }

#wrapper .md-top.purple .plan_select .md-item {
  background: #c76da2; }

#wrapper .md-top.coral .plan_select .md-item {
  background: #FF7783; }

#wrapper .md-top.carrot .plan_select .md-item {
  background: #FF5128; }

.type-switcher {
  display: flex;
  align-items: center;
  font-size: 0;
  width: 190px;
  height: 32px;
  line-height: 32px;
  border-radius: 100px;
  background: #fff;
  padding: 2px;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .type-switcher {
      align-items: left;
      position: fixed;
      right: 10px;
      bottom: 5px; } }
  .type-switcher.disable {
    pointer-events: none;
    display: none; }
  .type-switcher__button {
    width: 50%;
    height: 28px;
    text-align: center;
    border-radius: 100px;
    color: #14c79e;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap; }
    @media screen and (max-width: 767px) {
      .type-switcher__button {
        height: 28px; } }
  .type-switcher__button.active {
    background: linear-gradient(90deg, #2DCE89 0%, #2DCECC 100%);
    color: #fff;
    pointer-events: none; }
  .type-switcher__button:not(.active) {
    cursor: pointer; }

#top_nav a div img {
  height: 28px;
  width: 100%;
  object-fit: scale-down; }

@media screen and (max-width: 767px) {
  #wrapper.producer .md-top .sp_color_bg {
    background: rgba(255, 255, 255, 0);
    top: 0; }
  #wrapper.producer #top_nav {
    margin-top: 0; } }

#wrapper.minden.consumer #top_nav a[href="/public-consumer-list"],
#wrapper.minden.producer #top_nav a[href="/powerplant-list"] {
  display: none; }

#top_contents .top_left .support.consumer {
  margin-top: 0; }

#top_contents .top_left .md-matching {
  margin-top: 10px;
  position: relative; }
  #top_contents .top_left .md-matching .md-result {
    padding-right: 15px;
    text-decoration: none;
    font-size: 14px;
    width: 160px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 7px;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    position: relative; }
    #top_contents .top_left .md-matching .md-result:hover {
      color: #fff !important; }
      #top_contents .top_left .md-matching .md-result:hover:after {
        border-left-color: #fff !important;
        right: 5px; }
    #top_contents .top_left .md-matching .md-result:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translate(0, -50%);
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 0;
      border-top: solid 5px transparent;
      border-right: solid 6px transparent;
      border-bottom: solid 5px transparent;
      border-left: solid 6px; }

#top_contents .top_left .md-invite-friends-modal-button {
  margin-top: 10px;
  position: relative;
  display: inline-block; }
  #top_contents .top_left .md-invite-friends-modal-button img {
    width: 235px;
    height: auto; }

#top_contents .top_right .my_data .kwh .asapM {
  float: right;
  display: inline-block;
  font-size: 40px;
  position: absolute;
  right: 0;
  bottom: 11px; }
  @media screen and (max-width: 767px) {
    #top_contents .top_right .my_data .kwh .asapM {
      float: none;
      padding-top: 0;
      position: static; } }

@media screen and (max-width: 960px) and (min-width: 768px) {
  #wrapper.producer #top_contents .top_left {
    padding: 0 20px;
    margin: 0;
    width: 100%; }
    #wrapper.producer #top_contents .top_left > .support.consumer.md-support-consumer {
      position: relative; } }

.md-support-consumer {
  position: relative; }
  .md-support-consumer__title {
    font-size: 22px;
    display: block;
    color: #fff; }
    .md-support-consumer__title::after {
      content: '';
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
      width: 0;
      height: 0;
      border-top: solid 6px transparent;
      border-right: solid 7px transparent;
      border-bottom: solid 6px transparent;
      border-left: solid 7px #fff;
      position: relative;
      top: -2px; }
  .md-support-consumer__inner {
    display: block; }
  .md-support-consumer__content {
    color: #fff;
    margin-top: 1vh; }
  .md-support-consumer__logo {
    display: block;
    width: calc(300px / 1.5);
    height: calc(209px / 1.5);
    overflow: hidden;
    border-radius: 10px;
    transform: scale(0.98); }
  .md-support-consumer__logo img {
    width: 100%;
    transform: scale(1.01); }
  .md-support-consumer__consumer-name {
    font-size: 3vh;
    line-height: 3.5vh;
    margin-top: 1vh;
    padding-bottom: .5vh;
    border-bottom: solid 3px;
    font-weight: 800; }
  .md-support-consumer__consumer-message {
    font-size: 2vh;
    line-height: 2.5vh;
    margin-top: 1vh;
    white-space: pre-line; }

@media screen and (max-width: 767px) {
  .support {
    margin-top: 0 !important; }
  .md-matching {
    margin-top: 10px !important; }
    .md-matching .md-result {
      font-size: 13px !important;
      width: 140px !important;
      height: 45px !important;
      line-height: 22px !important; }
  .md-support-consumer__consumer-name {
    font-size: 2vh;
    line-height: 1.5; }
  .md-support-consumer__consumer-message {
    font-size: 1.5vh; } }

#importantMatter .modal .wrap {
  width: 640px;
  text-align: left;
  line-height: 28px; }
  #importantMatter .modal .wrap p {
    text-align: center;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    padding: 45px 0;
    margin-bottom: 30px; }
  #importantMatter .modal .wrap .price_block {
    margin-top: 5px; }
    #importantMatter .modal .wrap .price_block h3 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 40px 0 0; }
    #importantMatter .modal .wrap .price_block .type {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 15px 0 10px;
      padding: 0;
      border: none; }

#importantMatter .inside ul {
  padding-left: 30px; }
  #importantMatter .inside ul li {
    list-style: square; }

#importantMatter .none ul {
  padding-left: 15px; }
  #importantMatter .none ul li {
    list-style: none; }

#importantMatter .text-red {
  color: #ea352d; }

@media screen and (max-width: 767px) {
  #importantMatter .modal .wrap {
    width: 100%;
    line-height: 28px;
    padding-bottom: 10px; }
    #importantMatter .modal .wrap p {
      text-align: center;
      font-size: 24px;
      border-bottom: 1px solid #cccccc;
      padding: 45px 0;
      margin-bottom: 30px; } }

#signup-afterfit .md-message {
  text-align: left;
  font-size: 15px;
  line-height: 2.2;
  padding-bottom: 30px; }

#signup-afterfit .md-loading {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  width: 100vw;
  background: rgba(255, 255, 255, 0.8);
  justify-content: center;
  align-items: center; }

#signup-afterfit .md-consumer-logo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  font-size: 0; }

#signup-afterfit .md-consumer-logo img {
  display: block;
  max-width: 80px;
  height: auto;
  object-fit: contain;
  margin: 0 20px 10px; }
  @media screen and (max-width: 767px) {
    #signup-afterfit .md-consumer-logo img {
      max-width: initial;
      width: 50%;
      margin: 0; } }

#signup-afterfit .md-confirm-password {
  border: none;
  margin-top: 0; }

#signup-afterfit .md-ul {
  margin-bottom: 52px; }

#signup-afterfit .md-h2 {
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 23px;
  border-bottom: 1px solid #cccccc;
  position: relative;
  text-align: center; }

#signup-afterfit .md-h2::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #3b42ea;
  position: absolute;
  top: 50px;
  left: 0; }

#signup-afterfit .md-validation-message {
  display: block;
  color: red;
  font-weight: 800;
  margin-top: 0em;
  opacity: 0;
  pointer-events: none; }
  @media screen and (max-width: 767px) {
    #signup-afterfit .md-validation-message {
      position: relative;
      left: 0;
      margin-top: 2px; } }

#signup-afterfit .md-input-file {
  padding-top: 0;
  margin-bottom: 52px; }
  #signup-afterfit .md-input-file [type="file"] {
    display: none; }

#signup-afterfit .md-revoke-file {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 42px;
  border: solid 1px #f7931e;
  color: #f7931e;
  background: #fff;
  cursor: pointer;
  font-size: 14px; }
  #signup-afterfit .md-revoke-file:disabled {
    filter: grayscale(1);
    pointer-events: none; }
  @media (hover: hover) {
    #signup-afterfit .md-revoke-file:hover {
      border-color: #f7931e;
      color: #fff;
      background: #f7931e; } }

#signup-afterfit .md-uploaded-image {
  display: block;
  box-sizing: content-box;
  margin: 0 auto;
  max-width: 100px;
  box-shadow: 3px 3px 20px 0 rgba(50, 70, 70, 0.2);
  padding: 8px; }
  #signup-afterfit .md-uploaded-image.is--fit {
    margin: 20px auto; }
  @media screen and (max-width: 767px) {
    #signup-afterfit .md-uploaded-image {
      width: calc(100% - 16px);
      max-width: initial;
      margin: 0; } }

#signup-afterfit .md-orange:disabled {
  filter: grayscale(1); }

@media (hover: hover) {
  #signup-afterfit .md-orange:disabled:hover {
    animation: waggle .3s; } }

#signup-afterfit .md-select.md-long {
  width: 280px; }

#signup-afterfit .md-select select {
  opacity: 1 !important;
  text-indent: .25em; }

#signup-afterfit .md-select::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
  border: solid 5px transparent;
  border-top-color: #818181;
  border-bottom-width: 0; }

#signup-afterfit .md-notification-link {
  color: #3b42ea;
  text-decoration: underline; }

#signup-afterfit .md-rear {
  margin-bottom: 52px; }

#signup-afterfit .md-relative {
  position: relative; }

#signup-afterfit .md-center {
  text-align: center; }

#signup-afterfit .md-top-note {
  font-size: 18px;
  color: #ff0101; }

#signup-afterfit fieldset {
  margin-bottom: 52px; }
  @media screen and (max-width: 767px) {
    #signup-afterfit fieldsetmypage {
      width: 100%; } }

#signup-afterfit fieldset .md-note {
  list-style: outside disc;
  padding-left: 20px; }

#signup-afterfit fieldset .md-note li {
  display: list-item;
  border: none;
  height: auto;
  margin-bottom: 1em; }

#signup-afterfit .md-inline-block {
  display: inline-block; }

#signup-afterfit .md-broad {
  height: 50px; }

#signup-afterfit .md-button-container {
  margin-bottom: 52px; }

#signup-afterfit .message a {
  color: #3b42ea;
  text-decoration: underline; }

#signup-afterfit .isBlur + .md-validation-message.show {
  opacity: 1; }

#signup-afterfit .tos {
  font-size: 16px; }
  #signup-afterfit .tos span {
    display: block;
    margin-bottom: 20px;
    line-height: 22px; }
  #signup-afterfit .tos button {
    position: relative;
    margin-right: 60px;
    font-size: 16px;
    color: #3b42ea; }
    #signup-afterfit .tos button::after {
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      right: -18px;
      width: 13px;
      height: 16px;
      background: no-repeat center/cover url(/assets/images/common/tbc.svg); }
  #signup-afterfit .tos .check {
    font-weight: bold; }

#signup-afterfit dd .note,
#signup-afterfit dd .md-note {
  display: block;
  line-height: 1.7; }

#signup-afterfit dt.is--two-lines {
  line-height: initial;
  vertical-align: middle; }

#signup-afterfit .auto-height {
  height: auto; }
  #signup-afterfit .auto-height.no-border {
    border-top: 0; }
  #signup-afterfit .auto-height dt,
  #signup-afterfit .auto-height dd {
    padding-bottom: 15px;
    display: table-cell; }
  @media screen and (max-width: 767px) {
    #signup-afterfit .auto-height dt {
      display: block !important; } }
  #signup-afterfit .auto-height dt::after {
    top: 20px;
    transform: translate(0, 0); }
    @media screen and (max-width: 767px) {
      #signup-afterfit .auto-height dt::after {
        top: 10px; } }
  #signup-afterfit .auto-height dd {
    width: 448px;
    padding-right: 20px; }
    #signup-afterfit .auto-height dd #address {
      display: block;
      width: 100%; }

#signup-afterfit .previous-retailer-other > .note {
  color: red;
  font-weight: bold; }

@media screen and (min-width: 768px) {
  #signup-afterfit .previous-retailer-other > .note {
    margin-top: 20px;
    margin-bottom: -10px;
    line-height: 1em; }
  #signup-afterfit .previous-retailer-other > .note + [name="previousRetailerOther"] {
    margin-top: 0; } }

@media screen and (max-width: 767px) {
  #signup-afterfit .previous-retailer-other {
    margin: 10px 0; }
    #signup-afterfit .previous-retailer-other > input:not(.isBlur) + .md-validation-message.error.show {
      display: none; } }

@keyframes waggle {
  0%, 50% {
    transform: translateX(-5px); }
  25%, 75% {
    transform: translateX(5px); }
  100% {
    transform: translateX(0); } }

#support .support_contents .support_history .now .right p span,
#support .support_contents .support_history .next_month .right p span,
#support .support_contents .letssupport_contents .now .right p span,
#support .support_contents .letssupport_contents .next_month .right p span {
  font-size: 17px; }
  #support .support_contents .support_history .now .right p span:after,
  #support .support_contents .support_history .next_month .right p span:after,
  #support .support_contents .letssupport_contents .now .right p span:after,
  #support .support_contents .letssupport_contents .next_month .right p span:after {
    content: 'kW';
    font-size: 15px; }

#support .support_contents .letssupport_contents .list .gift::after {
  top: -10px;
  left: -10px; }

#support .md-adress {
  display: block; }

#support .md-now + .md-now {
  margin-top: 30px !important; }

#support .md-icn_1 {
  background-image: url("/assets/images/common/icn_sun.svg"); }

#support .md-icn_2 {
  background-image: url("/assets/images/common/icn_wind.svg"); }

#support .md-icn_3 {
  background-image: url("/assets/images/common/icn_geothermal.svg"); }

#support .md-icn_4 {
  background-image: url("/assets/images/common/icn_hydropower.svg"); }

#support .md-icn_5 {
  background-image: url("/assets/images/common/icn_biomass.svg"); }

#support .md-link-button {
  margin-left: 13px;
  display: inline-block;
  background: #3b42ea;
  padding: 1px 16px 1px 18px;
  border-radius: 6px;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: bold;
  line-height: initial; }

#support .md-link-button::after {
  content: '';
  transition: all .2s ease-out;
  position: relative;
  top: 0;
  right: -6px;
  display: inline-block;
  margin-left: 9px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; }

#support .md-link-button:hover::after {
  right: -8px; }

#support [class*="md-icn_"] {
  width: 37px;
  height: 37px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center; }

@media screen and (min-width: 980px) {
  #support .support_contents .letssupport_contents .list .suit {
    text-align: left; } }

@media screen and (min-width: 768px) {
  #support .support_contents .letssupport_contents .list .card.md-card:nth-of-type(4n + 1) {
    margin-left: 10px; } }

@media screen and (min-width: 768px) {
  #support .support_contents .letssupport_contents .list .card.md-card:not(:nth-of-type(4n + 1)) {
    margin-left: 15px; } }

#support [data-support-status="status_3"] {
  animation: md-disappearing .3s forwards ease-in-out; }

#support .slick-arrow::before {
  font-size: 0; }

@media screen and (max-width: 767px) {
  #support .slick-arrow {
    top: auto !important;
    bottom: -70px;
    right: 0; } }

#support .slick-prev {
  background: url("/assets/images/support/arrow_left.svg") !important; }

#support .slick-next {
  background: url("/assets/images/support/arrow_right.svg") !important; }

@keyframes md-disappearing {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }

#password .md-reset-order-btn:disabled,
#password .md-reset-btn:disabled {
  filter: grayscale(100%);
  pointer-events: none; }

#password .md-input-control {
  position: relative; }

#password .md-validate-error {
  position: absolute;
  top: calc(100% - 5px);
  border: solid 1px red;
  background: #fff;
  z-index: 10;
  padding: 5px 10px;
  font-size: 13px;
  height: auto;
  line-height: 1;
  left: 20px;
  color: red;
  font-weight: bold; }
  #password .md-validate-error:before {
    content: '';
    position: absolute;
    border-top: solid 1px red;
    border-left: solid 1px red;
    top: -6px;
    left: 20px;
    background: #fff;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    z-index: -1; }
  #password .md-validate-error.show {
    display: block; }

#password .md-order-error-msg {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0;
  color: red;
  white-space: pre-wrap; }

#privacyPoricy .modal .wrap {
  width: 640px;
  text-align: left;
  line-height: 28px; }
  #privacyPoricy .modal .wrap p {
    text-align: center;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    padding: 45px 0;
    margin-bottom: 30px; }
  #privacyPoricy .modal .wrap img {
    display: block;
    width: 560px;
    height: auto;
    margin: 30px 0; }
  #privacyPoricy .modal .wrap .price_block {
    margin-top: 5px; }
    #privacyPoricy .modal .wrap .price_block h3 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 40px 0 0; }
    #privacyPoricy .modal .wrap .price_block .type {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: .05em;
      margin: 15px 0 10px;
      padding: 0;
      border: none; }

#privacyPoricy .modal .md-demand-clause-center {
  text-align: center; }

#privacyPoricy .modal .md-title {
  text-align: center;
  font-weight: bold;
  font-size: 120%; }

#privacyPoricy .modal .md-underline {
  font-weight: bold;
  text-decoration: underline; }

#privacyPoricy .modal .md-bold {
  font-weight: bold; }

@media screen and (max-width: 767px) {
  #privacyPoricy .modal .wrap {
    width: 100%;
    line-height: 28px;
    padding-bottom: 10px; }
    #privacyPoricy .modal .wrap p {
      text-align: center;
      font-size: 24px;
      border-bottom: 1px solid #cccccc;
      padding: 45px 0;
      margin-bottom: 30px; }
    #privacyPoricy .modal .wrap img {
      display: block;
      width: 100%;
      height: auto;
      margin: 30px 0; } }

#process .area h2 {
  margin-top: 45px; }
  #process .area h2:first-child {
    margin-top: 0px; }

@media screen and (max-width: 767px) {
  #process .area h2 {
    margin-top: 45px; }
    #process .area h2:first-child {
      margin-top: 0px; } }

#consumer.md-consumer .color {
  color: #FF7783 !important; }

#consumer.md-consumer .grad {
  background: linear-gradient(180deg, #ffa0a8 0%, #FF7783 100%); }

#consumer.md-consumer .pickup_wrap .slick-current .pickup_text,
#consumer.md-consumer .pickup_wrap .other-current .pickup_text {
  opacity: 1; }

#consumer.md-consumer .pickup_wrap .md-next {
  right: -20px;
  width: auto; }
  #consumer.md-consumer .pickup_wrap .md-next:hover img {
    transform: translate(5px, 0); }

#consumer.md-consumer .pickup_wrap .md-prev {
  left: -20px;
  width: auto; }
  #consumer.md-consumer .pickup_wrap .md-prev:hover img {
    transform: translate(-5px, 0); }

#consumer.md-consumer .summary .md-svg {
  display: block;
  margin: 0 auto 10px;
  width: 33.8px;
  height: 27.9px;
  background-image: url(/assets/images/top/consumer-list-wg.svg); }

#consumer.md-consumer .summary:hover {
  background: #FF7783 !important;
  color: #fff !important; }

#consumer.md-consumer .summary:hover .md-svg {
  background-image: url(/assets/images/top/consumer-list-gw.svg); }

#producer .title_container,
#consumer.md-pickup-carousel .title_container {
  display: flex;
  justify-content: center;
  position: relative; }
  #producer .title_container .title_container__box,
  #consumer.md-pickup-carousel .title_container .title_container__box {
    width: 100%;
    max-width: 600px;
    height: 128px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 10px;
    padding: 12px;
    background-color: #F8F8F8; }
    #producer .title_container .title_container__box .title_container__box__text,
    #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text {
      width: calc(100% - 8px / 2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px; }
      #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1,
      #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        margin: 0; }
        #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo {
          width: 100%;
          max-width: 180px; }
          #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo img,
          #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo img {
            width: 100%;
            object-fit: cover;
            display: block; }
          @media screen and (max-width: 767px) {
            #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo,
            #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo {
              max-width: 150px; } }
          @media screen and (max-width: 425px) {
            #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo,
            #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__logo {
              max-width: 100px; } }
        #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title {
          font-family: "Zen Maru Gothic", serif;
          font-size: 24px;
          font-weight: 700;
          color: #0CAE0C; }
          @media screen and (max-width: 767px) {
            #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title,
            #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title {
              font-size: 20px; } }
          @media screen and (max-width: 425px) {
            #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title,
            #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__h1 .title_container__box__text__h1__title {
              font-size: 3.8vw; } }
      #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__description,
      #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__description {
        font-family: "Zen Maru Gothic", serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        color: #333; }
        #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__description a,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__description a {
          color: #0CAE0C;
          font-weight: bold; }
        #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__description .title_container__box__text__description__br,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__description .title_container__box__text__description__br {
          display: block; }
          @media screen and (max-width: 425px) {
            #producer .title_container .title_container__box .title_container__box__text .title_container__box__text__description .title_container__box__text__description__br,
            #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__text .title_container__box__text__description .title_container__box__text__description__br {
              display: none; } }
    #producer .title_container .title_container__box .title_container__box__total__link,
    #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link {
      display: flex;
      flex-direction: column; }
      #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__link,
      #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__link {
        font-family: "Zen Maru Gothic", serif;
        font-size: 12px;
        line-height: 1.5;
        text-align: center; }
        #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__link a,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__link a {
          color: #0CAE0C;
          font-weight: bold; }
      #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__total,
      #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__total {
        width: 115px;
        height: 75px;
        background: #0CAE0C;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 6px;
        flex-shrink: 0;
        background-image: url(/assets/minden/images/page_publicplant_total_bg.svg);
        background-repeat: no-repeat;
        background-position: center; }
        #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__text,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__text {
          font-size: 12px;
          font-weight: 700;
          color: #fff; }
        #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span,
        #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span {
          font-size: 24px;
          font-weight: 700;
          color: #ffe200;
          font-family: "Poppins", sans-serif;
          display: flex;
          align-items: center;
          gap: 5px; }
          #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span::before,
          #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span::before {
            content: '';
            width: 8px;
            height: 12px;
            background-image: url(/assets/minden/images/page_publicplant_total_icon.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover; }
          #producer .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span::after,
          #consumer.md-pickup-carousel .title_container .title_container__box .title_container__box__total__link .title_container__box__total .title_container__box__total__number span::after {
            content: '';
            width: 8px;
            height: 12px;
            background-image: url(/assets/minden/images/page_publicplant_total_icon.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            transform: scaleX(-1); }
  #producer .title_container .icon_container,
  #consumer.md-pickup-carousel .title_container .icon_container {
    display: flex;
    justify-content: center;
    position: relative; }
    #producer .title_container .icon_container .search-icon,
    #consumer.md-pickup-carousel .title_container .icon_container .search-icon {
      height: 22px;
      width: 22px;
      margin-left: 12px; }
    #producer .title_container .icon_container .balloon-info,
    #consumer.md-pickup-carousel .title_container .icon_container .balloon-info {
      position: absolute;
      background: #fcfcfc;
      border: 1px solid rgba(204, 204, 204, 0.9);
      display: none;
      width: 480px;
      border-radius: 12px;
      top: 120%;
      margin-top: 12px;
      padding: 16px;
      font-size: 80%;
      z-index: 5; }
      #producer .title_container .icon_container .balloon-info p,
      #consumer.md-pickup-carousel .title_container .icon_container .balloon-info p {
        margin: 8px 0; }
        #producer .title_container .icon_container .balloon-info p.bold,
        #consumer.md-pickup-carousel .title_container .icon_container .balloon-info p.bold {
          font-weight: bold; }
    #producer .title_container .icon_container .balloon-info:after,
    #consumer.md-pickup-carousel .title_container .icon_container .balloon-info:after {
      border-bottom: 12px solid rgba(204, 204, 204, 0.9);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: -12px;
      left: 49%;
      content: "";
      position: absolute;
      display: block;
      z-index: 5; }
    #producer .title_container .icon_container:hover .balloon-info,
    #consumer.md-pickup-carousel .title_container .icon_container:hover .balloon-info {
      display: block; }

#producer .dropdown_container,
#consumer.md-pickup-carousel .dropdown_container {
  width: 100%;
  max-width: 582px;
  padding: 0 20px;
  margin: 22px auto;
  display: flex;
  gap: 8px; }
  @media screen and (max-width: 767px) {
    #producer .dropdown_container,
    #consumer.md-pickup-carousel .dropdown_container {
      padding: 0 2%; } }
  @media screen and (max-width: 425px) {
    #producer .dropdown_container,
    #consumer.md-pickup-carousel .dropdown_container {
      flex-direction: column;
      gap: 4px;
      align-items: center; } }
  #producer .dropdown_container .dropdown_container__box,
  #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box {
    width: 267px;
    position: relative; }
    #producer .dropdown_container .dropdown_container__box::after,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box::after {
      content: '';
      width: 8px;
      height: 8px;
      background-image: url(/assets/minden/images/page_publicplant_arrow.svg);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%); }
    #producer .dropdown_container .dropdown_container__box .dropdown_container__box__header,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__header {
      height: 32px;
      padding: 0 16px;
      border-radius: 10px;
      background-color: #FFF8C4;
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer; }
      #producer .dropdown_container .dropdown_container__box .dropdown_container__box__header__icon,
      #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__header__icon {
        display: inline-block;
        width: 29px;
        text-align: center; }
      #producer .dropdown_container .dropdown_container__box .dropdown_container__box__header__title,
      #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__header__title {
        font-family: "Zen Maru Gothic", serif;
        font-size: 12px;
        font-weight: 500;
        color: #000; }
      #producer .dropdown_container .dropdown_container__box .dropdown_container__box__header__text,
      #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__header__text {
        font-family: "Zen Maru Gothic", serif;
        font-size: 12px;
        font-weight: 400;
        color: #000; }
    #producer .dropdown_container .dropdown_container__box .dropdown_container__box__list,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__list {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      border-radius: 0 0 10px 10px;
      background-color: #FFF8C4;
      z-index: 10;
      max-height: 200px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 0 15px 124px; }
      #producer .dropdown_container .dropdown_container__box .dropdown_container__box__list .dropdown_container__box__list__item,
      #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__list .dropdown_container__box__list__item {
        cursor: pointer;
        font-family: "Zen Maru Gothic", serif;
        font-size: 12px;
        font-weight: 400;
        color: #0CAE0C;
        text-decoration: underline; }
        #producer .dropdown_container .dropdown_container__box .dropdown_container__box__list .dropdown_container__box__list__item:hover,
        #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box .dropdown_container__box__list .dropdown_container__box__list__item:hover {
          text-decoration: none; }
    #producer .dropdown_container .dropdown_container__box.open::after,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box.open::after {
      transform: translateY(-50%) rotate(180deg); }
    #producer .dropdown_container .dropdown_container__box.open .dropdown_container__box__header,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box.open .dropdown_container__box__header {
      border-radius: 10px 10px 0 0; }
    #producer .dropdown_container .dropdown_container__box.open .dropdown_container__box__list,
    #consumer.md-pickup-carousel .dropdown_container .dropdown_container__box.open .dropdown_container__box__list {
      display: block; }

#producer .nav_container,
#consumer.md-pickup-carousel .nav_container {
  margin: 24px 0 18px 0;
  padding: 8px 0; }
  #producer .nav_container ul,
  #consumer.md-pickup-carousel .nav_container ul {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around; }
    #producer .nav_container ul .info_box,
    #consumer.md-pickup-carousel .nav_container ul .info_box {
      padding: 20px 8px;
      height: 80px;
      background: white; }
    #producer .nav_container ul .search_box,
    #consumer.md-pickup-carousel .nav_container ul .search_box {
      position: relative;
      padding: 4px 2px; }
      #producer .nav_container ul .search_box:hover,
      #consumer.md-pickup-carousel .nav_container ul .search_box:hover {
        opacity: 0.6; }
      #producer .nav_container ul .search_box.current,
      #consumer.md-pickup-carousel .nav_container ul .search_box.current {
        border-bottom: 1px solid; }
      #producer .nav_container ul .search_box .selected,
      #consumer.md-pickup-carousel .nav_container ul .search_box .selected {
        border-bottom: 1px solid; }
      #producer .nav_container ul .search_box .search-icon,
      #consumer.md-pickup-carousel .nav_container ul .search_box .search-icon {
        width: 20px;
        padding: 0 4px 0 0;
        height: 25px;
        position: absolute;
        top: 0px;
        left: -18px; }

#producer .status,
#consumer.md-pickup-carousel .status {
  margin: 0px; }

#producer .no,
#consumer.md-pickup-carousel .no {
  -webkit-appearance: none;
          appearance: none;
  background: #f2f2f2;
  border: 1px solid #b3b3b3;
  color: #b3b3b3; }

#producer ul,
#consumer.md-pickup-carousel ul {
  list-style: none; }

#producer .slick-arrow::before,
#consumer.md-pickup-carousel .slick-arrow::before {
  font-size: 0; }

#producer .slick-dots,
#consumer.md-pickup-carousel .slick-dots {
  position: initial;
  padding: 0; }
  #producer .slick-dots li,
  #consumer.md-pickup-carousel .slick-dots li {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }

#producer .search_container,
#consumer.md-pickup-carousel .search_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px; }
  #producer .search_container .image-container,
  #consumer.md-pickup-carousel .search_container .image-container {
    width: 500px; }
    #producer .search_container .image-container .area-image,
    #consumer.md-pickup-carousel .search_container .image-container .area-image {
      display: block;
      width: 100%; }
  #producer .search_container .area-container,
  #consumer.md-pickup-carousel .search_container .area-container {
    max-width: 400px; }
    #producer .search_container .area-container .area-list,
    #consumer.md-pickup-carousel .search_container .area-container .area-list {
      display: flex; }
      #producer .search_container .area-container .area-list .area-box,
      #consumer.md-pickup-carousel .search_container .area-container .area-list .area-box {
        display: flex; }
      #producer .search_container .area-container .area-list .prefecture-box,
      #consumer.md-pickup-carousel .search_container .area-container .area-list .prefecture-box {
        display: flex;
        flex-wrap: wrap; }
      #producer .search_container .area-container .area-list button,
      #consumer.md-pickup-carousel .search_container .area-container .area-list button {
        padding: 4px;
        margin: 4px;
        width: 55px;
        border-radius: 6px;
        color: #000; }
        #producer .search_container .area-container .area-list button:hover,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button:hover {
          opacity: 0.7; }
        #producer .search_container .area-container .area-list button.hokkaido-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.hokkaido-button {
          background: #ABD2F0; }
        #producer .search_container .area-container .area-list button.tohoku-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.tohoku-button {
          background: #85DD6F; }
        #producer .search_container .area-container .area-list button.kanto-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.kanto-button {
          background: #F4C548; }
        #producer .search_container .area-container .area-list button.chubu-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.chubu-button {
          background: #EBA0A0; }
        #producer .search_container .area-container .area-list button.kinki-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.kinki-button {
          background: #40A8D8; }
        #producer .search_container .area-container .area-list button.chugoku-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.chugoku-button {
          background: #2FAF5B; }
        #producer .search_container .area-container .area-list button.shikoku-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.shikoku-button {
          background: #F49B47; }
        #producer .search_container .area-container .area-list button.kyusyu-button,
        #consumer.md-pickup-carousel .search_container .area-container .area-list button.kyusyu-button {
          background: #D19EE9; }

#producer .search_area,
#consumer.md-pickup-carousel .search_area {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: gray;
  margin-bottom: 16px; }

#producer area,
#consumer.md-pickup-carousel area {
  border: none;
  outline: none; }
  #producer area:hover,
  #consumer.md-pickup-carousel area:hover {
    opacity: 0.8; }

#producer .producer_list .notTarget,
#consumer.md-pickup-carousel .producer_list .notTarget {
  display: block;
  height: auto;
  font-size: 18px;
  text-align: center;
  color: #a0a0a0; }

#producer .producer_list .card .top_img,
#consumer.md-pickup-carousel .producer_list .card .top_img {
  cursor: pointer; }

#producer .producer_list .card .new.hide,
#consumer.md-pickup-carousel .producer_list .card .new.hide {
  display: none; }

#producer .producer_list .card .text .address,
#consumer.md-pickup-carousel .producer_list .card .text .address {
  display: inline-block;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  vertical-align: text-bottom;
  margin: 10px 0 6px;
  font-size: 14px;
  width: 214px; }

#producer .producer_list .card .text .name,
#consumer.md-pickup-carousel .producer_list .card .text .name {
  font-size: 15px;
  line-height: 15px;
  margin-top: 3px;
  position: relative;
  height: 80px;
  overflow-wrap: break-word;
  word-break: break-all; }
  #producer .producer_list .card .text .name span,
  #consumer.md-pickup-carousel .producer_list .card .text .name span {
    font-size: 14px;
    display: block; }
  #producer .producer_list .card .text .name .middle,
  #consumer.md-pickup-carousel .producer_list .card .text .name .middle {
    position: absolute;
    top: 50%;
    margin-top: -0.3rem; }
  #producer .producer_list .card .text .name .small,
  #consumer.md-pickup-carousel .producer_list .card .text .name .small {
    font-size: 12px;
    position: absolute;
    bottom: 0px; }
    #producer .producer_list .card .text .name .small b,
    #consumer.md-pickup-carousel .producer_list .card .text .name .small b {
      font-weight: bold; }

#producer .detail main .detail_contents .wrap .message_wrap h2,
#consumer.md-pickup-carousel .detail main .detail_contents .wrap .message_wrap h2 {
  text-align: left;
  padding: 0;
  color: #000; }

#producer .detail main .detail_contents .date ul .none_line,
#consumer.md-pickup-carousel .detail main .detail_contents .date ul .none_line {
  border-bottom: 0px; }

#producer .detail main .detail_contents .date ul li .none,
#consumer.md-pickup-carousel .detail main .detail_contents .date ul li .none {
  display: none; }

#producer .detail main .detail_contents .wrap2,
#consumer.md-pickup-carousel .detail main .detail_contents .wrap2 {
  padding-bottom: 40px; }
  #producer .detail main .detail_contents .wrap2 .minden-gift_annotation,
  #consumer.md-pickup-carousel .detail main .detail_contents .wrap2 .minden-gift_annotation {
    padding-top: 8px;
    font-size: 14px; }

#producer .detail main .choose,
#consumer.md-pickup-carousel .detail main .choose {
  margin: 58px auto 0;
  display: block;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  border-radius: 3px;
  padding: 3px 0;
  width: 240px;
  height: 58px;
  line-height: 58px;
  background: #f7931e;
  position: relative; }
  #producer .detail main .choose img,
  #consumer.md-pickup-carousel .detail main .choose img {
    display: inline-block;
    vertical-align: middle;
    width: 31px;
    margin-bottom: 8px; }
  #producer .detail main .choose:after,
  #consumer.md-pickup-carousel .detail main .choose:after {
    content: '';
    transition: all .2s ease-out;
    position: relative;
    top: -4px;
    right: -26px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-left: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; }
  #producer .detail main .choose:hover:after,
  #consumer.md-pickup-carousel .detail main .choose:hover:after {
    right: -28px; }

#producer .slick-dots li button:before,
#consumer.md-pickup-carousel .slick-dots li button:before {
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: none;
  text-align: center;
  opacity: .25;
  color: #000; }

#producer .md-producer-list-card,
#consumer.md-pickup-carousel .md-producer-list-card {
  vertical-align: top; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  .md-consumer .pickup_p .slick-current .pickup_text,
  .md-consumer .pickup_p .other-current .pickup_text {
    opacity: 1; }
  #producer .title_container .icon_container .balloon-info {
    right: -120px; }
    #producer .title_container .icon_container .balloon-info .bold {
      font-weight: bold; }
  #producer .title_container .icon_container .balloon-info:after {
    left: 338px; }
  #producer .nav_container ul {
    width: 100%; }
  #producer main .search#sort_buttons {
    display: flex;
    flex-wrap: wrap; }
    #producer main .search#sort_buttons::after {
      display: block;
      content: "";
      width: 200px; }
  #producer .search_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end; }
    #producer .search_container .image-container {
      display: none; }
    #producer .search_container .area-container {
      max-width: 100%; }
  #producer .search .title {
    font-size: 20px; }
  #producer .desc {
    width: 100%;
    padding: 30px 100px; }
  #producer .producer_list .notTarget {
    display: block;
    height: auto;
    font-size: 18px;
    text-align: center; }
  #producer .producer_list .card .text .address {
    display: inline-block;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
    vertical-align: text-bottom;
    margin: 10px 0 6px;
    font-size: 14px;
    width: 214px; }
  #producer .producer_list .card .text .name {
    font-size: 15px;
    line-height: 15px;
    margin-top: 3px;
    height: 80px;
    overflow-wrap: break-word;
    word-break: break-all; }
    #producer .producer_list .card .text .name span {
      font-size: 15px;
      display: block; }
    #producer .producer_list .card .text .name .middle {
      position: absolute;
      top: 50%;
      margin-top: -0.3rem; }
    #producer .producer_list .card .text .name .small {
      font-size: 12px;
      position: absolute;
      bottom: 0px; }
      #producer .producer_list .card .text .name .small b {
        font-weight: bold; } }

@media screen and (max-width: 767px) {
  .md-consumer .pickup_p .slick-current img,
  .md-consumer .pickup_p .other-current img {
    transform: scale(1.5); }
  #producer .title_container {
    padding-top: 6px; }
    #producer .title_container .title {
      padding-top: 4px;
      font-size: 16px; }
    #producer .title_container .icon_container .search-icon {
      margin: 0 2px 0 6px; }
    #producer .title_container .icon_container .balloon-info {
      width: 280px;
      right: -1px;
      border-radius: 8px; }
      #producer .title_container .icon_container .balloon-info .bold {
        font-weight: bold; }
    #producer .title_container .icon_container .balloon-info:after {
      left: 256px; }
  #producer .search_container .image-container {
    display: none; }
  #producer .search_container .area-container {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    #producer .search_container .area-container .area-list .prefecture-box {
      max-width: 272px; }
      #producer .search_container .area-container .area-list .prefecture-box button {
        width: 60px; } }
  @media screen and (max-width: 767px) and (max-width: 320px) {
    #producer .search_container .area-container .area-list .prefecture-box {
      max-width: 256px; }
      #producer .search_container .area-container .area-list .prefecture-box button {
        width: 55px; } }

@media screen and (max-width: 767px) {
  #producer .nav_container {
    margin: 12px 0 24px 0;
    padding: 0 4px; }
    #producer .nav_container ul {
      width: 100%; }
      #producer .nav_container ul .info_box {
        padding: 20px 8px;
        height: 80px;
        background: white; }
      #producer .nav_container ul .search_box {
        position: relative;
        padding: 4px 8px; }
        #producer .nav_container ul .search_box:hover {
          opacity: 0.6; }
        #producer .nav_container ul .search_box.current {
          border-bottom: 1px solid; }
        #producer .nav_container ul .search_box a {
          font-size: 14px;
          justify-content: center; }
          #producer .nav_container ul .search_box a .search-icon {
            width: 10px;
            left: -4px;
            padding: 0; }
  #producer main .search#sort_buttons {
    display: flex;
    flex-wrap: wrap; }
    #producer main .search#sort_buttons::after {
      display: block;
      content: "";
      width: 200px; }
  #producer .detail main .detail_contents .wrap2 {
    padding-bottom: 24px; }
    #producer .detail main .detail_contents .wrap2 .minden-gift_annotation {
      font-size: 12px;
      text-align: left; }
  #producer.md-pickup-carousel .search .title,
  #consumer.md-pickup-carousel .search .title {
    font-size: 15px; }
  #producer.md-pickup-carousel .status,
  #consumer.md-pickup-carousel .status {
    margin: 0px; }
  #producer.md-pickup-carousel .desc,
  #consumer.md-pickup-carousel .desc {
    line-height: 22px;
    padding: 15px 20px; }
  #producer.md-pickup-carousel .producer_list .notTarget,
  #consumer.md-pickup-carousel .producer_list .notTarget {
    display: block;
    height: auto;
    font-size: 18px;
    text-align: center; }
  #producer.md-pickup-carousel .producer_list .card .text .address,
  #consumer.md-pickup-carousel .producer_list .card .text .address {
    margin: 10px 0 6px;
    font-size: 14px;
    width: 84%; }
  #producer.md-pickup-carousel .producer_list .card .text .name,
  #consumer.md-pickup-carousel .producer_list .card .text .name {
    height: 80px;
    overflow-wrap: break-word;
    word-break: break-all; }
    #producer.md-pickup-carousel .producer_list .card .text .name span,
    #consumer.md-pickup-carousel .producer_list .card .text .name span {
      font-size: 14px; }
    #producer.md-pickup-carousel .producer_list .card .text .name .middle,
    #consumer.md-pickup-carousel .producer_list .card .text .name .middle {
      position: absolute;
      top: 50%;
      margin-top: -0.3rem; }
    #producer.md-pickup-carousel .producer_list .card .text .name .small,
    #consumer.md-pickup-carousel .producer_list .card .text .name .small {
      font-size: 12px;
      position: absolute;
      bottom: 0px; }
      #producer.md-pickup-carousel .producer_list .card .text .name .small b,
      #consumer.md-pickup-carousel .producer_list .card .text .name .small b {
        font-weight: bold; }
  #producer.md-pickup-carousel .detail main .detail_contents .wrap .message_wrap h2,
  #consumer.md-pickup-carousel .detail main .detail_contents .wrap .message_wrap h2 {
    text-align: start;
    padding-bottom: 20px;
    color: initial; } }

#unsubscribe .md-submit-btn:disabled {
  filter: grayscale(100%);
  pointer-events: none; }

#unsubscribe input[type=checkbox] {
  -webkit-appearance: none; }

#unsubscribe h2.md-done {
  line-height: 1.5;
  font-size: 18px; }

#guide h2 {
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 23px;
  border-bottom: 1px solid #cccccc;
  position: relative; }

#guide dl + h2 {
  margin-top: 30px; }

#guide h2::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #3b42ea;
  position: absolute;
  bottom: -1px;
  left: 0; }

#about-support .introduction {
  display: flex; }
  @media screen and (max-width: 767px) {
    #about-support .introduction {
      flex-direction: column; } }
  #about-support .introduction.is--column {
    flex-direction: column; }

#about-support .introduction p {
  line-height: 1.7; }

#about-support .introduction p + p,
#about-support .introduction p + img {
  margin-top: 20px; }

#about-support .introduction img {
  max-width: 100%; }

#about-support h2 {
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 23px;
  border-bottom: 1px solid #cccccc;
  position: relative; }

#about-support div + h2 {
  margin-top: 30px; }

#about-support h2::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #3b42ea;
  position: absolute;
  bottom: -1px;
  left: 0; }

#about-support .md-support-outline {
  display: flex;
  flex-direction: column;
  flex: auto 1 0;
  padding: 10px;
  align-items: center;
  width: calc(100% / 3); }
  @media screen and (max-width: 767px) {
    #about-support .md-support-outline {
      flex-direction: row;
      align-items: center;
      width: 100%; } }

#about-support .md-support-outline .md-frame {
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 3px #37d262; }
  @media screen and (max-width: 767px) {
    #about-support .md-support-outline .md-frame {
      flex: auto 1 0;
      width: 20vw;
      height: 20vw;
      margin: 0 10px 0 0; } }

#about-support .md-support-outline img {
  object-fit: contain;
  width: 100%;
  height: auto; }

#about-support .md-support-outline img.is--icon {
  width: 80px; }
  @media screen and (max-width: 767px) {
    #about-support .md-support-outline img.is--icon {
      width: 10vw; } }

#about-support .md-support-outline figcaption {
  line-height: 1.7; }

#about-support .md-support-outline figcaption small {
  display: block;
  font-size: small;
  margin-block-start: .5em; }

#about-support .md-screen-capture {
  position: relative;
  display: flex;
  background: linear-gradient(180deg, #61ee4b, transparent) no-repeat 0 50px;
  background-size: 100px calc(100% - 100px); }
  @media screen and (max-width: 767px) {
    #about-support .md-screen-capture {
      flex-direction: column;
      background: none; } }

#about-support .md-screen-capture::after {
  transform: rotate(225deg); }

#about-support .md-screen-capture:not(:first-child) {
  margin-top: 30px; }

#about-support .md-screen-capture h3 {
  display: flex;
  flex-direction: column;
  flex: auto 1 0;
  background: #20920e;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff; }
  @media screen and (max-width: 767px) {
    #about-support .md-screen-capture h3 {
      width: 100%;
      height: 50px;
      border-radius: 4px;
      flex-direction: row;
      justify-content: center; } }

#about-support .md-screen-capture h3 span {
  font-size: small; }
  @media screen and (max-width: 767px) {
    #about-support .md-screen-capture h3 span {
      font-size: large; } }

#about-support .md-screen-capture h3 em {
  font-size: xx-large; }
  @media screen and (max-width: 767px) {
    #about-support .md-screen-capture h3 em {
      font-size: large; } }

#about-support .md-screen-capture figure {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding-left: 20px; }
  @media screen and (max-width: 767px) {
    #about-support .md-screen-capture figure {
      padding-left: 0; } }

#about-support .md-screen-capture figcaption {
  padding: 10px;
  line-height: 1.7; }

#about-support .md-screen-capture__image {
  max-width: 100%;
  object-fit: contain;
  margin-top: 10px;
  box-shadow: 0 0 0 8px #e2e2e2; }

#bank_account .page-title {
  line-height: 1.5;
  letter-spacing: 1px; }

#bank_account .container {
  text-align: center;
  width: 752px;
  padding: 16px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    #bank_account .container {
      width: 95%; } }

#bank_account .top {
  line-height: 1.5;
  letter-spacing: 1px; }

#bank_account .content-title {
  line-height: 1.5;
  letter-spacing: 1px;
  font-size: 22px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  position: relative;
  padding-bottom: 4px; }
  #bank_account .content-title:before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: #3b42ea;
    position: absolute;
    bottom: 0;
    left: 0; }
  @media screen and (max-width: 767px) {
    #bank_account .content-title {
      font-size: 16px; } }

#bank_account .content-message {
  line-height: 1.5;
  letter-spacing: 1px;
  padding: 64px 0; }

#bank_account .list-wrapper {
  margin-top: 32px; }

#confirm-dialog {
  height: 100vh; }
  #confirm-dialog .modal .wrap {
    width: 640px;
    text-align: center;
    line-height: 28px;
    border-radius: 3px;
    font-size: 24px; }
    #confirm-dialog .modal .wrap img {
      display: block;
      width: 146px;
      height: auto;
      margin: 0 auto 30px; }
  #confirm-dialog .modal .buttons-wrapper {
    display: flex; }
  #confirm-dialog .modal .button-mini {
    width: 160px; }

@media screen and (max-width: 767px) {
  #confirm-dialog .modal .wrap {
    width: 100%;
    line-height: 28px;
    font-size: 20px; }
    #confirm-dialog .modal .wrap img {
      width: 87px;
      margin: 0 auto 40px; }
    #confirm-dialog .modal .wrap a {
      width: 100%; }
    #confirm-dialog .modal .wrap .buttons-wrapper {
      display: flex; }
    #confirm-dialog .modal .wrap .button-mini {
      width: 120px; } }

#matching-detail div {
  position: relative; }

@media screen and (max-width: 767px) {
  #matching-detail .md-wrap {
    margin-top: 40px; } }

#matching-detail .md-wrap.top {
  margin-top: 0px;
  padding: 0; }

#matching-detail .md-wrap.tracking {
  padding-top: 0px; }

@media screen and (max-width: 767px) {
  #matching-detail > main {
    padding: 20px 0 50px; } }

#matching-detail .md-owner-message {
  margin-bottom: 40px; }
  #matching-detail .md-owner-message .md-owner-message__image {
    width: 100%; }
  #matching-detail .md-owner-message .md-owner-message__container {
    display: flex;
    flex-direction: column;
    margin: 40px 0 8px 0;
    color: #525252;
    padding: 0.4em;
    border-top: solid 3px #929292;
    border-bottom: solid 3px #929292; }
    #matching-detail .md-owner-message .md-owner-message__container .md-owner-message__left {
      text-align: left;
      font-size: 20px;
      padding: 8px 0; }

#matching-detail .chartjs-size-monitor {
  position: absolute; }

#matching-detail .md-month-switch {
  display: flex;
  text-align: center;
  height: 40px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px; }
  #matching-detail .md-month-switch.tracking {
    margin-top: 10px; }
    @media screen and (max-width: 599px) {
      #matching-detail .md-month-switch.tracking {
        padding-left: 8px;
        justify-content: flex-start; } }
  #matching-detail .md-month-switch__label {
    font-size: 16px;
    font-weight: 700; }
  #matching-detail .md-month-switch__list {
    margin-left: 8px; }

#matching-detail .md-month-switch > select {
  font-size: 14px;
  border: solid 1px;
  border-radius: 0;
  padding: 2px 1em;
  letter-spacing: .05em;
  background: #fff; }

#matching-detail .md-h2 {
  font-size: 24px;
  font-weight: bold;
  padding: 13px;
  margin-bottom: 23px;
  border-bottom: 1px solid #cccccc;
  position: relative; }

#matching-detail .md-h2::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #3b42ea;
  position: absolute;
  bottom: -1px;
  left: 0; }

#matching-detail .md-month-switch + .md-matching-ratio {
  margin-top: 0; }

#matching-detail .md-matching-ratio {
  width: 100%;
  margin-top: 50px; }
  #matching-detail .md-matching-ratio.no-data {
    display: flex;
    min-height: 300px;
    align-items: center; }
  #matching-detail .md-matching-ratio.no-data p {
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: center;
    align-items: center; }
  #matching-detail .md-matching-ratio__title {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-indent: .5em;
    width: auto;
    height: 24px;
    margin: 0 auto 20px;
    white-space: nowrap;
    border-bottom: 1px solid #cccccc; }
    @media screen and (max-width: 599px) {
      #matching-detail .md-matching-ratio__title.tracking {
        margin-bottom: 0; } }
  #matching-detail .md-matching-ratio__title::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: #3b42ea;
    position: absolute;
    bottom: -1px;
    left: 0; }
  #matching-detail .md-matching-ratio__monthly-matching, #matching-detail .md-matching-ratio__generated-power {
    position: relative;
    width: 720px; }
    @media screen and (max-width: 767px) and (hover: none) and (pointer: coarse) {
      #matching-detail .md-matching-ratio__monthly-matching, #matching-detail .md-matching-ratio__generated-power {
        width: 100%; } }
  #matching-detail .md-matching-ratio__generated-power {
    margin-top: 40px; }
  #matching-detail .md-matching-ratio__total-power {
    position: absolute;
    width: 100%;
    height: 50px;
    top: 150px;
    text-align: center; }
    #matching-detail .md-matching-ratio__total-power.tracking {
      top: 230px; }
      @media screen and (max-width: 599px) {
        #matching-detail .md-matching-ratio__total-power.tracking {
          top: 210px; } }
  #matching-detail .md-matching-ratio__total-power em {
    font-size: 40px;
    font-weight: 700;
    display: block; }

@media screen and (min-width: 768px) {
  #matching-detail .md-plant-detail > div {
    margin-top: 40px; } }

#matching-detail .md-my-plant {
  display: flex;
  justify-content: space-between; }
  #matching-detail .md-my-plant__image {
    width: 40%;
    position: relative; }
  #matching-detail .md-my-plant__image > img {
    width: 100%;
    object-fit: contain; }
  #matching-detail .md-my-plant__image-setter {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 24px;
    border: solid 3px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    transition: all .2s ease-in-out; }
    #matching-detail .md-my-plant__image-setter .caption {
      font-size: 12px;
      margin-left: .5em;
      font-weight: 700; }
    #matching-detail .md-my-plant__image-setter .caption {
      transition: all .2s ease-in-out;
      transition-delay: .4s;
      white-space: nowrap; }
    #matching-detail .md-my-plant__image-setter:not(:hover) .caption {
      display: none;
      transform: scale(0, 1); }
    #matching-detail .md-my-plant__image-setter:hover {
      width: 140px;
      padding: 0 10px;
      background: #FF9425;
      border-width: 0;
      box-shadow: none; }
    #matching-detail .md-my-plant__image-setter:hover .caption {
      width: auto; }
  #matching-detail .md-my-plant__image-input {
    display: none; }
  #matching-detail .md-my-plant__parameter {
    display: block;
    width: calc(60% - 20px);
    list-style: none; }
  #matching-detail .md-my-plant__parameter > li {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    margin-bottom: 20px;
    white-space: nowrap;
    height: 30px;
    line-height: 30px; }
  @media screen and (max-width: 767px) {
    #matching-detail .md-my-plant {
      flex-direction: column; }
      #matching-detail .md-my-plant__image {
        width: 100%;
        margin: 20px 0; }
      #matching-detail .md-my-plant__parameter > li {
        margin-bottom: 10px; } }
  @media screen and (min-width: 768px) {
    #matching-detail .md-my-plant__parameter > li.short-item {
      width: auto; }
    #matching-detail .md-my-plant__parameter .short-item + .short-item {
      margin-left: 20px; } }
  #matching-detail .md-my-plant__parameter > li .value {
    font-weight: normal;
    margin-left: .8em; }
  #matching-detail .md-my-plant__parameter > li .value.editable {
    text-decoration: underline; }
  #matching-detail .md-my-plant__parameter > li .value.editable span {
    margin-left: 0.5em; }

#matching-detail .md-plant-name__icon.editor,
#matching-detail .md-plant-address__icon.editor {
  color: #FF9425;
  cursor: pointer; }

#matching-detail .md-plant-name__input,
#matching-detail .md-plant-address__input {
  border: none !important;
  font-size: 15px;
  padding: 0 !important;
  margin-left: .5em;
  text-decoration: underline;
  cursor: pointer; }

#matching-detail .md-plant-name__input:focus,
#matching-detail .md-plant-address__input:focus {
  border: solid 1px #CDCDCD !important;
  padding: 0 .5em !important;
  text-decoration: none;
  cursor: text; }

#matching-detail .md-plant-name__setter,
#matching-detail .md-plant-address__setter {
  transform: scale(0);
  pointer-events: none;
  transition: opacity .31415s;
  opacity: 0; }

#matching-detail .md-plant-name__input:focus + #matching-detail .md-plant-name__setter,
#matching-detail .md-plant-address__input:focus + #matching-detail .md-plant-name__setter, #matching-detail .md-plant-name__input:focus +
#matching-detail .md-plant-address__setter,
#matching-detail .md-plant-address__input:focus +
#matching-detail .md-plant-address__setter {
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  transform: scale(1);
  opacity: 1;
  background: #FF9425;
  width: auto;
  padding: 0 10px;
  height: 30px;
  line-height: initial;
  vertical-align: top;
  margin-left: .5em;
  pointer-events: initial; }
  #matching-detail .md-plant-name__input:focus + #matching-detail .md-plant-name__setter .caption,
  #matching-detail .md-plant-address__input:focus + #matching-detail .md-plant-name__setter .caption, #matching-detail .md-plant-name__input:focus +
  #matching-detail .md-plant-address__setter .caption,
  #matching-detail .md-plant-address__input:focus +
  #matching-detail .md-plant-address__setter .caption {
    font-size: 12px;
    margin-left: .5em;
    font-weight: 700; }

#matching-detail .md-plant-message {
  position: relative; }
  #matching-detail .md-plant-message__title {
    font-size: 16px;
    font-weight: 700; }
  #matching-detail .md-plant-message__body {
    width: 100% !important;
    border: solid 1px #CDCDCD;
    height: 190px;
    margin: 20px 0 0;
    padding: 10px;
    font-size: 15px;
    line-height: 1.5;
    cursor: text; }
  #matching-detail .md-plant-message__block {
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.7; }
  #matching-detail .md-plant-message__message-setter {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    position: absolute;
    background: #FF9425;
    right: 8px;
    bottom: 8px;
    width: auto;
    font-size: 14px;
    padding: 0 10px;
    z-index: 101; }
    #matching-detail .md-plant-message__message-setter .caption {
      font-size: 12px;
      margin-left: .5em;
      font-weight: 700; }

#matching-detail .md-youtube-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  #matching-detail .md-youtube-container .md-youtube__iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; }

#matching-detail .md-plant-container {
  margin-top: 0px; }
  @media screen and (max-width: 599px) {
    #matching-detail .md-plant-container {
      flex-direction: column;
      justify-content: center; } }
  #matching-detail .md-plant-container .md-plant-info {
    display: flex;
    margin-bottom: 40px; }
    @media screen and (max-width: 599px) {
      #matching-detail .md-plant-container .md-plant-info {
        flex-direction: column;
        margin-bottom: 20px; } }
    #matching-detail .md-plant-container .md-plant-info .md-image-container {
      margin-right: 32px; }
      @media screen and (max-width: 599px) {
        #matching-detail .md-plant-container .md-plant-info .md-image-container {
          margin: 0 0 20px 0; } }
      #matching-detail .md-plant-container .md-plant-info .md-image-container .md-plant-image {
        width: 100%; }
    #matching-detail .md-plant-container .md-plant-info .md-map-container {
      overflow: hidden;
      width: 100%;
      height: 264px;
      position: relative; }
      @media screen and (max-width: 599px) {
        #matching-detail .md-plant-container .md-plant-info .md-map-container {
          height: 200px;
          margin: 0; } }
      #matching-detail .md-plant-container .md-plant-info .md-map-container .md-map__iframe {
        width: 260px;
        height: 490px;
        margin-top: -80px; }
        @media screen and (max-width: 599px) {
          #matching-detail .md-plant-container .md-plant-info .md-map-container .md-map__iframe {
            width: 100%; } }
      #matching-detail .md-plant-container .md-plant-info .md-map-container .md-map-address {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #fff;
        text-align: right;
        padding-top: 4px; }
  #matching-detail .md-plant-container .md-plant-detail_link {
    margin-bottom: 60px; }
    @media screen and (max-width: 599px) {
      #matching-detail .md-plant-container .md-plant-detail_link {
        margin-bottom: 40px; } }

#matching-detail .md-plant-detail__button {
  margin-bottom: 60px; }
  @media screen and (max-width: 599px) {
    #matching-detail .md-plant-detail__button {
      margin-top: 0;
      margin-bottom: 40px; } }

#matching-detail .md-contract-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 21px;
  text-align: center; }
  #matching-detail .md-contract-switcher .plan_select {
    display: block;
    font-size: 14px;
    letter-spacing: 0;
    width: 150px;
    position: absolute !important;
    z-index: 201 !important; }
    #matching-detail .md-contract-switcher .plan_select button {
      width: 100%;
      padding: 0;
      color: #f7931e;
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      width: 150px;
      height: 30px;
      background: #FFFFFF;
      font-size: 13px;
      font-weight: bold;
      position: relative;
      border: solid 1px #f7931e; }
    #matching-detail .md-contract-switcher .plan_select button::after {
      content: '';
      margin: 0;
      display: inline-block;
      width: 8px;
      height: 8px;
      border: 1px solid;
      border-color: transparent transparent #f7931e #f7931e;
      transform: rotate(-45deg);
      position: relative;
      top: -3px;
      right: -8px; }
    #matching-detail .md-contract-switcher .plan_select .hide {
      position: absolute !important;
      top: 31px;
      left: 0;
      width: 150px;
      height: 0;
      overflow: hidden;
      transition: height .4s ease-out; }
    #matching-detail .md-contract-switcher .plan_select .md-item {
      height: 1.4em;
      line-height: 1.4em;
      padding-left: 5px;
      color: #000; }
    #matching-detail .md-contract-switcher .plan_select .hide ul {
      border: none; }
    #matching-detail .md-contract-switcher .plan_select .hide li {
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      color: #fff;
      background: #f7931e;
      border-radius: 6px;
      cursor: pointer; }
    #matching-detail .md-contract-switcher .plan_select .hide li:last-of-type {
      border: none; }

#selected_contract {
  text-align: center;
  margin: 20px; }
  #selected_contract .id {
    font-weight: bold; }
  #selected_contract .address {
    font-size: 80%; }
  #selected_contract .button {
    color: #f7931e;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    width: 150px;
    height: 30px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    border: solid 1px #f7931e; }
  #selected_contract .button:hover {
    background: #FFB13D;
    color: #FFFFFF; }
  #selected_contract .button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: solid 4px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 4px transparent;
    border-left: solid 5px;
    transition: all .2s ease-out; }
  #selected_contract .button:hover:after {
    color: #FFFFFF;
    border-left-color: #FFFFFF;
    right: 5px; }
  #selected_contract .contract_info {
    padding: 10px; }

#contract_select {
  width: 100%;
  font-size: 15px;
  text-align: center;
  z-index: 10000 !important; }
  #contract_select .id {
    font-weight: bold; }
  #contract_select .modal_button button {
    display: block;
    margin: 50px auto 50px; }
  #contract_select .scroll_area .wrap {
    width: 700px;
    line-height: 28px; }
    #contract_select .scroll_area .wrap tr:hover {
      background-color: #FFB13D;
      color: #FFFFFF; }
    #contract_select .scroll_area .wrap tr a {
      cursor: pointer; }
    #contract_select .scroll_area .wrap tr th, #contract_select .scroll_area .wrap tr td {
      border: #cccccc solid 1px;
      padding: 5px; }
    #contract_select .scroll_area .wrap tr th {
      height: 40px;
      font-weight: bold;
      background: #999999;
      line-height: 40px;
      color: #fff; }
    #contract_select .scroll_area .wrap tr td {
      text-align: left; }
    #contract_select .scroll_area .wrap tr .th1 {
      width: 110px; }
    #contract_select .scroll_area .wrap tr .th2 {
      width: 350px; }
    #contract_select .scroll_area .wrap tr .th3 {
      width: 140px; }
    #contract_select .scroll_area .wrap .selected {
      background-color: #E5E8F8;
      padding: 3px; }
  @media screen and (max-width: 767px) {
    #contract_select .scroll_area .wrap {
      width: 95%; }
      #contract_select .scroll_area .wrap table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 10px; }
      #contract_select .scroll_area .wrap tr {
        width: 100%; }
        #contract_select .scroll_area .wrap tr td, #contract_select .scroll_area .wrap tr th {
          display: block;
          width: 100%; }
        #contract_select .scroll_area .wrap tr .th1 {
          width: 100%; }
        #contract_select .scroll_area .wrap tr .th2 {
          width: 100%; }
        #contract_select .scroll_area .wrap tr .th3 {
          width: 100%; } }

.publicConsumer .lead, .panelWrap_cousumerInfo {
  border-radius: 6px;
  box-shadow: 0 0 8px #e6e6e6; }

.publicConsumer .title1 {
  text-align: center;
  font-size: 24px;
  padding-bottom: 30px;
  margin-top: 60px;
  margin-bottom: 48px; }

.publicConsumer .lead {
  width: 900px;
  margin: 0 auto;
  padding-top: 30px;
  background: white;
  border-radius: 6px;
  text-align: left; }
  .publicConsumer .lead .lead-innerwrap_under {
    border: none; }
  .publicConsumer .lead.induction {
    box-shadow: none; }
  .publicConsumer .lead > div {
    width: 85%;
    margin: auto;
    font-size: 16px;
    line-height: 28px;
    padding-bottom: 30px; }
    .publicConsumer .lead > div:first-child {
      border-bottom: #cccccc solid 1px; }
    .publicConsumer .lead > div > p:first-child {
      margin-bottom: 14px; }
    .publicConsumer .lead > div > p:nth-of-type(3) {
      margin-bottom: 14px; }
    .publicConsumer .lead > div .list-lead {
      margin-top: 14px; }
      .publicConsumer .lead > div .list-lead > li > span {
        font-size: 14px;
        font-weight: bold; }
  .publicConsumer .lead .iconWrap {
    width: 85%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 20px 0; }
    .publicConsumer .lead .iconWrap .iconWrap-title {
      font-size: 14px;
      font-weight: bold;
      line-height: 30px;
      margin-right: 20px; }
    .publicConsumer .lead .iconWrap .iconBox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap; }
      .publicConsumer .lead .iconWrap .iconBox .icon {
        margin-right: 25px; }
        .publicConsumer .lead .iconWrap .iconBox .icon > dt,
        .publicConsumer .lead .iconWrap .iconBox .icon dd {
          display: inline-block;
          vertical-align: text-top; }
        .publicConsumer .lead .iconWrap .iconBox .icon > dd {
          vertical-align: middle; }
          .publicConsumer .lead .iconWrap .iconBox .icon > dd > img {
            width: 30px;
            height: 30px; }
        .publicConsumer .lead .iconWrap .iconBox .icon > dt {
          font-size: 16px;
          line-height: 30px;
          vertical-align: middle; }

@media screen and (max-width: 767px) {
  .publicConsumer .title1 {
    font-size: 18px;
    margin-top: 30px;
    padding-bottom: 0;
    margin-bottom: 20px; }
  .publicConsumer .lead {
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
    background: white; }
    .publicConsumer .lead > div {
      width: 90%;
      margin: auto;
      font-size: 12px;
      line-height: 20px;
      padding-bottom: 15px;
      border-bottom: #cccccc solid 1px; }
      .publicConsumer .lead > div .list-lead {
        margin-top: 8px; }
        .publicConsumer .lead > div .list-lead > li > span {
          font-size: 10px;
          font-weight: bold; }
    .publicConsumer .lead .iconWrap {
      width: 100%;
      display: block;
      padding: 20px 0; }
      .publicConsumer .lead .iconWrap .iconWrap-title {
        font-size: 10px;
        line-height: normal;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center; }
      .publicConsumer .lead .iconWrap .iconBox {
        justify-content: center; }
        .publicConsumer .lead .iconWrap .iconBox .icon {
          margin-right: 25px; }
          .publicConsumer .lead .iconWrap .iconBox .icon > dt,
          .publicConsumer .lead .iconWrap .iconBox .icon dd {
            display: inline-block;
            vertical-align: text-top; }
          .publicConsumer .lead .iconWrap .iconBox .icon > dd {
            vertical-align: middle; }
            .publicConsumer .lead .iconWrap .iconBox .icon > dd > img {
              width: 22.5px; }
          .publicConsumer .lead .iconWrap .iconBox .icon > dt {
            font-size: 12px;
            line-height: 22.5px;
            vertical-align: middle; } }

/*
  @media screen and (max-width: 900px) {
          width: auto;
}
*/
.publicConsumer .lead, .panelWrap_cousumerInfo {
  border-radius: 6px;
  box-shadow: 0 0 8px #e6e6e6; }

.panel-wrap {
  padding-top: 40px; }
  @media screen and (max-width: 767px) {
    .panel-wrap {
      background: #f2f2f2; } }
  @media screen and (min-width: 768px) {
    .panel-wrap {
      margin-bottom: 100px !important; } }

.panelWrap_cousumerInfo {
  background: white;
  width: 900px;
  margin: 0 auto 20px auto;
  line-height: normal; }
  .panelWrap_cousumerInfo .panel {
    width: 100%;
    border-radius: 6px; }
    .panelWrap_cousumerInfo .panel:after {
      content: "";
      display: block;
      clear: both; }
    .panelWrap_cousumerInfo .panel .imgWrap {
      width: 270px;
      height: 170px;
      line-height: 170px;
      text-align: center;
      vertical-align: middle;
      float: left; }
      .panelWrap_cousumerInfo .panel .imgWrap > img {
        max-width: 200px;
        max-height: 100px;
        vertical-align: middle; }
    .panelWrap_cousumerInfo .panel .titleWrap {
      width: calc(100% - 271px);
      padding: 18px 0 18px 18px;
      border-left: #cccccc solid 1px;
      border-bottom: #cccccc solid 1px;
      float: left;
      position: relative; }
      .panelWrap_cousumerInfo .panel .titleWrap .label_cheer {
        position: absolute;
        top: 10px;
        right: 18px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #ffffff;
        color: #ff7783;
        border: #ff7783 solid 1px;
        text-align: center; }
        .panelWrap_cousumerInfo .panel .titleWrap .label_cheer > span {
          font-size: 14px;
          font-weight: bold; }
      .panelWrap_cousumerInfo .panel .titleWrap .title {
        font-size: 22px;
        color: #333333;
        text-align: left;
        font-weight: bold; }
      .panelWrap_cousumerInfo .panel .titleWrap.selected {
        font-weight: bold;
        background: #ff7783; }
        .panelWrap_cousumerInfo .panel .titleWrap.selected > p {
          color: #FFFFFF; }
    .panelWrap_cousumerInfo .panel .txtWrap {
      width: calc(100% - 271px);
      padding: 9px 5px 4px 20px;
      float: left;
      min-height: 100px; }
      @media screen and (min-width: 768px) {
        .panelWrap_cousumerInfo .panel .txtWrap {
          border-left: 1px solid #cccccc; } }
      .panelWrap_cousumerInfo .panel .txtWrap .subtitle {
        font-size: 20px;
        line-height: normal;
        text-align: left;
        white-space: pre-line; }
      .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button {
        margin: 10px 0 0 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap; }
        .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .iconWrap {
          display: flex;
          justify-content: flex-start;
          flex-wrap: nowrap; }
          .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .iconWrap .icon {
            margin-right: 10px; }
            .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .iconWrap .icon > img {
              width: 40px;
              height: 40px; }
        .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .btnWrap {
          box-sizing: border-box;
          width: 140px;
          margin-right: 18px; }
          .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .btnWrap > div {
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #ffffff;
            border: #ff7783 solid 1px;
            border-radius: 4px;
            color: #ff7783;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer; }

.panel-pointGift {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  border-top: #cccccc solid 1px; }
  .panel-pointGift:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom: #cccccc solid 1px; }
    .panel-pointGift:last-child .imgWrap > img {
      border-bottom-left-radius: 6px; }
  .panel-pointGift .imgWrap {
    width: 150px;
    font-size: 0; }
    .panel-pointGift .imgWrap > img {
      max-width: 150px;
      max-height: 100px; }
  .panel-pointGift .titleWrap {
    padding: 0 0 0 15px; }
    .panel-pointGift .titleWrap .label {
      position: relative;
      text-align: left; }
      .panel-pointGift .titleWrap .label .underLine {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 148px;
        height: 8px;
        background: #ff7783;
        z-index: 1; }
      .panel-pointGift .titleWrap .label > span {
        display: block;
        position: relative;
        font-size: 18px;
        font-weight: bold;
        z-index: 10;
        margin-top: 15px;
        padding-left: 2px; }
    .panel-pointGift .titleWrap .title {
      font-size: 19px;
      margin-top: 15px;
      text-align: left; }

@media screen and (max-width: 767px) {
  .panelWrap_cousumerInfo {
    border-radius: 6px;
    width: 90%;
    margin: 0 auto; }
    .panelWrap_cousumerInfo + .panelWrap_cousumerInfo {
      margin-top: 20px; }
    .panelWrap_cousumerInfo .panel {
      display: block; }
      .panelWrap_cousumerInfo .panel .imgWrap {
        width: 115px;
        height: 90px;
        line-height: 90px;
        overflow: hidden;
        border-bottom: #cccccc solid 1px; }
        .panelWrap_cousumerInfo .panel .imgWrap > img {
          max-width: 92px;
          max-height: 72px;
          vertical-align: middle; }
      .panelWrap_cousumerInfo .panel .titleWrap {
        width: calc(100% - 115px);
        height: 90px;
        line-height: normal;
        padding: 0 0 0 15px;
        display: table;
        vertical-align: bottom; }
        .panelWrap_cousumerInfo .panel .titleWrap .label_cheer {
          width: 50px;
          height: 20px;
          line-height: 20px; }
          .panelWrap_cousumerInfo .panel .titleWrap .label_cheer > span {
            font-size: 12px; }
        .panelWrap_cousumerInfo .panel .titleWrap .title {
          font-size: 19px;
          line-height: 1;
          display: table-cell;
          vertical-align: middle; }
        .panelWrap_cousumerInfo .panel .titleWrap.selected {
          color: #FFFFFF;
          font-weight: bold;
          background: #ff7783; }
      .panelWrap_cousumerInfo .panel .txtWrap {
        width: 100%;
        margin: auto;
        padding: 12px 0 0 0;
        padding-bottom: 12px;
        border-right: none;
        border-left: none;
        border-bottom: none; }
        .panelWrap_cousumerInfo .panel .txtWrap .subtitle {
          width: 90%;
          margin: auto;
          font-size: 15px;
          line-height: normal; }
        .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button {
          width: 90%;
          margin: 12px auto 0 auto; }
          .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .iconWrap .icon {
            margin-right: 5px; }
            .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .iconWrap .icon > img {
              width: 30px;
              height: 30px; }
          .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .btnWrap {
            box-sizing: border-box;
            width: 105px;
            margin-right: 0; }
            .panelWrap_cousumerInfo .panel .txtWrap .container_icon_button .btnWrap > div {
              width: 105px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background: #ffffff;
              border: #ff7783 solid 1px;
              border-radius: 4px;
              color: #ff7783;
              font-size: 12px;
              font-weight: bold;
              cursor: pointer; }
  .panel-pointGift {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center; }
    .panel-pointGift:last-child {
      border-bottom-left-radius: 6px; }
      .panel-pointGift:last-child .imgWrap > img {
        border-bottom-left-radius: 0; }
    .panel-pointGift .imgWrap {
      width: 115px;
      font-size: 0;
      padding: 5px 0 5px 5px; }
      .panel-pointGift .imgWrap > img {
        max-width: 110px;
        max-height: 84px; }
    .panel-pointGift .titleWrap {
      padding: 0 5px 0 15px; }
      .panel-pointGift .titleWrap .label {
        position: relative;
        text-align: left; }
        .panel-pointGift .titleWrap .label .underLine {
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 111px;
          height: 4px;
          background: #ff7783;
          z-index: 1; }
        .panel-pointGift .titleWrap .label > span {
          display: block;
          position: relative;
          font-size: 14px;
          font-weight: bold;
          z-index: 10;
          margin-top: 10px;
          padding-left: 2px; }
      .panel-pointGift .titleWrap .title {
        font-size: 14px;
        text-align: left;
        line-height: 1.3;
        margin-top: 10px;
        margin-bottom: 5px; } }

/*
  @media screen and (max-width: 900px) {
          width: auto;
}
*/
.publicConsumer {
  text-align: center;
  padding-top: 90px;
  width: 100%;
  margin: 0 auto 100px auto; }
  @media screen and (max-width: 767px) {
    .publicConsumer.publicConsumerInfo {
      width: calc(100% - 32px);
      background: none; } }
  .publicConsumer > section {
    background: white;
    width: 900px;
    margin: auto; }
  .publicConsumer .mainView {
    padding-top: 35px;
    margin-top: 65px;
    border-bottom: #cccccc solid 1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 0 0 8px #e6e6e6; }
    .publicConsumer .mainView .title {
      padding-bottom: 25px;
      border-bottom: #cccccc solid 1px; }
      .publicConsumer .mainView .title .ttl-main {
        font-size: 32px;
        font-weight: bold;
        width: 90%;
        margin: auto; }
      .publicConsumer .mainView .title .ttl-exp {
        margin-top: 15px;
        font-size: 20px;
        width: 90%;
        margin: 15px auto 0 auto;
        line-height: 1.2;
        white-space: pre-line; }
    .publicConsumer .mainView .imgWrap {
      width: 462px;
      height: 340px;
      line-height: 340px;
      margin: auto; }
      .publicConsumer .mainView .imgWrap > img {
        max-width: 380px;
        max-height: 240px;
        vertical-align: middle; }
  .publicConsumer .contentsInner {
    background: white;
    width: 900px;
    margin: auto;
    padding-top: 70px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 0 8px #e6e6e6; }
    .publicConsumer .contentsInner .section_detail,
    .publicConsumer .contentsInner .giftWrap,
    .publicConsumer .contentsInner .uiWrap {
      width: 766px;
      margin: 0 auto 70px auto; }
    .publicConsumer .contentsInner .giftWrap .title {
      background: #ff7783;
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      border-radius: 6px;
      margin-bottom: 40px;
      padding: 10px 0; }
    .publicConsumer .contentsInner .giftWrap .itemWrap {
      padding-bottom: 70px;
      border-bottom: #cccccc solid 1px;
      margin-bottom: 70px; }
      .publicConsumer .contentsInner .giftWrap .itemWrap > ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap; }
        .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li {
          width: 300px;
          margin-bottom: 30px; }
          .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li > div > img {
            width: 100%; }
          .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li .caption {
            font-size: 16px;
            margin-top: 20px;
            text-align: left; }
    .publicConsumer .contentsInner .giftWrap .btnWrap {
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
      width: 100%;
      width: auto;
      margin-bottom: 70px; }
      .publicConsumer .contentsInner .giftWrap .btnWrap > div {
        background: #fcd200;
        border-radius: 10px;
        padding: 4px;
        display: table; }
        .publicConsumer .contentsInner .giftWrap .btnWrap > div > a {
          width: 230px;
          height: 52px;
          line-height: 52px;
          text-align: center;
          border: #ffffff solid 2px;
          border-radius: 4px;
          color: #333333;
          font-size: 20px;
          font-weight: bold;
          display: table-cell;
          vertical-align: middle;
          cursor: pointer; }
    .publicConsumer .contentsInner .uiWrap .linkWrap {
      padding-bottom: 70px; }
      .publicConsumer .contentsInner .uiWrap .linkWrap > a {
        display: inline-block;
        padding-left: 20px;
        background: url(/assets/images/public-consumer-info-list/tri_arrow_left.svg) left center no-repeat;
        background-size: 10px 10px;
        font-size: 16px;
        font-weight: bold; }
        .publicConsumer .contentsInner .uiWrap .linkWrap > a:hover {
          text-decoration: underline; }

@media screen and (max-width: 767px) {
  .publicConsumer .mainView {
    width: 100%;
    padding-top: 35px;
    margin-top: 65px;
    border-bottom: #cccccc solid 1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 0 0 8px #e6e6e6; }
    .publicConsumer .mainView .title {
      padding-bottom: 25px;
      border-bottom: #cccccc solid 1px; }
      .publicConsumer .mainView .title .ttl-main {
        font-size: 16px;
        text-align: center;
        width: 90%;
        margin: auto; }
      .publicConsumer .mainView .title .ttl-exp {
        margin-top: 15px;
        font-size: 14px;
        width: 90%;
        margin: 15px auto 0 auto;
        line-height: 1.2;
        text-align: left; }
    .publicConsumer .mainView .imgWrap {
      width: 100%;
      height: 170px;
      line-height: 170px;
      margin: auto; }
      .publicConsumer .mainView .imgWrap > img {
        max-width: 190px;
        max-height: 120px;
        vertical-align: middle; }
  .publicConsumer .contentsInner {
    background: white;
    width: 100%;
    margin: auto;
    padding-top: 70px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 0 8px #e6e6e6; }
    .publicConsumer .contentsInner .section_detail,
    .publicConsumer .contentsInner .giftWrap,
    .publicConsumer .contentsInner .uiWrap {
      width: 80%;
      margin: 0 auto 60px auto; }
    .publicConsumer .contentsInner .giftWrap .title {
      font-size: 18px;
      font-weight: bold;
      border-radius: 4px;
      margin-bottom: 22px;
      padding: 7px 0; }
    .publicConsumer .contentsInner .giftWrap .itemWrap {
      padding-bottom: 45px;
      margin-bottom: 45px; }
      .publicConsumer .contentsInner .giftWrap .itemWrap > ul {
        display: block; }
        .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li {
          width: 100%;
          margin-bottom: 20px; }
          .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li > div > img {
            width: 100%; }
          .publicConsumer .contentsInner .giftWrap .itemWrap > ul > li .caption {
            font-size: 14px;
            margin-top: 10px; }
    .publicConsumer .contentsInner .giftWrap .btnWrap {
      display: block;
      width: 100%;
      margin-bottom: 45px; }
      .publicConsumer .contentsInner .giftWrap .btnWrap > div {
        margin-bottom: 16px;
        width: 178px;
        margin: 0 auto 8px auto;
        height: 44px;
        line-height: 44px; }
        .publicConsumer .contentsInner .giftWrap .btnWrap > div .btnInner {
          width: 170px;
          height: 36px;
          line-height: 36px; }
          .publicConsumer .contentsInner .giftWrap .btnWrap > div .btnInner > span {
            font-size: 14px; }
    .publicConsumer .contentsInner .uiWrap .linkWrap {
      padding-bottom: 45px; }
      .publicConsumer .contentsInner .uiWrap .linkWrap > a {
        display: inline-block;
        padding-left: 20px;
        background: url(/assets/images/public-consumer-info-list/tri_arrow_left.svg) left center no-repeat;
        background-size: 10px 10px;
        font-size: 16px;
        font-weight: bold; }
        .publicConsumer .contentsInner .uiWrap .linkWrap > a:hover {
          text-decoration: underline; } }

/*
  @media screen and (max-width: 900px) {
          width: auto;
}
*/
.contentsInner .section_detail .title {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: black solid 1px; }
  .contentsInner .section_detail .title > span {
    font-size: 24px;
    font-weight: bold;
    color: #333333; }

.contentsInner .section_detail .imgWrap {
  margin-top: 40px;
  margin-bottom: 40px; }
  .contentsInner .section_detail .imgWrap > img {
    width: auto; }

.contentsInner .section_detail .checkBoxWrap {
  margin-top: 20px; }

.contentsInner .section_detail .detail {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 8px;
  text-align: left; }

.contentsInner .section_detail .btnWrap {
  box-sizing: border-box;
  width: 140px;
  margin: 40px auto 40px auto; }
  .contentsInner .section_detail .btnWrap > div {
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ffffff;
    border: #ff7783 solid 1px;
    border-radius: 4px;
    color: #ff7783;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer; }

.contentsInner .section_detail .linkWrap {
  margin-bottom: 45px; }
  .contentsInner .section_detail .linkWrap .link {
    font-size: 16px;
    text-align: left;
    margin-bottom: 45px; }
    .contentsInner .section_detail .linkWrap .link > dt,
    .contentsInner .section_detail .linkWrap .link > dd {
      display: inline-block;
      vertical-align: text-top; }
    .contentsInner .section_detail .linkWrap .link > dd > a {
      word-break: break-all; }

.contentsInner .section_detail .md-checkBox {
  text-align: left; }

.contentsInner .md-about-box {
  padding: 0.5em 1em;
  border: solid 3px #000000; }

.contentsInner .md-about-bold {
  font-weight: bold; }

.contentsInner .md-checkBox-center > div label.md-checkBox {
  display: inline; }

@media screen and (max-width: 767px) {
  .contentsInner .section_detail .title {
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: black solid 1px;
    text-align: left;
    border-left: #333333 solid 3px;
    padding-left: 12px; }
    .contentsInner .section_detail .title > span {
      font-size: 18px; }
  .contentsInner .section_detail .imgWrap {
    margin-top: 20px;
    margin-bottom: 20px; }
    .contentsInner .section_detail .imgWrap > img {
      width: 100%; }
  .contentsInner .section_detail .detail {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    text-align: left; }
  .contentsInner .section_detail .btnWrap {
    margin: 30px auto 30px auto; }
    .contentsInner .section_detail .btnWrap > div > span {
      font-size: 14px; }
  .contentsInner .section_detail .linkWrap {
    margin-bottom: 32px; }
    .contentsInner .section_detail .linkWrap .link {
      font-size: 16px;
      margin-bottom: 32px; } }

@media screen and (min-width: 768px) {
  .publicConsumer {
    margin-bottom: 0 !important; } }

@media screen and (max-width: 767px) {
  .publicConsumer {
    padding-top: 0 !important;
    text-align: center;
    width: 100%;
    margin: 0 auto; }
    .publicConsumer .contentsInner {
      padding-top: 40px; } }

.md-Paragraph_return {
  white-space: pre-line; }

#super_invoice #invoice_modal .modal_button button {
  display: block;
  margin: 50px auto 50px; }

#super_invoice #invoice_modal .scroll_area .wrap {
  width: 95%;
  text-align: left;
  line-height: 28px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-sub_title {
    font-size: 15px;
    text-align: center; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-attention {
    font-size: 12px;
    line-height: 13px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_box {
    display: flex;
    justify-content: space-around; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_left {
    width: 540px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_right {
    width: 400px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_pie {
    display: inline-block; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-box {
    flex-wrap: wrap;
    display: flex;
    justify-content: center; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-legend {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    font-weight: bold;
    padding: 1px;
    margin: 1px;
    font-size: 16px;
    width: 100%; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-legend img {
      height: 18px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-collector_box {
    margin: 5px;
    width: 100%;
    border: solid 1px #BBBBBB;
    padding: 10px; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-collector_box .md-collector {
      display: flex;
      justify-content: space-between;
      color: #FFFFFF;
      font-weight: bold;
      margin: 2px;
      font-size: 21px; }
      #super_invoice #invoice_modal .scroll_area .wrap .md-collector_box .md-collector img {
        height: 25px; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-item {
    color: #000000;
    border-top: solid 1px #999999; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-item .md-item_name {
      display: flex;
      justify-content: space-between;
      background-color: #EEEEEE;
      font-size: 18px;
      font-weight: bold; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-item .md-about {
      font-size: 16px;
      border-bottom: solid 1px #DDDDDD;
      margin: 3px; }
      #super_invoice #invoice_modal .scroll_area .wrap .md-item .md-about .md-about_title {
        font-weight: bold;
        font-size: 17px;
        padding: 2px; }
      #super_invoice #invoice_modal .scroll_area .wrap .md-item .md-about .md-flow {
        border-radius: 10%;
        border: solid 1px #BBBBBB;
        padding: 2px;
        margin: 2px;
        background-color: #FFFFEE; }
  #super_invoice #invoice_modal .scroll_area .wrap h2 {
    text-align: left;
    margin-top: 20px;
    color: #555555;
    position: inherit; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-money_flow {
    width: 100%; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_left {
    width: 60%; }
  #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_right {
    width: 40%; } }

@media screen and (max-width: 767px) {
  #super_invoice #invoice_modal .modal_button button {
    width: 70%;
    margin: 50px auto; }
  #super_invoice #invoice_modal .scroll_area .wrap {
    width: 100%;
    line-height: 28px;
    padding-bottom: 10px; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-super_box {
      flex-wrap: nowrap;
      display: block;
      justify-content: center;
      text-align: center; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_left {
      width: 100%; }
    #super_invoice #invoice_modal .scroll_area .wrap .md-super_contents_right {
      width: 100%; } }

/* メニュー ボタン */
#wrapper.theme-monster-spring .bgcolor, #wrapper.theme-monster-spring .before_bg::before,
#wrapper.theme-monster-spring .after_bg::after, #wrapper.theme-monster-spring .hover_bg:hover {
  background-color: #808055 !important; }

.theme-monster-spring {
  /* 各画面微調整 */
  /* ヘッダ */ }
  .theme-monster-spring #contract_contents .wrap .contract .contract_contents {
    background-color: #FFFFFF; }
  .theme-monster-spring #process .area {
    background-color: #FFFFFF; }
  .theme-monster-spring main {
    background-image: url(../images/themes/pc_spring_bg.png);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; }
  .theme-monster-spring .modal .scroll_area {
    padding: 120px 0 50px; }
  .theme-monster-spring section.page {
    background-image: url(../images/themes/pc_spring_bg.png);
    background-color: #eef8ff;
    background-size: cover;
    background-position: center;
    position: relative; }
    .theme-monster-spring section.page:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 10px;
      background-image: url(../images/themes/pc_content_monster.png);
      width: 440px;
      height: 480px;
      background-repeat: no-repeat;
      background-position: center bottom; }
    .theme-monster-spring section.page div {
      position: relative;
      z-index: 1; }
      .theme-monster-spring section.page div .chartjs-size-monitor {
        position: absolute; }
  .theme-monster-spring > .md-global-menu header {
    background-image: url(../images/themes/pc_header_spring.jpg);
    background-size: 280px;
    background-position: 10px 10px;
    overflow: hidden; }
    .theme-monster-spring > .md-global-menu header:after {
      content: "\00a9円谷プロ";
      font-size: 10px;
      color: #000000;
      text-align: right;
      line-height: 150px;
      vertical-align: bottom;
      display: block;
      width: 201px;
      height: 86px;
      top: 32px;
      right: 70px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(../images/themes/pc_header_monster.png);
      position: absolute; }
    .theme-monster-spring > .md-global-menu header .member_name {
      color: #000000; }
  .theme-monster-spring #detailed {
    /* 明細タブ */
    /* チャートタブ */ }
    .theme-monster-spring #detailed .b_detailed button.active {
      background-color: #808055; }
    .theme-monster-spring #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active {
      background-color: #752640; }
      .theme-monster-spring #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
        border-top: 10px solid #752640; }
    .theme-monster-spring #detailed .detailed_frame {
      background-color: transparent; }
  .theme-monster-spring .md-flip-board__signal {
    position: relative;
    margin: auto 17px;
    z-index: 1;
    background-color: transparent !important;
    background-image: url(../images/themes/pc_el_flower.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    border-radius: none;
    box-sizing: border-box; }
  .theme-monster-spring .fall-object {
    background-image: url(/assets/images/themes/fall_sakura.png);
    background-size: cover;
    height: 35px;
    width: 35px;
    z-index: 101;
    position: fixed;
    animation: md-fall_flow1 8s linear 0s infinite;
    pointer-events: none; }
  .theme-monster-spring .fall span:nth-child(3n) {
    height: 30px;
    width: 30px; }
  .theme-monster-spring .fall span:nth-child(3n+1) {
    height: 20px;
    width: 20px; }
  .theme-monster-spring .fall span:nth-child(3n) {
    height: 10px;
    width: 10px; }
  .theme-monster-spring .fall span:nth-child(1) {
    animation: md-fall_flow1 8s 4s linear infinite; }
  .theme-monster-spring .fall span:nth-child(2) {
    animation: md-fall_flow3 10s 0s linear infinite; }
  .theme-monster-spring .fall span:nth-child(3) {
    animation: md-fall_flow3 10s 2s linear infinite; }
  .theme-monster-spring .fall span:nth-child(4) {
    animation: md-fall_flow4 10s 0s linear infinite; }
  .theme-monster-spring .fall span:nth-child(5) {
    animation: md-fall_flow5 10s 6s linear infinite; }
  .theme-monster-spring .fall span:nth-child(6) {
    animation: md-fall_flow6 11s 2s linear infinite; }
  .theme-monster-spring .fall span:nth-child(7) {
    animation: md-fall_flow7 9s 1s linear infinite; }
  .theme-monster-spring .fall span:nth-child(8) {
    animation: md-fall_flow8 9s 7s linear infinite; }
  .theme-monster-spring .fall span:nth-child(9) {
    animation: md-fall_flow9 9s 2s linear infinite; }
  .theme-monster-spring .fall span:nth-child(10) {
    animation: md-fall_flow10 10s 7s linear infinite; }

@media screen and (max-width: 767px) {
  #wrapper.theme-monster-spring {
    padding-bottom: 90px; }
  .theme-monster-spring {
    /* ヘッダユーザ名 */ }
    .theme-monster-spring .modal .scroll_area {
      padding: 150px 15px 210px; }
    .theme-monster-spring section.page {
      background-image: none; }
      .theme-monster-spring section.page::after {
        display: none; }
    .theme-monster-spring .page {
      z-index: 90; }
    .theme-monster-spring .md-global-menu header .left .member {
      width: 100%; }
    .theme-monster-spring .md-global-menu header::after {
      line-height: 100px;
      width: 140px;
      height: 57px;
      right: auto;
      left: 16px;
      top: auto;
      bottom: 0; }
    .theme-monster-spring .md-flip-board {
      z-index: 150; }
    .theme-monster-spring .footer-theme {
      display: block;
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 90px;
      z-index: 100;
      background-image: url(../images/themes/sp_spring_bg.png);
      background-position: center top;
      background-size: cover;
      background-color: #eef8ff; }
      .theme-monster-spring .footer-theme::after {
        content: "";
        background-image: url(../images/themes/sp_footer_monster.png);
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: 50px;
        background-size: cover;
        right: 11px; }
      .theme-monster-spring .footer-theme .footer-theme-inner {
        display: block;
        width: 100vw;
        height: 300px;
        position: relative;
        /*top:-100px;*/
        overflow: hidden; }
      .theme-monster-spring .footer-theme .md-flip-board__signal {
        width: 30px;
        height: 30px;
        max-height: 30px; } }

@keyframes md-fall_flow1 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(39deg); } }

@keyframes md-fall_flow2 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(30deg); } }

@keyframes md-fall_flow3 {
  0% {
    top: 100px;
    left: 60%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(-59deg); } }

@keyframes md-fall_flow4 {
  0% {
    top: 100px;
    left: 90%; }
  100% {
    top: 100%;
    left: 80%;
    transform: rotate(-179deg); } }

@keyframes md-fall_flow5 {
  0% {
    top: 100px;
    left: 80%; }
  100% {
    top: 100%;
    left: 85%;
    transform: rotate(-25deg); } }

@keyframes md-fall_flow6 {
  0% {
    top: 100px;
    left: 40%; }
  100% {
    top: 100%;
    left: 40%;
    transform: rotate(158deg); } }

@keyframes md-fall_flow7 {
  0% {
    top: 100px;
    left: 70%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(15deg); } }

@keyframes md-fall_flow8 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 25%;
    transform: rotate(198deg); } }

@keyframes md-fall_flow9 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 5%;
    transform: rotate(98deg); } }

@keyframes md-fall_flow10 {
  0% {
    top: 100px;
    left: 5%; }
  100% {
    top: 100%;
    left: 15%;
    transform: rotate(18deg); } }

/* メニュー ボタン */
#wrapper.theme-monster-early-summer .bgcolor, #wrapper.theme-monster-early-summer .before_bg::before,
#wrapper.theme-monster-early-summer .after_bg::after, #wrapper.theme-monster-early-summer .hover_bg:hover {
  background-color: #76a64f !important; }

.theme-monster-early-summer {
  /* 各画面微調整 */
  /* ヘッダ */ }
  .theme-monster-early-summer #contract_contents .wrap .contract .contract_contents {
    background-color: #FFFFFF; }
  .theme-monster-early-summer #process .area {
    background-color: #FFFFFF; }
  .theme-monster-early-summer #detailed div {
    z-index: 1; }
  .theme-monster-early-summer main {
    background-image: url(../images/themes/pc_early_summer_bg.png);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; }
  .theme-monster-early-summer .modal .scroll_area {
    padding: 120px 0 50px; }
  .theme-monster-early-summer section.page {
    background-image: url(../images/themes/pc_early_summer_bg.png);
    background-color: #eef8ff;
    background-size: cover;
    background-position: center;
    position: relative; }
    .theme-monster-early-summer section.page:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 10px;
      background-image: url(../images/themes/pc_content_monster.png);
      width: 440px;
      height: 480px;
      background-repeat: no-repeat;
      background-position: center bottom; }
  .theme-monster-early-summer > .md-global-menu header {
    background-color: #b7d15e;
    overflow: hidden; }
    .theme-monster-early-summer > .md-global-menu header:after {
      content: "\00a9円谷プロ";
      font-size: 10px;
      color: #000000;
      text-align: right;
      line-height: 150px;
      vertical-align: bottom;
      display: block;
      width: 201px;
      height: 86px;
      top: 32px;
      right: 70px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(../images/themes/pc_header_monster.png);
      position: absolute; }
    .theme-monster-early-summer > .md-global-menu header .member_name {
      color: #000000; }
  .theme-monster-early-summer #detailed {
    /* 明細タブ */
    /* チャートタブ */ }
    .theme-monster-early-summer #detailed .b_detailed button.active {
      background-color: #76a64f; }
    .theme-monster-early-summer #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active {
      background-color: #76a64f; }
      .theme-monster-early-summer #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
        border-top: 10px solid #76a64f; }
    .theme-monster-early-summer #detailed .detailed_frame {
      background-color: transparent; }
  .theme-monster-early-summer .md-flip-board__signal {
    position: relative;
    margin: auto 17px;
    z-index: 1;
    background-color: transparent !important;
    background-image: url(../images/themes/pc_el_clover.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    border-radius: none;
    box-sizing: border-box; }
  .theme-monster-early-summer .fall-object {
    background-image: url(/assets/images/themes/fall_leaf.png);
    background-size: cover;
    height: 35px;
    width: 35px;
    z-index: 101;
    position: fixed;
    animation: md-fall_flow1 8s linear 0s infinite;
    pointer-events: none; }
  .theme-monster-early-summer .fall span:nth-child(3n) {
    height: 30px;
    width: 30px; }
  .theme-monster-early-summer .fall span:nth-child(3n+1) {
    height: 20px;
    width: 20px; }
  .theme-monster-early-summer .fall span:nth-child(3n+2) {
    height: 15px;
    width: 15px; }
  .theme-monster-early-summer .fall span:nth-child(1) {
    animation: md-fall_flow1 7s 5s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(2) {
    animation: md-fall_flow3 10s 0s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(3) {
    animation: md-fall_flow3 8s 2s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(4) {
    animation: md-fall_flow4 9s 3s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(5) {
    animation: md-fall_flow5 10s 6s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(6) {
    animation: md-fall_flow6 11s 2s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(7) {
    animation: md-fall_flow7 9s 1s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(8) {
    animation: md-fall_flow8 9s 7s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(9) {
    animation: md-fall_flow9 9s 2s linear infinite; }
  .theme-monster-early-summer .fall span:nth-child(10) {
    animation: md-fall_flow10 10s 7s linear infinite; }

@media screen and (max-width: 767px) {
  #wrapper.theme-monster-early-summer {
    padding-bottom: 90px; }
  .theme-monster-early-summer {
    /* ヘッダユーザ名 */ }
    .theme-monster-early-summer .modal .scroll_area {
      padding: 150px 15px 210px; }
    .theme-monster-early-summer section.page {
      background-image: none; }
      .theme-monster-early-summer section.page::after {
        display: none; }
    .theme-monster-early-summer .page {
      z-index: 90; }
    .theme-monster-early-summer .md-global-menu header .left .member {
      width: 100%; }
    .theme-monster-early-summer .md-global-menu header::after {
      line-height: 100px;
      width: 140px;
      height: 57px;
      right: auto;
      left: 16px;
      top: auto;
      bottom: 0; }
    .theme-monster-early-summer .md-flip-board {
      z-index: 150; }
    .theme-monster-early-summer .footer-theme {
      display: block;
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 90px;
      z-index: 100; }
      .theme-monster-early-summer .footer-theme::after {
        content: "";
        background-image: url(../images/themes/sp_footer_monster.png);
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: 50px;
        background-size: cover;
        right: 11px; }
      .theme-monster-early-summer .footer-theme .footer-theme-inner {
        display: block;
        width: 100vw;
        height: 300px;
        position: relative;
        /*top:-100px;*/
        overflow: hidden; }
      .theme-monster-early-summer .footer-theme .md-flip-board__signal {
        width: 30px;
        height: 30px;
        max-height: 30px; } }

@keyframes md-fall_flow1 {
  0% {
    top: 100px;
    left: -10%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(-450deg); } }

@keyframes md-fall_flow2 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 120%;
    transform: rotate(-350deg); } }

@keyframes md-fall_flow3 {
  0% {
    top: 100px;
    left: 80%; }
  100% {
    top: 100%;
    left: 130%;
    transform: rotate(-550deg); } }

@keyframes md-fall_flow4 {
  0% {
    top: 100px;
    left: 70%; }
  100% {
    top: 100%;
    left: 110%;
    transform: rotate(-359deg); } }

@keyframes md-fall_flow5 {
  0% {
    top: 100px;
    left: 20%; }
  100% {
    top: 100%;
    left: 75%;
    transform: rotate(-350deg); } }

@keyframes md-fall_flow6 {
  0% {
    top: 100px;
    left: -30%; }
  100% {
    top: 100%;
    left: 50%;
    transform: rotate(-358deg); } }

@keyframes md-fall_flow7 {
  0% {
    top: 100px;
    left: 70%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(15deg); } }

@keyframes md-fall_flow8 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 25%;
    transform: rotate(198deg); } }

@keyframes md-fall_flow9 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 5%;
    transform: rotate(98deg); } }

@keyframes md-fall_flow10 {
  0% {
    top: 100px;
    left: 5%; }
  100% {
    top: 100%;
    left: 15%;
    transform: rotate(18deg); } }

/* メニュー ボタン */
#wrapper.theme-monster-autumn .bgcolor, #wrapper.theme-monster-autumn .before_bg::before,
#wrapper.theme-monster-autumn .after_bg::after, #wrapper.theme-monster-autumn .hover_bg:hover {
  background-color: #a65e4f !important; }

.theme-monster-autumn {
  /* 各画面微調整 */
  /* ヘッダ */ }
  .theme-monster-autumn #contract_contents .wrap .contract .contract_contents {
    background-color: #FFFFFF; }
  .theme-monster-autumn #process .area {
    background-color: #FFFFFF; }
  .theme-monster-autumn #detailed div {
    z-index: 1; }
  .theme-monster-autumn main {
    background-image: url(../images/themes/pc_autumn_bg.png);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; }
  .theme-monster-autumn .modal .scroll_area {
    padding: 120px 0 50px; }
  .theme-monster-autumn section.page {
    background-image: url(../images/themes/pc_autumn_bg.png);
    background-color: #fffaee;
    background-size: cover;
    background-position: center;
    position: relative; }
    .theme-monster-autumn section.page:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 10px;
      background-image: url(../images/themes/pc_content_monster.png);
      width: 440px;
      height: 480px;
      background-repeat: no-repeat;
      background-position: center bottom; }
  .theme-monster-autumn > .md-global-menu header {
    background-color: #d1b25e;
    overflow: hidden; }
    .theme-monster-autumn > .md-global-menu header:after {
      content: "\00a9円谷プロ";
      font-size: 10px;
      color: #FFFFFF;
      text-align: right;
      line-height: 150px;
      vertical-align: bottom;
      display: block;
      width: 201px;
      height: 86px;
      top: 32px;
      right: 70px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(../images/themes/pc_header_monster.png);
      position: absolute; }
    .theme-monster-autumn > .md-global-menu header .member_name {
      color: #fff; }
  .theme-monster-autumn #detailed {
    /* 明細タブ */
    /* チャートタブ */ }
    .theme-monster-autumn #detailed .b_detailed button.active {
      background-color: #a65e4f; }
    .theme-monster-autumn #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active {
      background-color: #a65e4f; }
      .theme-monster-autumn #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
        border-top: 10px solid #a65e4f; }
    .theme-monster-autumn #detailed .detailed_frame {
      background-color: transparent; }
  .theme-monster-autumn .md-flip-board__signal {
    position: relative;
    margin: auto 17px;
    z-index: 1;
    background-color: transparent !important;
    background-image: url(../images/themes/pc_el_power_autumn.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    border-radius: none;
    box-sizing: border-box; }
  .theme-monster-autumn .fall-object {
    background-image: url(/assets/images/themes/fall_autumn.png);
    background-size: cover;
    height: 50px;
    width: 50px;
    z-index: 101;
    position: fixed;
    animation: md-fall_flow1 8s linear 0s infinite;
    pointer-events: none; }
  .theme-monster-autumn .fall span:nth-child(3n) {
    height: 30px;
    width: 30px; }
  .theme-monster-autumn .fall span:nth-child(3n+1) {
    height: 20px;
    width: 20px; }
  .theme-monster-autumn .fall span:nth-child(3n) {
    height: 10px;
    width: 10px; }
  .theme-monster-autumn .fall span:nth-child(1) {
    animation: md-fall_flow1 8s 4s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(2) {
    animation: md-fall_flow3 10s 0s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(3) {
    animation: md-fall_flow3 10s 2s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(4) {
    animation: md-fall_flow4 10s 0s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(5) {
    animation: md-fall_flow5 10s 6s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(6) {
    animation: md-fall_flow6 11s 2s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(7) {
    animation: md-fall_flow7 9s 1s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(8) {
    animation: md-fall_flow8 9s 7s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(9) {
    animation: md-fall_flow9 9s 2s linear infinite; }
  .theme-monster-autumn .fall span:nth-child(10) {
    animation: md-fall_flow10 10s 7s linear infinite; }

@media screen and (max-width: 767px) {
  #wrapper.theme-monster-autumn {
    padding-bottom: 90px; }
  .theme-monster-autumn {
    /* ヘッダユーザ名 */ }
    .theme-monster-autumn .modal .scroll_area {
      padding: 150px 15px 210px; }
    .theme-monster-autumn section.page {
      background-image: none; }
      .theme-monster-autumn section.page::after {
        display: none; }
    .theme-monster-autumn .page {
      z-index: 90; }
    .theme-monster-autumn .md-global-menu header {
      background-size: 25px; }
      .theme-monster-autumn .md-global-menu header .left .member {
        width: 100%; }
      .theme-monster-autumn .md-global-menu header::after {
        line-height: 100px;
        width: 140px;
        height: 57px;
        right: auto;
        left: 16px;
        top: auto;
        bottom: 0; }
    .theme-monster-autumn .md-flip-board {
      z-index: 150; }
    .theme-monster-autumn .footer-theme {
      display: block;
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 90px;
      z-index: 100; }
      .theme-monster-autumn .footer-theme::after {
        content: "";
        background-image: url(../images/themes/sp_footer_monster.png);
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: 50px;
        background-size: cover;
        right: 11px; }
      .theme-monster-autumn .footer-theme .footer-theme-inner {
        display: block;
        width: 100vw;
        height: 300px;
        position: relative;
        /*top:-100px;*/
        overflow: hidden; }
      .theme-monster-autumn .footer-theme .md-flip-board__signal {
        width: 30px;
        height: 30px;
        max-height: 30px; } }

@keyframes md-fall_flow1 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(39deg); } }

@keyframes md-fall_flow2 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(30deg); } }

@keyframes md-fall_flow3 {
  0% {
    top: 100px;
    left: 60%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(-59deg); } }

@keyframes md-fall_flow4 {
  0% {
    top: 100px;
    left: 90%; }
  100% {
    top: 100%;
    left: 80%;
    transform: rotate(-179deg); } }

@keyframes md-fall_flow5 {
  0% {
    top: 100px;
    left: 80%; }
  100% {
    top: 100%;
    left: 85%;
    transform: rotate(-25deg); } }

@keyframes md-fall_flow6 {
  0% {
    top: 100px;
    left: 40%; }
  100% {
    top: 100%;
    left: 40%;
    transform: rotate(158deg); } }

@keyframes md-fall_flow7 {
  0% {
    top: 100px;
    left: 70%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(15deg); } }

@keyframes md-fall_flow8 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 25%;
    transform: rotate(198deg); } }

@keyframes md-fall_flow9 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 5%;
    transform: rotate(98deg); } }

@keyframes md-fall_flow10 {
  0% {
    top: 100px;
    left: 5%; }
  100% {
    top: 100%;
    left: 15%;
    transform: rotate(18deg); } }

/* メニュー ボタン */
#wrapper.theme-monster-winter .bgcolor, #wrapper.theme-monster-winter .before_bg::before,
#wrapper.theme-monster-winter .after_bg::after, #wrapper.theme-monster-winter .hover_bg:hover {
  background-color: #b5965b !important; }

.theme-monster-winter {
  /* 各画面微調整 */
  /* ヘッダ */ }
  .theme-monster-winter #contract_contents .wrap .contract .contract_contents {
    background-color: #FFFFFF; }
  .theme-monster-winter #process .area {
    background-color: #FFFFFF; }
  .theme-monster-winter main {
    background-image: url(../images/themes/pc_winter_bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; }
  .theme-monster-winter .modal .scroll_area {
    padding: 120px 0 50px; }
  .theme-monster-winter section.page {
    background-image: url(../images/themes/pc_winter_bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
    .theme-monster-winter section.page:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 10px;
      background-image: url(../images/themes/pc_content_monster.png);
      width: 440px;
      height: 480px;
      background-repeat: no-repeat;
      background-position: center bottom; }
    .theme-monster-winter section.page div {
      position: relative;
      z-index: 1; }
      .theme-monster-winter section.page div .chartjs-size-monitor {
        position: absolute; }
  .theme-monster-winter > .md-global-menu header {
    background-image: url(../images/themes/pc_header.png);
    background-size: 60px;
    background-position: 10px 10px;
    overflow: hidden; }
    .theme-monster-winter > .md-global-menu header:after {
      content: "\00a9円谷プロ";
      font-size: 10px;
      color: #FFFFFF;
      text-align: right;
      line-height: 150px;
      vertical-align: bottom;
      display: block;
      width: 201px;
      height: 86px;
      top: 32px;
      right: 70px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(../images/themes/pc_header_monster.png);
      position: absolute; }
    .theme-monster-winter > .md-global-menu header .member_name {
      color: #fff; }
  .theme-monster-winter #detailed {
    /* 明細タブ */
    /* チャートタブ */ }
    .theme-monster-winter #detailed .b_detailed button.active {
      background-color: #b5965b; }
    .theme-monster-winter #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active {
      background-color: #232f55; }
      .theme-monster-winter #detailed .detailed_frame .detailed_contents .usage_stats .tab button.active:after {
        border-top: 10px solid #232f55; }
    .theme-monster-winter #detailed .detailed_frame {
      background-color: transparent; }
  .theme-monster-winter .md-flip-board__signal {
    position: relative;
    margin: auto 17px;
    z-index: 1;
    background-color: transparent !important;
    background-image: url(../images/themes/pc_el_power_snow.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    border-radius: none;
    box-sizing: border-box; }
  .theme-monster-winter .fall-object {
    background-image: url(/assets/images/themes/pc_snow.png);
    background-size: cover;
    height: 50px;
    width: 50px;
    z-index: 101;
    position: fixed;
    animation: md-fall_flow1 8s linear 0s infinite;
    pointer-events: none; }
  .theme-monster-winter .fall span:nth-child(3n) {
    height: 30px;
    width: 30px; }
  .theme-monster-winter .fall span:nth-child(3n+1) {
    height: 20px;
    width: 20px; }
  .theme-monster-winter .fall span:nth-child(3n) {
    height: 10px;
    width: 10px; }
  .theme-monster-winter .fall span:nth-child(1) {
    animation: md-fall_flow1 8s 4s linear infinite; }
  .theme-monster-winter .fall span:nth-child(2) {
    animation: md-fall_flow3 10s 0s linear infinite; }
  .theme-monster-winter .fall span:nth-child(3) {
    animation: md-fall_flow3 10s 2s linear infinite; }
  .theme-monster-winter .fall span:nth-child(4) {
    animation: md-fall_flow4 10s 0s linear infinite; }
  .theme-monster-winter .fall span:nth-child(5) {
    animation: md-fall_flow5 10s 6s linear infinite; }
  .theme-monster-winter .fall span:nth-child(6) {
    animation: md-fall_flow6 11s 2s linear infinite; }
  .theme-monster-winter .fall span:nth-child(7) {
    animation: md-fall_flow7 9s 1s linear infinite; }
  .theme-monster-winter .fall span:nth-child(8) {
    animation: md-fall_flow8 9s 7s linear infinite; }
  .theme-monster-winter .fall span:nth-child(9) {
    animation: md-fall_flow9 9s 2s linear infinite; }
  .theme-monster-winter .fall span:nth-child(10) {
    animation: md-fall_flow10 10s 7s linear infinite; }

@media screen and (max-width: 767px) {
  #wrapper.theme-monster-winter {
    padding-bottom: 90px; }
  .theme-monster-winter {
    /* ヘッダユーザ名 */ }
    .theme-monster-winter .modal .scroll_area {
      padding: 150px 15px 210px; }
    .theme-monster-winter section.page {
      background-image: none;
      background-color: #A3BCE2; }
      .theme-monster-winter section.page::after {
        display: none; }
    .theme-monster-winter .page {
      z-index: 90; }
    .theme-monster-winter .md-global-menu header {
      background-size: 25px; }
      .theme-monster-winter .md-global-menu header .left .member {
        width: 100%; }
      .theme-monster-winter .md-global-menu header::after {
        line-height: 100px;
        width: 140px;
        height: 57px;
        right: auto;
        left: 16px;
        top: auto;
        bottom: 0; }
    .theme-monster-winter .md-flip-board {
      z-index: 150; }
    .theme-monster-winter .footer-theme {
      display: block;
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 90px;
      z-index: 100;
      background-image: url(../images/themes/sp_winter_bg.jpg);
      background-position: center top;
      background-size: cover; }
      .theme-monster-winter .footer-theme::after {
        content: "";
        background-image: url(../images/themes/sp_footer_monster.png);
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: 50px;
        background-size: cover;
        right: 11px; }
      .theme-monster-winter .footer-theme .footer-theme-inner {
        display: block;
        width: 100vw;
        height: 300px;
        position: relative;
        /*top:-100px;*/
        overflow: hidden; }
      .theme-monster-winter .footer-theme .md-flip-board__signal {
        width: 30px;
        height: 30px;
        max-height: 30px; } }

@keyframes md-fall_flow1 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(39deg); } }

@keyframes md-fall_flow2 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 20%;
    transform: rotate(30deg); } }

@keyframes md-fall_flow3 {
  0% {
    top: 100px;
    left: 60%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(-59deg); } }

@keyframes md-fall_flow4 {
  0% {
    top: 100px;
    left: 90%; }
  100% {
    top: 100%;
    left: 80%;
    transform: rotate(-179deg); } }

@keyframes md-fall_flow5 {
  0% {
    top: 100px;
    left: 80%; }
  100% {
    top: 100%;
    left: 85%;
    transform: rotate(-25deg); } }

@keyframes md-fall_flow6 {
  0% {
    top: 100px;
    left: 40%; }
  100% {
    top: 100%;
    left: 40%;
    transform: rotate(158deg); } }

@keyframes md-fall_flow7 {
  0% {
    top: 100px;
    left: 70%; }
  100% {
    top: 100%;
    left: 60%;
    transform: rotate(15deg); } }

@keyframes md-fall_flow8 {
  0% {
    top: 100px;
    left: 30%; }
  100% {
    top: 100%;
    left: 25%;
    transform: rotate(198deg); } }

@keyframes md-fall_flow9 {
  0% {
    top: 100px;
    left: 10%; }
  100% {
    top: 100%;
    left: 5%;
    transform: rotate(98deg); } }

@keyframes md-fall_flow10 {
  0% {
    top: 100px;
    left: 5%; }
  100% {
    top: 100%;
    left: 15%;
    transform: rotate(18deg); } }

#consumer_support_history .page-title {
  line-height: 1.5;
  letter-spacing: 1px; }

#consumer_support_history .container {
  width: 100%;
  background: #ffffff;
  padding: 16px 0 48px; }

#consumer_support_history .content {
  position: relative;
  background: #f9f9f9;
  width: 760px;
  margin: 32px auto 16px;
  text-align: left;
  padding: 0 32px 32px;
  font-size: 0; }

#consumer_support_history .title {
  padding: 32px 0 0 16px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  font-weight: bold;
  position: relative; }
  #consumer_support_history .title:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 65%;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 0; }
  #consumer_support_history .title:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 35%;
    background: #3b42ea;
    position: absolute;
    top: 65%;
    left: 0; }

#consumer_support_history .point {
  margin-top: 32px;
  padding: 32px;
  background-color: #ffffff; }
  #consumer_support_history .point__consumer-name {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 1px; }
  #consumer_support_history .point__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 16px; }
  #consumer_support_history .point__inner {
    display: flex;
    flex-direction: row;
    align-items: center; }
  #consumer_support_history .point__num {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin-right: 8px; }
  #consumer_support_history .point__num-label {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 16px;
    margin-right: 10px;
    color: #333;
    margin-right: 5px; }
  #consumer_support_history .point__num-sub {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 16px;
    margin-right: 10px;
    color: #333; }

#consumer_support_history .md-button-primary {
  display: block;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  width: 160px;
  height: 40px;
  background: #ffb13d;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  position: relative; }
  #consumer_support_history .md-button-primary:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: solid 4px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 4px transparent;
    border-left: solid 5px; }

#consumer_support_history .change-year-button {
  float: right;
  margin-bottom: 10px; }
  #consumer_support_history .change-year-button button {
    width: 160px;
    height: 30px;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
    color: #808080;
    font-size: 15px;
    background: #ffffff;
    border: 1px solid #b3b3b3;
    display: inline-block;
    position: relative;
    margin: 18px 0 0 15px; }
    #consumer_support_history .change-year-button button:after {
      content: '';
      transition: all 0.2s ease-out;
      position: absolute;
      top: 8px;
      left: 10px;
      display: inline-block;
      margin-left: 9px;
      width: 10px;
      height: 10px;
      border: 1px solid;
      border-color: transparent transparent #565656 #565656;
      transform: rotate(45deg); }
    #consumer_support_history .change-year-button button:hover:after {
      left: 6px; }
  #consumer_support_history .change-year-button .right:after {
    content: '';
    transition: all 0.2s ease-out;
    position: absolute;
    top: 8px;
    left: 119px;
    display: inline-block;
    margin-left: 9px;
    width: 10px;
    height: 10px;
    border: 1px solid;
    border-color: transparent transparent #565656 #565656;
    transform: rotate(225deg); }
  #consumer_support_history .change-year-button .right:hover:after {
    left: 122px; }

#consumer_support_history table {
  line-height: 1.5;
  letter-spacing: 1px;
  font-size: 14px;
  width: 100%;
  margin-top: 25px; }
  #consumer_support_history table .label--outgo {
    background-color: #f5bebf;
    display: inline;
    padding: 5px; }
  #consumer_support_history table .label--income {
    background-color: #CBE5F3;
    display: inline;
    padding: 5px; }
  #consumer_support_history table tr {
    border-top: none;
    border-bottom: solid 1px #ccc; }
    #consumer_support_history table tr:nth-last-of-type(1) td:nth-of-type(1):before, #consumer_support_history table tr:nth-last-of-type(1) td:nth-last-of-type(1):before {
      display: none; }
    #consumer_support_history table tr th {
      text-align: center;
      z-index: 5;
      padding: 16px 2px;
      color: #ffffff;
      background: linear-gradient(#000000, #434343);
      border: solid 1px #333; }
    #consumer_support_history table tr td {
      text-align: center;
      padding: 20px 2px;
      background-color: #ffffff; }
      #consumer_support_history table tr td:nth-of-type(1) {
        border-left: solid 1px #ccc; }
      #consumer_support_history table tr td:nth-last-of-type(1) {
        border-right: solid 1px #ccc; }
      #consumer_support_history table tr td .company_name {
        text-align: left;
        padding-left: 8px; }

@media screen and (max-width: 480px) {
  #consumer_support_history .point__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    padding: 10px; }
  #consumer_support_history .point__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px; }
  #consumer_support_history .point__num-label {
    display: none; } }

@media screen and (max-width: 767px) {
  #consumer_support_history .container {
    width: 100%;
    background-color: #f5f5f5;
    margin-top: 0;
    padding: 16px 0; }
  #consumer_support_history .content {
    background-color: #f5f5f5;
    width: 100%;
    margin: 0;
    padding: 8px 0px 0px;
    font-size: 0; }
  #consumer_support_history .point {
    margin: 12px 12px 0 12px; }
  #consumer_support_history .title {
    padding: 10px;
    font-size: 18px; }
    #consumer_support_history .title:before {
      content: '';
      display: none; }
    #consumer_support_history .title:after {
      content: '';
      display: none; }
  #consumer_support_history .td-wrapper {
    margin: auto; }
  #consumer_support_history table {
    font-size: 14px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 48px; }
    #consumer_support_history table tr {
      display: block;
      border: none;
      width: 100%;
      padding: 0 10px;
      margin-bottom: 16px; }
      #consumer_support_history table tr th {
        display: none; }
      #consumer_support_history table tr td {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        border-bottom: none;
        padding: 4px 2px 4px 82px; }
        #consumer_support_history table tr td:last-of-type {
          border-bottom: 1px solid #ccc; }
        #consumer_support_history table tr td:nth-of-type(1):before {
          content: '';
          display: none; }
        #consumer_support_history table tr td:nth-last-of-type(1):before {
          content: '';
          display: none; }
      #consumer_support_history table tr .datetime {
        position: relative; }
        #consumer_support_history table tr .datetime:after {
          content: '日付';
          font-size: 14px;
          letter-spacing: 1px;
          line-height: 1.5;
          display: block;
          width: 80px;
          height: 100%;
          text-align: center;
          background: #999999;
          color: #ffffff;
          position: absolute;
          top: 0;
          left: 0;
          font-weight: 400; }
      #consumer_support_history table tr .company_name {
        position: relative;
        text-align: center; }
        #consumer_support_history table tr .company_name:after {
          content: '応援先';
          font-size: 14px;
          letter-spacing: 1px;
          line-height: 1.5;
          display: block;
          width: 80px;
          height: 100%;
          text-align: center;
          background: #999999;
          color: #ffffff;
          position: absolute;
          top: 0;
          left: 0;
          font-weight: 400; }
      #consumer_support_history table tr .compensation_type {
        position: relative; }
        #consumer_support_history table tr .compensation_type:after {
          content: '種別';
          font-size: 14px;
          letter-spacing: 1px;
          line-height: 1.5;
          display: block;
          width: 80px;
          height: 100%;
          text-align: center;
          background: #999999;
          color: #ffffff;
          position: absolute;
          top: 0;
          left: 0;
          font-weight: 400; }
      #consumer_support_history table tr .type {
        position: relative; }
        #consumer_support_history table tr .type:after {
          content: '付与/交換';
          font-size: 14px;
          letter-spacing: 1px;
          line-height: 1.5;
          display: block;
          width: 80px;
          height: 100%;
          text-align: center;
          background: #999999;
          color: #ffffff;
          position: absolute;
          top: 0;
          left: 0;
          font-weight: 400; }
      #consumer_support_history table tr .ammount {
        position: relative; }
        #consumer_support_history table tr .ammount:after {
          content: 'ポイント/円';
          font-size: 14px;
          letter-spacing: 1px;
          line-height: 1.5;
          display: block;
          width: 80px;
          height: 100%;
          text-align: center;
          background: #999999;
          color: #ffffff;
          position: absolute;
          top: 0;
          left: 0;
          font-weight: 400; }
  #consumer_support_history .change-year-button {
    float: none;
    text-align: center;
    margin-bottom: 16px; }
    #consumer_support_history .change-year-button button {
      width: 130px;
      display: inline-block;
      position: relative;
      margin: 18px 10px 0;
      vertical-align: middle; }
      #consumer_support_history .change-year-button button:after {
        content: '';
        position: absolute;
        top: 10px;
        left: 5px;
        width: 7px;
        height: 7px; }
      #consumer_support_history .change-year-button button:hover:after {
        left: 5px; }
    #consumer_support_history .change-year-button .right:after {
      content: '';
      position: absolute;
      top: 10px;
      left: 90px;
      width: 7px;
      height: 7px; }
    #consumer_support_history .change-year-button .right:hover:after {
      left: 90px; } }

#plant_select.modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  animation-name: show;
  animation-duration: 0.5s;
  background: linear-gradient(rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0.8) 100%); }
  #plant_select.modal .wrap {
    width: 850px;
    padding: 50px;
    margin: 10% auto;
    background-color: #fff;
    z-index: 10000;
    position: relative;
    top: unset;
    left: unset;
    transform: unset; }
    #plant_select.modal .wrap section.page .urlLink {
      display: block; }
      #plant_select.modal .wrap section.page .urlLink input {
        cursor: auto; }
    #plant_select.modal .wrap section.page main {
      width: 100%;
      padding: 0;
      padding-top: 20px; }
      #plant_select.modal .wrap section.page main .detail_contents {
        width: 100%;
        padding: 0;
        background: transparent; }
        #plant_select.modal .wrap section.page main .detail_contents .wrap {
          width: 100%;
          margin: 0; }
        #plant_select.modal .wrap section.page main .detail_contents .wrap2 {
          width: 100%;
          margin-top: 40px; }
      #plant_select.modal .wrap section.page main .choose {
        display: none; }
  #plant_select.modal .modal-background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #plant_select.modal .wrap .page {
    margin-top: 30px; }
    #plant_select.modal .wrap .page .main_img_wrap .left,
    #plant_select.modal .wrap .page .main_img_wrap .right {
      transform: translateY(-50%); }
    #plant_select.modal .wrap .page .main_img_wrap .left {
      left: -14px !important;
      z-index: 1; }
    #plant_select.modal .wrap .page .main_img_wrap .right {
      right: -14px !important; } }

@media screen and (max-width: 768px) {
  #plant_select {
    padding-bottom: 0;
    padding: 10px; }
    #plant_select.modal .wrap {
      width: 100%;
      margin: 0 auto;
      padding: 25px 15px; }
    #plant_select.modal .scroll_area {
      padding: 0; }
      #plant_select.modal .scroll_area .wrap {
        width: 100%;
        padding-top: 50px;
        border-radius: 0; } }
      @media screen and (max-width: 768px) and (max-width: 425px) {
        #plant_select.modal .scroll_area .wrap {
          padding: 10px; } }
      @media screen and (max-width: 768px) and (max-width: 425px) {
        #plant_select.modal .scroll_area .wrap section.page .main_img_wrap .left {
          left: -14px !important; }
        #plant_select.modal .scroll_area .wrap section.page .main_img_wrap .right {
          right: -14px !important; } }

#point_gift .container {
  width: 95%;
  background: #fff;
  margin: 8px auto;
  padding: 8px 0 48px; }

#point_gift .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 32px);
  border-radius: 5px;
  background: #fff;
  margin: 10px auto;
  padding: 30px; }
  #point_gift .top__title {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 22px;
    color: #333;
    font-weight: bold; }
  #point_gift .top__about {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 14px;
    color: #333;
    margin-top: 30px; }
  #point_gift .top__image {
    display: flex;
    justify-content: center;
    width: 420px;
    line-height: 170px;
    margin: 46px 0 30px 0;
    border-top: solid 1px #e1e3e5;
    border-bottom: solid 1px #e1e3e5; }
    #point_gift .top__image > img {
      max-width: 190px;
      max-height: 120px; }

#point_gift .content {
  position: relative;
  background: #f9f9f9;
  width: 760px;
  margin: 0 auto;
  margin-top: 32px;
  padding: 0 32px 16px; }

#point_gift .title {
  line-height: 1.5;
  letter-spacing: 1px;
  padding: 32px 0 0 16px;
  font-size: 20px;
  font-weight: bold;
  position: relative; }
  #point_gift .title:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 65%;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 0; }
  #point_gift .title:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 35%;
    background: #3b42ea;
    position: absolute;
    top: 65%;
    left: 0; }

#point_gift .total-point {
  background-color: #fff;
  border-radius: 3px;
  padding: 32px;
  margin: 24px 16px; }
  #point_gift .total-point__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto; }
  #point_gift .total-point__num {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin-right: 10px; }
  #point_gift .total-point__num-sub {
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 16px;
    margin-right: 8px; }

#point_gift .gift-list {
  width: 100%;
  background-color: #f9f9f9;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start; }
  #point_gift .gift-list:after {
    content: "";
    display: block;
    width: 304px; }

#point_gift .card {
  width: 304px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 16px; }
  #point_gift .card__top-img {
    display: block;
    width: 100%;
    height: 190px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    object-fit: cover; }
  #point_gift .card__inner {
    padding: 16px; }
  #point_gift .card__title {
    color: #333;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
    margin-top: 8px; }
  #point_gift .card__about {
    line-height: 1.5;
    letter-spacing: 1px;
    color: #333;
    font-size: 16px;
    margin-top: 16px; }
  #point_gift .card__point-wrapper {
    width: 100%;
    margin-top: 24px;
    border-top: solid 1px #e1e3e5; }
  #point_gift .card__point-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; }
  #point_gift .card__point {
    line-height: 1.5;
    letter-spacing: 1px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 16px 0;
    margin-right: 8px; }

#point_gift .back-button {
  display: block;
  padding-left: 20px;
  background: url(/assets/images/public-consumer-info-list/tri_arrow_left.svg) left center no-repeat;
  background-size: 10px 10px;
  font-size: 16px;
  height: 40px;
  font-weight: bold;
  margin: 30px auto; }

#point_gift .md-button-primary {
  display: block;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  width: 160px;
  height: 40px;
  background: #ffb13d;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  margin: 0 auto; }
  #point_gift .md-button-primary:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: solid 4px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 4px transparent;
    border-left: solid 5px; }

#point_gift .md-button-primary--disabled {
  display: block;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  width: 160px;
  height: 40px;
  background: #ffb13d;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  margin: 0 auto;
  background: #b3b3b3;
  color: #333;
  opacity: 0.65; }
  #point_gift .md-button-primary--disabled:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: solid 4px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 4px transparent;
    border-left: solid 5px; }
  #point_gift .md-button-primary--disabled:hover {
    cursor: not-allowed; }

@media screen and (max-width: 767px) {
  #point_gift .container {
    width: 100%;
    background: #ffffff;
    margin-top: 0;
    padding: 0; }
  #point_gift .top {
    width: 100%; }
    #point_gift .top__image {
      width: 280px; }
  #point_gift .content {
    background: #f9f9f9;
    width: 100%;
    padding: 0 0 20px; }
  #point_gift .gift-list {
    margin: 0 auto;
    width: 95%;
    display: block; }
  #point_gift .card {
    margin: 0 auto;
    margin-bottom: 16px; }
  #point_gift .title {
    padding: 　10px;
    font-size: 18px; }
    #point_gift .title:before {
      content: '';
      display: none; }
    #point_gift .title:after {
      content: '';
      display: none; } }

@page {
  size: A4 portrait;
  margin: 0; }

@media print {
  *, *:after {
    background-image: none !important; }
  .md-invoice {
    -webkit-print-color-adjust: exact !important; }
  #selected_contract,
  #tab_btn,
  .md-global-menu,
  #globalmenu_btn,
  .md-flip-board,
  footer,
  .month,
  .super_button,
  .md-detail_title_screen,
  .logout,
  .md-print_button {
    display: none !important; }
  .md-detail_header {
    display: flex !important;
    justify-content: space-between; }
    .md-detail_header .md-header_left {
      padding: 50px 0 0 50px; }
    .md-detail_header .md-header_right {
      width: 280px;
      margin-left: auto; }
      .md-detail_header .md-header_right .md-company_img {
        margin: 10px 0px; }
      .md-detail_header .md-header_right .md-company_info {
        text-align: left;
        font-size: 16px; }
  .md-detail_title_print {
    display: inline !important; }
  h2:after {
    background: #cccccc !important; }
  #detailed {
    background: #ffffff; }
    #detailed .detailed_frame .detailed_contents .statement {
      width: 90%;
      background: #ffffff; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr th, #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr th, #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr th {
        width: 360px;
        background: #eeeeee;
        color: #222222; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents .list table .t_a_b th, #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table .t_a_b th, #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table .t_a_b th {
        background: #eeeeee; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents .list table tr td, #detailed .detailed_frame .detailed_contents .statement .list_contents .breakdown table tr td, #detailed .detailed_frame .detailed_contents .statement .list_contents .contract table tr td {
        width: 100%; }
      #detailed .detailed_frame .detailed_contents .statement .list_contents .discountMessage {
        background: #bb0001 !important;
        color: #fff !important; }
  #detailed .detailed_frame .detailed_contents .statement .md-invoice {
    padding: 20px; }
    #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header {
      display: block !important; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_top {
        padding-top: 0;
        padding-left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_top h1 {
          text-align: center;
          font-size: 20px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ccc; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_top .md-company_img {
          width: 280px;
          text-align: left; }
          #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_top .md-company_img img {
            width: 180px;
            filter: invert(50%) sepia(14%) saturate(2376%) hue-rotate(68deg) brightness(105%) contrast(81%); }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom .md-detail_title_print {
          padding: 0; }
          #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom .md-detail_title_print:before, #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom .md-detail_title_print:after {
            content: '';
            display: none; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom .md-company_info {
          width: 280px;
          text-align: left;
          font-size: 16px; }
          #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_header .md-header_bottom .md-company_info p {
            margin-bottom: 4px; }
    #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-detail_title_h2,
    #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-month,
    #detailed .detailed_frame .detailed_contents .statement .md-invoice .md-month-text {
      display: none !important; }
    #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice {
      margin-top: 10px; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice.reduction {
        margin-bottom: 55px; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .bill .md-bill_content {
        -webkit-print-color-adjust: exact; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .bill .md-bill_content::after {
          display: list-item;
          list-style-image: url(/assets/images/invoices/pricedetails_icon.png);
          list-style-position: inside; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .bill .md-bill_content dl {
          background-image: url(/assets/images/invoices/pricedetails_line.png) !important; }
          #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .bill .md-bill_content dl:last-child {
            background-image: none !important; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.title {
        background-image: url(/assets/images/invoices/underline_green.png) !important; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box.border {
        background-image: linear-gradient(to right, #dbead3, #dbead3 2px, transparent 2px, transparent 8px) !important;
        background-size: 8px 1px;
        background-repeat: repeat-x;
        background-position-y: bottom; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .breakdown .breakdown_content .breakdown_content_box .breakdown_content_box_title .breakdown_content_box_title_icon {
        display: none; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content {
        background-image: url(/assets/images/invoices/co2.png) !important; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .reduction .reduction_content span:nth-child(1) .breakdown_content_box_title_icon {
          display: none; }
      #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract_title {
        background-image: url(/assets/images/invoices/underline_green.png) !important; }
        #detailed .detailed_frame .detailed_contents .statement .md-invoice .list_contents_invoice .contract_title::after {
          background-image: url(/assets/images/invoices/contract_title_icon.png) !important; } }

.login_modal {
  text-align: center;
  margin: 5%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .login_modal .scroll_area {
    width: 340px; }
    .login_modal .scroll_area .md-validation-message {
      display: block;
      color: red;
      font-weight: 800;
      margin-top: 0.5em; }
    .login_modal .scroll_area img {
      width: 120px;
      height: auto;
      margin: 0 auto; }
    .login_modal .scroll_area .message {
      text-align: center;
      font-size: 16px;
      line-height: 1.5;
      margin-top: 20px; }
    .login_modal .scroll_area input[type=text], .login_modal .scroll_area input[type=password] {
      display: inline-block;
      width: 100%;
      height: 40px;
      border: none;
      border-radius: 3px;
      background: #e9e9e9;
      font-size: 15px;
      margin-top: 22px;
      padding: 3px 10px; }
    .login_modal .scroll_area input[type=checkbox] {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: none;
      border: solid 1px #818181;
      margin: 0;
      padding: 0;
      -webkit-appearance: none;
              appearance: none;
      vertical-align: middle; }
      .login_modal .scroll_area input[type=checkbox]:checked {
        background: no-repeat center/auto url(/assets/images/common/check.svg); }
    .login_modal .scroll_area button[type=submit] {
      width: 100%;
      display: inline-block;
      margin-top: 22px;
      background: #20920e; }
    .login_modal .scroll_area .remember {
      text-align: left;
      margin-top: 10px; }
      .login_modal .scroll_area .remember label {
        margin-top: 20px;
        cursor: pointer; }
        .login_modal .scroll_area .remember label p {
          display: inline-block;
          vertical-align: middle;
          margin-left: 10px;
          font-size: 14px; }
    .login_modal .scroll_area .forget {
      font-size: 12px;
      margin-top: 15px; }
      .login_modal .scroll_area .forget a {
        color: #818181;
        font-weight: bold; }
        .login_modal .scroll_area .forget a:hover {
          text-decoration: underline; }

.md-loading {
  position: relative;
  min-height: 400px; }
  .md-loading .md-loading_content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; }
    .md-loading .md-loading_content .md-loading_content_icon {
      max-width: 140px;
      width: 100%;
      position: relative;
      top: 20px;
      display: inline-block;
      animation: bounce .5s ease-in-out infinite alternate; }
      .md-loading .md-loading_content .md-loading_content_icon img {
        width: 100%;
        vertical-align: middle; }
    .md-loading .md-loading_content .md-loading_content_text,
    .md-loading .md-loading_content .md-loading_content_textMaru {
      font-size: 16px;
      margin: 20px auto 0;
      text-align: center;
      color: #333;
      font-weight: bold; }
    .md-loading .md-loading_content .md-loading_content_textMaru {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0; }
    .md-loading .md-loading_content .md-loading_content_loadingMaru {
      margin: 100px auto;
      font-size: 25px;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      position: relative;
      text-indent: -9999em;
      animation: loadings 1.1s infinite ease;
      transform: translateZ(0); }

@keyframes loadings {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #5eac86, 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2), 2.5em 0em 0 0em rgba(94, 172, 134, 0.2), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.2), 0em 2.5em 0 0em rgba(94, 172, 134, 0.2), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.2), -2.6em 0em 0 0em rgba(94, 172, 134, 0.5), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.7); }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.7), 1.8em -1.8em 0 0em #5eac86, 2.5em 0em 0 0em rgba(94, 172, 134, 0.2), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.2), 0em 2.5em 0 0em rgba(94, 172, 134, 0.2), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.2), -2.6em 0em 0 0em rgba(94, 172, 134, 0.2), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.5); }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.5), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.7), 2.5em 0em 0 0em #5eac86, 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.2), 0em 2.5em 0 0em rgba(94, 172, 134, 0.2), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.2), -2.6em 0em 0 0em rgba(94, 172, 134, 0.2), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2); }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.2), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.5), 2.5em 0em 0 0em rgba(94, 172, 134, 0.7), 1.75em 1.75em 0 0em #5eac86, 0em 2.5em 0 0em rgba(94, 172, 134, 0.2), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.2), -2.6em 0em 0 0em rgba(94, 172, 134, 0.2), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2); }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.2), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2), 2.5em 0em 0 0em rgba(94, 172, 134, 0.5), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.7), 0em 2.5em 0 0em #5eac86, -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.2), -2.6em 0em 0 0em rgba(94, 172, 134, 0.2), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2); }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.2), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2), 2.5em 0em 0 0em rgba(94, 172, 134, 0.2), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.5), 0em 2.5em 0 0em rgba(94, 172, 134, 0.7), -1.8em 1.8em 0 0em #5eac86, -2.6em 0em 0 0em rgba(94, 172, 134, 0.2), -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2); }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.2), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2), 2.5em 0em 0 0em rgba(94, 172, 134, 0.2), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.2), 0em 2.5em 0 0em rgba(94, 172, 134, 0.5), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.7), -2.6em 0em 0 0em #5eac86, -1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2); }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(94, 172, 134, 0.2), 1.8em -1.8em 0 0em rgba(94, 172, 134, 0.2), 2.5em 0em 0 0em rgba(94, 172, 134, 0.2), 1.75em 1.75em 0 0em rgba(94, 172, 134, 0.2), 0em 2.5em 0 0em rgba(94, 172, 134, 0.2), -1.8em 1.8em 0 0em rgba(94, 172, 134, 0.5), -2.6em 0em 0 0em rgba(94, 172, 134, 0.7), -1.8em -1.8em 0 0em #5eac86; } }
    .md-loading .md-loading_content .md-loading_content_loading {
      position: relative;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #5eac86;
      color: #5eac86;
      animation: dot-flashing 1s infinite linear alternate;
      animation-delay: .5s;
      margin: 10px auto; }
      .md-loading .md-loading_content .md-loading_content_loading::before, .md-loading .md-loading_content .md-loading_content_loading::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0; }
      .md-loading .md-loading_content .md-loading_content_loading::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #5eac86;
        color: #5eac86;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 0s; }
      .md-loading .md-loading_content .md-loading_content_loading::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #5eac86;
        color: #5eac86;
        animation: dot-flashing 1s infinite alternate;
        animation-delay: 1s; }

@keyframes bounce {
  100% {
    top: -20px; } }

@keyframes dot-flashing {
  0% {
    background-color: #5eac86; }
  50%,
  100% {
    background-color: #dfffef; } }

.md-loadingNew {
  position: relative; }
  .md-loadingNew .md-loading_content.ppa-loading_contract {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media screen and (max-width: 767px) {
      .md-loadingNew .md-loading_content.ppa-loading_contract {
        position: unset;
        transform: unset;
        padding: 20px; } }
  .md-loadingNew .md-loading_content .md-loading_content_icon {
    max-width: 200px;
    width: 100%;
    position: relative;
    top: 20px;
    margin: 0 auto; }
    .md-loadingNew .md-loading_content .md-loading_content_icon img {
      width: 100%;
      vertical-align: middle; }
  .md-loadingNew .md-loading_content .md-loading_content_text {
    font-size: 16px;
    margin: 20px auto 0;
    text-align: center;
    color: #333;
    font-weight: bold; }
  .md-loadingNew .md-loading_content .md-loading_content_loading {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #5eac86;
    color: #5eac86;
    box-shadow: 9999px 0 0 -5px #5eac86;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
    margin: 20px auto 0; }
    .md-loadingNew .md-loading_content .md-loading_content_loading::before, .md-loadingNew .md-loading_content .md-loading_content_loading::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #5eac86;
      color: #5eac86; }
    .md-loadingNew .md-loading_content .md-loading_content_loading::before {
      box-shadow: 9984px 0 0 -5px #5eac86;
      animation: dotPulseBefore 1.5s infinite linear;
      animation-delay: 0s; }
    .md-loadingNew .md-loading_content .md-loading_content_loading::after {
      box-shadow: 10014px 0 0 -5px #5eac86;
      animation: dotPulseAfter 1.5s infinite linear;
      animation-delay: .5s; }

@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #5eac86; }
  30% {
    box-shadow: 9984px 0 0 2px #5eac86; }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #5eac86; } }

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #5eac86; }
  30% {
    box-shadow: 9999px 0 0 2px #5eac86; }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #5eac86; } }

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #5eac86; }
  30% {
    box-shadow: 10014px 0 0 2px #5eac86; }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #5eac86; } }

.c-confirm__loading {
  width: 100%;
  height: 100%; }
  .c-confirm__loading .c-confirm__overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10; }
  .c-confirm__loading .c-confirm__loading__modal {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    z-index: 11;
    text-align: center;
    padding: 40px; }
    .c-confirm__loading .c-confirm__loading__modal .c-confirm__loading__modal__icon {
      width: 200px;
      margin: 0 auto; }
      .c-confirm__loading .c-confirm__loading__modal .c-confirm__loading__modal__icon img {
        width: 100%; }

.c-loading__content__loading {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #5eac86;
  color: #5eac86;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: .5s;
  margin: 10px auto; }
  .c-loading__content__loading::before, .c-loading__content__loading::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0; }
  .c-loading__content__loading::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #5eac86;
    color: #5eac86;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s; }
  .c-loading__content__loading::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #5eac86;
    color: #5eac86;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s; }

@keyframes dot-flashing {
  0% {
    background-color: #5eac86; }
  50%,
  100% {
    background-color: #dfffef; } }

#contract button.left {
  width: 120px;
  height: 30px;
  font-size: 13px;
  border-radius: 10px;
  margin-left: 20px;
  line-height: 13px; }

#contract .plant_info {
  width: 100%;
  height: auto;
  background: #f9f9f9;
  border-radius: 5px;
  margin: 10px 0px;
  text-align: left;
  overflow: hidden;
  position: relative;
  border: solid 1px #999999; }
  #contract .plant_info .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: no-repeat center / cover; }
  #contract .plant_info .right {
    vertical-align: top;
    width: -webkit-fill-available;
    width: fill;
    margin-left: 100px;
    padding: 0 15px;
    font-size: 14px;
    display: inline-block; }
    #contract .plant_info .right .plant_name {
      font-size: 18px;
      margin: 5px 0px; }
    #contract .plant_info .right p {
      font-size: 14px; }
      #contract .plant_info .right p span {
        font-size: 16px;
        margin-left: 10px; }
        #contract .plant_info .right p span:after {
          content: 'kWh';
          font-size: 14px; }

@media screen and (max-width: 767px) {
  #support .left {
    position: static;
    width: 100%;
    height: 190px;
    display: block;
    background: no-repeat center / cover; }
  #support .right {
    margin-left: 0;
    width: 100%;
    margin-top: 15px;
    padding: 0 10px;
    font-size: 14px;
    display: block; } }

#plant_select {
  width: 100%;
  text-align: center; }
  #plant_select .reservation1 {
    background: #fff;
    border: 1px solid #39b54a;
    color: #39b54a; }
  #plant_select .reservation2 {
    background: #39b54a;
    border: 1px solid #39b54a;
    color: #fff; }
  #plant_select .navi {
    font-size: 14px; }
  #plant_select .count {
    text-align: left;
    font-weight: bold;
    margin: 10px; }
  #plant_select .error {
    color: red;
    font-weight: bold;
    margin-top: 30px; }
  #plant_select .submit_button:disabled {
    filter: grayscale(100%);
    pointer-events: none; }
  #plant_select .plant_info {
    width: 100%;
    height: auto;
    background: #f9f9f9;
    border-radius: 10px;
    margin: 10px 0px;
    text-align: left;
    overflow: hidden;
    position: relative;
    box-shadow: 3px 3px 7px -3px rgba(0, 0, 0, 0.8); }
    #plant_select .plant_info .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100%;
      background: no-repeat center / cover; }
    #plant_select .plant_info .right {
      vertical-align: top;
      width: -webkit-fill-available;
      width: fill;
      margin-left: 100px;
      padding: 0 15px;
      font-size: 14px;
      display: inline-block;
      cursor: pointer; }
      #plant_select .plant_info .right .plant_name {
        font-size: 18px;
        margin: 5px 0px; }
      #plant_select .plant_info .right p {
        font-size: 14px; }
        #plant_select .plant_info .right p span {
          font-size: 16px;
          margin-left: 10px; }
          #plant_select .plant_info .right p span:after {
            content: 'kWh';
            font-size: 14px; }
      #plant_select .plant_info .right .button {
        text-align: right; }
        #plant_select .plant_info .right .button button {
          width: 80px;
          height: 35px;
          border-radius: 20px;
          font-size: 13px;
          border: 1px solid #cccccc;
          margin: 4px; }

@media screen and (max-width: 767px) {
  #support .left {
    position: static;
    width: 100%;
    height: 190px;
    display: block;
    background: no-repeat center / cover; }
  #support .right {
    margin-left: 0;
    width: 100%;
    margin-top: 15px;
    padding: 0 10px;
    font-size: 14px;
    display: block; } }

.md-externalConnect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px; }
  .md-externalConnect .md-externalConnect__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #20920e;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px; }
    .md-externalConnect .md-externalConnect__icon::after {
      content: '';
      width: 46px;
      height: 25px;
      border-left: 10px solid white;
      border-bottom: 10px solid white;
      transform: rotate(-45deg);
      position: absolute;
      top: 24px;
      left: 22px; }
    .md-externalConnect .md-externalConnect__icon.false {
      background: red; }
      .md-externalConnect .md-externalConnect__icon.false::before, .md-externalConnect .md-externalConnect__icon.false::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 60px;
        background: white; }
      .md-externalConnect .md-externalConnect__icon.false::before {
        transform: translate(-50%, -50%) rotate(45deg); }
      .md-externalConnect .md-externalConnect__icon.false::after {
        border-left: unset;
        border-bottom: unset;
        transform: translate(-50%, -50%) rotate(-45deg); }
  .md-externalConnect .md-externalConnect__title {
    font-size: 30px;
    font-weight: bold; }
    .md-externalConnect .md-externalConnect__title.infoMsg {
      margin-top: 30px; }
    @media screen and (max-width: 767px) {
      .md-externalConnect .md-externalConnect__title {
        text-align: center;
        line-height: 1.3; } }
  .md-externalConnect .md-externalConnect__infoMsg {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap; }
  .md-externalConnect .md-externalConnect__link {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px; }
    .md-externalConnect .md-externalConnect__link a {
      width: 180px;
      height: 50px;
      margin: 0 auto;
      border-radius: 5px;
      background: #FF9425;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative; }
      .md-externalConnect .md-externalConnect__link a:hover {
        opacity: 0.7; }
      .md-externalConnect .md-externalConnect__link a::before {
        content: '◀︎';
        position: absolute;
        font-size: 12px;
        top: 50%;
        left: 10px;
        transform: translateY(-50%); }
  .md-externalConnect .md-externalConnect__customer {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    line-height: 1.6; }
    .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__title {
      font-size: 20px;
      font-weight: 700;
      text-align: center; }
    .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box {
      margin-top: 20px; }
      .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item {
        width: 100%;
        max-width: 400px;
        border: 2px solid #FF9425;
        border-radius: 20px;
        padding: 20px 10px;
        text-align: center;
        margin: 0 auto; }
        .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__title {
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 20px; }
        .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__text {
          font-size: 16px; }
          .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__text.mt-20 {
            margin-top: 20px; }
        .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__btn {
          max-width: 300px;
          font-size: 16px;
          font-weight: 700;
          margin: 5px auto 0;
          cursor: pointer;
          background: #FF9425;
          color: #fff;
          border-radius: 5px; }
          .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__btn a {
            height: 50px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center; }
            .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__btn a:hover {
              opacity: 0.7; }
        .md-externalConnect .md-externalConnect__customer .md-externalConnect__customer__box .md-externalConnect__customer__box__item .md-externalConnect__customer__box__item__tel {
          font-size: 22px;
          font-weight: 700;
          color: #FF9425; }

/**
 * 前提
 *   cider/common.scss と cider/home.scss を同時に使用するとレイアウトが崩れるというアホな仕様。
 *   * common のみ → Top画面☓、他の画面○
 *   * 両方 → Top画面○、他の画面☓
 *
 * 方針
 *   * cider/home.scss は3000行弱の一番大きいSCSSで、インポートしないのはありえないので
 *     同時に使っても大丈夫なようにガンバる
 *   * cider/common.scss にある #globalmenu を .md-global-menu という名前でベースにして
 *     他の画面で正しく表示されるようにした上で、Top画面でいい感じに表示されるように調整。
 *     + #globalmenu 使ってやると common と home で干渉しあってよくわかんない
 *     + #globalmenu は画面内で使わない(存在しない)
 *   * #wrapper 直下の .menu_open は使いづらいので .md-menu-open で役割を置き換える
 */
/* cider/common.scss にある #globalmenu をそのまま持ってきて .md-global-menu へ */
.md-global-menu #menu #mainnav > div.label_indev:before, .md-global-menu #menu #mainnav > div.label_purchase:before, .md-global-menu #menu #mainnav > div.label_common:before {
  position: absolute;
  top: 0;
  left: 12px;
  font-weight: bold;
  width: 100px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  font-size: 15px;
  display: inline-block;
  text-align: left;
  padding-left: 6px; }
  .md-global-menu #menu #mainnav > div.label_indev:before, .md-global-menu #menu #mainnav > div.label_purchase:before, .md-global-menu #menu #mainnav > div.label_common:before {
    color: #ffffff; }

.md-global-menu #menu #mainnav > div .label_disable:before, .other-nav__inner li .label_disable_other:after {
  content: 'Coming Soon';
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #ffffff;
  background: #333333;
  font-weight: bold;
  font-size: 11px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px; }

.md-global-menu {
  z-index: 1000;
  position: fixed;
  left: 0;
  width: 100%;
  height: 80px; }
  .md-global-menu header {
    width: 100%;
    height: 80px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    font-size: 0;
    box-shadow: 0 1px 20px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(90deg, #2DCE89 0%, #2DCECC 100%);
    position: absolute;
    left: 0;
    z-index: 10; }
    .md-global-menu header .left {
      display: flex;
      align-items: center;
      float: left;
      margin-left: 30px;
      position: relative;
      top: 50%;
      transform: translate(0, -55%);
      display: flex;
      align-items: center; }
      .md-global-menu header .left a {
        width: 100%;
        max-width: 218px; }
        .md-global-menu header .left a .logo {
          width: 100%;
          display: inline-block;
          vertical-align: middle; }
      .md-global-menu header .left .member {
        display: inline-block;
        margin-left: 30px;
        position: relative;
        vertical-align: middle; }
        .md-global-menu header .left .member .photo_img {
          line-height: 118px;
          width: 46px;
          height: 46px;
          border-radius: 40px;
          overflow: hidden;
          display: inline-block;
          vertical-align: middle; }
          .md-global-menu header .left .member .photo_img img {
            display: block;
            width: 100%;
            height: 100%; }
        .md-global-menu header .left .member .member_name {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          height: 100%;
          margin-left: 8px; }
          @media screen and (max-width: 767px) {
            .md-global-menu header .left .member .member_name {
              height: auto;
              position: absolute;
              top: auto;
              bottom: 10px;
              white-space: nowrap;
              margin-left: 0; } }
        .md-global-menu header .left .member .name {
          display: inline-block;
          font-size: 15px;
          vertical-align: middle;
          color: #ffffff; }
          .md-global-menu header .left .member .name .md-name {
            display: inline-block;
            max-width: 16em;
            overflow-x: hidden;
            text-align: left;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap; }
          .md-global-menu header .left .member .name .md-honorific {
            vertical-align: middle; }
  .md-global-menu .menu_wrap {
    background: #f2f2f2;
    padding-top: 118px;
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    transition: all .6s ease-in-out;
    transform: translate(0, -100%); }
  .md-global-menu #menu {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 0;
    padding-top: 38px; }
    .md-global-menu #menu h2 {
      font-size: 24px;
      letter-spacing: 0;
      margin: 0 0 22px; }
    .md-global-menu #menu .badge {
      position: relative;
      top: -2px;
      left: 5px; }
    .md-global-menu #menu #mainnav {
      width: 768px;
      height: auto;
      margin: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center; }
      .md-global-menu #menu #mainnav > a {
        text-decoration: none;
        color: #000;
        display: inline-block;
        width: 230px;
        height: 170px;
        margin: 20px 10px;
        background: #fff;
        border-radius: 5px;
        border: 2px solid #d9d9d9;
        font-size: 18px;
        box-shadow: 3px 2px 10px 2px #d9d9d9; }
        .md-global-menu #menu #mainnav > a > div {
          display: flex;
          justify-content: center;
          width: 67px;
          height: 67px;
          margin: 25px auto 20px;
          border-radius: 100px;
          position: relative; }
          .md-global-menu #menu #mainnav > a > div svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); }
      .md-global-menu #menu #mainnav > div {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding-top: 15px; }
        .md-global-menu #menu #mainnav > div.label_indev {
          position: relative; }
          .md-global-menu #menu #mainnav > div.label_indev:before {
            content: '電気をつかう';
            color: #666666;
            border-left: #00a1e1 5px solid; }
        .md-global-menu #menu #mainnav > div.label_purchase {
          position: relative; }
          .md-global-menu #menu #mainnav > div.label_purchase:before {
            content: '電気を売る';
            color: #666666;
            border-left: #ff7e92 5px solid; }
        .md-global-menu #menu #mainnav > div.label_common {
          position: relative;
          margin-bottom: 0; }
          .md-global-menu #menu #mainnav > div.label_common:before {
            content: '共 通';
            color: #666666;
            border-left: #5eac86 5px solid; }
        .md-global-menu #menu #mainnav > div.label_indev, .md-global-menu #menu #mainnav > div.label_purchase, .md-global-menu #menu #mainnav > div.label_common {
          display: flex;
          justify-content: space-between;
          gap: 10px; }
          .md-global-menu #menu #mainnav > div.label_indev > div, .md-global-menu #menu #mainnav > div.label_purchase > div, .md-global-menu #menu #mainnav > div.label_common > div {
            width: auto;
            margin: auto; }
        .md-global-menu #menu #mainnav > div > a,
        .md-global-menu #menu #mainnav > div > div {
          text-decoration: none;
          color: #000;
          display: inline-block;
          width: 230px;
          height: 170px;
          margin: 20px 10px;
          background: #fff;
          border-radius: 5px;
          border: 2px solid #d9d9d9;
          font-size: 18px;
          box-shadow: 3px 2px 10px 2px #d9d9d9;
          vertical-align: text-top; }
          .md-global-menu #menu #mainnav > div > a div,
          .md-global-menu #menu #mainnav > div > div div {
            width: 67px;
            height: 67px;
            margin: 30px auto 15px;
            position: relative; }
            .md-global-menu #menu #mainnav > div > a div svg,
            .md-global-menu #menu #mainnav > div > div div svg {
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%); }
        .md-global-menu #menu #mainnav > div .label_disable {
          background: rgba(255, 255, 255, 0.5);
          color: rgba(0, 0, 0, 0.3);
          position: relative; }
          .md-global-menu #menu #mainnav > div .label_disable > div .md-icon {
            opacity: 0.5; }
  .md-global-menu .memberStyle_1 .other-nav__headding {
    border-bottom: #5eac86 solid 1px !important; }
  .md-global-menu .memberStyle_1 h3 + ul > li:before {
    background: #5eac86 !important; }
  .md-global-menu .memberStyle_1 h3 + ul .subnav_othernav > ul > li:before {
    background: #5eac86 !important; }
  .md-global-menu .memberStyle_1 h3 + ul .subnav_othernav > ul .ttl_subnav_othernav:before {
    background: #5eac86 !important; }
  .md-global-menu .memberStyle_2 .other-nav__headding {
    border-bottom: #ff7e92 solid 1px !important; }
  .md-global-menu .memberStyle_2 h3 + ul > li:before {
    background: #ff7e92 !important; }
  .md-global-menu .memberStyle_2 h3 + ul .subnav_othernav > ul > li:before {
    background: #ff7e92 !important; }
  .md-global-menu .memberStyle_2 h3 + ul .subnav_othernav > ul .ttl_subnav_othernav:before {
    background: #ff7e92 !important; }
  .md-global-menu .memberStyle_3 .other-nav__headding {
    border-bottom: #5eac86 solid 1px; }
  .md-global-menu .memberStyle_3 h3 + ul > li:before {
    background: #5eac86; }
  .md-global-menu .memberStyle_3 h3 + ul .subnav_othernav > ul > li:before {
    background: #5eac86 !important; }
  .md-global-menu .memberStyle_3 h3 + ul .subnav_othernav > ul .ttl_subnav_othernav:before {
    background: #5eac86; }
  .md-global-menu .logout__link {
    margin: 40px auto 0px;
    width: 200px;
    height: 34px;
    font-size: 15px;
    border-radius: 6px;
    text-align: center;
    line-height: 34px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border: solid 1px #000;
    padding: 0;
    display: none; }
    .md-global-menu .logout__link:hover {
      background: #fff;
      color: #333; }
    @media screen and (max-width: 767px) {
      .md-global-menu .logout__link {
        display: block; }
        .md-global-menu .logout__link::before {
          content: 'ログアウト'; } }

.other-nav {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 768px;
  margin: 30px auto 0 auto; }
  .other-nav__headding {
    font-size: 18px;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 8px;
    padding-bottom: 6px; }
  .other-nav__inner {
    letter-spacing: 0;
    width: calc(33% - 30px);
    height: auto;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    margin: 15px; }
    @media screen and (max-width: 767px) {
      .other-nav__inner {
        width: 100%; } }
  .other-nav__inner li {
    margin-bottom: 8px;
    position: relative;
    font-size: 16px;
    margin-left: 10px; }
    .other-nav__inner li:before {
      content: '';
      display: inline-block;
      border-radius: 30px;
      width: 10px;
      height: 10px;
      vertical-align: top;
      position: absolute;
      top: 6px;
      left: -10px; }
    .other-nav__inner li a {
      color: #000;
      line-height: 25px;
      text-decoration: none;
      display: inline-block;
      margin-left: 10px; }
      .other-nav__inner li a:hover {
        text-decoration: underline; }
    .other-nav__inner li .label_disable_other {
      pointer-events: none;
      color: rgba(0, 0, 0, 0.3);
      text-decoration: none;
      margin-left: 5px;
      margin-top: 0;
      position: relative;
      display: block; }
      .other-nav__inner li .label_disable_other:hover {
        text-decoration: none; }
      .other-nav__inner li .label_disable_other:before {
        position: absolute;
        background: rgba(0, 0, 0, 0.3); }
      .other-nav__inner li .label_disable_other:after {
        bottom: 0; }
    .other-nav__inner li.disabled span {
      color: #999;
      line-height: 25px;
      text-decoration: none;
      margin-left: 10px; }

.plan_select button {
  width: 100%;
  max-width: 126px;
  padding: 2px 8px;
  height: 26px;
  font-size: 14px;
  background: linear-gradient(90deg, #F5613A 0%, #F5B53A 100%); }

/* このCSSは cider/common.scss を #globalmenu で検索して持ってきたもの */
@media screen and (max-width: 767px) {
  .md-global-menu #menu #mainnav > div.label_indev:before, .md-global-menu #menu #mainnav > div.label_purchase:before, .md-global-menu #menu #mainnav > div.label_common:before {
    left: 0px;
    font-size: 13px; }
  #top_main .top_head .left .member .member_name {
    position: absolute;
    top: auto;
    bottom: 5px;
    white-space: nowrap;
    margin-left: 12px; }
  .md-global-menu {
    background: #fff;
    display: block;
    height: 120px; }
    .md-global-menu header {
      width: 100%;
      height: 120px;
      transition: all 0.7s ease-in-out; }
      .md-global-menu header .left {
        float: none;
        margin: auto;
        position: unset;
        z-index: 100;
        text-align: center;
        transform: unset;
        display: block;
        width: 100%;
        height: 100%; }
        .md-global-menu header .left a {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
          .md-global-menu header .left a .logo {
            width: 112px;
            margin: auto;
            display: block;
            transform: translate(0, 0); }
        .md-global-menu header .left .member {
          margin-left: 0;
          position: absolute;
          bottom: 5px;
          left: 12px; }
          .md-global-menu header .left .member .photo_img {
            line-height: 118px;
            width: 46px;
            height: 46px;
            border-radius: 40px;
            overflow: hidden;
            display: inline-block; }
            .md-global-menu header .left .member .photo_img img {
              display: block;
              width: 100%;
              height: 100%; }
          .md-global-menu header .left .member .name {
            line-height: 1; }
          .md-global-menu header .left .member .plan_select {
            display: block;
            text-align: left; }
            .md-global-menu header .left .member .plan_select button {
              color: #fff;
              text-align: left; }
              .md-global-menu header .left .member .plan_select button:after {
                border-color: transparent transparent #333 #333; }
            .md-global-menu header .left .member .plan_select .hide li a {
              display: block;
              color: #fff;
              font-size: 14px;
              padding: 0; }
    .md-global-menu .menu_wrap {
      padding-top: 160px; }
    .md-global-menu #menu {
      text-align: left;
      padding-top: 22px; }
      .md-global-menu #menu h2 {
        display: none; }
      .md-global-menu #menu .badge {
        position: relative;
        top: -2px;
        left: 5px; }
      .md-global-menu #menu #mainnav {
        width: 100%;
        padding: 0 12px;
        line-height: 40px; }
        .md-global-menu #menu #mainnav > a {
          display: block;
          width: 100%;
          margin: 6px 0;
          border: 1px solid #d9d9d9;
          font-size: 13px;
          box-shadow: none;
          position: relative;
          padding: 0 53px;
          height: 40px;
          line-height: 40px; }
          .md-global-menu #menu #mainnav > a:nth-of-type(1) {
            margin-top: 0; }
          .md-global-menu #menu #mainnav > a div {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%); }
            .md-global-menu #menu #mainnav > a div svg {
              width: 55%; }
            .md-global-menu #menu #mainnav > a div .heart {
              margin-top: 1px;
              width: 65%; }
            .md-global-menu #menu #mainnav > a div .news_icon {
              width: 65%; }
            .md-global-menu #menu #mainnav > a div .letter {
              width: 80%; }
        .md-global-menu #menu #mainnav > div {
          width: 98%;
          flex-wrap: wrap;
          gap: 0 !important;
          margin-bottom: 30px; }
          .md-global-menu #menu #mainnav > div.label_indev {
            margin-top: 24px; }
          .md-global-menu #menu #mainnav > div.label_purchase {
            margin-top: 24px; }
          .md-global-menu #menu #mainnav > div.label_common {
            margin-top: 24px; }
          .md-global-menu #menu #mainnav > div > a,
          .md-global-menu #menu #mainnav > div > div {
            display: block;
            width: 100%;
            height: auto;
            margin: 6px 0;
            border: 1px solid #d9d9d9;
            font-size: 13px;
            box-shadow: none;
            position: relative;
            padding: 0 53px;
            height: 40px;
            line-height: 40px; }
            .md-global-menu #menu #mainnav > div > a:nth-of-type(1),
            .md-global-menu #menu #mainnav > div > div:nth-of-type(1) {
              margin-top: 0; }
            .md-global-menu #menu #mainnav > div > a div,
            .md-global-menu #menu #mainnav > div > div div {
              width: 50px;
              height: 50px;
              margin: 0 auto;
              position: absolute;
              top: 50%;
              left: 0px;
              transform: translate(0, -50%); }
              .md-global-menu #menu #mainnav > div > a div svg,
              .md-global-menu #menu #mainnav > div > div div svg {
                width: 55%; }
              .md-global-menu #menu #mainnav > div > a div .heart,
              .md-global-menu #menu #mainnav > div > div div .heart {
                margin-top: 1px;
                width: 65%; }
              .md-global-menu #menu #mainnav > div > a div .news_icon,
              .md-global-menu #menu #mainnav > div > div div .news_icon {
                width: 65%; }
              .md-global-menu #menu #mainnav > div > a div .letter,
              .md-global-menu #menu #mainnav > div > div div .letter {
                width: 80%; }
      .md-global-menu #menu #othernav {
        width: calc(100% - 24px);
        margin: 40px auto 0 auto;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start; }
        .md-global-menu #menu #othernav .other-nav__inner {
          font-size: 14px; }
        .md-global-menu #menu #othernav ul {
          font-size: 13px;
          width: calc(50% - 20px);
          display: block;
          margin: 0 0 20px 0;
          position: relative; }
          .md-global-menu #menu #othernav ul:nth-of-type(odd) {
            margin-right: 20px; }
          .md-global-menu #menu #othernav ul li {
            font-size: 13px; }
            .md-global-menu #menu #othernav ul li:before {
              width: 8px;
              height: 8px;
              position: absolute;
              top: 9px;
              margin: 0;
              left: -8px; }
            .md-global-menu #menu #othernav ul li a,
            .md-global-menu #menu #othernav ul li div {
              line-height: 25px;
              margin-left: 5px; }
            .md-global-menu #menu #othernav ul li .label_disable_other:after {
              right: 0; }
            .md-global-menu #menu #othernav ul li.subnav_othernav > ul {
              width: 100%; }
            .md-global-menu #menu #othernav ul li.subnav_othernav .ttl_subnav_othernav {
              font-size: 13px;
              margin-top: 5px;
              line-height: 18px; }
            .md-global-menu #menu #othernav ul li.subnav_othernav > ul > li:before {
              content: '';
              width: 8px;
              height: 8px;
              position: absolute;
              top: 6px;
              left: -8px; }
    .md-global-menu .logout {
      margin: 40px auto 80px;
      width: 200px;
      height: 34px;
      font-size: 15px;
      border-radius: 6px;
      text-align: center;
      line-height: 34px;
      background: #000;
      color: #fff;
      text-decoration: none;
      display: block; } }

/*
 * グローバルメニューを隠す場合(Topページ表示時)の表示の制御
 * (このCSSは cider/common.scss を #globalmenu で検索して持ってきたもの)
 */
.md-global-menu.md-hidden {
  transition: all .6s ease-in-out;
  transform: translate(0, -100%);
  height: 100vh; }
  .md-global-menu.md-hidden .menu_wrap {
    transform: translate(0, 0); }
  .md-global-menu.md-hidden.md-menu-open {
    transform: translate(0, 0); }

/* このCSSは cider/common.scss を .menu_open で検索して持ってきたもの */
.md-global-menu.md-menu-open #globalmenu_btn button .line hr:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg); }

.md-global-menu.md-menu-open #globalmenu_btn button .line hr:nth-of-type(2) {
  opacity: 0; }

.md-global-menu.md-menu-open #globalmenu_btn button .line hr:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg); }

.md-global-menu.md-menu-open .menu_wrap {
  transform: translate(0, 0); }

/* #wrapper 直下の .menu_open は使いづらいので .md-menu-open で置き換え */
@media screen and (max-width: 767px) {
  .md-global-menu.md-menu-open header {
    height: 160px;
    transition: all 0.7s ease-in-out; }
  .md-global-menu.md-menu-open #globalmenu_btn button .line hr:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg); }
  .md-global-menu.md-menu-open #globalmenu_btn button .line hr:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg); }
  #globalmenu_btn {
    top: 6px; } }

/* .md-global-menu(#globalmenu) 内のスタイルに対して修正 */
:not(.minden.toggle-view) .md-global-menu #mainnav .md-icon {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

@media screen and (max-width: 767px) {
  .minden .md-global-menu #menu #mainnav .md-icon-wrap {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    border: none; }
  .minden .md-global-menu #menu #mainnav .md-icon {
    width: 100%; } }

.md-global-menu .plan_select {
  display: none;
  width: 150px;
  background: #fff;
  margin-top: 10px;
  cursor: pointer; }

.md-global-menu .plan_select .hide {
  position: absolute;
  left: 0;
  width: 100%;
  top: 24px;
  height: 0;
  overflow: hidden;
  transition: height .4s ease-out; }

.md-global-menu .plan_select .md-item {
  background: #20920e;
  color: #fff;
  height: 1.4em;
  line-height: 1.4em;
  padding-left: 5px; }
  .md-global-menu .plan_select .md-item:hover {
    background: #fff;
    color: #20920e; }

/* .md-global-menu(#globalmenu) 内のスタイルに対して修正 */
@media screen and (max-width: 767px) {
  .md-global-menu #mainnav .md-icon {
    width: 55%; } }

/* このCSSは cider/common.scss を #globalmenu で検索して持ってきたもの */
@media screen and (max-width: 450px) {
  .md-global-menu #menu #othernav {
    width: calc(100% - 24px);
    margin: auto;
    padding: 0;
    position: relative;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .md-global-menu #menu #othernav .other-nav__headding {
      font-size: 14px; }
    .md-global-menu #menu #othernav ul {
      font-size: 13px;
      width: calc(100% - 20px);
      display: block;
      margin: 0 0 20px 0;
      position: relative; }
      .md-global-menu #menu #othernav ul:nth-of-type(odd) {
        margin-right: 0; }
      .md-global-menu #menu #othernav ul li:before {
        width: 8px;
        height: 8px;
        position: absolute;
        top: 6px;
        margin: 0;
        left: -8px; }
      .md-global-menu #menu #othernav ul li a {
        line-height: 1.5;
        margin-left: 5px; }
      .md-global-menu #menu #othernav ul li > div {
        line-height: 1.5; }
    .md-global-menu #menu #othernav .md-contents {
      margin-top: 16px; } }

.md-slider {
  border: solid 0 transparent !important;
  padding: 0 !important;
  /* Credit: https://github.com/picturepan2/spectre/blob/master/src/_sliders.scss */
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  display: block;
  width: 100%;
  height: 1rem; }
  .md-slider:focus {
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.2);
    outline: none; }
  .md-slider.tooltip:not([data-tooltip])::after {
    content: attr(value); }
  .md-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    height: 1rem;
    margin-top: -0.3rem;
    -webkit-transition: transform .2s;
    transition: transform .2s;
    width: 1rem;
    border: solid 1px #b3b3b3; }
  .md-slider::-moz-range-thumb {
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    height: 1rem;
    -moz-transition: transform .2s;
    transition: transform .2s;
    width: 1rem;
    border: solid 1px #b3b3b3; }
  .md-slider::-ms-thumb {
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    height: 1rem;
    -ms-transition: transform .2s;
    transition: transform .2s;
    width: 1rem;
    border: solid 1px #b3b3b3; }
  .md-slider:active::-webkit-slider-thumb {
    transform: scale(1.25); }
  .md-slider:active::-moz-range-thumb {
    transform: scale(1.25); }
  .md-slider:active::-ms-thumb {
    transform: scale(1.25); }
  .md-slider:disabled::-webkit-slider-thumb, .md-slider.disabled::-webkit-slider-thumb {
    background: #f7f8f9;
    transform: scale(1); }
  .md-slider:disabled::-moz-range-thumb, .md-slider.disabled::-moz-range-thumb {
    background: #f7f8f9;
    transform: scale(1); }
  .md-slider:disabled::-ms-thumb, .md-slider.disabled::-ms-thumb {
    background: #f7f8f9;
    transform: scale(1); }
  .md-slider::-webkit-slider-runnable-track {
    background: #f2f2f2;
    border-radius: 0.4rem;
    height: 0.4rem;
    width: 100%; }
  .md-slider::-moz-range-track {
    background: #f2f2f2;
    border-radius: 0.4rem;
    height: 0.4rem;
    width: 100%; }
  .md-slider::-ms-track {
    background: #f2f2f2;
    border-radius: 0.4rem;
    height: 0.4rem;
    width: 100%; }
  .md-slider::-ms-fill-lower {
    background: #ffffff; }
  .md-slider::-ms-tooltip {
    display: none; }

/**
 * 前提
 *   グローバルなテーマ(みん電なら緑系、めぐるなら黄色系)を設定したいのに
 *   #wrapper.green で、Topページの「今月応援中の発電所」などを選択した時の色の設定を
 *   しちゃってるアホな仕様。(いわゆるテーマとTopページの色とが混ざってる)
 *
 * 方針
 *   .md-top を用意して、#wrapper.green を見ないで色の設定などが行われるようにガンバる。
 *
 * cf. override/_home.scss
 */
#wrapper .md-top {
  transition: all .2s ease-out; }
  #wrapper .md-top #top_main .top_head .left .member .name:after {
    content: ''; }
  #wrapper .md-top .plan_select {
    width: 150px;
    display: inline-block;
    background: #fff;
    margin-top: 5px;
    cursor: pointer; }
    #wrapper .md-top .plan_select .md-item {
      height: 1.4em;
      line-height: 1.4em;
      padding-left: 5px;
      cursor: pointer; }
  #wrapper .md-top .topcolor_filter:after {
    transition: all .2s ease-out; }
  #wrapper .md-top .md-password-reset {
    margin-top: 25px; }
    #wrapper .md-top .md-password-reset .md-color {
      color: #333;
      font-weight: bold; }
  #wrapper .md-top .md-corporation-link {
    margin-top: 20px;
    text-align: center; }
    #wrapper .md-top .md-corporation-link .md-corporation-link-tag {
      width: 100%;
      height: 40px;
      font-size: 14px;
      font-weight: bold;
      background: #fff;
      display: block;
      border-radius: 10px;
      line-height: 40px;
      position: relative;
      overflow: hidden;
      transition: ease .2s; }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag span {
        position: relative;
        z-index: 3;
        color: #08703d; }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag:hover span {
        color: #fff; }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag:hover::before {
        transform-origin: left top;
        transform: scale(1, 1); }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag:hover::after {
        background-image: url(/assets/images/common/new_window_icon_white.svg); }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: #08703d;
        width: 100%;
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
        transform: scale(0, 1);
        transform-origin: right top; }
      #wrapper .md-top .md-corporation-link .md-corporation-link-tag::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        z-index: 2;
        transform: translateY(-50%);
        background-image: url(/assets/images/common/new_window_icon_green.svg);
        width: 16px;
        height: 16px; }
  #wrapper .md-top .top_bottom button {
    opacity: 1;
    transform: scale(1); }
  #wrapper .md-top .my_data {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1);
    filter: blur(0);
    opacity: 1; }
  #wrapper .md-top.green {
    border-color: #74b7aa; }
    #wrapper .md-top.green .pp_support {
      color: #5eac86; }
      #wrapper .md-top.green .pp_support::after {
        border-left: solid 7px #5eac86; }
    #wrapper .md-top.green .color,
    #wrapper .md-top.green .hover_color:hover {
      color: #5eac86 !important; }
    #wrapper .md-top.green .bgcolor, #wrapper .md-top.green .before_bg:before, #wrapper .md-top.green .after_bg:after, #wrapper .md-top.green .hover_bg:hover {
      background-color: #5eac86 !important; }
    #wrapper .md-top.green .topcolor_filter:after {
      background: rgba(0, 0, 0, 0.7); }
    #wrapper .md-top.green .border_left_color_after:after {
      border-left-color: #5eac86 !important; }
    #wrapper .md-top.green #top_contents .top_left .recommend {
      opacity: 1;
      filter: blur(0);
      transform: scale(1); }
  #wrapper .md-top.orange {
    border-color: #fbb03b; }
    #wrapper .md-top.orange .pp_support {
      color: #f7931e; }
      #wrapper .md-top.orange .pp_support::after {
        border-left: solid 7px #f7931e; }
    #wrapper .md-top.orange .color,
    #wrapper .md-top.orange .hover_color:hover {
      color: #f7931e !important; }
    #wrapper .md-top.orange .bgcolor, #wrapper .md-top.orange .before_bg:before, #wrapper .md-top.orange .after_bg:after, #wrapper .md-top.orange .hover_bg:hover {
      background-color: #f7931e !important; }
    #wrapper .md-top.orange .topcolor_filter:after {
      background: rgba(247, 147, 30, 0.8); }
    #wrapper .md-top.orange .border_left_color_after:after {
      border-left-color: #f7931e !important; }
    #wrapper .md-top.orange #top_contents .top_left .this_month {
      opacity: 1;
      filter: blur(0);
      transform: scale(1); }
  #wrapper .md-top.purple {
    border-color: #c798bf; }
    #wrapper .md-top.purple .pp_support {
      color: #c76da2; }
      #wrapper .md-top.purple .pp_support::after {
        border-left: solid 7px #c76da2; }
    #wrapper .md-top.purple .color,
    #wrapper .md-top.purple .hover_color:hover {
      color: #c76da2 !important; }
    #wrapper .md-top.purple .bgcolor, #wrapper .md-top.purple .before_bg:before, #wrapper .md-top.purple .after_bg:after, #wrapper .md-top.purple .hover_bg:hover {
      background-color: #c76da2 !important; }
    #wrapper .md-top.purple .topcolor_filter:after {
      background: rgba(199, 109, 162, 0.8); }
    #wrapper .md-top.purple .border_left_color_after:after {
      border-left-color: #c76da2 !important; }
    #wrapper .md-top.purple #top_contents .top_left .next_month {
      opacity: 1;
      filter: blur(0);
      transform: scale(1); }
  #wrapper .md-top.coral {
    border-color: #ffa0a8; }
    #wrapper .md-top.coral .color,
    #wrapper .md-top.coral .hover_color:hover {
      color: #ff7e92 !important; }
    #wrapper .md-top.coral .bgcolor, #wrapper .md-top.coral .before_bg:before, #wrapper .md-top.coral .after_bg:after, #wrapper .md-top.coral .hover_bg:hover {
      background-color: #ff7e92 !important; }
    #wrapper .md-top.coral .topcolor_filter:after {
      background: rgba(255, 126, 146, 0.8); }
    #wrapper .md-top.coral .border_left_color_after:after {
      border-left-color: #ff7e92 !important; }
    #wrapper .md-top.coral #top_contents .top_left .next_month {
      opacity: 1;
      filter: blur(0);
      transform: scale(1); }
  #wrapper .md-top.carrot {
    border-color: #ff7251; }
    #wrapper .md-top.carrot .color,
    #wrapper .md-top.carrot .hover_color:hover {
      color: #FF5128 !important; }
    #wrapper .md-top.carrot .bgcolor, #wrapper .md-top.carrot .before_bg:before, #wrapper .md-top.carrot .after_bg:after, #wrapper .md-top.carrot .hover_bg:hover {
      background-color: #FF5128 !important; }
    #wrapper .md-top.carrot .topcolor_filter:after {
      background: rgba(255, 81, 40, 0.8); }
    #wrapper .md-top.carrot .border_left_color_after:after {
      border-left-color: #FF5128 !important; }
    #wrapper .md-top.carrot #top_contents .top_left .next_month {
      opacity: 1;
      filter: blur(0);
      transform: scale(1); }

#producer .pickup_wrap .md-next,
#consumer .pickup_wrap .md-next {
  top: 50% !important;
  right: -60px !important;
  width: auto; }
  #producer .pickup_wrap .md-next:hover img,
  #consumer .pickup_wrap .md-next:hover img {
    transform: translate(5px, 0); }
  @media screen and (min-width: 961) and (max-width: 1100px) {
    #producer .pickup_wrap .md-next,
    #consumer .pickup_wrap .md-next {
      right: 0 !important; } }

#producer .pickup_wrap .md-prev,
#consumer .pickup_wrap .md-prev {
  top: 50% !important;
  left: -60px !important;
  width: auto; }
  #producer .pickup_wrap .md-prev:hover img,
  #consumer .pickup_wrap .md-prev:hover img {
    transform: translate(-5px, 0); }
  @media screen and (min-width: 961) and (max-width: 1100px) {
    #producer .pickup_wrap .md-prev,
    #consumer .pickup_wrap .md-prev {
      left: 0 !important; } }

#producer .summary .md-svg,
#consumer .summary .md-svg {
  display: block;
  margin: 0 auto 10px;
  width: 33.8px;
  height: 27.9px;
  background-image: url(/assets/images/top/plant-list-wg.svg); }

#producer .summary:hover .md-svg,
#consumer .summary:hover .md-svg {
  background-image: url(/assets/images/top/plant-list-gw.svg); }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #producer .pickup_p .slick-current .pickup_text,
  #producer .pickup_p .other-current .pickup_text {
    opacity: 1; } }

@media screen and (max-width: 767px) {
  #wrapper .md-top #top_contents .top_right .my_data {
    z-index: 1; }
  #wrapper .md-top #top_contents .top_right .login {
    z-index: 0; }
  #wrapper .md-top #top_contents .top_right:empty {
    display: none; }
  #wrapper .md-top .sp_color_bg {
    transition: all .2s ease-out; }
  #wrapper .md-top.green .sp_color_bg {
    background: linear-gradient(90deg, #2DCE89 0%, #2DCECC 100%); }
  #wrapper .md-top.orange .sp_color_bg {
    background: #f7931e; }
  #wrapper .md-top.purple .sp_color_bg {
    background: #c76da2; }
  #producer .pickup_p .slick-current .pickup_image,
  #producer .pickup_p .other-current .pickup_image {
    transform: scale(1.5); } }

#wrapper.meguru .bgcolor,
#wrapper.meguru .before_bg:before,
#wrapper.meguru .after_bg:after,
#wrapper.meguru .hover_bg:hover {
  background-color: #333333 !important; }

#wrapper.meguru .listcolor li:before {
  background: #333333; }

#wrapper.meguru #process .area a::before {
  background: #ffef00; }

#wrapper.meguru .md-accordion dt {
  background: #ffef00;
  color: #4f4d4d; }
  #wrapper.meguru .md-accordion dt .md-accordion__arrow {
    background: linear-gradient(0deg, #4f4d4d, #4f4d4d 2px, transparent 2px) no-repeat, linear-gradient(-90deg, #4f4d4d, #4f4d4d 2px, transparent 2px) no-repeat; }

#wrapper.meguru .md-global-menu header {
  background: #f2f2f2; }
  #wrapper.meguru .md-global-menu header .left a {
    max-width: 180px; }
  #wrapper.meguru .md-global-menu header .left .member .name {
    color: unset; }

.md-top-meguru {
  background-image: url(/assets/meguru/images/top/background.png);
  background-position: center;
  background-repeat: no-repeat; }
  @media screen and (max-width: 767px) {
    .md-top-meguru {
      background-size: contain;
      background-position: 0 140px; } }
  .md-top-meguru #top_main .top_head {
    background: #f2f2f2; }
    .md-top-meguru #top_main .top_head .left a {
      max-width: 180px; }
      @media screen and (max-width: 767px) {
        .md-top-meguru #top_main .top_head .left a .logo {
          width: 170px; } }
  .md-top-meguru #top_main #top_contents .top_right .my_data {
    background: unset; }
  .md-top-meguru .login {
    background-color: #333333 !important; }
    .md-top-meguru .login .login_title {
      color: white !important; }
    .md-top-meguru .login form button {
      background: url(/assets/meguru/images/bg_button.png) top left repeat !important; }
    .md-top-meguru .login form label input[type=checkbox] {
      border: 1px solid #fff !important; }
      .md-top-meguru .login form label input[type=checkbox]:checked {
        background-color: unset !important; }
    .md-top-meguru .login form label p {
      color: white !important; }
    .md-top-meguru .login form .md-password-reset .md-color {
      color: white !important; }
    .md-top-meguru .login form .md-corporation-link {
      display: none; }
    @media screen and (max-width: 767px) {
      .md-top-meguru .login {
        padding: 20px 10px !important; } }
  .md-top-meguru .my_data .md-link {
    background-color: #333333 !important;
    color: #ffffff;
    margin: auto; }
  .md-top-meguru .member .name,
  .md-top-meguru .member .plan_select {
    color: #333333 !important; }
  .md-top-meguru .member .plan_select button {
    color: #fff !important; }
  .md-top-meguru .member .plan_select button:after {
    border-color: transparent transparent #333333 #333333; }
  .md-top-meguru #top_contents .my_data .md-link:hover {
    background-color: transparent !important;
    border: solid 1px #333;
    color: #333333 !important; }
    .md-top-meguru #top_contents .my_data .md-link:hover::after {
      border-left-color: #333 !important; }

.meguru_footer {
  color: #585858;
  background: url(/assets/meguru/images/bg_footer.png) repeat center #fff; }
  .meguru_footer nav div a {
    font-weight: bold;
    color: #585858; }
    .meguru_footer nav div a::before {
      background: #c83c2d; }
  .meguru_footer #footer_bottom .cr {
    font-weight: bold; }
  .meguru_footer #footer_bottom .list a {
    color: #585858;
    font-weight: bold;
    border-right: 1px solid #585858; }
    .meguru_footer #footer_bottom .list a:last-of-type {
      border-right: none; }

/* #wrapper 付きでないと上書きできない */
#wrapper .md-top-meguru .md-login-btn {
  color: #333333 !important; }

#wrapper .md-top-meguru .md-login-btn:after {
  border-left-color: #333333 !important; }

.md-global-menu .plan_select button {
  color: #333333; }

.md-global-menu .plan_select button:after {
  border-color: transparent transparent #333333 #333333; }

.md-global-menu .plan_select .md-item.md-meguru {
  background: #fff;
  color: #333333; }

.md-global-menu .plan_select .md-item.md-meguru:hover {
  background: #333333;
  color: #fff; }

@media screen and (max-width: 767px) {
  #wrapper .sp_color_bg {
    background-color: #ffffff; } }

#wrapper .topcolor_filter:after {
  /* background-color: #ffffff; */ }

.md-meguru-switch {
  display: block;
  margin: 0 auto 2rem;
  text-align: center;
  width: 100%;
  background: url(https://meguru-denki.com/images/bg_button.png) top left repeat;
  box-shadow: 4px 4px #dadadb; }
  .md-meguru-switch .md-link {
    color: #444444;
    display: block;
    font-family: GENJ-B;
    font-size: 18px;
    padding: 1.4rem 1rem;
    text-decoration: none;
    transition: all 0.25s; }
  .md-meguru-switch .md-label {
    font-size: 23px;
    font-weight: bold; }
  .md-meguru-switch .md-subtext {
    font-size: 14px; }

.login_modal.meguru .scroll_area button[type=submit] {
  width: 100%;
  display: inline-block;
  margin-top: 22px;
  color: #444;
  background: url(/assets/meguru/images/bg_button.png) top left repeat;
  box-shadow: 4px 4px #dadadb; }
  .login_modal.meguru .scroll_area button[type=submit]::after {
    border-left-color: #444; }

#contract fieldset label dl dd .note,
#contract fieldset .label dl dd .note {
  display: block; }

#moving .cancel2 dd {
  padding-bottom: 10px; }
  #moving .cancel2 dd .note {
    margin-top: 5px;
    line-height: 1.5;
    display: block; }

#detailed .detailed_frame .detailed_contents .usage_stats .minden-usage-graph_notes {
  margin: 32px 0 8px 0; }
  #detailed .detailed_frame .detailed_contents .usage_stats .minden-usage-graph_notes p {
    padding-top: 8px;
    font-size: 12px;
    position: relative; }

.notes {
  margin-bottom: 20px;
  color: #ff0000; }
  .notes .notes__content {
    line-height: 1.5;
    font-size: 14px;
    text-align: justify; }
    .notes .notes__content p {
      padding-left: 16px;
      position: relative; }
      .notes .notes__content p:first-child {
        margin-bottom: 10px; }

/* component */
.c-agreement {
  padding-top: 40px;
  padding-bottom: 50px; }
  .c-agreement.c-agreement-style-a {
    border-top: initial;
    padding-top: initial;
    padding-bottom: initial; }
  .c-agreement .c-agreement__des {
    font-size: 14px;
    color: #333;
    text-align: center; }
  .c-agreement .c-agreement__box {
    max-width: 250px;
    display: flex;
    flex-direction: column;
    margin: 40px auto 0;
    align-items: flex-start; }
    @media (max-width: 425px) {
      .c-agreement .c-agreement__box.c-agreement__box-style-a {
        margin-left: 40px; } }
    .c-agreement .c-agreement__box .c-agreement__box__label {
      margin-bottom: 10px;
      font-size: 14px;
      align-items: center;
      cursor: pointer;
      display: flex; }
      .c-agreement .c-agreement__box .c-agreement__box__label.w-290 {
        width: 290px; }
      .c-agreement .c-agreement__box .c-agreement__box__label:last-of-type {
        margin-bottom: 0; }
      .c-agreement .c-agreement__box .c-agreement__box__label.w-500 {
        width: 500px; }
      .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__checkbox {
        position: relative;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #2DCE89;
        border-radius: 3px;
        outline: none; }
        .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__checkbox.empty {
          margin-right: 10px; }
        .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__checkbox::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 14px;
          height: 10px;
          transition: transform 0.2s ease; }
        .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__checkbox:checked::before {
          background-image: url(/assets/images/common/check_green.svg);
          fill: #2DCE89; }
      .c-agreement .c-agreement__box .c-agreement__box__label a {
        text-decoration: underline;
        color: #0569B1;
        margin-left: 10px; }
      .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__link-like {
        text-decoration: underline;
        color: #0569B1;
        margin-left: 10px; }
      .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__text {
        margin-left: 30px; }

/* レスポンシブ対応追加 */
@media (max-width: 425px) {
  .c-agreement__box__label {
    flex-direction: column;
    align-items: flex-start; }
    .c-agreement__box__label a, .c-agreement__box__label .c-agreement__box__label__link-like {
      margin-left: 0;
      margin-top: 5px; }
    .c-agreement__box__label .c-agreement__box__label__text {
      margin-left: 30px;
      margin-top: 5px; } }

.c-button-wrap {
  display: flex;
  justify-content: center;
  gap: 30px; }
  .c-button-wrap.margin-top-60 {
    margin-top: 60px; }
  .c-button-wrap.flex-des {
    flex-direction: column;
    align-items: center;
    gap: 10px; }
  .c-button-wrap .c-button__des {
    font-size: 14px;
    color: #666; }
    @media (max-width: 425px) {
      .c-button-wrap .c-button__des {
        max-width: 280px; } }
  @media (max-width: 425px) {
    .c-button-wrap {
      gap: 10px; } }

.c-button {
  width: 300px;
  height: 48px;
  display: block;
  background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%);
  box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 600; }
  .c-button.history-back {
    background: #d9d9d9; }
  .c-button.complete {
    background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
    .c-button.complete:disabled {
      background: #d9d9d9;
      cursor: default; }
  .c-button.w-240 {
    background: #b3b3b3;
    box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
    width: 240px;
    height: 48px;
    margin: auto; }
  .c-button.margin-top-30 {
    margin-top: 30px; }
  .c-button.margin-top-60 {
    margin-top: 60px; }
  .c-button.detail-btn {
    max-width: 160px;
    margin-top: 0px;
    font-family: 'Open Sans'; }
  .c-button.center {
    display: flex;
    justify-content: center; }
  .c-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff; }
    .c-button a .c-button__img {
      position: relative;
      left: 40px; }

.c-button-cancel {
  width: 200px;
  height: 36px;
  background-color: #999;
  box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 auto;
  padding: 0 10px; }
  .c-button-cancel:hover {
    opacity: 0.7; }
  .c-button-cancel.disabled-button {
    opacity: 0.5; }

.c-button-ppa {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #08703d;
  font-size: 16px;
  font-weight: bold;
  border-radius: 100px;
  margin-top: 10px;
  position: relative; }
  .c-button-ppa::before {
    content: '';
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 74px;
    height: 55px;
    z-index: 1;
    background: url(/assets/minden/images/cha_img01.svg) no-repeat;
    background-position: left bottom; }
  .c-button-ppa::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 67px;
    height: 69px;
    background: url(/assets/minden/images/cha_img02.svg) no-repeat;
    background-position: right center; }
  @media (max-width: 425px) {
    .c-button-ppa::before {
      left: 12px;
      width: 45px;
      background-size: contain; }
    .c-button-ppa::after {
      width: 46px;
      height: 69px;
      right: -4%;
      background-size: contain; } }
  @media (max-width: 320px) {
    .c-button-ppa::before {
      display: none; }
    .c-button-ppa::after {
      display: none; } }
  .c-button-ppa:hover {
    opacity: 0.7; }
  .c-button-ppa .c-button-ppa__box {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
    .c-button-ppa .c-button-ppa__box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 39px;
      height: 36px;
      background: url(/assets/minden/images/new_banner_icon.png) no-repeat; }
    .c-button-ppa .c-button-ppa__box .c-button-ppa__box__span {
      position: relative; }
      .c-button-ppa .c-button-ppa__box .c-button-ppa__box__span::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10px;
        width: 18px;
        height: 18px;
        background-image: url(/assets/minden/images/circle-chevron-right-solid.png); }
      .c-button-ppa .c-button-ppa__box .c-button-ppa__box__span.c-button-ppa__box__span-arrow::after {
        background-image: url(/assets/images/common/arrow_icon_green.svg); }

.c-card .c-card__list {
  display: flex;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
  border-radius: 6px;
  min-height: 116px;
  margin-bottom: 20px;
  position: relative; }
  @media (max-width: 564px) {
    .c-card .c-card__list.c-card__list--flex {
      flex-direction: column; } }
  .c-card .c-card__list .c-card__img {
    width: 217px;
    border-radius: 6px 0 0 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center; }
    @media screen and (min-width: 426px) and (max-width: 767px) {
      .c-card .c-card__list .c-card__img {
        width: 100%;
        max-width: 150px;
        position: unset;
        display: unset; } }
    @media (max-width: 564px) {
      .c-card .c-card__list .c-card__img.c-card__img--flex {
        max-width: 100%;
        width: auto;
        height: 126px; } }
    .c-card .c-card__list .c-card__img .c-card__img__photo {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .c-card .c-card__list .c-card__wrap {
    width: calc(100% - 217px);
    display: flex;
    margin-left: 217px; }
    @media screen and (min-width: 426px) and (max-width: 767px) {
      .c-card .c-card__list .c-card__wrap {
        width: calc(100% - 150px);
        margin-left: unset; } }
    .c-card .c-card__list .c-card__wrap.c-card__wrap--flex {
      align-items: center; }
      @media (max-width: 564px) {
        .c-card .c-card__list .c-card__wrap.c-card__wrap--flex {
          width: auto;
          flex-direction: column;
          padding: 20px; } }
    .c-card .c-card__list .c-card__wrap .c-card__wrap__info {
      flex: 1;
      padding: 28px 30px; }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__info.modify-padding-right-left {
        padding: 28px 15px; }
        @media (max-width: 820px) {
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info.modify-padding-right-left {
            padding-right: 13px;
            padding-left: 18px; } }
        @media (max-width: 564px) {
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info.modify-padding-right-left {
            padding: 10px 0px 30px 0px; } }
        @media (max-width: 425px) {
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info.modify-padding-right-left {
            padding: 10px 0px 0px 0px; } }
      @media screen and (min-width: 426px) and (max-width: 767px) {
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info {
          padding: 10px; } }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex:last-of-type {
          margin-bottom: 0; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex.mb-5 {
          margin-bottom: 5px; }
          @media (max-width: 767px) {
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex.mb-5 {
              flex-direction: column; } }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item {
          display: flex;
          align-items: end;
          flex-wrap: wrap; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__title {
            font-weight: 600;
            font-size: 22px;
            margin-right: 15px;
            color: #32325d; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__area {
            color: #8898aa;
            font-size: 12px;
            margin-top: 5px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__label {
            color: #2ecfa4;
            font-weight: 600;
            font-size: 10px;
            line-height: 100%;
            padding: 6px;
            border: 2px solid #2ecfa4;
            box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15); }
            @media (max-width: 790px) {
              .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__label {
                margin-top: 10px; } }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box {
          color: #525f7f;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          font-size: 11px;
          margin-right: 26px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box:last-of-type {
            margin-right: 0; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box.nowrap {
            flex-wrap: nowrap;
            margin-bottom: 5px;
            margin-right: 5px; }
            @media (min-width: 768px) {
              .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box.nowrap {
                flex: 1; } }
            @media (max-width: 564px) {
              .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box.nowrap {
                margin-bottom: 10px; } }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title {
            font-weight: 400;
            font-size: 11px;
            margin-right: 10px; }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-44 {
              min-width: 44px; }
              @media (max-width: 564px) {
                .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-44 {
                  font-size: 14px;
                  min-width: 130px;
                  margin-right: 0; } }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-40 {
              min-width: 44px; }
              @media screen and (min-width: 426px) and (max-width: 820px) {
                .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-40 {
                  width: 40px;
                  word-wrap: break-word; } }
              @media (max-width: 564px) {
                .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-40 {
                  font-size: 14px;
                  min-width: 130px;
                  margin-right: 0; } }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-77 {
              width: 77px; }
              @media screen and (min-width: 565px) and (max-width: 820px) {
                .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-77 {
                  width: auto;
                  min-width: 44px; } }
              @media (max-width: 564px) {
                .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title.w-77 {
                  font-size: 14px;
                  min-width: 130px;
                  margin-right: 0; } }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__value {
            font-weight: 700;
            font-size: 18px; }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__value .c-card__wrap__info__flex__box__value__small {
              font-size: 11px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__text__area {
            color: #8898aa;
            font-size: 12px;
            margin-top: 5px;
            font-weight: 300;
            margin-bottom: 10px; }
    .c-card .c-card__list .c-card__wrap .c-card__wrap__text {
      color: #525f7f;
      min-width: 158px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      margin-top: 20px;
      margin-bottom: 20px; }
      @media screen and (min-width: 426px) and (max-width: 767px) {
        .c-card .c-card__list .c-card__wrap .c-card__wrap__text {
          min-width: auto;
          padding-left: 10px;
          padding-right: 10px; } }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__text::before {
        content: '';
        width: 1px;
        height: 100%;
        border-left: 1px solid #d6d6d6;
        position: absolute;
        top: 0;
        left: 0; }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__text .c-card__wrap__text__title {
        font-size: 12px;
        color: #adb5bd;
        margin-bottom: 5px; }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__text .c-card__wrap__text__value {
        font-weight: 700;
        font-size: 40px;
        color: #525f7f; }
        @media screen and (min-width: 426px) and (max-width: 767px) {
          .c-card .c-card__list .c-card__wrap .c-card__wrap__text .c-card__wrap__text__value {
            font-size: 3.8vw; } }
    .c-card .c-card__list .c-card__wrap .c-card__wrap__button {
      color: #525f7f;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      padding-right: 25px; }
      @media screen and (min-width: 565px) and (max-width: 768px) {
        .c-card .c-card__list .c-card__wrap .c-card__wrap__button {
          min-width: auto;
          padding-right: 35px; } }
      @media (max-width: 564px) {
        .c-card .c-card__list .c-card__wrap .c-card__wrap__button {
          padding-right: 0;
          padding-bottom: 10px;
          margin: 0 auto; } }

/* Mobile Styles */
@media (max-width: 425px) {
  .c-card .c-card__list {
    flex-direction: column; }
    .c-card .c-card__list .c-card__img {
      width: 100%;
      height: 126px;
      border-radius: 6px 6px 0 0;
      position: unset; }
    .c-card .c-card__list .c-card__wrap {
      width: auto;
      flex-direction: column;
      padding: 20px;
      margin-left: unset; }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__info {
        padding: 0;
        margin-bottom: 20px; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex {
          flex-direction: column;
          margin-bottom: 20px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__title {
            font-size: 22px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__item .c-card__wrap__info__flex__item__area {
            margin-top: 8px;
            font-size: 13px; }
          .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box {
            font-weight: 700;
            font-size: 16px;
            color: #525f7f;
            margin-right: 0;
            margin-bottom: 10px; }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__title {
              font-size: 16px;
              min-width: 150px;
              margin-right: 0; }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__img {
              width: 100%;
              margin-right: 0;
              border-radius: 6px 6px 0 0;
              height: 150px; }
            .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__value {
              font-size: 16px; }
              .c-card .c-card__list .c-card__wrap .c-card__wrap__info .c-card__wrap__info__flex .c-card__wrap__info__flex__box .c-card__wrap__info__flex__box__value .c-card__wrap__info__flex__box__value__small {
                font-size: 16px; }
      .c-card .c-card__list .c-card__wrap .c-card__wrap__text {
        flex-direction: unset;
        align-items: center;
        padding-top: 20px;
        padding-right: unset;
        padding-left: unset;
        margin-top: unset;
        margin-bottom: unset; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__text::before {
          width: 100%;
          height: 1px;
          border-left: unset;
          border-top: 1px solid #d6d6d6;
          position: absolute;
          top: 0;
          left: 0; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__text .c-card__wrap__text__title {
          margin-bottom: 0;
          margin-right: 20px;
          font-size: 14px; }
        .c-card .c-card__list .c-card__wrap .c-card__wrap__text .c-card__wrap__text__value {
          font-size: 9vw; } }

.c-chart {
  margin-bottom: 30px;
  position: relative;
  padding: 30px 25px 20px 10px;
  overflow-x: scroll;
  background: #fff;
  box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
  border-radius: 6px; }
  .c-chart::before {
    content: '[kWh]';
    position: absolute;
    top: 15px;
    left: 5px;
    font-size: 10px;
    color: #666; }
  .c-chart .c-chart__wrap {
    min-width: 800px; }
    .c-chart .c-chart__wrap .c-chart-legend {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 20px; }
      @media (max-width: 425px) {
        .c-chart .c-chart__wrap .c-chart-legend {
          flex-direction: column;
          padding-left: 30px; } }
      .c-chart .c-chart__wrap .c-chart-legend li {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 13px;
        color: #8898aa;
        cursor: pointer; }
        .c-chart .c-chart__wrap .c-chart-legend li:not(.active) {
          text-decoration: line-through; }
        .c-chart .c-chart__wrap .c-chart-legend li::before {
          content: '';
          margin-right: 8px;
          width: 32px;
          height: 6px; }
        .c-chart .c-chart__wrap .c-chart-legend li.generationData::before {
          background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%); }
        .c-chart .c-chart__wrap .c-chart-legend li.predictionData::before {
          background: #fb6340; }
        .c-chart .c-chart__wrap .c-chart-legend li.consumptionData::before {
          width: 32px;
          height: 3px;
          background: #d9d9d9; }
        .c-chart .c-chart__wrap .c-chart-legend li.consumptionData::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #d9d9d9; }

.c-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  background: #fff;
  padding: 40px 30px;
  z-index: 10000;
  text-align: center;
  border-radius: 20px; }
  @media (max-width: 425px) {
    .c-modal {
      width: 90%; } }
  .c-modal .c-modal__title {
    font-size: 26px;
    color: #32325D;
    font-weight: 600;
    margin-bottom: 10px; }
  .c-modal .c-modal__title-des {
    font-size: 14px;
    color: #666; }
  .c-modal .c-modal__content {
    max-height: 334px;
    margin-top: 30px;
    margin-bottom: 20px;
    overflow-y: scroll;
    padding: 15px;
    font-size: 14px;
    border: 1px solid #e6e6e6;
    text-align: left; }
  .c-modal .c-modal__button {
    margin: 0 auto; }
  .c-modal .c-modal__close {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #2DCE8B -14%, #2DCECA 100%);
    position: absolute;
    top: -14px;
    right: -14px;
    border-radius: 50%;
    cursor: pointer; }
    .c-modal .c-modal__close img {
      width: 16px;
      height: 16px; }

.c-modal-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999; }

.c-modalError {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; }
  .c-modalError .c-modalError__overlay {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.24);
    transition: opacity .3s, visibility .3s; }
  .c-modalError .c-modalError__box {
    width: 478px;
    padding: 17px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: #fff; }
    .c-modalError .c-modalError__box .c-modalError__icon {
      width: 150px;
      height: 150px;
      margin: 20px auto;
      padding: 0;
      position: relative;
      box-sizing: content-box; }
      .c-modalError .c-modalError__box .c-modalError__icon img {
        width: 100%; }
    .c-modalError .c-modalError__box .c-modalError__box__title {
      color: #333;
      margin-bottom: 20px; }
    .c-modalError .c-modalError__box button {
      width: 100%; }
      .c-modalError .c-modalError__box button:hover {
        opacity: 0.7; }
      .c-modalError .c-modalError__box button .c-modalError__box__btn {
        width: 100%;
        height: 48px;
        background: #ff0000;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        border-radius: 100px;
        justify-content: center;
        align-items: center;
        color: #fff; }

.c-progressbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .c-progressbar .c-progressbar__item {
    width: 30%;
    text-align: center;
    position: relative;
    padding: 13px 0;
    background: #efefef;
    color: #2dce89;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center; }
    .c-progressbar .c-progressbar__item .c-progressbar__item__step {
      color: #ffffff;
      background: #2dce89;
      border-radius: 20px;
      display: inline-block;
      width: 68px;
      font-size: 12px; }
    .c-progressbar .c-progressbar__item .c-progressbar__item__text {
      color: #666666;
      display: flex;
      flex-direction: column;
      margin-top: 5px; }
    .c-progressbar .c-progressbar__item.active {
      background: #2dce89; }
      .c-progressbar .c-progressbar__item.active .c-progressbar__item__step {
        color: #2dce89;
        background: #ffffff; }
      .c-progressbar .c-progressbar__item.active .c-progressbar__item__text {
        color: #ffffff; }
      .c-progressbar .c-progressbar__item.active::after {
        background: #2dce89; }
    .c-progressbar .c-progressbar__item:not(:last-child)::before, .c-progressbar .c-progressbar__item:not(:last-child)::after {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      bottom: 0;
      right: -21.9px;
      margin: auto;
      -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      height: 100%;
      width: 22px;
      background: #efefef; }
    .c-progressbar .c-progressbar__item:not(:last-child)::before {
      margin-left: 1px;
      border-left-color: #fff; }
    .c-progressbar .c-progressbar__item.active:not(:last-child)::before, .c-progressbar .c-progressbar__item.active:not(:last-child)::after {
      background: #2dce89;
      border-left-color: #2dce89; }

@media screen and (max-width: 800px) {
  .c-progressbar {
    width: auto; }
    .c-progressbar .c-progressbar__item {
      font-size: 12px;
      line-height: 1.4;
      padding: 10px 0; }
    .c-progressbar .c-progressbar__item:not(:last-child)::before, .c-progressbar .c-progressbar__item:not(:last-child)::after {
      width: 13px;
      right: -12.9px;
      -webkit-clip-path: polygon(0 0, 0% 100%, 30% 50%);
      clip-path: polygon(0 0, 0% 100%, 70% 50%); } }

.c-radio {
  display: flex;
  align-items: baseline; }
  .c-radio .c-radio__wrap {
    display: flex;
    gap: 30px; }
    .c-radio .c-radio__wrap .c-radio__wrap__select {
      position: relative; }
      .c-radio .c-radio__wrap .c-radio__wrap__select input {
        display: none; }
      .c-radio .c-radio__wrap .c-radio__wrap__select label {
        position: relative;
        padding-left: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        box-sizing: border-box; }
        .c-radio .c-radio__wrap .c-radio__wrap__select label span {
          font-size: 14px;
          margin-top: 2px; }
        .c-radio .c-radio__wrap .c-radio__wrap__select label::before, .c-radio .c-radio__wrap .c-radio__wrap__select label::after {
          content: "";
          position: absolute;
          transition: all 0.2s;
          -webkit-transition: all 0.2s;
          border-radius: 50%; }
        .c-radio .c-radio__wrap .c-radio__wrap__select label::before {
          width: 16px;
          height: 16px;
          border: 2px solid #2dce89;
          box-sizing: unset;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          display: block; }
        .c-radio .c-radio__wrap .c-radio__wrap__select label::after {
          width: 10px;
          height: 10px;
          top: 50%;
          left: 5px;
          transform: translateY(-50%);
          background: #2dce89;
          opacity: 0;
          display: block; }
      .c-radio .c-radio__wrap .c-radio__wrap__select input[type="radio"]:checked + label::before {
        border-color: #2dce89; }
      .c-radio .c-radio__wrap .c-radio__wrap__select input[type="radio"]:checked + label::after {
        opacity: 1; }
  .c-radio .c-radio__wrap__column {
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .c-radio .c-radio__wrap__column .c-radio__wrap__select {
      position: relative; }
      .c-radio .c-radio__wrap__column .c-radio__wrap__select input {
        display: none; }
      .c-radio .c-radio__wrap__column .c-radio__wrap__select label {
        position: relative;
        padding-left: 24px;
        cursor: pointer;
        display: flex;
        align-items: center; }
        .c-radio .c-radio__wrap__column .c-radio__wrap__select label span {
          font-size: 14px; }
        .c-radio .c-radio__wrap__column .c-radio__wrap__select label::before, .c-radio .c-radio__wrap__column .c-radio__wrap__select label::after {
          content: "";
          position: absolute;
          transition: all 0.2s;
          -webkit-transition: all 0.2s;
          border-radius: 50%; }
        .c-radio .c-radio__wrap__column .c-radio__wrap__select label::before {
          left: 0;
          width: 16px;
          height: 16px;
          border: 2px solid #2dce89;
          box-sizing: unset;
          left: 0;
          margin-top: -10px;
          top: 50%;
          display: block; }
        .c-radio .c-radio__wrap__column .c-radio__wrap__select label::after {
          width: 10px;
          height: 10px;
          top: 50%;
          left: 5px;
          background: #2dce89;
          margin-top: -5px;
          opacity: 0;
          display: block; }
      .c-radio .c-radio__wrap__column .c-radio__wrap__select input[type="radio"]:checked + label::before {
        border: 2px solid #2dce89; }
      .c-radio .c-radio__wrap__column .c-radio__wrap__select input[type="radio"]:checked + label::after {
        opacity: 1; }

.c-form-table.margin-top-50 {
  margin-top: 50px; }

.c-form-table .c-form-title {
  color: #32325d;
  font-size: 26px;
  font-weight: 600; }
  @media (max-width: 425px) {
    .c-form-table .c-form-title {
      font-size: 22px; } }

.c-form-table .c-form-table__wrap {
  width: 100%;
  margin-top: 30px; }
  @media (max-width: 425px) {
    .c-form-table .c-form-table__wrap {
      margin-top: 10px; } }
  .c-form-table .c-form-table__wrap:last-of-type {
    margin-bottom: 0; }
  .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a {
    margin-top: 30px; }
    @media (max-width: 425px) {
      .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a {
        margin-top: 10px; } }
    .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a dt {
      min-width: 130px; }
    .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm span {
      font-weight: 700;
      font-size: 14px;
      line-height: 19px; }
    .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm-details {
      border: 2px solid #2ecfa4;
      width: 90px;
      height: 24px;
      display: flex;
      align-items: center;
      margin-left: 10px;
      border-radius: 100px;
      padding-left: 10px; }
      .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm-details a {
        font-size: 12px;
        font-weight: 600;
        color: #2ecfa4; }
      .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm-details::after {
        content: '';
        width: 12px;
        height: 12px;
        margin-left: 6px;
        background: url(/assets/images/common/box-arrow-up-right.svg) no-repeat top; }
    @media (min-width: 426px) {
      .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details {
        display: none; } }
    @media (max-width: 425px) {
      .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details {
        border: 2px solid #2ecfa4;
        width: 90px;
        height: 24px;
        display: flex;
        align-items: center;
        margin-left: 10px;
        border-radius: 100px; }
        .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details span {
          font-size: 12px;
          color: #2ecfa4;
          padding: 6px 0px 6px 12px; }
        .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details img {
          width: 12px;
          height: 12px;
          margin-left: 4px; } }

@media (max-width: 425px) and (max-width: 320px) {
  .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details {
    width: auto;
    height: auto;
    margin-left: 0px; }
    .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details span {
      font-size: 6px;
      padding: 0px 0px 0px 4px; }
    .c-form-table .c-form-table__wrap.c-form-table__wrap-style-a .c-form-table__box__confirm .c-form-table__box__confirm__details img {
      margin-left: 0px; } }
  .c-form-table .c-form-table__wrap .c-form-table__title {
    color: #485474;
    font-weight: 600; }
    .c-form-table .c-form-table__wrap .c-form-table__title span {
      color: #666;
      font-weight: 400; }
  .c-form-table .c-form-table__wrap .c-form-table__box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 14px;
    border-top: 1px solid #e6e9ec; }
    .c-form-table .c-form-table__wrap .c-form-table__box dl {
      width: 50%;
      display: flex; }
      @media screen and (min-width: 426px) and (max-width: 767px) {
        .c-form-table .c-form-table__wrap .c-form-table__box dl {
          width: 100%; } }
      @media (max-width: 425px) {
        .c-form-table .c-form-table__wrap .c-form-table__box dl {
          width: 100%; } }
      .c-form-table .c-form-table__wrap .c-form-table__box dl dt {
        flex-basis: 160px;
        background: #f9fafc;
        min-height: 52px;
        border-bottom: 1px solid #e6e9ec;
        padding-left: 30px;
        color: #485474;
        font-weight: 600;
        display: flex;
        align-items: center; }
        @media (max-width: 425px) {
          .c-form-table .c-form-table__wrap .c-form-table__box dl dt {
            flex-basis: 130px;
            padding-left: 20px; } }
      .c-form-table .c-form-table__wrap .c-form-table__box dl dd {
        flex-basis: calc(100% - 160px);
        padding-left: 20px;
        min-height: 52px;
        border-bottom: 1px solid #e6e9ec;
        color: #666;
        display: flex;
        align-items: center; }
        @media (max-width: 425px) {
          .c-form-table .c-form-table__wrap .c-form-table__box dl dd {
            flex-basis: calc(100% - 130px); } }
    .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one {
      margin-top: 5px;
      margin-bottom: 0; }
      .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl {
        width: 100%; }
        .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty {
          display: flex;
          align-items: center;
          position: relative; }
          .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty button {
            width: 20px;
            height: 20px;
            margin-left: 10px; }
            .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty button img {
              width: 100%; }
          .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty .tooltip {
            width: 300px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 10px;
            border-radius: 10px;
            z-index: 100;
            position: absolute;
            top: 50%;
            left: 110px;
            transform: translateY(-50%); }
            @media (max-width: 425px) {
              .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty .tooltip {
                width: 250px;
                left: 105px; } }
            .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-one dl .c-form-table__box__penalty .tooltip::before {
              content: '';
              position: absolute;
              border-style: solid;
              border-width: 5px;
              margin-left: -5px;
              top: 50%;
              right: 100%;
              margin-top: -5px;
              border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; }
    .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dt {
      min-height: 70px;
      align-items: unset;
      padding-top: 25px; }
    .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd {
      min-height: 70px; }
      .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd.flex-direction {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px; }
      .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd input[type=text] {
        width: 100%;
        max-width: 300px;
        height: 40px;
        background: #fff;
        border: 1px solid #D2D6DA;
        border-radius: 6px;
        color: #333;
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px; }
        .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd input[type=text]:-ms-input-placeholder {
          color: #9D9D9D; }
        .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd input[type=text]::placeholder {
          color: #9D9D9D; }
        .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd input[type=text].error {
          border: 1px solid #D81818; }
      .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd .error-message {
        color: #D81818;
        font-size: 12px;
        margin-top: 5px; }
      .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd .c-form-table__box__des {
        font-size: 12px;
        color: #7e7e7e;
        margin-top: 5px;
        padding-left: 14px;
        position: relative; }
        .c-form-table .c-form-table__wrap .c-form-table__box.c-form-table__box-contract dl dd .c-form-table__box__des::before {
          content: '※';
          position: absolute;
          left: 0; }
  .c-form-table .c-form-table__wrap .c-form-table__text {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-bottom: 10px;
    position: relative;
    padding-left: 14px; }
    .c-form-table .c-form-table__wrap .c-form-table__text.margin-top-20 {
      margin-top: 20px; }
    .c-form-table .c-form-table__wrap .c-form-table__text.arrow-icon::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 0;
      background-image: url(/assets/images/common/arrow_icon.svg);
      width: 8px;
      height: 12px; }
    .c-form-table .c-form-table__wrap .c-form-table__text a {
      text-decoration: underline;
      font-size: 12px;
      color: #0569b1; }
      @media (max-width: 425px) {
        .c-form-table .c-form-table__wrap .c-form-table__text a {
          display: block; } }

.c-form-table .c-form-table__box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 14px;
  border-top: 1px solid #e6e9ec; }
  .c-form-table .c-form-table__box dl {
    width: 50%;
    display: flex; }
    @media screen and (min-width: 426px) and (max-width: 767px) {
      .c-form-table .c-form-table__box dl {
        width: 100%; } }
    @media (max-width: 425px) {
      .c-form-table .c-form-table__box dl {
        width: 100%; } }
    .c-form-table .c-form-table__box dl dt {
      flex-basis: 160px;
      background: #f9fafc;
      min-height: 52px;
      border-bottom: 1px solid #e6e9ec;
      padding-left: 30px;
      color: #485474;
      font-weight: 600;
      display: flex;
      align-items: center; }
      @media (max-width: 425px) {
        .c-form-table .c-form-table__box dl dt {
          flex-basis: 130px;
          padding-left: 20px; } }
    .c-form-table .c-form-table__box dl dd {
      flex-basis: calc(100% - 160px);
      padding-left: 20px;
      min-height: 52px;
      border-bottom: 1px solid #e6e9ec;
      color: #666;
      display: flex;
      align-items: center; }
      @media (max-width: 425px) {
        .c-form-table .c-form-table__box dl dd {
          flex-basis: calc(100% - 130px); } }
  .c-form-table .c-form-table__box.c-form-table__box-one {
    margin-top: 5px;
    margin-bottom: 0; }
    .c-form-table .c-form-table__box.c-form-table__box-one dl {
      width: 100%; }
    .c-form-table .c-form-table__box.c-form-table__box-one .transferAmount {
      font-weight: 700; }

.c-form-table .c-form-table__text {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  position: relative;
  padding-left: 14px; }
  .c-form-table .c-form-table__text.margin-top-20 {
    margin-top: 20px; }
  .c-form-table .c-form-table__text.arrow-icon::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    background-image: url(/assets/images/common/arrow_icon.svg);
    width: 8px;
    height: 12px; }
  .c-form-table .c-form-table__text a {
    text-decoration: underline;
    font-size: 12px;
    color: #0569b1; }
    @media (max-width: 425px) {
      .c-form-table .c-form-table__text a {
        display: block; } }

.c-list-table .c-list-table__wrap {
  margin-bottom: 20px; }
  .c-list-table .c-list-table__wrap .c-list-table__title {
    color: #32325d;
    font-weight: 600; }
    .c-list-table .c-list-table__wrap .c-list-table__title span {
      font-weight: 400;
      margin-left: 5px; }
  .c-list-table .c-list-table__wrap .c-list-table__box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 30px;
    background: #ffffff;
    box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
    border-radius: 6px; }
    .c-list-table .c-list-table__wrap .c-list-table__box dl {
      box-sizing: border-box;
      width: calc(50% - 15px);
      min-height: 55px;
      border-bottom: 1px dotted #d6d6d6;
      margin-right: 30px;
      margin-bottom: 20px; }
      .c-list-table .c-list-table__wrap .c-list-table__box dl:nth-child(2n) {
        margin-right: 0; }
      @media (max-width: 425px) {
        .c-list-table .c-list-table__wrap .c-list-table__box dl {
          width: 100%;
          margin-right: 0; } }
      .c-list-table .c-list-table__wrap .c-list-table__box dl dt {
        color: #32325d;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px; }
      .c-list-table .c-list-table__wrap .c-list-table__box dl dd {
        color: #666;
        font-size: 16px; }
        .c-list-table .c-list-table__wrap .c-list-table__box dl dd.add-margin-bottom .list {
          margin-bottom: 16px; }
        .c-list-table .c-list-table__wrap .c-list-table__box dl dd .add-margin-bottom__list {
          margin-bottom: 10px; }
        .c-list-table .c-list-table__wrap .c-list-table__box dl dd .area {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          display: inline-block;
          padding-right: 5px;
          padding-left: 5px;
          background: #2dceab;
          margin-right: 5px;
          color: #fff; }
    .c-list-table .c-list-table__wrap .c-list-table__box .no-border {
      border-bottom: none; }
    @media (max-width: 425px) {
      .c-list-table .c-list-table__wrap .c-list-table__box .no-border {
        min-height: 0; } }

@media (max-width: 425px) {
  .c-list-table .c-form-table .c-form-table__box.c-form-table__box-contract dl {
    display: block; }
    .c-list-table .c-form-table .c-form-table__box.c-form-table__box-contract dl dt {
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding-top: unset;
      padding-left: unset; }
    .c-list-table .c-form-table .c-form-table__box.c-form-table__box-contract dl dd {
      padding-left: unset; }
      .c-list-table .c-form-table .c-form-table__box.c-form-table__box-contract dl dd input[type=text] {
        width: 100%;
        max-width: 100%; } }

.c-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 45px; }
  .c-title .c-title__name {
    margin-right: 12px;
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    color: #32325d; }
    .c-title .c-title__name button {
      position: relative; }
      .c-title .c-title__name button img {
        margin-left: 10px; }
      .c-title .c-title__name button .tooltip {
        width: 300px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 10px;
        border-radius: 10px;
        z-index: 100;
        position: absolute;
        top: 45%;
        left: 150%;
        transform: translateY(-50%);
        text-align: initial;
        font-size: 14px;
        font-family: "Open Sans";
        font-weight: 600; }
        @media (max-width: 425px) {
          .c-title .c-title__name button .tooltip {
            top: 50%;
            left: 130%;
            width: 140px; } }
        .c-title .c-title__name button .tooltip::before {
          content: "";
          position: absolute;
          border-style: solid;
          border-width: 5px;
          margin-left: -10px;
          top: 50%;
          left: 0;
          margin-top: -5px;
          border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; }
      .c-title .c-title__name button .tooltip.saving {
        margin-left: initial;
        margin-top: 70px;
        width: 500px; }
        .c-title .c-title__name button .tooltip.saving a {
          color: #08c;
          text-decoration: underline; }
          .c-title .c-title__name button .tooltip.saving a:hover {
            color: #05a;
            text-decoration: none; }
        .c-title .c-title__name button .tooltip.saving::before {
          top: 15%; }
        @media (max-width: 425px) {
          .c-title .c-title__name button .tooltip.saving {
            position: absolute;
            transform: translateX(-50%);
            top: 100%;
            left: 50%;
            margin-top: 10px;
            width: 300px; }
            .c-title .c-title__name button .tooltip.saving::before {
              top: -1.6%;
              left: 53%;
              border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; } }
  .c-title .tooltip {
    width: 400px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    z-index: 100;
    position: absolute;
    transform: translateY(-50%);
    margin-left: 200px;
    margin-top: 60px; }
    @media (max-width: 425px) {
      .c-title .tooltip {
        width: 160px;
        margin-top: 160px; } }
    .c-title .tooltip::before {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 5px;
      margin-left: -5px;
      top: 50%;
      right: 100%;
      margin-top: -5px;
      border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; }
  .c-title .tooltip.electricity-generation {
    margin-left: 320px; }
    @media (max-width: 425px) {
      .c-title .tooltip.electricity-generation {
        transform: translateX(-50%) translateY(-100%);
        /* 左に50%、上に100%移動 */
        top: 820px;
        width: 200px;
        margin-left: 260px; }
        .c-title .tooltip.electricity-generation::before {
          left: 50%;
          top: 120px;
          margin-left: 27px;
          border-color: rgba(0, 0, 0, 0.8) transparent transparent; } }
  .c-title .c-title__button {
    border: 2px solid #2ecfa4;
    border-radius: 100px;
    width: 110px;
    height: 32px;
    color: #2ecfa4;
    font-weight: 600;
    font-size: 12px; }
    .c-title .c-title__button .c-title__button__img {
      margin-right: 10px; }
  .c-title.c-title-style-a {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
    display: block; }
    .c-title.c-title-style-a.c-title-style-b {
      border-bottom: initial; }
    .c-title.c-title-style-a .c-title__name {
      font-size: 28px;
      margin: 0; }
      .c-title.c-title-style-a .c-title__name.c-title__name-important {
        line-height: auto !important; }
    .c-title.c-title-style-a .c-title__text {
      font-size: 14px;
      color: #666;
      margin-top: 20px; }
    .c-title.c-title-style-a .c-title__link {
      width: 134px;
      height: 26px;
      border: 1px solid #2ecfa4;
      font-size: 12px;
      color: #2ecfa4;
      position: absolute;
      top: 8px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center; }
      .c-title.c-title-style-a .c-title__link.c-title__link-arrow::after {
        content: "";
        content: "";
        width: 6px;
        height: 10px;
        display: inline-block;
        background-image: url(/assets/images/common/arrow_icon.svg);
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 5px; }
      .c-title.c-title-style-a .c-title__link:hover {
        opacity: 0.7; }
  .c-title.c-title-style-b {
    text-align: left;
    color: #32325d;
    margin-top: 50px; }
    .c-title.c-title-style-b.c-title-style-b__margin-bottom-20 {
      margin-bottom: 20px; }
    @media (max-width: 425px) {
      .c-title.c-title-style-b {
        margin-top: 41px;
        margin-bottom: 10px; } }
    .c-title.c-title-style-b .c-title__name {
      font-size: 26px;
      color: #32325d;
      display: flex;
      align-items: center; }
      .c-title.c-title-style-b .c-title__name.required:after {
        content: '必須';
        width: 44px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        font-size: 12px;
        margin-left: 1em;
        border-radius: 24px;
        background: #ff0000; }
      @media (max-width: 425px) {
        .c-title.c-title-style-b .c-title__name {
          font-size: 22px;
          line-height: 30px; } }
  .c-title.c-title-style-c {
    margin-bottom: 26px; }
    .c-title.c-title-style-c .c-title__filter_btn {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      border: 2px solid #2ecfa4;
      color: #2ecfa4;
      border-radius: 100px;
      box-sizing: border-box;
      cursor: pointer; }
      .c-title.c-title-style-c .c-title__filter_btn > img {
        margin-right: 12px;
        width: 14px;
        height: 14px; }
      .c-title.c-title-style-c .c-title__filter_btn > p {
        font-size: 12px;
        line-height: 12px;
        font-weight: 600; }

.c-application-title {
  width: 100%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd; }
  .c-application-title.c-application-title__no-padding-bottom {
    padding-bottom: 0px; }
  .c-application-title.c-application-title-style-a {
    border-bottom: initial; }
  .c-application-title .c-application-title__main {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 17px; }
    .c-application-title .c-application-title__main.responsive {
      color: #32325d; }
  .c-application-title .c-application-title__text {
    font-size: 14px;
    color: #666; }

.c-contract-title {
  text-align: center; }
  .c-contract-title .c-contract-title__main {
    font-weight: 600;
    font-size: 28px;
    line-height: 38px;
    color: #333333;
    margin-top: 49px; }
    @media (max-width: 425px) {
      .c-contract-title .c-contract-title__main {
        font-size: 22px;
        line-height: 30px;
        margin-top: 28px; } }
  .c-contract-title .c-contract-title__text {
    font-size: 14px;
    line-height: 19px;
    color: #666666;
    margin-top: 17px;
    margin-bottom: 36px;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 53px; }
    @media (max-width: 425px) {
      .c-contract-title .c-contract-title__text {
        margin-top: 10px;
        margin-bottom: 23px;
        padding-bottom: 28px; } }

.c-cancel-contract-title {
  width: 100%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 30px;
  margin-bottom: 50px;
  border-bottom: 1px solid #ddd; }
  @media (max-width: 425px) {
    .c-cancel-contract-title {
      padding-top: 30px;
      margin-bottom: 30px; } }
  .c-cancel-contract-title .c-cancel-contract-title__main {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 17px; }
    @media (max-width: 425px) {
      .c-cancel-contract-title .c-cancel-contract-title__main {
        font-size: 22px; } }
  .c-cancel-contract-title .c-cancel-contract-title__text {
    font-size: 14px;
    color: #666; }

/* Mobile Styles */
@media (max-width: 425px) {
  .c-title__name {
    font-size: 24px;
    line-height: 33px; }
  .c-title__button {
    width: 104px;
    height: 32px;
    font-size: 12px; }
  .c-application-title {
    padding-top: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd; }
    .c-application-title .c-application-title__main {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 10px; }
      .c-application-title .c-application-title__main.responsive {
        font-size: 26px;
        width: 260px;
        margin: auto; }
    .c-application-title .c-application-title__text {
      font-size: 14px;
      color: #666; }
      .c-application-title .c-application-title__text.responsive {
        margin-top: 30px; } }

.c-questionnaire .c-questionnaire__title {
  color: #32325d;
  font-size: 26px;
  font-weight: 600; }
  @media (max-width: 425px) {
    .c-questionnaire .c-questionnaire__title {
      font-size: 22px;
      margin-bottom: 10px; } }

.c-questionnaire .c-questionnaire__wrap {
  margin: 30px auto;
  padding: 30px;
  box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
  border-radius: 6px; }
  @media (max-width: 425px) {
    .c-questionnaire .c-questionnaire__wrap {
      margin: initial;
      padding: 10px 20px; }
      .c-questionnaire .c-questionnaire__wrap.c-questionnaire__wrap__add-margin {
        margin: 15px auto 20px; } }
  .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__title {
    margin-bottom: 25px;
    align-items: baseline; }
    @media (max-width: 660px) {
      .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__title {
        margin-bottom: 20px;
        display: flex; } }
    .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__title > span {
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      color: #485474;
      margin-right: 10px;
      margin-bottom: 55px; }
      @media (max-width: 660px) {
        .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__title > span {
          margin-bottom: initial; } }
  @media screen and (min-width: 768px) {
    .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content {
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      margin-bottom: 55px; } }
  @media (max-width: 767px) {
    .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content {
      margin-bottom: 30px; } }
  .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content > div {
    display: flex;
    gap: 8px;
    word-break: keep-all;
    padding: 8px 0;
    align-items: center; }
    @media (max-width: 425px) {
      .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content > div {
        margin-left: 10px; } }
    .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content > div .c-questionnaire__wrap__content__checkbox {
      position: relative;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid #2DCE89;
      border-radius: 3px;
      outline: none; }
      .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content > div .c-questionnaire__wrap__content__checkbox::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 14px;
        height: 10px;
        transition: transform 0.2s ease; }
      .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content > div .c-questionnaire__wrap__content__checkbox:checked::before {
        background-image: url(/assets/images/common/check_green.svg);
        fill: #2DCE89; }
  .c-questionnaire .c-questionnaire__wrap .c-questionnaire__wrap__content .c-questionnaire__wrap__content__textarea {
    height: 140px;
    border: 1px solid #DDDDDD;
    max-width: 850px;
    width: 100%; }

/* page */
.p-contract {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: 'Open Sans';
  line-height: normal; }
  @media (max-width: 425px) {
    .p-contract {
      padding: 20px 10px;
      margin-top: 0;
      margin-bottom: 0; } }
  @media (max-width: 800px) {
    .p-contract {
      display: initial; } }
  .p-contract .p-contract__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
  .p-contract.align-items-center {
    align-items: center; }
  .p-contract .p-contract__hachibe-complete {
    display: block;
    margin: 20px auto; }
  .p-contract .p-contract__center-message {
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    text-align: center;
    color: #32325d; }
    @media (max-width: 800px) {
      .p-contract .p-contract__center-message {
        font-size: 23px;
        line-height: 25px; } }
  .p-contract .p-contract__cancel-message {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #666666;
    margin-top: 30px;
    margin-bottom: 100px; }
    @media (max-width: 800px) {
      .p-contract .p-contract__cancel-message {
        margin-bottom: 20px; } }
  .p-contract .p-contract__questionnaire {
    text-align: center;
    margin-bottom: 30px; }
    .p-contract .p-contract__questionnaire a {
      text-decoration: underline;
      color: #0569B1; }
  .p-contract .p-contract__monthly-charge {
    background-color: #f9fafc;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: end;
    padding: 11px 35px;
    margin-bottom: 30px;
    box-sizing: border-box; }
    @media (max-width: 425px) {
      .p-contract .p-contract__monthly-charge {
        text-align: right;
        padding: 20px; } }
    .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__section {
      color: #666;
      font-size: 18px; }
      .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__section::after {
        content: "=";
        margin-left: 20px; }
      @media (max-width: 425px) {
        .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__section {
          width: 100%;
          display: block; } }
    .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__text {
      color: #333;
      font-size: 16px;
      line-height: 53px;
      margin-left: 20px; }
      @media (max-width: 425px) {
        .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__text {
          margin-left: 0; } }
      .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__text span {
        font-size: 16px; }
    .p-contract .p-contract__monthly-charge .p-contract__monthly-charge__total {
      color: #2dce89;
      font-size: 30px;
      font-weight: 600;
      margin-left: 26px; }
  .p-contract .p-contract__frame {
    background-color: #ffffff;
    height: 98px;
    border-radius: 6px;
    box-shadow: 0 0 32px 0 rgba(136, 152, 170, 0.15);
    margin-bottom: 51px; }
    @media (max-width: 800px) {
      .p-contract .p-contract__frame {
        height: auto; } }
    @media (max-width: 425px) {
      .p-contract .p-contract__frame {
        margin-bottom: 20px;
        height: 64px; } }
    .p-contract .p-contract__frame .p-contract__frame__text {
      font-weight: 400;
      font-size: 14px;
      line-height: 19px;
      color: #333333;
      padding: 40px 40px 39px 40px; }
      @media (max-width: 425px) {
        .p-contract .p-contract__frame .p-contract__frame__text {
          padding: 20px 10px 25px 20px; } }
  .p-contract .p-cancellation__considerations-container {
    width: 100%;
    max-width: 930px;
    height: 380px;
    margin-top: 50px;
    background: #FFFFFF;
    border: 1px solid #D2D6DA; }
    @media (max-width: 810px) {
      .p-contract .p-cancellation__considerations-container {
        height: initial; } }
    @media (max-width: 425px) {
      .p-contract .p-cancellation__considerations-container {
        margin-top: 25px; } }
  .p-contract .p-cancellation__considerations-title {
    width: 220px;
    height: 27px;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    color: #333333;
    margin-left: 18px;
    margin-top: 18px;
    margin-bottom: 14px; }
  .p-contract .p-cancellation__considerations-info {
    font-size: 14px;
    color: #666666;
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    margin-left: 25px; }
    .p-contract .p-cancellation__considerations-info a {
      text-decoration: underline;
      color: #0569B1; }
    @media (max-width: 425px) {
      .p-contract .p-cancellation__considerations-info {
        margin-right: 15px; } }
    .p-contract .p-cancellation__considerations-info::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 0;
      background-image: url(/assets/images/common/arrow_icon.svg);
      width: 8px;
      height: 12px; }
  .p-contract .p-contract__caution-message {
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    color: #666666;
    margin-bottom: 10px;
    margin-top: 50px; }
    @media (max-width: 425px) {
      .p-contract .p-contract__caution-message {
        margin-bottom: 0px; } }
  .p-contract .p-contract__wrap__buttun-area {
    margin-top: 95px; }
    @media (max-width: 425px) {
      .p-contract .p-contract__wrap__buttun-area {
        margin-top: 42px; } }
  .p-contract .p-contract__wrap__power-plant-img-area {
    display: flex;
    align-items: center; }
    @media (max-width: 425px) {
      .p-contract .p-contract__wrap__power-plant-img-area {
        flex-flow: column; } }
    .p-contract .p-contract__wrap__power-plant-img-area > img {
      aspect-ratio: 16/9;
      width: 195px;
      height: 110px; }
      @media (max-width: 425px) {
        .p-contract .p-contract__wrap__power-plant-img-area > img {
          flex-flow: column;
          width: 100%;
          height: auto; } }
    .p-contract .p-contract__wrap__power-plant-img-area > p {
      font-size: 24px;
      color: #32325d;
      font-weight: 600;
      margin-left: 30px;
      overflow: overlay; }
      @media (max-width: 425px) {
        .p-contract .p-contract__wrap__power-plant-img-area > p {
          margin-left: 0px;
          text-align: center;
          font-size: 18px; } }
  .p-contract .p-contract__wrap__section-select-area {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 768px) {
      .p-contract .p-contract__wrap__section-select-area {
        display: flex;
        flex-flow: column;
        align-items: center; } }
    .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment {
      width: 300px;
      margin-right: 30px; }
      @media (max-width: 768px) {
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment {
          margin-right: 0; } }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment p {
        color: #fff;
        font-weight: 600;
        font-size: 20px;
        padding: 10px 0;
        text-align: center; }
        @media (max-width: 425px) {
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment p {
            font-size: 16px;
            padding: 7px 0; } }
      @media (max-width: 425px) {
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select {
          margin-bottom: 20px; } }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > p {
        background: #666; }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > div {
        background: #D2D6DA;
        padding: 20px; }
        @media (max-width: 425px) {
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > div {
            padding: 15px; } }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > div .p-contract__wrap__section-select-area__segment__select__custom {
          background: #fff;
          height: 46px;
          width: 260px;
          border-radius: 6px;
          position: relative;
          z-index: 1; }
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > div .p-contract__wrap__section-select-area__segment__select__custom::after {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            right: 10px;
            top: 45%;
            transform: translateY(-50%) rotate(45deg);
            border-bottom: 2px solid #757F99;
            border-right: 2px solid #757F99;
            z-index: -1; }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__select > div select {
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          background: none;
          border: none;
          color: #666;
          font-size: 14px;
          font-weight: 700px;
          line-height: 46px;
          width: 100%;
          height: 100%;
          padding: 0 10px;
          position: relative; }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__selected {
        margin-bottom: 15px;
        padding-bottom: 20px; }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__selected > p {
          background: #DF3758;
          margin-top: 10px; }
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment .p-contract__wrap__section-select-area__segment__selected > p .selected {
            display: inline-block;
            color: #fff;
            font-size: 16px;
            padding: 0;
            margin-left: 5px; }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__segment span {
        font-weight: 600;
        font-size: 20px;
        display: block;
        padding: 4px 8px;
        color: #666; }
    .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section {
      width: calc(100% - 330px); }
      @media (max-width: 768px) {
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section {
          width: 358px; } }
      @media (max-width: 375px) {
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section {
          width: 100%;
          min-width: 300px; } }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section > img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 507px;
        max-height: 169px;
        margin: 0 auto; }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__icon {
        display: flex;
        background: #F5F5F5;
        font-size: 14px;
        color: #666;
        padding: 13px 22px;
        justify-content: space-around;
        margin-top: 16px; }
        @media (max-width: 425px) {
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__icon {
            margin-top: 10px; } }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__icon > div {
          display: flex;
          align-items: center; }
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__icon > div > img {
            width: 24px;
            height: 24px; }
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__icon > div > p {
            margin-left: 10px;
            line-height: 24px; }
      .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display {
        width: 350px;
        display: flex;
        flex-flow: wrap;
        margin: 10px auto 0; }
        @media (max-width: 425px) {
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display {
            margin: 15px auto 0; } }
        @media (max-width: 375px) {
          .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display {
            justify-content: center;
            max-width: 300px; } }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display img, .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display span {
          display: inline-block;
          width: 30px;
          height: 30px;
          margin: 2.5px;
          cursor: pointer; }
          @media (max-width: 375px) {
            .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display img, .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display span {
              width: calc(30 / 355 * 100%);
              height: calc(30 / 355 * 100%);
              margin: calc(2.5 / 355 * 100%); } }
        .p-contract .p-contract__wrap__section-select-area .p-contract__wrap__section-select-area__section .p-contract__wrap__section-select-area__section__display span {
          background: #fff; }
  .p-contract .c-button.top {
    background: #b3b3b3;
    box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15); }

.p-error {
  margin: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 携帯端末用のスタイル */ }
  .p-error .p-error__wrap {
    margin: 60px auto;
    text-align: -webkit-center; }
  .p-error .p-error__hachibe-error {
    display: block;
    margin: 0 auto;
    min-height: 200px; }
  .p-error .p-error__center-message {
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    text-align: center;
    color: #32325D; }
  .p-error .p-error__planchange-message {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #32325D; }
  .p-error .p-error__offer-message {
    margin-top: 60px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    text-align: center;
    color: #32325D; }
  .p-error .p-error__mailaddress {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #32325D; }
  @media (max-width: 425px) {
    .p-error {
      margin: 20px 10px; }
      .p-error .p-error__center-message {
        font-size: 18px;
        line-height: 25px; } }

.p-ppa {
  width: 100%;
  font-family: 'Open Sans';
  background: #fff;
  padding: 30px 10px; }
  @media (max-width: 425px) {
    .p-ppa {
      padding: 25px 10px; } }
  .p-ppa .p-ppa__content {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
    .p-ppa .p-ppa__content .p-ppa__card {
      display: flex;
      justify-content: space-between; }
      .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list {
        background: #ffffff;
        box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
        border-radius: 6px;
        height: 100px;
        width: calc(33.33% - 10px);
        margin-bottom: 15px;
        position: relative; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value {
          font-weight: 700;
          font-size: 24px;
          line-height: 33px;
          color: #525f7f;
          margin: 20px 10px 10px 30px;
          font-family: "Open Sans";
          display: flex;
          align-items: center; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value .p-ppa__card__list__value__button {
            border: 1px solid #525f7f;
            border-radius: 100px;
            font-size: 12px;
            min-width: 44px;
            height: 22px;
            margin-left: 10px;
            padding-right: 10px;
            padding-left: 10px; }
            .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value .p-ppa__card__list__value__button.fix {
              background: rgba(82, 95, 127, 0.8);
              border: 0;
              color: #ffffff; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__title {
          font-family: "Open Sans";
          font-style: normal;
          font-weight: 600;
          font-size: 13px;
          line-height: 18px;
          color: #8898aa;
          margin-left: 30px; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image {
          position: absolute;
          top: 20px;
          right: 20px; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image .p-ppa__card__list__image__item:first-child {
            width: 46px; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image .p-ppa__card__list__image__item.add:first-child {
            width: 48px; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image .p-ppa__card__list__image__item:last-child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); }
    .p-ppa .p-ppa__content .p-ppa__ymselect {
      font-size: 15px;
      font-weight: bold;
      margin-top: 24px;
      display: flex;
      align-items: center; }
      .p-ppa .p-ppa__content .p-ppa__ymselect p {
        display: inline-block; }
      .p-ppa .p-ppa__content .p-ppa__ymselect select {
        display: inline-block;
        width: 172px;
        height: 40px;
        background: #eeefef;
        font-size: 18px;
        text-align: left;
        padding: 0 25px;
        margin-left: 10px;
        border: none;
        border-radius: 5px;
        -webkit-appearance: none;
        appearance: none; }
        .p-ppa .p-ppa__content .p-ppa__ymselect select select::-ms-expand {
          display: none; }
      .p-ppa .p-ppa__content .p-ppa__ymselect .select_yazi {
        position: relative; }
        .p-ppa .p-ppa__content .p-ppa__ymselect .select_yazi::after {
          content: "";
          position: absolute;
          right: 14px;
          top: 18px;
          width: 8px;
          height: 8px;
          border-top: 2px solid #131313;
          border-left: 2px solid #131313;
          transform: translateY(-50%) rotate(-135deg);
          font-size: 20px;
          pointer-events: none; }

@media screen and (min-width: 426px) and (max-width: 820px) {
  .p-ppa {
    padding: 0 10px 30px 10px; }
    .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list {
      min-height: 90px;
      padding: 10px; }
      .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value {
        font-size: 2.6vw;
        flex-direction: column;
        align-items: flex-start;
        margin: auto; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value .p-ppa__card__list__value__button {
          margin-left: 0; }
      .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__title {
        margin-top: 10px;
        margin-left: auto; }
      .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image {
        top: 10px;
        right: 10px; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image .p-ppa__card__list__image__item:first-child, .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image .p-ppa__card__list__image__item.add:first-child {
          width: 40px; } }

/* Mobile Styles */
@media (max-width: 425px) {
  .p-ppa {
    padding: 0 10px 30px 10px; }
    .p-ppa .p-ppa__content {
      width: 100%; }
      .p-ppa .p-ppa__content .p-ppa__card {
        display: block; }
        .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list {
          width: auto; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__value {
            font-size: 24px;
            padding-top: 18px; }
          .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image__item:first-child, .p-ppa .p-ppa__content .p-ppa__card .p-ppa__card__list .p-ppa__card__list__image__item.add:first-child {
            width: 48px; } }

.p-selling-powerplant {
  width: 100%;
  padding: 50px 10px;
  font-family: 'Open Sans';
  line-height: normal;
  background: #fafafa; }
  @media (max-width: 425px) {
    .p-selling-powerplant {
      padding: 20px 10px;
      margin-top: 0;
      margin-bottom: 0; }
      .p-selling-powerplant.padding-0 {
        padding: 0; } }
  .p-selling-powerplant .p-selling-powerplant__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
  .p-selling-powerplant .p-selling-powerplant__top {
    position: relative;
    margin-bottom: 140px; }
    @media (max-width: 425px) {
      .p-selling-powerplant .p-selling-powerplant__top {
        margin-bottom: 70px; } }
    .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__photo {
      position: relative;
      width: 100%;
      min-height: 256px;
      max-height: 360px;
      overflow: hidden;
      border-radius: 20px; }
      @media (max-width: 425px) {
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__photo {
          border-radius: 0; } }
      .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__photo::before {
        content: '';
        display: block;
        padding-top: 50%; }
      .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__photo img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: auto; }
    .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item {
      width: 80%;
      max-width: 600px;
      height: 116px;
      position: absolute;
      left: 50%;
      bottom: -70px;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px; }
      @media screen and (max-width: 768px) {
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item {
          height: auto; } }
      @media screen and (max-width: 425px) {
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item {
          width: 80%; } }
      .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data {
        width: 50%;
        text-align: center;
        padding-right: 23px;
        position: relative; }
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data:last-of-type {
          padding-right: 0; }
          .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data:last-of-type::before {
            height: 100%;
            border-left: 1px solid #d6d6d6;
            position: absolute;
            left: 0;
            top: 0; }
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .title {
          color: #32325d;
          font-size: 18px;
          font-weight: 700; }
          .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .title a {
            color: #2ecfa4; }
          .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .title a:hover {
            text-decoration: underline; }
        .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .data {
          font-size: 35px;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: baseline;
          color: #2dce89; }
          .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .data span {
            color: #525f7f;
            font-size: 16px;
            font-weight: 400;
            margin-left: 5px; }
            @media screen and (max-width: 768px) {
              .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .data span {
                font-size: 10px; } }
          @media screen and (max-width: 768px) {
            .p-selling-powerplant .p-selling-powerplant__top .p-selling-powerplant__top__item .p-selling-powerplant__top__item__data .data {
              font-size: 16px; } }
  .p-selling-powerplant .p-selling-powerplant__wrap--position {
    position: relative; }
    @media screen and (max-width: 768px) {
      .p-selling-powerplant .p-selling-powerplant__wrap--position {
        padding: 20px 10px; } }
  .p-selling-powerplant .p-selling-powerplant__title {
    width: 100%;
    max-width: 540px;
    margin-bottom: 60px; }
    @media screen and (max-width: 425px) {
      .p-selling-powerplant .p-selling-powerplant__title {
        margin-bottom: 30px; } }
    .p-selling-powerplant .p-selling-powerplant__title h2 {
      font-size: 34px;
      font-weight: 600;
      color: #32325d;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 425px) {
        .p-selling-powerplant .p-selling-powerplant__title h2 {
          font-size: 6vw; } }
    .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data {
      margin-top: 5px;
      display: flex;
      align-items: center; }
      .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data .text {
        flex: 1;
        color: #adb5bd;
        font-size: 18px;
        margin-right: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center; }
        .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data .text:first-child {
          flex: 1.2; }
        .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data .text:last-child {
          flex: 3; }
      @media screen and (max-width: 425px) {
        .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data {
          flex-direction: column;
          align-items: start;
          margin-top: 10px; }
          .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data .text {
            margin-bottom: 10px;
            font-size: 14px; } }
      .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data i {
        width: 25px;
        max-height: 24px;
        display: flex;
        flex-shrink: 0;
        margin-right: 5px; }
        @media screen and (max-width: 425px) {
          .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data i {
            width: 20px;
            max-height: 20px; } }
        .p-selling-powerplant .p-selling-powerplant__title .p-selling-powerplant__title__data i img {
          width: 100%; }
  .p-selling-powerplant .p-selling-powerplant__buy {
    max-width: 324px;
    width: 100%;
    padding: 24px;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border-radius: 20px; }
    @media screen and (max-width: 768px) {
      .p-selling-powerplant .p-selling-powerplant__buy {
        max-width: 100%;
        position: unset;
        margin-bottom: 30px; } }
    .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__price {
      font-size: 24px;
      font-weight: 700;
      color: #000;
      margin-bottom: 10px;
      display: flex;
      align-items: baseline; }
      .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__price span {
        font-size: 16px;
        color: #adb5bd;
        margin-left: 5px; }
        .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__price span.text {
          margin-right: 6px;
          margin-left: 0;
          color: #333; }
    .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__btn {
      width: 100%;
      height: 48px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(90deg, #2DCE89 0%, #2DCECC 100%);
      box-shadow: 0px 0px 32px rgba(136, 152, 170, 0.15);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__btn:disabled.sold-out {
        background: grey;
        pointer-events: none; }
      .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__btn:hover {
        opacity: 0.7; }
      .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__btn::before {
        content: '';
        margin-right: 30px;
        width: 22px;
        height: 22px;
        background: url(/assets/images/common/icon_cart.svg) no-repeat; }
    .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__text {
      font-size: 13px;
      margin-top: 10px;
      color: #333;
      padding-left: 14px;
      position: relative; }
      .p-selling-powerplant .p-selling-powerplant__buy .p-selling-powerplant__buy__text::before {
        content: '※';
        position: absolute;
        left: 0; }
  .p-selling-powerplant .p-selling-powerplant__content {
    width: 100%;
    max-width: 540px; }
    @media screen and (max-width: 768px) {
      .p-selling-powerplant .p-selling-powerplant__content {
        max-width: 100%; } }
    .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text {
      margin-bottom: 60px; }
      .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .title {
        font-size: 26px;
        font-weight: 700;
        color: #32325d;
        margin-bottom: 10px; }
      .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .item {
        margin-bottom: 20px;
        display: flex;
        align-items: center; }
        .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .item .item__photo {
          width: 56px;
          height: 56px;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 16px; }
          .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .item .item__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
        .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .item .item__box .item__box__team {
          color: #999; }
        .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text .item .item__box .item__box__name {
          color: #404040; }
      .p-selling-powerplant .p-selling-powerplant__content .p-selling-powerplant__content__text p {
        font-size: 16px;
        line-height: 180%;
        color: #525f7f;
        text-align: justify; }
  .p-selling-powerplant .p-selling-powerplant__content__details {
    margin-bottom: 50px; }
    .p-selling-powerplant .p-selling-powerplant__content__details .title {
      font-size: 26px;
      font-weight: 700;
      color: #32325d;
      margin-bottom: 20px; }
    .p-selling-powerplant .p-selling-powerplant__content__details ul li {
      display: flex;
      font-size: 16px;
      color: #525f7f;
      margin-bottom: 16px; }
      .p-selling-powerplant .p-selling-powerplant__content__details ul li .item__title {
        width: 138px;
        font-weight: 700; }
      .p-selling-powerplant .p-selling-powerplant__content__details ul li .item__content {
        width: calc(100% - 138px);
        font-weight: 400; }
  .p-selling-powerplant .p-selling-powerplant__content__banner {
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    cursor: pointer; }
    .p-selling-powerplant .p-selling-powerplant__content__banner img {
      max-width: 100%;
      max-height: 100%; }
      .p-selling-powerplant .p-selling-powerplant__content__banner img:hover {
        opacity: 0.7; }

.p-contract__hachibe-sold-out {
  display: block;
  margin: 20px auto; }

.p-contract__sold-out-message {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  color: #666666;
  margin-top: 20px; }

.p-saving {
  width: 100%;
  margin-bottom: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: 'Open Sans';
  line-height: normal; }
  @media (max-width: 425px) {
    .p-saving {
      padding: 20px 10px;
      margin-top: 0;
      margin-bottom: 0; } }
  .p-saving .p-saving__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
    .p-saving .p-saving__wrap .p-saving__wrap__tittle {
      font-weight: 600;
      font-size: 22px;
      line-height: 30px;
      color: #32325d;
      margin-top: 45px;
      display: flex;
      align-items: center;
      margin-bottom: 100px;
      flex-wrap: wrap; }
      @media (max-width: 425px) {
        .p-saving .p-saving__wrap .p-saving__wrap__tittle {
          font-size: 18px;
          margin-top: 30px;
          margin-bottom: 30px; } }
      .p-saving .p-saving__wrap .p-saving__wrap__tittle .p-saving__wrap__money {
        font-weight: 700;
        font-size: 48px;
        line-height: 66px;
        color: #2dcecc;
        margin-left: 35px;
        margin-right: 20px; }
        @media (max-width: 456px) {
          .p-saving .p-saving__wrap .p-saving__wrap__tittle .p-saving__wrap__money {
            font-size: 38px;
            margin-right: 0;
            margin-left: 15px; } }
      .p-saving .p-saving__wrap .p-saving__wrap__tittle .p-saving__wrap__tittle__application-btn {
        width: 130px;
        height: 48px;
        background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%);
        border-radius: 100px; }
        @media (max-width: 586px) {
          .p-saving .p-saving__wrap .p-saving__wrap__tittle .p-saving__wrap__tittle__application-btn {
            margin: 10px auto; } }
        .p-saving .p-saving__wrap .p-saving__wrap__tittle .p-saving__wrap__tittle__application-btn a {
          color: #fff;
          font-weight: 600;
          font-size: 16px;
          line-height: 16px; }
    .p-saving .p-saving__wrap .p-saving__wrap__sort {
      text-align: right;
      margin-bottom: 20px;
      display: flex;
      justify-content: right; }
      @media (max-width: 425px) {
        .p-saving .p-saving__wrap .p-saving__wrap__sort {
          margin-bottom: 10px; } }
      .p-saving .p-saving__wrap .p-saving__wrap__sort .sort-button {
        color: var(--text-color-gray, #8898AA);
        font-size: 14px;
        display: flex;
        align-items: center; }
        .p-saving .p-saving__wrap .p-saving__wrap__sort .sort-button .sort-icon {
          background: url("/assets/images/common/arrowupdown_icon.svg") no-repeat center;
          display: flex;
          margin-left: 4px;
          align-items: center;
          height: 14px;
          width: 14px;
          background-size: contain; }
    @media (max-width: 425px) {
      .p-saving .p-saving__wrap .p-saving__wrap__table {
        font-size: 22px; } }
    .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box {
      border-top: 1px solid #e9ecef; }
      .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr:first-child {
        background-color: #F6FCF6;
        height: 45px;
        color: var(--text-color-gray, #8898AA);
        font-weight: 600;
        letter-spacing: 1.04px;
        font-size: 13px; }
      .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr th {
        vertical-align: middle; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr th:first-child {
          width: 185px;
          border-right: 1px solid #e9ecef; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr th:nth-child(2) {
          width: 440px; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr th:nth-child(3) {
          width: 310px;
          border-left: 1px solid #e9ecef; }
      .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr td {
        border: 1px solid #e9ecef;
        height: 55px;
        vertical-align: middle;
        color: var(--text-color-dark-blue, #525F7F);
        text-align: center;
        font-size: 13px;
        font-weight: 700; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr td:first-child {
          width: 185px;
          border-left: none; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr td:nth-child(2) {
          width: 440px; }
        .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr td:nth-child(3) {
          width: 310px;
          border-right: none; }
          @media (max-width: 425px) {
            .p-saving .p-saving__wrap .p-saving__wrap__table .form-table__box table tr td:nth-child(3) {
              text-align: right;
              padding-right: 25px; } }
    .p-saving .p-saving__wrap .p-saving__wrap__title {
      width: 100%;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 30px;
      margin-top: 50px;
      border-top: 1px solid #ddd; }
      .p-saving .p-saving__wrap .p-saving__wrap__title .p-saving__wrap__title__text {
        color: #333;
        font-size: 14px; }
        @media (max-width: 425px) {
          .p-saving .p-saving__wrap .p-saving__wrap__title .p-saving__wrap__title__text {
            width: 80%;
            margin: auto; } }

.p-transfer-request {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: 'Open Sans';
  line-height: normal; }
  @media (max-width: 800px) {
    .p-transfer-request {
      display: initial; } }
  .p-transfer-request .p-transfer-request__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
  .p-transfer-request .p-transfer-request__hachibe-complete {
    display: block;
    margin: 20px auto; }
  .p-transfer-request .p-transfer-request__center-message {
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    text-align: center;
    color: #32325D; }
    @media (max-width: 800px) {
      .p-transfer-request .p-transfer-request__center-message {
        font-size: 23px;
        line-height: 25px; } }
  .p-transfer-request .p-transfer-request__sub-message {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #666666;
    margin-top: 30px;
    margin-bottom: 100px; }
    @media (max-width: 800px) {
      .p-transfer-request .p-transfer-request__sub-message {
        margin-bottom: 20px; } }

/* Mobile Styles */
@media (max-width: 425px) {
  .p-transfer-request {
    padding: 20px 10px;
    margin-top: 0;
    margin-bottom: 0; } }

.p-cancellation {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: 'Open Sans';
  line-height: normal; }
  .p-cancellation .p-cancellation__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
    .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-container {
      width: 100%;
      max-width: 930px;
      height: 380px;
      background: #FFFFFF;
      border: 1px solid #D2D6DA; }
      @media (max-width: 810px) {
        .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-container {
          height: initial; } }
    .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-title {
      width: 220px;
      height: 27px;
      font-weight: 600;
      font-size: 20px;
      line-height: 27px;
      color: #333333;
      margin-left: 18px;
      margin-top: 18px;
      margin-bottom: 14px; }
    .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-info {
      font-size: 14px;
      color: #666666;
      margin-bottom: 10px;
      position: relative;
      padding-left: 15px;
      margin-left: 25px; }
      .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-info a {
        text-decoration: underline;
        color: #0569B1; }
      @media (max-width: 425px) {
        .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-info {
          margin-right: 15px; } }
      .p-cancellation .p-cancellation__wrap .p-cancellation__considerations-info::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        background-image: url(/assets/images/common/arrow_icon.svg);
        width: 8px;
        height: 12px; }

.p-selling-power-plant-list {
  width: 100%;
  font-family: 'Open Sans';
  background: #fff;
  padding: 30px 10px; }
  @media (max-width: 425px) {
    .p-selling-power-plant-list {
      padding: 25px 10px; } }
  .p-selling-power-plant-list .p-selling-power-plant-list__content {
    width: 100%;
    max-width: 930px;
    margin: 20px auto;
    /* Sort Area */ }
    .p-selling-power-plant-list .p-selling-power-plant-list__content .p-selling-power-plant-list__content__sort-area {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 23px; }
      .p-selling-power-plant-list .p-selling-power-plant-list__content .p-selling-power-plant-list__content__sort-area p {
        font-size: 14px;
        line-height: 19px;
        color: #8898aa; }
      .p-selling-power-plant-list .p-selling-power-plant-list__content .p-selling-power-plant-list__content__sort-area img {
        margin-left: 16px;
        width: 9px;
        height: 8px; }

.p-owned-powerplant-detail {
  width: 100%;
  padding: 50px 10px;
  font-family: 'Open Sans';
  line-height: normal;
  background: #fafafa; }
  @media (max-width: 425px) {
    .p-owned-powerplant-detail {
      padding: 20px 10px;
      margin-top: 0;
      margin-bottom: 0; }
      .p-owned-powerplant-detail.padding-0 {
        padding: 0; } }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__wrap {
    width: 100%;
    max-width: 930px;
    margin: 0 auto; }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__top {
    position: relative;
    margin-bottom: 140px; }
    @media (max-width: 425px) {
      .p-owned-powerplant-detail .p-owned-powerplant-detail__top {
        margin-bottom: 70px; } }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__photo {
      position: relative;
      width: 100%;
      min-height: 256px;
      max-height: 360px;
      overflow: hidden;
      border-radius: 20px; }
      @media (max-width: 425px) {
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__photo {
          border-radius: 0; } }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__photo::before {
        content: '';
        display: block;
        padding-top: 50%; }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__photo img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: auto; }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item {
      width: 100%;
      max-width: 600px;
      height: 116px;
      position: absolute;
      left: 50%;
      bottom: -70px;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px; }
      @media screen and (max-width: 768px) {
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item {
          height: auto; } }
      @media screen and (max-width: 425px) {
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item {
          width: 90%; } }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data {
        width: 50%;
        text-align: center;
        padding-right: 23px;
        position: relative; }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data:last-of-type {
          padding-left: 23px;
          padding-right: 0; }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data:last-of-type::before {
            content: '';
            height: 100%;
            border-left: 1px solid #d6d6d6;
            position: absolute;
            left: 0;
            top: 0; }
          @media screen and (max-width: 360px) {
            .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data:last-of-type {
              padding-left: 10px; } }
        @media screen and (max-width: 360px) {
          .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data {
            padding-right: 10px; } }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .title {
          color: #32325d;
          font-size: 12px;
          font-weight: 700; }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .title a {
            color: #2ecfa4; }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .title a:hover {
            text-decoration: underline; }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .data {
          font-size: 30px;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: baseline;
          color: #2dce89;
          margin-left: 6px; }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .data span {
            color: #525f7f;
            font-size: 16px;
            font-weight: 400;
            margin-left: 5px; }
            @media screen and (max-width: 768px) {
              .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .data span {
                font-size: 2vw; } }
          @media screen and (max-width: 768px) {
            .p-owned-powerplant-detail .p-owned-powerplant-detail__top .p-owned-powerplant-detail__top__item .p-owned-powerplant-detail__top__item__data .data {
              font-size: 3vw; } }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__wrap--position {
    position: relative; }
    @media screen and (max-width: 768px) {
      .p-owned-powerplant-detail .p-owned-powerplant-detail__wrap--position {
        padding: 20px 10px; } }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__title {
    width: 100%;
    margin-bottom: 60px; }
    @media screen and (max-width: 425px) {
      .p-owned-powerplant-detail .p-owned-powerplant-detail__title {
        margin-bottom: 30px; } }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__title h2 {
      font-size: 34px;
      font-weight: 600;
      color: #32325d;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 425px) {
        .p-owned-powerplant-detail .p-owned-powerplant-detail__title h2 {
          font-size: 6vw; } }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data {
      margin-top: 5px;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 425px) {
        .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data {
          flex-direction: column;
          align-items: start;
          margin-top: 10px; } }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data .text {
        color: #adb5bd;
        font-size: 18px;
        margin-right: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center; }
        @media screen and (max-width: 425px) {
          .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data .text {
            margin-bottom: 10px;
            font-size: 14px; } }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data .text i {
          width: 25px;
          max-height: 24px;
          display: flex;
          flex-shrink: 0;
          margin-right: 5px; }
          @media screen and (max-width: 425px) {
            .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data .text i {
              width: 20px;
              max-height: 20px; } }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__title .p-owned-powerplant-detail__title__data .text i img {
            width: 100%; }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__content {
    width: 100%;
    max-width: 540px; }
    @media screen and (max-width: 768px) {
      .p-owned-powerplant-detail .p-owned-powerplant-detail__content {
        max-width: 100%; } }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text {
      margin-bottom: 60px; }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .title {
        font-size: 26px;
        font-weight: 700;
        color: #32325d;
        margin-bottom: 10px; }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .item {
        margin-bottom: 20px;
        display: flex;
        align-items: center; }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .item .item__photo {
          width: 56px;
          height: 56px;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 16px; }
          .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .item .item__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .item .item__box .item__box__team {
          color: #999; }
        .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text .item .item__box .item__box__name {
          color: #404040; }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__content .p-owned-powerplant-detail__content__text p {
        font-size: 16px;
        line-height: 180%;
        color: #525f7f;
        text-align: justify; }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__content__details .title {
    font-size: 26px;
    font-weight: 700;
    color: #32325d;
    margin-bottom: 20px; }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__content__details ul li {
    display: flex;
    font-size: 16px;
    color: #525f7f;
    margin-bottom: 16px; }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__content__details ul li .item__title {
      width: 138px;
      font-weight: 700; }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__content__details ul li .item__content {
      width: calc(100% - 138px);
      font-weight: 400; }
  .p-owned-powerplant-detail .p-owned-powerplant-detail__content__banner {
    width: 100%;
    margin-top: 40px;
    background-color: #e4e4e4;
    border-radius: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center; }
    .p-owned-powerplant-detail .p-owned-powerplant-detail__content__banner p {
      font-size: 24px;
      font-weight: 600; }
      .p-owned-powerplant-detail .p-owned-powerplant-detail__content__banner p:first-child {
        font-size: 16px;
        margin-bottom: 20px; }

/* layout */
#top_main .top_head .left a {
  width: 100%;
  max-width: 218px; }
  #top_main .top_head .left a .logo {
    width: 100%; }
    @media screen and (max-width: 767px) {
      #top_main .top_head .left a .logo {
        width: 210px; } }

@media screen and (max-width: 767px) {
  .md-global-menu header {
    width: 100%;
    height: 120px;
    transition: all 0.7s ease-in-out; }
    .md-global-menu header .left {
      float: none;
      margin: auto;
      position: unset;
      z-index: 100;
      text-align: center;
      transform: unset;
      display: block;
      width: 100%;
      height: 100%; }
      .md-global-menu header .left a {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .md-global-menu header .left a .logo {
          width: 210px;
          margin: auto;
          display: block;
          transform: translate(0, 0); }
      .md-global-menu header .left .member {
        margin-left: 0;
        position: absolute;
        bottom: 5px;
        left: 12px; }
        .md-global-menu header .left .member .member_name {
          height: auto;
          position: absolute;
          top: auto;
          bottom: 5px;
          white-space: nowrap;
          margin-left: 0; }
  .md-global-menu .menu_wrap {
    padding-top: 160px; }
  .md-global-menu.md-menu-open header {
    height: 160px;
    transition: all 0.7s ease-in-out; } }

/* project */
.p-top__content__myData__logo {
  width: 120px;
  display: none;
  text-align: center;
  margin: 0 auto 20px; }
  @media screen and (max-width: 960px) {
    .p-top__content__myData__logo {
      display: block; } }
  .p-top__content__myData__logo img {
    width: 100%; }

.p-top__content__item__logo {
  width: 120px;
  margin-left: 5px;
  margin-bottom: 15px;
  display: inline-block; }
  @media screen and (max-width: 960px) {
    .p-top__content__item__logo {
      display: none; } }
  .p-top__content__item__logo img {
    width: 100%; }

.p-top__service {
  width: 100%;
  padding-top: 50px; }
  .p-top__service .p-top__service__content {
    max-width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 1000px) {
      .p-top__service .p-top__service__content {
        padding: 0 16px; } }
    .p-top__service .p-top__service__content h2 {
      font-size: 40px;
      font-weight: bold;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 30px;
      font-family: dnp-shuei-gothic-gin-std,sans-serif; }
      @media screen and (max-width: 767px) {
        .p-top__service .p-top__service__content h2 {
          font-size: 24px; } }
      .p-top__service .p-top__service__content h2 svg {
        width: auto; }
        @media screen and (max-width: 767px) {
          .p-top__service .p-top__service__content h2 svg {
            height: 34px; } }
        .p-top__service .p-top__service__content h2 svg path {
          fill: #00afeb;
          stroke: #00afeb; }
      .p-top__service .p-top__service__content h2 .decoIconL {
        margin-right: 20px; }
      .p-top__service .p-top__service__content h2 .decoIconR {
        margin-left: 20px; }
    .p-top__service .p-top__service__content .p-top__service__lead {
      font-size: 30px;
      font-weight: bold;
      font-family: dnp-shuei-gothic-gin-std,sans-serif;
      line-height: 140%;
      text-align: center;
      letter-spacing: .04em;
      color: #160403; }
      @media screen and (max-width: 767px) {
        .p-top__service .p-top__service__content .p-top__service__lead {
          font-size: 18px; } }
    .p-top__service .p-top__service__content .p-top__service__box {
      position: relative;
      padding: 60px;
      max-width: 1000px;
      margin: -28px auto 48px; }
      @media screen and (max-width: 767px) {
        .p-top__service .p-top__service__content .p-top__service__box {
          padding: 68px 24px 32px;
          margin-bottom: 20px; } }
      .p-top__service .p-top__service__content .p-top__service__box-deco .icon {
        position: absolute;
        width: 60px;
        height: 60px; }
        @media screen and (max-width: 767px) {
          .p-top__service .p-top__service__content .p-top__service__box-deco .icon {
            width: 28px;
            height: 28px; }
            .p-top__service .p-top__service__content .p-top__service__box-deco .icon img {
              width: 100%; } }
        .p-top__service .p-top__service__content .p-top__service__box-deco .icon.-lt {
          top: 0;
          left: 0; }
        .p-top__service .p-top__service__content .p-top__service__box-deco .icon.-lb {
          left: 0;
          bottom: -2px; }
        .p-top__service .p-top__service__content .p-top__service__box-deco .icon.-rt {
          right: 0;
          top: 0; }
        .p-top__service .p-top__service__content .p-top__service__box-deco .icon.-rb {
          right: 0;
          bottom: -2px; }
    .p-top__service .p-top__service__content .p-top__service__list {
      display: flex;
      justify-content: center;
      gap: 24px; }
      @media screen and (max-width: 767px) {
        .p-top__service .p-top__service__content .p-top__service__list {
          flex-direction: column; } }
      .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item {
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        padding: 16px 16px 60px;
        position: relative;
        flex: 1; }
        @media screen and (max-width: 767px) {
          .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item {
            width: 100%;
            max-width: 400px;
            padding: 16px 24px;
            margin: 0 auto; } }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item:hover {
          transition: all .3s ease-in-out;
          opacity: 0.7; }
          .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item:hover .p-top__service__item-inner .p-top__service__item-img img {
            transform: scale(1.1); }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item.minden {
          background-color: #32b432; }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item.tadori {
          background-color: #ffb301; }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item.other {
          background-color: #ebebeb; }
          .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item.other .p-top__service__item-ttl {
            color: #000; }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item.youtube {
          background-color: #ff0000; }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-img {
          margin-bottom: 16px;
          overflow: hidden;
          border-radius: 10px;
          background: #fff; }
          .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-img img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            vertical-align: bottom;
            transition: all .3s ease-in-out; }
          @media screen and (max-width: 767px) {
            .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-img img {
              object-fit: contain; } }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-ttl {
          font-size: 16px;
          font-weight: bold;
          line-height: 150%;
          letter-spacing: .04em;
          margin-bottom: 18px;
          text-align: center; }
        .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-icon {
          position: absolute;
          right: 16px;
          bottom: 10px;
          width: 20px;
          height: 20px;
          transition: all .3s ease-in-out; }
          .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-icon i {
            width: 20px;
            height: 20px;
            display: inline-block;
            position: relative; }
            .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-icon i::before {
              content: '';
              width: 20px;
              height: 20px;
              border-radius: 8px 2px;
              background-color: #160403;
              position: absolute; }
            .p-top__service .p-top__service__content .p-top__service__list .p-top__service__item .p-top__service__item-inner .p-top__service__item-icon i::after {
              content: '';
              margin: auto;
              position: absolute;
              top: 6px;
              right: 8px;
              width: 6px;
              height: 6px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              transform: rotate(45deg); }

.p-top__visualBannerSlider {
  width: 100%;
  max-width: 380px;
  position: relative;
  margin: 20px auto;
  border-radius: 10px; }
  @media screen and (min-width: 768px) and (max-width: 960px) {
    .p-top__visualBannerSlider {
      margin: 20px 0; } }
  .p-top__visualBannerSlider .slick-slider .slick-dots {
    position: absolute;
    bottom: -14px;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
    .p-top__visualBannerSlider .slick-slider .slick-dots li {
      width: 10px;
      height: 10px;
      margin: 0 6px; }
      .p-top__visualBannerSlider .slick-slider .slick-dots li button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: gray; }
        .p-top__visualBannerSlider .slick-slider .slick-dots li button:before {
          display: none; }
      .p-top__visualBannerSlider .slick-slider .slick-dots li.slick-active button {
        background-color: white; }
  .p-top__visualBannerSlider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    z-index: 2; }
    .p-top__visualBannerSlider .slick-arrow.slick-next {
      right: 5px; }
    .p-top__visualBannerSlider .slick-arrow.slick-prev {
      left: 5px; }
    .p-top__visualBannerSlider .slick-arrow img {
      width: 100%;
      height: 100%; }
    .p-top__visualBannerSlider .slick-arrow:before {
      display: none; }
  .p-top__visualBannerSlider .p-top__visualBannerSlider__item {
    overflow: hidden;
    border-radius: 10px;
    outline: none; }
    .p-top__visualBannerSlider .p-top__visualBannerSlider__item img {
      width: 100%;
      max-width: 380px;
      object-fit: cover;
      outline: none; }
  .p-top__visualBannerSlider .slick-slide:focus {
    outline: none; }

.md-pickup-carousel {
  padding-bottom: 30px;
  overflow: hidden; }
  .md-pickup-carousel .producer_contents h2,
  .md-pickup-carousel .consumer_contents h2 {
    font-size: 40px;
    font-weight: bold;
    font-family: dnp-shuei-gothic-gin-std,sans-serif;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center; }
  .md-pickup-carousel .producer_contents .producer_contents__h2__icon.-l,
  .md-pickup-carousel .consumer_contents .producer_contents__h2__icon.-l {
    margin-right: 20px; }
  .md-pickup-carousel .producer_contents .producer_contents__h2__icon.-r,
  .md-pickup-carousel .consumer_contents .producer_contents__h2__icon.-r {
    margin-left: 20px; }
  .md-pickup-carousel .producer_contents .producer_contents__h2__icon svg,
  .md-pickup-carousel .consumer_contents .producer_contents__h2__icon svg {
    width: auto; }
    @media screen and (max-width: 767px) {
      .md-pickup-carousel .producer_contents .producer_contents__h2__icon svg,
      .md-pickup-carousel .consumer_contents .producer_contents__h2__icon svg {
        height: 34px; } }
  .md-pickup-carousel .producer_contents .pickup_wrap,
  .md-pickup-carousel .consumer_contents .pickup_wrap {
    width: 1000px;
    margin: 0 auto; }
    .md-pickup-carousel .producer_contents .pickup_wrap .pickup_p .slick-list a img,
    .md-pickup-carousel .consumer_contents .pickup_wrap .pickup_p .slick-list a img {
      border-radius: 5px; }
    .md-pickup-carousel .producer_contents .pickup_wrap .pickup_p .slick-list a .pickup_text,
    .md-pickup-carousel .consumer_contents .pickup_wrap .pickup_p .slick-list a .pickup_text {
      color: #333; }
  .md-pickup-carousel .md-pickup-carousel__btn {
    width: 100%; }
    .md-pickup-carousel .md-pickup-carousel__btn .md-pickup-carousel__btn__link {
      width: 240px;
      height: 60px;
      border: 3px solid #160403;
      font-size: 16px;
      font-weight: bold;
      background-color: #fff;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      position: relative;
      padding-right: 10px; }
      .md-pickup-carousel .md-pickup-carousel__btn .md-pickup-carousel__btn__link::before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 8px 2px;
        background-color: #160403;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%); }
      .md-pickup-carousel .md-pickup-carousel__btn .md-pickup-carousel__btn__link::after {
        content: '';
        margin: auto;
        position: absolute;
        top: 49%;
        right: 30px;
        width: 6px;
        height: 6px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%); }
      .md-pickup-carousel .md-pickup-carousel__btn .md-pickup-carousel__btn__link:hover {
        opacity: 0.7; }

#top_nav {
  margin: 46px auto 0;
  padding-bottom: 80px;
  width: 100%;
  height: auto;
  font-size: 0;
  line-height: 44px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-right: 10px;
  padding-left: 10px; }
  @media screen and (max-width: 767px) {
    #top_nav {
      flex-wrap: wrap;
      padding-bottom: 30px; } }
  #top_nav a {
    width: 100%;
    max-width: 184px;
    display: inline-block;
    color: #000;
    font-size: 16px;
    border: 4px solid #f0f0f0;
    border-radius: 20px;
    transition: all .3s ease-in-out; }
    @media screen and (max-width: 767px) {
      #top_nav a {
        width: calc(50% - 10px); } }
    #top_nav a:hover {
      border: 4px solid #999; }
    #top_nav a div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 20px;
      padding-bottom: 10px;
      font-size: 14px; }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        #top_nav a div {
          width: 100%;
          min-width: 110px;
          max-width: 184px; } }
      #top_nav a div img {
        vertical-align: middle; }

.c-top__btn {
  width: 100%; }
  .c-top__btn .c-top__btn__link {
    width: 240px;
    height: 60px;
    border: 3px solid #160403;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: relative;
    padding-right: 10px; }
    .c-top__btn .c-top__btn__link::before {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 8px 2px;
      background-color: #160403;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%); }
    .c-top__btn .c-top__btn__link::after {
      content: '';
      margin: auto;
      position: absolute;
      top: 49%;
      right: 30px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(45deg) translateY(-50%); }
    .c-top__btn .c-top__btn__link:hover {
      opacity: 0.7; }

.u-only-sp {
  display: none; }
  @media screen and (max-width: 1024px) {
    .u-only-sp {
      display: block; } }

@media screen and (max-width: 767px) {
  #producer .pickup_p .slick-current a .pickup_text,
  #consumer .pickup_p .slick-current a .pickup_text {
    opacity: 1; } }

.slick-next:before,
.slick-prev:before {
  display: none; }

/* credit-card */
#credit_card .credit_container,
#complete .credit_container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center; }

#credit_card .wrap,
#complete .wrap {
  background-color: #fff;
  max-width: 800px;
  width: 100%;
  padding: unset;
  margin: unset; }
  #credit_card .wrap .p-credit,
  #complete .wrap .p-credit {
    width: 100%; }
    #credit_card .wrap .p-credit .p-credit__title,
    #complete .wrap .p-credit .p-credit__title {
      color: #32325d;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #credit_card .wrap .p-credit .p-credit__title,
        #complete .wrap .p-credit .p-credit__title {
          font-size: 20px; } }
    #credit_card .wrap .p-credit .p-credit__setting,
    #complete .wrap .p-credit .p-credit__setting {
      text-align: center;
      padding: 20px 0; }
    #credit_card .wrap .p-credit .p-credit__button,
    #complete .wrap .p-credit .p-credit__button {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 40px; }
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--selected,
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--disabled,
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--register,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--selected,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--disabled,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--register {
        max-width: 300px;
        width: 100%;
        height: 42px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        border-radius: 100px;
        position: relative;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center; }
        @media screen and (min-width: 640px) {
          #credit_card .wrap .p-credit .p-credit__button .p-credit__button--selected:hover,
          #credit_card .wrap .p-credit .p-credit__button .p-credit__button--disabled:hover,
          #credit_card .wrap .p-credit .p-credit__button .p-credit__button--register:hover,
          #complete .wrap .p-credit .p-credit__button .p-credit__button--selected:hover,
          #complete .wrap .p-credit .p-credit__button .p-credit__button--disabled:hover,
          #complete .wrap .p-credit .p-credit__button .p-credit__button--register:hover {
            opacity: 0.7; } }
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--selected,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--selected {
        background: linear-gradient(90deg, #11cdef 0%, #1171ef 100%); }
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--disabled,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--disabled {
        background: #a6a6a6;
        opacity: 0.5;
        color: #000; }
      #credit_card .wrap .p-credit .p-credit__button .p-credit__button--register,
      #complete .wrap .p-credit .p-credit__button .p-credit__button--register {
        background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%);
        gap: 10px; }
        #credit_card .wrap .p-credit .p-credit__button .p-credit__button--register span,
        #complete .wrap .p-credit .p-credit__button .p-credit__button--register span {
          width: 18px;
          height: 18px; }
    #credit_card .wrap .p-credit .p-credit__contract h2,
    #complete .wrap .p-credit .p-credit__contract h2 {
      font-size: 18px;
      font-weight: 700; }
    #credit_card .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item,
    #complete .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item {
      display: flex;
      margin-bottom: 10px; }
      #credit_card .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item dt,
      #complete .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item dt {
        min-width: 80px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.6; }
      #credit_card .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item dd,
      #complete .wrap .p-credit .p-credit__contract .p-credit__contract__detail .p-credit__contract__detail__item dd {
        font-size: 16px;
        line-height: 1.6; }
    #credit_card .wrap .p-credit .p-credit__box,
    #complete .wrap .p-credit .p-credit__box {
      border: 1px solid #d2d6da;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 50px; }
      @media screen and (max-width: 767px) {
        #credit_card .wrap .p-credit .p-credit__box,
        #complete .wrap .p-credit .p-credit__box {
          margin-bottom: 20px;
          padding: 20px 10px; } }
      #credit_card .wrap .p-credit .p-credit__box .p-credit__box__title,
      #complete .wrap .p-credit .p-credit__box .p-credit__box__title {
        font-size: 20px;
        font-weight: bold; }
        @media screen and (max-width: 767px) {
          #credit_card .wrap .p-credit .p-credit__box .p-credit__box__title,
          #complete .wrap .p-credit .p-credit__box .p-credit__box__title {
            font-size: 16px; } }
      #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list,
      #complete .wrap .p-credit .p-credit__box .p-credit__box__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 22px; }
        #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item,
        #complete .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item {
          font-size: 14px;
          color: #666;
          position: relative;
          text-align: left; }
          @media screen and (max-width: 767px) {
            #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item,
            #complete .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item {
              line-height: normal; } }
          #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item::before,
          #complete .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item::before {
            content: "";
            width: 8px;
            height: 12px;
            background-image: url(/assets/images/common/arrow_icon.svg);
            background-repeat: no-repeat;
            background-size: cover;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: -12px;
            transform: translateY(-50%); }
            @media screen and (max-width: 767px) {
              #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item::before,
              #complete .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item::before {
                top: 3px;
                transform: unset; } }
          #credit_card .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item span,
          #complete .wrap .p-credit .p-credit__box .p-credit__box__list .p-credit__box__list__item span {
            color: #ff0000;
            line-height: unset; }
      #credit_card .wrap .p-credit .p-credit__box .p-credit__box__img,
      #complete .wrap .p-credit .p-credit__box .p-credit__box__img {
        max-width: 400px; }
        #credit_card .wrap .p-credit .p-credit__box .p-credit__box__img img,
        #complete .wrap .p-credit .p-credit__box .p-credit__box__img img {
          width: 100%; }
    #credit_card .wrap .p-credit .p-credit__form,
    #complete .wrap .p-credit .p-credit__form {
      width: 100%; }
      #credit_card .wrap .p-credit .p-credit__form fieldset,
      #complete .wrap .p-credit .p-credit__form fieldset {
        display: flex;
        flex-direction: column;
        gap: 30px; }
        @media screen and (max-width: 767px) {
          #credit_card .wrap .p-credit .p-credit__form fieldset,
          #complete .wrap .p-credit .p-credit__form fieldset {
            gap: 20px; } }
        #credit_card .wrap .p-credit .p-credit__form fieldset dl,
        #complete .wrap .p-credit .p-credit__form fieldset dl {
          display: flex; }
          @media screen and (max-width: 767px) {
            #credit_card .wrap .p-credit .p-credit__form fieldset dl,
            #complete .wrap .p-credit .p-credit__form fieldset dl {
              flex-direction: column; } }
          #credit_card .wrap .p-credit .p-credit__form fieldset dl dt,
          #complete .wrap .p-credit .p-credit__form fieldset dl dt {
            font-size: 14px;
            font-weight: bold;
            color: #485474;
            max-width: 180px;
            width: 100%;
            flex-shrink: 0;
            margin-top: 15px; }
            @media screen and (max-width: 767px) {
              #credit_card .wrap .p-credit .p-credit__form fieldset dl dt,
              #complete .wrap .p-credit .p-credit__form fieldset dl dt {
                width: 100%;
                margin-top: 0;
                margin-bottom: 5px;
                text-align: left; } }
          #credit_card .wrap .p-credit .p-credit__form fieldset dl dd,
          #complete .wrap .p-credit .p-credit__form fieldset dl dd {
            flex-grow: 1;
            position: relative; }
            #credit_card .wrap .p-credit .p-credit__form fieldset dl dd input,
            #complete .wrap .p-credit .p-credit__form fieldset dl dd input {
              width: 100%;
              height: 40px;
              border: 1px solid #d2d6da;
              border-radius: 6px;
              padding: 0 10px; }
            #credit_card .wrap .p-credit .p-credit__form fieldset dl dd p,
            #complete .wrap .p-credit .p-credit__form fieldset dl dd p {
              font-size: 12px;
              margin-top: 2px;
              color: #7e7e7e;
              text-align: left; }
            #credit_card .wrap .p-credit .p-credit__form fieldset dl dd .p-credit__form__code,
            #complete .wrap .p-credit .p-credit__form fieldset dl dd .p-credit__form__code {
              display: flex;
              justify-content: space-between;
              gap: 20px;
              margin-top: 30px; }
              @media screen and (max-width: 767px) {
                #credit_card .wrap .p-credit .p-credit__form fieldset dl dd .p-credit__form__code div img,
                #complete .wrap .p-credit .p-credit__form fieldset dl dd .p-credit__form__code div img {
                  width: 100%; } }
            #credit_card .wrap .p-credit .p-credit__form fieldset dl dd .error,
            #complete .wrap .p-credit .p-credit__form fieldset dl dd .error {
              position: absolute;
              top: 100%;
              top: 47px;
              border: solid 1px red;
              background: #fff;
              z-index: 10;
              padding: 5px 10px;
              font-size: 13px;
              height: auto;
              line-height: 1;
              left: 0;
              display: none;
              color: red;
              font-weight: bold; }
              #credit_card .wrap .p-credit .p-credit__form fieldset dl dd .error::before,
              #complete .wrap .p-credit .p-credit__form fieldset dl dd .error::before {
                content: "";
                position: absolute;
                border-top: solid 1px red;
                border-left: solid 1px red;
                top: -6px;
                left: 20px;
                background: #fff;
                width: 10px;
                height: 10px;
                transform: rotate(45deg);
                z-index: -1; }
              #credit_card .wrap .p-credit .p-credit__form fieldset dl dd .error.show,
              #complete .wrap .p-credit .p-credit__form fieldset dl dd .error.show {
                display: block; }
      #credit_card .wrap .p-credit .p-credit__form .c-agreement .error,
      #complete .wrap .p-credit .p-credit__form .c-agreement .error {
        top: 100%;
        top: 47px;
        margin-top: 10px;
        z-index: 10;
        padding: 5px 10px;
        font-size: 13px;
        height: auto;
        left: 0;
        display: none;
        color: red;
        font-weight: bold; }
        #credit_card .wrap .p-credit .p-credit__form .c-agreement .error.show,
        #complete .wrap .p-credit .p-credit__form .c-agreement .error.show {
          display: block; }
    #credit_card .wrap .p-credit .p-credit__confirm,
    #complete .wrap .p-credit .p-credit__confirm {
      display: flex;
      align-items: center;
      padding: 20px;
      gap: 20px;
      border-radius: 6px;
      box-shadow: 0px 0px 32px 0px rgba(136, 152, 170, 0.15); }
      @media screen and (max-width: 767px) {
        #credit_card .wrap .p-credit .p-credit__confirm,
        #complete .wrap .p-credit .p-credit__confirm {
          flex-direction: column;
          gap: 40px; } }
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__card,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__card {
        max-width: 256px;
        width: 100%;
        height: 150px;
        border-radius: 10px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(90deg, #2dce89 0%, #2dcecc 100%);
        flex-shrink: 0; }
        #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__brand,
        #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__brand {
          font-size: 20px;
          font-weight: bold;
          color: #fff; }
        #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__text,
        #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__text {
          font-size: 16px;
          font-weight: bold;
          color: #fff; }
        #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__item,
        #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__card .p-credit__confirm__card__item {
          display: flex;
          flex-direction: column;
          gap: 10px; }
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__info,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__info {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-grow: 1; }
        #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl,
        #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl {
          display: flex;
          gap: 20px; }
          #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl dt,
          #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl dt {
            width: 90px;
            font-size: 14px;
            font-weight: bold;
            color: #485474;
            flex-shrink: 0;
            text-align: left; }
          #credit_card .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl dd,
          #complete .wrap .p-credit .p-credit__confirm .p-credit__confirm__info dl dd {
            font-size: 14px;
            color: #666;
            flex-grow: 1; }
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__selected,
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__selectable,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__selected,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__selectable {
        width: 150px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        border-radius: 100px;
        cursor: pointer;
        flex-shrink: 0; }
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__selected,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__selected {
        background: linear-gradient(90deg, #11cdef 0%, #1171ef 100%);
        position: relative; }
        #credit_card .wrap .p-credit .p-credit__confirm .p-credit__selected::after,
        #complete .wrap .p-credit .p-credit__confirm .p-credit__selected::after {
          content: "";
          position: absolute;
          top: -8px;
          left: -5px;
          width: 50px;
          height: 47px;
          background: url(/assets/images/common/hachi_card.png) no-repeat center center;
          background-size: contain;
          animation: gentleSwing 1s ease-in-out infinite; }

@keyframes gentleSwing {
  0%,
  100% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-5deg); }
  75% {
    transform: rotate(5deg); } }
      #credit_card .wrap .p-credit .p-credit__confirm .p-credit__selectable,
      #complete .wrap .p-credit .p-credit__confirm .p-credit__selectable {
        background: #a6a6a6; }
    #credit_card .wrap .p-credit .p-credit__complete,
    #complete .wrap .p-credit .p-credit__complete {
      text-align: center; }
      #credit_card .wrap .p-credit .p-credit__complete .p-credit__complete__icon,
      #complete .wrap .p-credit .p-credit__complete .p-credit__complete__icon {
        max-width: 200px;
        width: 100%;
        margin: 0 auto 30px; }
        #credit_card .wrap .p-credit .p-credit__complete .p-credit__complete__icon .p-credit__complete__icon__text,
        #complete .wrap .p-credit .p-credit__complete .p-credit__complete__icon .p-credit__complete__icon__text {
          font-size: 24px;
          font-weight: bold;
          color: #2dce8b; }
        #credit_card .wrap .p-credit .p-credit__complete .p-credit__complete__icon img,
        #complete .wrap .p-credit .p-credit__complete .p-credit__complete__icon img {
          width: 100%; }
      #credit_card .wrap .p-credit .p-credit__complete .p-credit__complete__text,
      #complete .wrap .p-credit .p-credit__complete .p-credit__complete__text {
        font-size: 16px;
        line-height: 2; }
    #credit_card .wrap .p-credit .c-modal.register,
    #complete .wrap .p-credit .c-modal.register {
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      overflow-y: auto;
      border-radius: 10px;
      scrollbar-width: none;
      -ms-overflow-style: none; }
    #credit_card .wrap .p-credit .c-modal.error,
    #complete .wrap .p-credit .c-modal.error {
      max-width: 400px; }
    #credit_card .wrap .p-credit .c-modal .c-modal__title,
    #complete .wrap .p-credit .c-modal .c-modal__title {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px; }
      #credit_card .wrap .p-credit .c-modal .c-modal__title::before,
      #complete .wrap .p-credit .c-modal .c-modal__title::before {
        display: none; }
    #credit_card .wrap .p-credit .c-modal .c-modal__title-des,
    #complete .wrap .p-credit .c-modal .c-modal__title-des {
      line-height: 1.6; }
    #credit_card .wrap .p-credit .c-modal .c-modal__content .terms,
    #complete .wrap .p-credit .c-modal .c-modal__content .terms {
      line-height: 1.6; }
      #credit_card .wrap .p-credit .c-modal .c-modal__content .terms .terms_title,
      #complete .wrap .p-credit .c-modal .c-modal__content .terms .terms_title {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #666;
        background-color: #f8f8f8;
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 5px; }
      #credit_card .wrap .p-credit .c-modal .c-modal__content .terms p,
      #complete .wrap .p-credit .c-modal .c-modal__content .terms p {
        font-size: 14px; }
    #credit_card .wrap .p-credit .c-modal .c-modal__img,
    #complete .wrap .p-credit .c-modal .c-modal__img {
      max-width: 150px;
      margin: 20px auto; }
      #credit_card .wrap .p-credit .c-modal .c-modal__img img,
      #complete .wrap .p-credit .c-modal .c-modal__img img {
        width: 100%; }
    #credit_card .wrap .p-credit .c-modal .c-modal__text,
    #complete .wrap .p-credit .c-modal .c-modal__text {
      font-size: 14px;
      font-weight: bold;
      color: #ff0000; }
    #credit_card .wrap .p-credit .c-modal .c-modal__close,
    #credit_card .wrap .p-credit .c-modal .c-button.complete,
    #complete .wrap .p-credit .c-modal .c-modal__close,
    #complete .wrap .p-credit .c-modal .c-button.complete {
      background: #ff9425; }
    #credit_card .wrap .p-credit .c-modal .c-button.complete:disabled,
    #complete .wrap .p-credit .c-modal .c-button.complete:disabled {
      background: #d9d9d9; }

.c-modal.register {
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  border-radius: 10px;
  border: 5px solid #1aa56b;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  @media screen and (max-width: 767px) {
    .c-modal.register {
      width: 92vw;
      padding: 0 4%; } }
  .c-modal.register .c-modal__close.register {
    top: -15px;
    right: -15px; }
  .c-modal.register .credit_container {
    overflow-y: scroll;
    max-height: 84vh; }
    @media screen and (max-width: 767px) {
      .c-modal.register .credit_container {
        padding: 8% 0 !important; } }
  @media screen and (max-width: 767px) {
    .c-modal.register .c-agreement .c-agreement__box {
      max-width: 100%; } }
  @media screen and (max-width: 767px) and (max-width: 425px) {
    .c-modal.register .c-agreement .c-agreement__box .c-agreement__box__label {
      flex-direction: row;
      align-items: center; }
      .c-modal.register .c-agreement .c-agreement__box .c-agreement__box__label .c-agreement__box__label__link-like {
        margin-top: 0; } }

.c-modal.result, .c-modal.error {
  max-width: 400px;
  border: 5px solid #1aa56b; }
  .c-modal.result .c-modal__content, .c-modal.error .c-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: none;
    margin: 0;
    padding: 0; }
    .c-modal.result .c-modal__content .c-modal__icon, .c-modal.error .c-modal__content .c-modal__icon {
      width: 100px; }
      .c-modal.result .c-modal__content .c-modal__icon img, .c-modal.error .c-modal__content .c-modal__icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block; }
    .c-modal.result .c-modal__content .c-modal__message, .c-modal.error .c-modal__content .c-modal__message {
      font-weight: 700; }

.c-modal.result {
  border: 5px solid #1aa56b; }
  .c-modal.result::before, .c-modal.result::after {
    content: "";
    position: absolute;
    top: -26px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; }
  .c-modal.result::before {
    left: -26px;
    width: 90px;
    height: 84px;
    background-image: url(/assets/images/common/ppa_phone.png); }
  .c-modal.result::after {
    right: -26px;
    width: 80px;
    height: 92px;
    background-image: url(/assets/images/common/hachi_phone.png); }

.c-modal-background.register {
  z-index: 9997; }

@media screen and (max-width: 767px) {
  #done #credit_card .wrap {
    background: #fff; } }