@charset "Shift_JIS";
/*===========================================

===========================================*/

.categoryHead {
  padding-top: var(--min16);
  padding-bottom: var(--min16);
}
@media not screen and (min-width: 768px) {
  .categoryHead {
    padding-top: var(--min12-sp);
    padding-bottom: var(--min24-sp);
  }
}

/*===========================================

===========================================*/
.mv{
  display: grid;
  grid-template-columns: 1fr;
}
.mv__inner{
  overflow: hidden;
}
.mv__data {
  position: relative;
  user-select: none;
  cursor: pointer;
}
.mv__data:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.mv__data.active::after {
  content: normal;
}
.mv__data.none {
  visibility: hidden;
  content-visibility: hidden;
}
.mv__data img {
  max-width: none;
  width: 100%;
  aspect-ratio: 646/364;
}
.mv .tts_slide {
  visibility: hidden;
}
.mv .tts_slide.cmp {
  visibility: visible;
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__list {
    gap: var(--min8-sp);
  }
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__pagerList {
    gap: var(--min4-sp);
  }
}
.mv .tts_slide__pagerList li {
  width: var(--min27);
  height: var(--min5);
  text-indent: -9999px;
  background-color: #D9D9D9;
  overflow: hidden;
  cursor: pointer;
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__pagerList li {
    width: var(--min27-sp);
    height: var(--min5-sp);
  }
}
.mv .tts_slide__pagerList li.current {
  background-color: #999;
}

/*===========================================

===========================================*/
@media not screen and (min-width: 768px) {
  .ranking__inner {
    width: calc(100% + min(16px, 4.27vw));
    overflow: auto;
  }
}
.ranking__card {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--min24);
}
@media not screen and (min-width: 768px) {
  .ranking__card {
    grid-template-columns: repeat(5, min(156px, 41.6vw));
    gap: 0;
  }
}
@media not screen and (min-width: 768px) {
  .ranking .tts_card__data {
    padding-right: min(16px, 4.27vw);
  }
}

/*===========================================

===========================================*/
.station {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--min8);
  border-top: 1px solid var(--gray);
  padding-top: var(--min24);
}
@media not screen and (min-width: 768px) {
  .station {
    grid-template-columns: 1fr;
    gap: var(--min8-sp);
    padding-top: var(--min24-sp);
  }
}
.station__ttl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--min24);
}
@media not screen and (min-width: 768px) {
  .station__ttl {
    grid-template-columns: 1fr;
    gap: var(--min16-sp);
  }
}
.station dl {
  display: grid;
  flex-grow: 1;
  grid-template-columns: auto 1fr;
  gap: var(--min12);
}
.station dt {
  font-weight: bold;
}
.station dd {
  display: flex;
  align-items: baseline;
  row-gap: var(--min12);
  column-gap: var(--min12);
}
.station dt + dd::before {
  content: "�[";
  display: block;
}

/*===========================================

===========================================*/
.stock {
  padding: var(--min32);
}
@media not screen and (min-width: 768px) {
  .stock {
    padding: var(--min32-sp) var(--min16-sp);
  }
}
.stock__ttl {
  font-size: var(--min20);
  font-weight: bold;
}
@media not screen and (min-width: 768px) {
  .stock__ttl {
    font-size: var(--min20-sp);
  }
}
.stock__txt {
  margin-top: 0.25em;
}
.stock__error {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--min8);
  border-top: 1px solid var(--gray);
  padding-top: var(--min24);
}
@media not screen and (min-width: 768px) {
  .stock__error {
    grid-template-columns: 1fr;
    gap: var(--min8-sp);
    padding-top: var(--min24-sp);
  }
}

.itemList__data {
  gap: var(--min10);
}
@media not screen and (min-width: 768px) {
  .itemList__data {
    gap: var(--min10-sp);
  }
}

