@charset "UTF-8";
.item-detail-title {
  position: relative;
}

/* レイアウト1 */

.item-detail-title .item-detail-title__logo {
  position: absolute;
  height: auto;
  z-index: 2;
}

/* SP：〜766px */
@media screen and (max-width: 766px) {
  .item-detail-title .item-detail-title__logo {
    top: 39.3vw;
    left: 5.6%;
    width: 22%;   /* 26% → 22% */
  }
}

/* TAB：767〜1279px */
@media screen and (min-width: 767px) and (max-width: 1279px) {
  .item-detail-title .item-detail-title__logo {
    top: min(265px, 26.5vw);
    left: calc(50% - min(402px, 40.2%));   /* 40.2vw → 40.2% */
    width: min(130px, 13%);                /* 13vw → 13%（大きさも同じ基準に） */
  }
}

/* PC・WIDE：1280px〜 */
@media screen and (min-width: 1280px) {
  .item-detail-title .item-detail-title__logo {
    top: 265px;   /* 273px → 265px（約8px上へ） */
    left: calc(50% - 402px);
    width: 130px;
  }
}

/* レイアウト2 */
.component-item-hero__content .item-logo-jb {
  display: block;
  width: 166px;   /* 180px × 92% */
  max-width: 100%;
  height: auto;
  margin-top: 40px;
  align-self: flex-start;
  object-fit: contain;
}

/* タブレット */
@media screen and (min-width: 767px) and (max-width: 1279px) {
  .component-item-hero__content .item-logo-jb {
    width: clamp(100px, 13vw, 160px);
    margin-top: 30px;
  }
}

/* スマホ */
@media screen and (max-width: 766px) {
  .component-item-hero__content .item-logo-jb {
    width: 100px;
    margin-top: 20px;
    order: 10;   /* 「#NEW」より後ろ（一番下）に表示 */
  }
}

/* レイアウト3 */
.item-detail-data__image-wrapper .item-logo-jb {
  display: block;
  width: 166px;          /* レイアウト2のPCと同じ */
  max-width: 100%;
  height: auto;
  margin: 35px auto 0;   /* 上の間隔35px＋左右中央 */
}

/* スマホ */
@media screen and (max-width: 766px) {
  .item-detail-data__image-wrapper .item-logo-jb {
    margin-bottom: 50px;
  }
}

/* レイアウト4：画面右下に固定 */
.item-logo-jb--corner {
  position: fixed;
  right: 25px;
  bottom: 165px;
  width: 130px;
  height: auto;
  z-index: 50;
  pointer-events: none;
  opacity: 0;   /* 表示はJavaScriptで制御 */
}

/* スクロール後は非表示 */
.item-logo-jb--corner.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .item-logo-jb--corner {
    right: 20px;
    bottom: 30px;
    width: 110px;
  }
}