@charset "UTF-8";
/*///////////////////////////////////////////////////////
    製品トップスタイル
///////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////
    変数設定
///////////////////////////////////////////////////////*/
/* custom style */
/*///////////////////////////////////////////////////////
    mixin設定
///////////////////////////////////////////////////////*/
.contents .contents-body {
  margin-bottom: 12rem;
}

@media screen and (min-width: 961px) {
  .contents .contents-body {
    margin-bottom: 16rem;
  }
}
.p-read {
  margin-bottom: 3.6rem;
  line-height: 1.8;
}
.p-read .p-read--ttl {
  margin-bottom: 1.2rem;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}
.p-read .p-read--body {
  text-align: center;
  font-size: 1.2rem;
}
.p-read .p-read--body + .p-read--ttl {
  margin-top: 2.8rem;
}

@media screen and (min-width: 961px) {
  .p-read {
    margin-bottom: 8rem;
  }
  .p-read .p-read--ttl {
    margin-bottom: 1.4rem;
    font-size: 2.4rem;
  }
  .p-read .p-read--body {
    font-size: 1.4rem;
  }
  .p-read .p-read--body + .p-read--ttl {
    margin-top: 4.2rem;
  }
}
.discontinued {
  margin-bottom: 10rem;
}

.brand-list .brand + .brand {
  margin-top: 8rem;
}
.brand-list .brand .brand-ttl {
  margin-bottom: 2.4rem;
  text-align: center;
}
.brand-list .brand .brand-ttl img {
  display: revert;
  width: auto;
  max-width: 50%;
}
.brand-list .brand .brand-itemlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 0.5rem;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item {
  display: grid;
  grid-template-columns: 12.4rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0.8rem;
  border: 1px solid #E0E0E0;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info {
  font-size: 1.4rem;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .name {
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  font-weight: 500;
  border-bottom: 1px solid #0f0f0f;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .change_rim img {
  width: auto;
  height: 1.4em;
  margin-bottom: 0.6em;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .body {
  margin-bottom: 2rem;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .body a {
  line-height: 1;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .body img {
  display: none;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .link-btn .link {
  justify-content: center;
  gap: 1em;
  min-width: 0;
  width: 100%;
  height: 4.2rem;
  font-size: 1.2rem;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .link-btn .link .icon {
  transform: none;
}
.brand-list .brand .brand-itemlist .brand-itemlist--item .info .link-btn .link svg path {
  fill: #fff;
}

@media screen and (min-width: 961px) {
  .discontinued {
    margin-bottom: 12rem;
  }
  .contents .inner {
    width: 110rem;
  }
  .brand-list .brand + .brand {
    margin-top: 8rem;
  }
  .brand-list .brand .brand-ttl {
    margin-bottom: 4.2rem;
  }
  .brand-list .brand .brand-ttl img {
    max-width: 240px;
  }
  .brand-list .brand .brand-itemlist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    padding: 2rem 1rem 1rem;
  }
  .brand-list .brand .brand-itemlist .brand-itemlist--item {
    grid-template-columns: 18rem 1fr;
    gap: 2rem;
    padding: 2rem;
  }
  .brand-list .brand .brand-itemlist .brand-itemlist--item .info {
    font-size: 1.4rem;
  }
  .brand-list .brand .brand-itemlist .brand-itemlist--item .info .name {
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .brand-list .brand .brand-itemlist .brand-itemlist--item .link-btn .link {
    min-width: 0;
    width: 100%;
  }
  .brand-list .brand .brand-itemlist .brand-itemlist--item .link-btn .link svg path {
    fill: #fff;
  }
}
.brand-list-link {
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
  background: #fff;
}
.brand-list-link .pc_link, .brand-list-link .pc_link-fixed {
  display: none;
}
.brand-list-link .sp_link .brand_name {
  margin-bottom: 0.4em;
}

@media screen and (min-width: 961px) {
  .brand-list-link {
    position: revert;
    margin-bottom: 6rem;
  }
  .brand-list-link .sp_link {
    display: none;
  }
  .brand-list-link .pc_link {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
  }
  .brand-list-link .pc_link .item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    height: 4.2rem;
    padding: 0 1.5rem;
    font-weight: 700;
    font-size: 1.2rem;
    background: #F0F0F0;
  }
  .brand-list-link .pc_link .item .icon {
    width: 0.8rem;
    aspect-ratio: 1/1;
    border-right: 1px solid #191919;
    border-bottom: 1px solid #191919;
    transform: rotate(45deg);
  }
  .brand-list-link.is-active .pc_link-fixed {
    display: revert;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    overflow-x: scroll;
    padding: 1em;
    display: flex;
    flex-flow: row nowrap;
    gap: 1em;
    background: #F0F0F0;
  }
  .brand-list-link.is-active .pc_link-fixed .item {
    flex: 0 0 auto;
    width: auto;
    word-break: keep-all;
    white-space: nowrap;
  }
  .brand-list-link.is-active .pc_link-fixed .item + .item::before {
    content: "／";
    margin-right: 1em;
  }
}