.compare {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: var(--min24);
  padding-bottom: var(--min24);
  background: var(--lightGray);
  z-index: 10;
}
@media not screen and (min-width: 768px) {
  .compare {
    padding-top: var(--min16-sp);
    padding-bottom: var(--min32-sp);
  }
}
.compare__head {
  display: flex;
  justify-content: center;
  align-items: center;
  row-gap: var(--min24);
  column-gap: var(--min24);
}
@media not screen and (min-width: 768px) {
  .compare__head {
    row-gap: var(--min24-sp);
    column-gap: var(--min24-sp);
  }
}
.compare__ttl {
  font-weight: bold;
}
.compare__quantity {
  font-size: var(--min16);
  font-weight: bold;
}
@media not screen and (min-width: 768px) {
  .compare__quantity {
    font-size: var(--min16-sp);
  }
}
.compare__body {
  display: grid;
  grid-template-columns: max(44.27vw, min(850px, 78.7vw)) 1fr;
  align-items: center;
}
@media not screen and (min-width: 768px) {
  .compare__body {
    grid-template-columns: 1fr;
  }
}
.compare .compare__list {
  margin: 0 var(--min38);
}
@media not screen and (min-width: 768px) {
  .compare .compare__list {
    margin: 0 var(--min24-sp);
  }
}
.compare .tts_slide__prev {
  transform: translate(-100%, 0) rotate(180deg);
}
.compare .tts_slide__prev::before {
  background-color: transparent;
  box-shadow: none;
}
.compare .tts_slide__prev::after {
  width: var(--min9);
  height: var(--min14);
}
@media not screen and (min-width: 768px) {
  .compare .tts_slide__prev::after {
    width: var(--min9-sp);
    height: var(--min14-sp);
  }
}
.compare .tts_slide__next {
  transform: translate(100%, 0);
}
.compare .tts_slide__next::before {
  background-color: transparent;
  box-shadow: none;
}
.compare .tts_slide__next::after {
  width: var(--min9);
  height: var(--min14);
}
@media not screen and (min-width: 768px) {
  .compare .tts_slide__next::after {
    width: var(--min9-sp);
    height: var(--min14-sp);
  }
}
.compare .tts_slide__list {
  gap: var(--min4);
}
.compare__data {
  position: relative;
}
.compare__data::before, .compare__data::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--min6);
  bottom: var(--min6);
  left: var(--min6);
  right: var(--min6);
}
@media not screen and (min-width: 768px) {
  .compare__data::before, .compare__data::after {
    top: var(--min6-sp);
    bottom: var(--min6-sp);
    left: var(--min6-sp);
    right: var(--min6-sp);
  }
}
.compare__data::before {
  background: #FFF;
  box-shadow: 0 0 var(--min4) rgba(0, 0, 0, 0.25);
}
.compare__data::after {
  user-select: none;
  cursor: pointer;
}
.compare__data:hover img {
  opacity: 0.7;
}
.compare__data a {
  display: grid;
  grid-template-columns: max(4.58vw, min(88px, 8.15vw)) 1fr;
  align-items: center;
  gap: var(--min4);
  position: relative;
  padding: var(--min6);
  color: var(--black);
}
@media not screen and (min-width: 768px) {
  .compare__data a {
    grid-template-columns: min(64px, 17.07vw) 1fr;
    gap: var(--min4-sp);
    padding: var(--min6-sp);
  }
}
.compare__close {
  position: absolute;
  width: var(--min16);
  height: var(--min16);
  top: 0;
  right: 0;
  border-radius: 100vw;
  text-indent: -9999px;
  background: var(--darkGray);
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .compare__close {
    width: var(--min16-sp);
    height: var(--min16-sp);
  }
}
.compare__close::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--min8);
  height: var(--min8);
  margin: auto;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: var(--icon_close);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FFF;
}
@media not screen and (min-width: 768px) {
  .compare__close::after {
    width: var(--min8-sp);
    height: var(--min8-sp);
  }
}
.compare__img .tts_floatImg--wrap {
  padding-top: 100%;
}
.compare__img img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.compare__name {
  position: relative;
  padding: var(--min4);
  font-size: var(--min12);
  font-weight: bold;
  line-height: 1.3;
}
@media not screen and (min-width: 768px) {
  .compare__name {
    padding: var(--min4-sp);
    font-size: var(--min10-sp);
  }
}
.compare__btn {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: var(--min8);
}
@media not screen and (min-width: 768px) {
  .compare__btn {
    margin-top: var(--min16-sp);
    grid-template-columns: repeat(2, min(152px, 40.53vw));
    gap: var(--min8-sp);
  }
}
@media not screen and (min-width: 768px) {
  .compare__btn a {
    font-size: var(--min12-sp);
  }
}