/* SNS ICON */

[class^="icon-"], [class*=" icon-"] {
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sns-icon a {
  text-decoration: none;
  line-height: 1;
}

.sns-icon {
  /*background-color: #eee;*/
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media (max-width: 320px) {
  .sns-icon {
    width: 90%;
  }
}

.icon-line:before {
  content: "\e900";
  color: #00c300;
}

.icon-x:before {
  content: "\e901";
  color: #000;
}

.icon-facebook:before {
  content: "\e902";
  color: #1877f2;
}

.icon-pocket:before {
  content: "\e903";
  color: #ef3f56;
}

.icon-hatenabookmark:before {
  content: "\e904";
  color: #00a4de;
}

/* /SNS-ICON */

.corp {
  padding: 3rem 0 2rem;
}

.header-logo {
  margin: 0px;
  margin-right: 0;
  height: 40px;
}

.btn-yahoo {
  flex: 1 !important;
}

.btn-rakuten {
  flex: 1 !important;
}

.btn-amazon {
  flex: 1 !important;
}

.new-badge {
  margin-top: -4px;
  margin-left: 4px;
}

#toplogo {
  -webkit-filter: drop-shadow(0px 0px 5px var(--bs-secondary-color));
  filter: drop-shadow(0px 0px 5px var(--bs-secondary-color));
}

@media (min-width: 1200px) {
  .certified {
    margin-bottom: 40px;
    width: 85%;
  }
}

.certified {
  margin-bottom: 40px;
}

.btn-buy {
  display: flex;
}

.td-detail {
  border-top-width: 1px;
  border-bottom-width: 0px !important;
}

.bikesearch-honda {
  width: 250px;
  margin-bottom: 20px;
}

.note-compati {
  text-align: center;
  font-size: small;
  margin-top: -0.5rem;
  display: none;
}

@media (min-width: 992px) {
  .detail-specs {
    padding: 0 1.5em;
  }
}

.shashu-compati td > strong {
  /*display: none;*/
}

.jan-compati {
  text-align: center;
  font-size: small;
}

shashu-compati table th {
  background: var(--bs-gray-100);
}

.shashu-compati table th {
  background: var(--bs-gray-100);
}

body {
  min-height: 100vh;
}

footer {
  top: 100vh;
  position: sticky;
}

html {
  scroll-padding-top: 81px;
}

.navbar {
  box-shadow: 0px 0px 5px var(--bs-navbar-toggler-border-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  --bs-bg-opacity: 0.8;
}

.balloon {
  width: 100%;
  margin-bottom: 3rem;
  margin-top: 3rem;
  display: flex;
  align-items: start;
  gap: 2rem;
}

.balloon__icon {
  width: 5rem;
  height: 5rem;
}

.balloon__icon img {
  width: 100%;
  border-radius: 50%;
  background-color: var(--bs-warning);
}

.balloon__txt {
  position: relative;
  max-width: 600px;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #f1f1f1;
  flex: 1;
}

.balloon__txt::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0.8rem solid transparent;
  top: 1rem;
  left: -1.5rem;
  border-right-color: #f1f1f1;
}

.review-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-rate {
  height: 15px;
  width: 80px;
  background-image: url(../../assets/img/rating_star.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.sec-review {
  margin: 4rem 0 5rem;
}

.rate5 {
  background-position: left 0% top 0%;
}

.rate4 {
  background-position: left 0% top -15px;
}

.review-head {
  height: 1.75rem;
}

.review-image {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.review-image img {
  width: 160px;
  flex-shrink: 0;
  cursor: zoom-in;
}

.art-review {
  margin-bottom: 1.5rem;
}

/* 画像ポップアップ */

/* 背景フェード */

.zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 400ms ease;
  z-index: 10000;
  pointer-events: none;
}

.zoom-backdrop.visible {
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

/* クローン画像 */

.zoom-clone {
  position: fixed;
  z-index: 10001;
  object-fit: contain;
  cursor: zoom-out;
  transition: left 400ms cubic-bezier(0.2, 0.8, 0.2, 1), top 400ms cubic-bezier(0.2, 0.8, 0.2, 1), width 400ms cubic-bezier(0.2, 0.8, 0.2, 1), height 400ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
  will-change: left, top, width, height, transform, opacity;
}

/* 一瞬大きくするバネっぽい効果 */

.zoom-clone.enlarge {
  transform: scale(1.05);
}

.type-tab a.nav-link {
  /*border-bottom-width: 3px!important;*/
  /*top: 3px;*/
  position: relative;
}

.type-tab .nav-item {
  width: 50%;
}

@media (min-width: 768px) {
  .type-tab .nav-item {
    width: 25%;
    max-width: 400px;
  }
}

.type-tab .nav-underline {
  gap: 0;
  border-bottom: 1px solid #eaeef0;
  /*overflow-x: hidden;*/
}

.review-matome {
  padding: 2em;
}

.gel-info {
  background-color: var(--bs-light);
  margin-bottom: 2rem;
  border-radius: 8px;
}

.gel-info div {
  background-color: var(--bs-secondary-bg);
  padding: 0.75rem 1rem;
  border-radius: 8px 8px 0 0;
}

.gel-info p {
  padding: 0.75rem 1rem;
}

div.gel-info div h4 {
  margin-bottom: 0;
}

/* a[href="ztx4l-bs.html"] {
  color: #ff0000;
}

a[href="ztx5l-bs.html"] {
  color: #aa0000;
}

a[href="ztx7l-bs.html"] {
  color: #550000;
}

a[href="ztx7a-bs.html"] {
  color: #ff00aa;
}

a[href="ztx9-bs.html"] {
  color: #ffaa00;
}

a[href="ztx12-bs.html"] {
  color: #aa5500;
}

a[href="ztx14-bs.html"] {
  color: #aaaa00;
}

a[href="zt7b-4.html"] {
  color: #00aa00;
}

a[href="zt12b-4.html"] {
  color: #005500;
}

a[href="zt9b-4.html"] {
  color: #00aaff;
}

a[href="ztx20l-bs.html"] {
  color: #005555;
}

a[href="ztz7s.html"] {
  color: #00ff00;
}

a[href="ztz10s.html"] {
  color: #5500ff;
}

a[href="ztz12s.html"] {
  color: #aa0055;
}

a[href="ztz14s.html"] {
  color: #aaaaaa;
}

a[href="zt12a-bs.html"] {
  color: #00ffff;
}

a[href="ztz6v.html"] {
  color: #aa55ff;
}

a[href="ztz5s.html"] {
  color: #55aaff;
}

a[href="ztz8v.html"] {
  color: #00aaaa;
} */

div.shashu-compati table td.norelease {
  color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

div.shashu-compati table td a {
  font-weight: bold;
}

.tab-model-catch {
  margin: 40px 40px;
  text-align: center;
}

.top-gel-mf {
  background: url("../../assets/img/gel_agm2.webp") center / cover repeat, rgba(0,0,0,0.17);
  background-blend-mode: darken;
  height: 600px;
}

.warranty-flow {
  width: 100%;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .warranty-flow {
    width: 60%;
  }
}