@charset "UTF-8";
/**
colors
ルールとして以下で統一
背景で使う色は xxBackgroundColor
通常色は　　　yyColor
 */
/**
font size
 */
/**
size
 */
.l-header {
  z-index: 100;
  position: fixed;
  width: 100%;
  background-color: white;
  top: 0;
  left: 0;
}

.l-header__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-header__ttl {
  display: flex;
  justify-content: space-between;
  width: auto;
  align-items: center;
  margin: 0;
}

.l-header__item {
  display: flex;
  justify-content: space-between;
  width: auto;
  align-items: center;
}

.l-header__item--search {
  padding-left: 1.5em;
  width: 100%;
}

.l-header__item--pc {
  display: flex;
  align-items: center;
}

.l-header__item--sp {
  display: none;
}

.l-header__item--navs {
  width: 100%;
}

@media screen and (max-width: 980px) {
  .l-header {
    display: flex;
    flex-direction: row-reverse;
  }
  .l-header__item--navs {
    width: auto;
  }
  .l-header__item--search {
    padding-left: 0;
    width: calc(100% - 0.5em);
  }
  .l-header__row--wrap {
    flex-wrap: wrap;
  }
  .l-header__ttl {
    display: none;
  }
}
.c-search-form {
  padding-top: 6px;
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.c-search-form__category {
  position: relative;
}

.c-search-form__search {
  width: 100%;
}

.c-search-form__input-text {
  width: 100%;
  padding: 6px;
  font-size: 16px;
  padding-right: 2em;
}

.c-search-form__input-text::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.c-search-form__select_wrap {
  position: relative;
  display: block;
}
.c-search-form__select_wrap::before {
  border-bottom: 4.5px solid #f2921c;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 9px;
  top: 10px;
  width: 0;
  z-index: 5;
}
.c-search-form__select_wrap::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid #f2921c;
  content: "";
  position: absolute;
  right: 9px;
  top: 21px;
  width: 0;
  z-index: 5;
}

.c-search-form__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  color: black;
  border-radius: 2px;
  border: 1px solid #cccccc;
  padding: 8px 6px;
  background: white;
  font-size: 14px;
  position: relative;
}

@media screen and (max-width: 980px) {
  .c-search-form {
    padding-top: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .c-search-form__search {
    width: 100%;
  }
  .c-search-form__category {
    width: calc(100% - 76px);
  }
  .c-search-form__select {
    width: 100%;
  }
}
.c-input-btn-box {
  position: relative;
}

.c-btn-box {
  padding: 0.75em 0;
}

.c-btn {
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.c-btn--search {
  display: inline-block;
  width: 5em;
  padding: 7px;
  font-size: 14px;
  margin: 0px auto 0;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  border-color: #208dbb;
  background-color: #208dbb;
  color: white;
  position: relative;
}

.c-btn--reload {
  border: solid 3px #FFFFFF;
  border-radius: 50%;
  background-color: #f2921c;
  color: #FFFFFF;
  cursor: pointer;
  width: auto;
  display: inline-block;
  line-height: 1.5em;
  padding: 0.4rem 0.2em;
  transform: translateY(-10px);
  margin-left: 0.5rem;
}

.c-btn--register {
  display: block;
  margin: 0px auto 0;
  margin-bottom: 0.6rem;
  position: relative;
  font-size: 18px;
  padding: 10px 0;
  font-weight: bold;
  background-color: #0d6f98;
  color: white;
  border: solid 4px white;
  border-radius: 50px;
  cursor: pointer;
  width: 100%;
  line-height: 1.5;
}
.c-btn--register:hover {
  background-color: #208dbb;
}

.c-btn--register2 {
  position: relative;
  margin: 0 0 8px 0;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  border: solid 3px white;
  border-radius: 8px;
  background-color: #f2921c;
  color: white;
  cursor: pointer;
  width: auto;
  display: inline-block;
  padding: 6px 1.5em;
  line-height: 1.5;
}
.c-btn--register2:hover {
  color: white;
  background-color: #f3a84b;
}

.c-btn--register3 {
  position: relative;
  margin: 0px auto 0;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  border: solid 3px white;
  border-radius: 8px;
  background-color: #f2921c;
  color: white;
  cursor: pointer;
  width: auto;
  display: inline-block;
  line-height: 1.5;
}
.c-btn--register3:hover {
  color: white;
  background-color: #f3a84b;
}

@media screen and (max-width: 980px) {
  .c-btn--register3 {
    padding: 0.3rem 0.5em;
  }
}
@media screen and (min-width: calc(980px + 1px)) {
  .c-btn--register3 {
    padding: 0.6rem 1.5em;
  }
}
.c-btn--register4 {
  background-color: #0d6f98;
  color: white;
  border: solid 4px white;
  display: inline-block;
  width: auto;
  padding: 0.5em 2em;
  margin: inherit;
  border-radius: 50px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
.c-btn--register4:hover {
  background-color: #208dbb;
}

.c-btn--sample {
  position: relative;
  margin: 0px auto 0;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  border: solid 3px white;
  background-color: #f2921c;
  line-height: 1.5;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffba00+0,f2921c+100 */
  background: #ffba00; /* Old browsers */
  background: linear-gradient(to right, #ffba00 0%, #f2921c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  display: inline-block;
  padding: 12px 1em;
  color: white;
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  border-radius: 50px;
}
.c-btn--sample:hover {
  color: white;
}

@media screen and (max-width: 980px) {
  .c-btn--sample {
    display: block;
    position: relative;
    width: 80%;
    padding: 10px 0;
    margin: 10px auto 0;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    border: none;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  }
}
.c-btn--sample:hover {
  scale: 1.05;
  transform: translateY(-1px);
  transition: scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-btn--change {
  margin-right: 1em;
  color: white;
  display: flex;
  background: #208dbb;
  justify-content: center;
  align-items: center;
  padding-right: 6px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
}

.c-btn__icon--change {
  min-height: 2.6rem;
  min-width: 2.6rem;
}

.c-btn__link--icon-only {
  vertical-align: middle;
  border-radius: 5px;
  border: none;
  padding: 0.25rem 0;
  display: inline-block;
}

.c-btn__link--icon-inside {
  vertical-align: middle;
  line-height: 2.25rem;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.9rem;
  color: white;
  padding-right: 0.5rem;
  display: inline-block;
}

.c-btn__link--icon-inside-align-icon, .c-btn__action--icon-inside-align-icon {
  vertical-align: middle;
  line-height: 2rem;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  max-width: 100%;
  height: 2rem;
  font-size: 0.9rem;
  color: white;
  padding-right: 0.5rem;
  display: inline-block;
}

.c-btn__link--medium {
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  width: 130px;
  max-width: 100%;
  font-size: 0.9rem;
  color: white;
  padding: 0.6rem 0;
  display: block;
}

.c-btn__link--small, .c-btn__action--small {
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.8rem;
  color: white;
  padding: 0.5rem 0.25rem;
  display: block;
}

.c-btn__link--medium-color-gray {
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  width: 150px;
  max-width: 100%;
  font-size: 0.9rem;
  color: #555;
  padding: 0.7rem 0;
  display: block;
}

.c-btn__link--center {
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.8rem;
  color: white;
  padding: 0.5rem 0.5rem;
  display: block;
}

.c-btn--action-link-setting, .c-btn--link {
  border-color: #6b6b6b;
  background-color: #6b6b6b;
}

.c-btn--new {
  border-color: #208dbb;
  background-color: #208dbb;
}

.c-btn--used {
  border-color: #f2921c;
  background-color: #f2921c;
}

.c-btn--graph {
  border-color: #208dbb;
  background-color: #208dbb;
}

.c-btn--product-review {
  border-color: #27bdfd;
  background-color: #27bdfd;
}

.c-btn--product-spec {
  border-color: #a70143;
  background-color: #a70143;
}

.c-btn--room-search, .c-btn--x-search, .c-btn--keepa, .c-btn--yahoo-auction-closed {
  border-color: #6b6b6b;
  background-color: #6b6b6b;
}

.c-btn--d-shopping, .c-btn--7net-shopping, .c-btn--yodobashi, .c-btn--yamada-mall, .c-btn--bic-camera {
  border-color: #9b59b6;
  background-color: #9b59b6;
}

.c-btn--ichiba, .c-btn--yahoo-shopping, .c-btn--amazon, .c-btn--qoo10-search, .c-btn--au-pay-market, .c-btn--dmm, .c-btn--yamada-mall {
  border-color: #8e6c00;
  background-color: #8e6c00;
}

.c-btn--rakuma, .c-btn--mercari, .c-btn--yahoo-fleama, .c-btn--yahoo-auction {
  border-color: #64c964;
  background-color: #64c964;
}

.c-btn--monosearch {
  border-color: rgba(249, 119, 171, 0.62);
  background-color: rgba(249, 119, 171, 0.62);
}

.c-btn--tracking {
  border-color: #f2921c;
  background-color: #f2921c;
}

.c-btn--reason-search {
  border-color: #dddddd;
  background-color: #dddddd;
}

.c-btn--tracking-obsession {
  border-color: #ebf8fe;
  background-color: #ebf8fe;
}

.c-btn--switch-page {
  color: #f2921c;
  border: 1px solid #f2921c;
  background-color: white;
}

.c-btn--m-center {
  margin: auto;
}

.c-btn--m-less {
  margin: 0;
}

.c-btn--badge {
  background-color: #f2921c;
  padding: 2px 6px;
  text-align: center;
  border-radius: 30px;
  border: none;
  cursor: pointer;
}

.is-c-btn--disable {
  background-color: #ccc;
  cursor: inherit;
}

.c-btn__text {
  min-width: 2em;
  display: inline-block;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.c-btn--ctrl {
  appearance: none;
  cursor: pointer;
  margin-bottom: 0.5em;
  border: 1px solid #f2921c;
  background-color: white;
}

.c-btn--catalog {
  display: block;
  position: relative;
  border-color: #208dbb;
  background-color: #208dbb;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  width: 190px;
  font-size: 13px;
  padding: 3px;
  line-height: 1.5;
}

.c-btn--ok {
  background-color: #f2921c;
  width: 120px;
  padding: 0.5em;
  text-align: center;
  margin: 1em;
  cursor: pointer;
  color: white;
  border-radius: 7px;
}

.c-btn--cancel {
  background-color: #ccc;
  width: 120px;
  padding: 0.5em;
  text-align: center;
  margin: 1em;
  cursor: pointer;
  color: white;
  border-radius: 7px;
}

.c-btn--submit {
  border: solid 3px white;
  border-radius: 8px;
  background-color: #f2921c;
  color: white;
  cursor: pointer;
  width: auto;
  display: inline-block;
  line-height: 1.5em;
  padding: 0.3em 0.5rem;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

.c-btn--add-tracking {
  display: block;
  position: relative;
  width: 100%;
  padding: 10px 0;
  border-color: #f2921c;
  margin: 10px auto 0;
  background-color: #f2921c;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  font-size: 18px;
  border: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

.c-btn--contact {
  border-radius: 50px;
  cursor: pointer;
  background-color: #208dbb;
  font-weight: bold;
  color: white;
  border: solid 4px white;
  display: inline-block;
  width: 10em;
  padding: 0.6em 6px;
}
.c-btn--contact:hover {
  opacity: 0.85;
}

.c-btn--back {
  border-radius: 50px;
  cursor: pointer;
  border: solid 4px white;
  display: inline-block;
  width: 10em;
  padding: 6px;
  margin-right: 1em;
  background-color: white;
  color: #208dbb;
}
.c-btn--back:hover {
  opacity: 0.85;
}

.c-btn--clear {
  color: #f2921c;
  background-color: white;
  border: 1px solid #f2921c;
  border-radius: 50%;
  padding: 0.1rem 0.3rem;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.c-btn--del {
  color: white;
  background-color: #208dbb;
  border-radius: 6px;
  padding: 6px 1em;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

.c-btn--register5 {
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  border-radius: 10px;
  padding: 0.5em 6em;
  background-color: #f2921c;
  color: white;
  font-weight: bold;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2392156863);
  cursor: pointer;
  border: solid 1px transparent;
}
.c-btn--register5:hover {
  box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.2392156863);
}

.c-btn--rakuten {
  position: relative;
  width: 100%;
  border-color: #0d6f98;
  margin: 0px auto 0;
  font-weight: bold;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  background-color: #f2921c;
  padding: 4px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.c-btn--arrow {
  margin-left: 0.5em;
  background-color: white;
  color: #f2921c;
  border-radius: 50%;
  line-height: 1.4em;
  width: 1.4em;
  font-size: 0.85em;
  display: inline-block;
  font-weight: bold;
}

.c-btn--reset {
  border-radius: 8px;
  background-color: #f2921c;
  color: white;
  cursor: pointer;
  padding: 0.3rem 0.7em;
  width: auto;
  border: none;
  display: inline-block;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
}

.c-btn--del-user,
.c-btn--del-shop {
  padding: 2px 1em;
  border: solid 1px #f2921c;
  background: #f2921c;
  color: white;
  cursor: pointer;
}

.c-btn--go-top, .c-btn--pwa-back {
  position: fixed;
  bottom: 4rem;
  display: flex;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #f2921c;
  outline: 1px solid #f4f4f4;
}

.c-btn--go-top {
  right: 1.5rem;
}

.c-btn--pwa-back {
  left: 1.5rem;
}

.c-flex {
  display: flex;
}

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

.c-flex--full {
  width: 100%;
}

.c-flex--gap-2 {
  gap: 0.5rem;
}

.c-flex--gap-3 {
  gap: 0.75rem;
}

.c-flex--gap-4 {
  gap: 1rem;
}

.c-flex--gap-1p {
  gap: 1%;
}

.c-flex--align-items-fend {
  align-items: flex-end;
}

.c-flex--align-items-fstart {
  align-items: flex-start;
}

.c-flex--align-items-center {
  align-items: center;
}

.c-flex--justify-content-center {
  justify-content: center;
}

.c-flex--justify-content-space-between {
  justify-content: space-between;
}

.c-flex--justify-content-space-around {
  justify-content: space-around;
}

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

.c-flex--justify-content-flex-start {
  justify-content: flex-start;
}

.c-flex--justify-content-flex-end {
  justify-content: flex-end;
}

@media screen and (min-width: calc(980px + 1px)) {
  .c-flex--sp-direction-column {
    flex-direction: row;
  }
  .c-flex--sp-align-item-center {
    align-items: center;
  }
}
.c-flex--pc-half {
  width: 50%;
}

@media screen and (max-width: 980px) {
  .c-flex--pc-half {
    width: auto;
  }
  .c-flex--sp-full {
    width: 100%;
  }
  .c-flex--sp-direction-column {
    flex-direction: column;
  }
  .c-flex--sp-align-item-center {
    align-items: flex-start;
  }
  .c-flex--sp-wrap {
    flex-wrap: wrap;
  }
  .c-flex--sp-break {
    flex-wrap: wrap;
  }
  .c-flex--sp-break > * {
    width: 100%;
  }
  .c-flex--sp-no-gap {
    gap: 0;
  }
  .c-flex--sp-row-reverse {
    flex-direction: row-reverse;
  }
  .c-flex--sp-col-reverse {
    flex-direction: column-reverse;
  }
}
.c-link--inline {
  display: inline;
}

.c-link--block {
  display: block;
}

.c-link--decoration-none {
  text-decoration: none;
}

.c-link--decoration, .c-link--decoration:link {
  text-decoration: none;
}

.c-link--decoration:hover, .c-link--decoration:active {
  text-decoration: underline;
}

.c-link--extend-link {
  text-decoration: none;
}

@media screen and (max-width: 980px) {
  .c-link--extend-link {
    display: none;
  }
}
.c-link--shrink-link {
  text-decoration: none;
}

@media screen and (min-width: calc(980px + 1px)) {
  .c-link--shrink-link {
    display: none;
  }
}
.is-c-link--decoration {
  text-decoration: none;
}

.is-c-link--decoration:hover, .is-c-link--decoration:active {
  text-decoration: underline;
}

.c-input-ctrl {
  position: relative;
}

.c-input-ctrl__btn {
  cursor: pointer;
}

.c-input-ctrl__btn--active {
  display: block;
}

.c-input-ctrl__btns {
  position: absolute;
}

.c-input-ctrl__btns--search {
  right: 0.5em;
  bottom: 4px;
  left: auto;
  width: 30px;
  top: auto;
}

.c-input-ctrl__btns--offer,
.c-input-ctrl__btns--reason {
  right: 25.5%;
  bottom: 8px;
  top: inherit;
}

.c-input-ctrl__img {
  width: 30px;
  height: 30px;
  margin: -2px 0;
}

.c-glo-navigation {
  display: flex;
}

.c-glo-navigation__list--wrap {
  flex-wrap: wrap;
}

.c-glo-navigation__item--data {
  display: none;
}

.c-glo-navigation__item--active {
  border-bottom: 3px solid #f2921c;
}

.c-glo-navigation__link {
  display: table-cell;
  vertical-align: middle;
  color: #555;
  text-decoration: none;
  text-align: center;
}

.c-glo-navigation--footer .c-glo-navigation__link {
  color: white;
}
.c-glo-navigation--footer .c-glo-navigation__item--active {
  border-bottom: none;
}

@media screen and (min-width: calc(980px + 1px)) {
  .c-glo-navigation__sp-icon {
    display: none;
  }
  .c-glo-navigation__list {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1em;
  }
  .c-glo-navigation__item {
    list-style: none;
    display: table;
    font-weight: bold;
    height: 46px;
  }
}
@media screen and (max-width: 980px) {
  .c-glo-navigation__logo-wrap {
    padding-bottom: 0.5rem;
    text-align: center;
  }
  .c-glo-navigation--footer {
    display: none;
  }
  .c-glo-navigation__sp-icon {
    display: block;
  }
  .c-glo-navigation__list {
    width: 100vw;
    padding: 1.5rem;
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 10000;
    background: #f2921c;
  }
  .c-glo-navigation__item {
    list-style: none;
    margin-left: 0;
    display: block;
    font-weight: bold;
    height: inherit;
    width: 100%;
    border-bottom: 1px solid white;
  }
  .c-glo-navigation__item:first-child {
    border-top: 1px solid white;
  }
  .c-glo-navigation__link {
    color: white;
    padding: 12px 0;
    display: block;
  }
}
.c-hamburg {
  width: 45px;
  height: 45px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.02);
  padding: 0;
  cursor: pointer;
  position: relative;
}

.c-hamburg__line {
  width: 100%;
  height: 2px;
  display: block;
  background: #f2921c;
  position: absolute;
  transition: all 0.3s;
  transform: rotate(0deg);
}

.c-hamburg__bottom {
  transform: translateY(25px);
}

.c-hamburg__middle {
  transform: translateY(12px);
}

.c-hamburg__top {
  transform: translateY(0px);
}

@media screen and (max-width: 980px) {
  .is-c-hamburg--active .c-hamburg__middle {
    background: rgba(255, 255, 255, 0);
  }
  .is-c-hamburg--active .c-hamburg__top {
    transform: rotate(-45deg) translate(-8px, 8px);
  }
  .is-c-hamburg--active .c-hamburg__bottom {
    transform: rotate(45deg) translate(8px, 8px);
  }
}
.c-logo {
  max-width: 100%;
}

.c-btn-link--sp {
  display: none;
}

@media screen and (max-width: 980px) {
  .c-btn-link__item {
    max-width: 45%;
    width: 240px;
    margin-right: 1em;
  }
  .c-btn-link {
    display: flex;
    justify-content: flex-end;
    padding: 24px;
  }
}
@media screen and (max-width: 980px) {
  .c-user {
    display: none;
  }
}

.l-footer {
  background-color: #c3c3c3;
  padding: 24px 0;
}

@media screen and (max-width: 980px) {
  .l-footer {
    padding-bottom: 3rem;
  }
}
.l-footer__data {
  color: white;
  display: flex;
  justify-content: space-between;
}

.l-footer__copyright {
  text-align: center;
  word-break: break-all;
}

@media screen and (max-width: 980px) {
  .l-footer__copyright {
    width: 100%;
    text-align: right;
  }
}
:root {
  scroll-behavior: smooth;
}

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

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 100;
  font-size: 14px;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 100px;
  color: #555;
}
@media screen and (max-width: 980px) {
  body {
    padding-top: 94px;
  }
}

::marker,
::-webkit-details-marker {
  color: #f2921c;
}

select {
  color: #555;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.swiper-slide {
  padding: 8px;
  background-color: white;
}

.clipCopyBord {
  display: none;
  position: absolute;
  padding: 6px;
  color: white;
  background-color: #f2921c;
}

.clipCopyBord-act {
  display: block;
}

.clickCopyResult {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px;
  color: white;
  background-color: #f2921c;
  display: none;
}

.clickCopyResult_text {
  color: white;
}

.clickCopy {
  cursor: pointer;
}

.highcharts-background {
  fill: transparent;
}

.copiedResult {
  position: fixed;
  z-index: 1230;
  padding: 3px;
  font-size: 12px;
  border: solid 1px #ff9700;
  background-color: white;
  display: none;
}

.copiedResult-act {
  display: block;
}

.f-animation--preparation-opacity-0 {
  opacity: 0;
}

@keyframes copy {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-1em);
    opacity: 0;
  }
}
.f-animation--copy {
  animation: copy 2s ease-out;
  animation-fill-mode: forwards;
}

/* 使用していない */
@keyframes up_to_down {
  from {
    transform: translate(-100%, -300%);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes rotateY {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes animation_slide_text {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}
.f-animation--slide-text .f-animation--slide-char {
  display: inline-block;
  animation: animation_slide_text 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  animation-delay: calc(0.5s + 0.04s * var(--char-index));
}

.is-f-animation--plane {
  transform: translate(-1000px, -100px);
  animation: plane 1s linear forwards;
  opacity: 1;
}

@media screen and (min-width: 980px) {
  @keyframes plane {
    0% {
      transform: translate(-100vw, -100px) scale(30);
    }
    10% {
      transform: translate(-90vw, -80px) scale(25);
    }
    20% {
      transform: translate(-80vw, -60px) scale(20);
    }
    30% {
      transform: translate(-70vw, -40px) scale(15);
    }
    40% {
      transform: translate(-60vw, -30px) scale(11);
    }
    50% {
      transform: translate(-50vw, -25px) scale(8);
    }
    60% {
      transform: translate(-40vw, -20px) scale(6);
    }
    70% {
      transform: translate(-30vw, -15px) scale(4);
    }
    80% {
      transform: translate(-20vw, -10px) scale(3);
    }
    90% {
      transform: translate(-10vw, -5px) scale(2);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }
}
@media screen and (max-width: 979px) {
  @keyframes plane {
    0% {
      transform: translate(-100vw, -100px) scale(12);
    }
    10% {
      transform: translate(-90vw, -80px) scale(10);
    }
    20% {
      transform: translate(-80vw, -60px) scale(8);
    }
    30% {
      transform: translate(-70vw, -40px) scale(6);
    }
    40% {
      transform: translate(-60vw, -30px) scale(2.5);
    }
    50% {
      transform: translate(-50vw, -25px) scale(1.6);
    }
    60% {
      transform: translate(-40vw, -20px) scale(1.4);
    }
    70% {
      transform: translate(-30vw, -15px) scale(1.3);
    }
    80% {
      transform: translate(-20vw, -10px) scale(1.2);
    }
    90% {
      transform: translate(-10vw, -5px) scale(1.1);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }
}
.is-f-animation--rd-to-lu {
  animation: rd_to_lu 1s ease-in-out 0s 1 forwards;
  /*animation: d_to_u 1s ease-in-out 0s 1 forwards;*/
}

.is-f-animation--ld-to-ru {
  animation: ld_to_ru 1s ease-in-out 0s 1 forwards;
  /*animation: d_to_u 1s ease-in-out 0s 1 forwards;*/
}

@keyframes ld_to_ru {
  0% {
    transform: translate(-100%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes rd_to_lu {
  0% {
    transform: translate(100%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes d_to_u {
  0% {
    transform: translate(0, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.is-f-animation--graph, .is-f-animation--price-history {
  animation: graph_etc 1s linear forwards;
}

#js-sample_graph, #js-sample_price_history {
  opacity: 0;
}

@keyframes graph_etc {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.l-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}
.l-row > * {
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.l-row--btm-pad {
  padding-bottom: 84px;
}

@media screen and (min-width: 980px) {
  .l-row--btm-pad {
    padding-bottom: 240px;
  }
}
@media screen and (max-width: 980px) {
  .l-row--sp-break {
    display: flex;
    flex-wrap: wrap;
  }
  .l-row--sp-break > * {
    flex: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2vw auto;
  }
  .l-row--sp-row-reverse {
    flex-direction: row-reverse;
  }
  .l-row--sp-col-reverse {
    flex-direction: column-reverse;
  }
}
.l-col {
  flex: 1 0 0%;
}

.l-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.l-col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.l-col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.l-col-5 {
  flex: 0 0 auto;
  width: 41.666666%;
}

.l-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.l-col-7 {
  flex: 0 0 auto;
  width: 58.333333%;
}

.l-col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.l-col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.l-content-sec {
  padding: 1.5em 0 1.5em;
}

.l-content-sec__head {
  padding-bottom: 64px;
}

.l-content-sec__title {
  text-align: center;
}

.l-content-sec__text {
  color: #555;
  font-weight: bold;
  font-size: 30px;
}
.l-content-sec__text--blue {
  color: #208dbb;
}

.l-content-sec--minPad {
  padding: 24px 0;
}
.l-content-sec--minPad .l-content-sec__head {
  padding-bottom: 24px;
}

@media screen and (max-width: 980px) {
  .l-content-sec {
    padding: 0.75rem 2vw;
  }
  .l-content-sec__head {
    padding-bottom: 64px;
  }
  .l-content-sec__title {
    text-align: center;
  }
  .l-content-sec__text {
    color: #555;
    font-weight: bold;
    font-size: 30px;
  }
  .l-content-sec__text .l-content-sec--blue {
    color: #208dbb;
  }
  .l-content-sec__body--sp-center {
    text-align: center;
  }
}
.l-content {
  margin: auto;
  width: 1280px;
  max-width: 100%;
  padding: 0 12px;
}
@media screen and (max-width: 980px) {
  .l-content--sp-r-no-pad {
    padding-right: 0;
  }
  .l-content--sp-break {
    margin: inherit;
    width: auto;
    padding-right: 0.5em;
  }
}
.l-main {
  min-height: calc(100vh - 177px);
  background-color: #f4f4f4;
}

@media screen and (min-width: 980px) {
  .l-how-to-use--grid {
    display: grid;
    grid-template-areas: "1 2 a a a a 7 8 9 10" "11 12 13 14 b b b b 19 20" "21 22 c c c c 27 28 29 30";
  }
  .l-how-to-use--grid-a {
    grid-area: a;
  }
  .l-how-to-use--grid-b {
    grid-area: b;
  }
  .l-how-to-use--grid-c {
    grid-area: c;
  }
}
.c-img-box--center {
  text-align: center;
}

.c-img-box--block {
  display: block;
}

.c-img-box__img {
  vertical-align: middle;
}

.c-img-box__img--flexible {
  max-width: 100%;
}

.c-img-box--pc {
  display: block;
}

.c-img-box--sp {
  display: none;
}

@media screen and (max-width: 980px) {
  .c-img-box--pc {
    display: none;
  }
  .c-img-box--sp {
    display: block;
  }
}
.c-heading__cont-title {
  font-size: 1.5rem;
  padding-bottom: 12px;
  margin: 0;
}

.c-icon--ranking {
  vertical-align: middle;
  margin: 0.5em;
}

.c-icon--tiny-sub {
  width: 0.8rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: sub;
}

.c-icon--tiny {
  width: 0.8rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: bottom;
}

.c-icon--checkbox {
  width: 1rem;
  margin: 0.1rem;
  vertical-align: baseline;
}

.c-icon--4-middle {
  width: 1.25rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: middle;
}

.c-icon--5-middle {
  width: 1.25rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: middle;
}

.c-icon--6-sub {
  width: 1.5rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: sub;
}

.c-icon--6-middle {
  width: 1.5rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: middle;
}

.c-icon--6-bottom {
  width: 1.5rem;
  display: inline-block;
  margin: 0 0.25rem;
  vertical-align: bottom;
}

.c-icon--7-middle {
  width: 2rem;
  display: inline-block;
  vertical-align: middle;
}

.c-icon--ruby-arrow-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 2rem;
  margin: 0 0.4rem 0 0.65rem;
  transform: translate(0, -0.45rem);
}

.c-icon--ruby-arrow {
  height: 1rem;
  object-fit: contain;
  width: 4rem;
}

.c-icon--add-alert {
  width: 1.1rem;
  display: inline-block;
  vertical-align: sub;
  margin-right: -0.2rem;
}

.c-step-box {
  text-align: center;
  background-color: #e9e9e9;
  padding: 2.5rem;
  margin: 1rem;
  border-radius: 1rem;
  max-width: 700px;
}

.c-step-box__ttl {
  color: #555;
  font-size: 20px;
  font-weight: bold;
}

.c-step-box__step {
  color: #208dbb;
  font-size: 20px;
  font-weight: bold;
}

.c-step-box__description {
  min-height: 4.5em;
}

.c-step-box__broad {
  height: 235px;
  padding-bottom: 24px;
}

@media screen and (max-width: 980px) {
  .c-step-box {
    padding-bottom: 2em;
  }
  .c-step-box__description {
    min-height: auto;
  }
  .c-step-box__broad {
    height: auto;
    padding-bottom: 0.5em;
  }
}
.u-hide {
  display: none !important;
}

.u-hidden {
  visibility: hidden;
}

@media screen and (max-width: 980px) {
  .u-sp-hide {
    display: none !important;
  }
}
.u-col--new, .u-col--graph {
  color: #208dbb;
}

.u-col--used, .u-col--register {
  color: #f2921c;
}

.u-col--ctrl {
  color: #f2921c;
}

.u-col--link-icon {
  color: #6b6b6b;
}

.u-col--white {
  color: white;
}

.u-col--error {
  color: #d90000;
}

.u-col--link {
  color: #208dbb;
}

.u-col--text {
  color: #555;
}

.u-col--base {
  color: #f2921c;
}

.is-u-col--new {
  color: #208dbb;
}

.is-u-col--used {
  color: #f2921c;
}

.is-u-col--new-used {
  color: #9e9e9e;
}

.is-u-col--text {
  color: #555;
}

.is-u-bk-col--new {
  background-color: #208dbb;
}

.is-u-bk-col--used {
  background-color: #f2921c;
}

.u-bk-col--mark {
  background-color: #fdeed0;
}

.u-bk-col--new {
  background-color: #208dbb;
}

.u-bk-col--used {
  background-color: #f2921c;
}

.u-bk-col--new-used {
  background-color: #9e9e9e;
}

.is-u-bk-col--new-used {
  background-color: #9e9e9e;
}

.u-bk-col--ranking {
  background-color: rgba(249, 119, 171, 0.62);
}

.u-bk-col--submit {
  background-color: #f2921c;
}

.u-bk-col--tracking {
  background-color: #f2921c;
}

.u-bk-col--clear {
  background-color: #208dbb;
}

.u-bk-col--disable {
  background-color: #208dbb;
}

.u-bk-col--active {
  background-color: #f2921c;
}

.u-bk-col--gray {
  background-color: #b6b6b6;
}

.u-bk-col--white {
  background-color: white;
}

.u-bk-col--obsession {
  background-color: #ebf8fe;
}

.u-bk-col--reason {
  background-color: #fff6eb;
}

@media screen and (max-width: 980px) {
  input[type=radio]:checked ~ .u-bk-col--reason {
    background-color: #208dbb;
    color: white;
  }
  input[type=radio]:checked ~ .u-bk-col--obsession {
    background-color: #208dbb;
    color: white;
  }
}
.u-bk-col--notice-field {
  background-color: #0d6f98;
}

.u-display--none {
  display: none;
}

.u-display--flex {
  display: flex;
}

.u-display--inline {
  display: inline;
}

.u-display--inline-block {
  display: inline-block;
}

.u-display--inline-flex {
  display: inline-flex;
}

.is-u-display--none {
  display: none;
}

.is-u-display--flex {
  display: flex;
}

.is-u-display--block {
  display: block;
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-none-sp-inline {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-none-sp-inline {
    display: inline;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-inline-sp-none {
    display: inline;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-inline-sp-none {
    display: none;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-none-sp-none {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-none-sp-none {
    display: none;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-none-sp-block {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-none-sp-block {
    display: block;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-block-sp-none {
    display: block;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-block-sp-none {
    display: none;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-block-sp-block {
    display: block;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-block-sp-block {
    display: block;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .u-display--pc-none-sp-flex {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .u-display--pc-none-sp-flex {
    display: flex;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .id-u-display--pc-none-sp-flex {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .id-u-display--pc-none-sp-flex {
    display: flex;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .is-u-display--pc-flex-sp-none {
    display: flex;
  }
}
@media screen and (max-width: 980px) {
  .is-u-display--pc-flex-sp-none {
    display: none;
  }
}

@media screen and (min-width: calc(980px + 1px)) {
  .is-u-display--pc-flex-sp-block {
    display: flex;
  }
}
@media screen and (max-width: 980px) {
  .is-u-display--pc-flex-sp-block {
    display: block;
  }
}

.is-u-display--none-high-priority {
  display: none;
}

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