﻿.brand-detail-img figure{
    font-size: 0;
}
.brand-detail-link{
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-detail-link--shop{
    display: none;
}
.brand-detail-link--shop.on-active{
    display: block;
}
.brand-detail-link--shop,
.brand-detail-link--brandsite{
    box-shadow: 0px 1px 6px #0000001A;
    background-color: #fff;
}

.brand-detail-link--shop a,
.brand-detail-link--brandsite a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand-detail-link--shop a:hover,
.brand-detail-link--brandsite a:hover{
    text-decoration: none;
}

.brand-detail-link--shop a::after,
.brand-detail-link--brandsite a::after{
    content: "";
    display: block;
    width: 24px;
    height: 24px;
}
.brand-detail-link--shop a::after{
    background: url(../../img/usr/common/arrow_small_black.svg) center no-repeat;
}
.brand-detail-link--brandsite a::after{
    background: url(../../img/usr/common/external_link.svg) center no-repeat;
}
.brand-detail-itemimg{
    overflow: hidden;
    border-radius: 8px;
}
#brandInformation:empty {
  position: relative;
  aspect-ratio: 1022/ 564;
  overflow: hidden;
  background: linear-gradient(#e9e9e9, #e9e9e9) 0 0 / 100% 562px no-repeat;
}
#brandInformation:empty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(105deg,
      transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: brand-shimmer 1.5s linear infinite;
}
#rt_brand_topics_contents:empty {
    position: relative;
    min-height: 359px;
    overflow: hidden;
    background: linear-gradient(#e9e9e9, #e9e9e9) 0 0 / 100% 562px no-repeat;
    margin: 40px 0 0;
}
#rt_brand_topics_contents:empty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(105deg,
      transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: brand-shimmer 1.5s linear infinite;
}
@keyframes brand-shimmer {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}
/* アニメーション抑制設定のユーザーには静止表示 */
@media (prefers-reduced-motion: reduce) {
  #brandInformation:empty::after{
    animation: none;
  }
}
/* PC */
@media screen and (min-width: 769px) {
    .brand-detail{
        display: flex;
        gap: 44px;
        width: 100%;
    }
    .brand-detail-content,
    .brand-detail-itemimg{
        display: flex;
        flex-direction: column;
        width: 50%;
        margin: 0;
    }
    .brand-detail-img{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40%;
        margin-bottom: auto;
    }
    .brand-detail-img--logo{
        text-align: center;
    }
    .brand-detail-description{
        font-size: 20px;
    }
    .brand-detail-img--item{
        display: none;
    }
    .brand-detail-link{
        gap: 21px;
        margin-top: 64px;
    }
    .brand-detail-link--shop,
    .brand-detail-link--brandsite{
        width: 50%;
        height: 60px;
        border-radius: 30px;
        font-size: 16px;
    }
    .brand-detail-link--shop a:hover,
    .brand-detail-link--brandsite a:hover{
        opacity: .75;
    }
}
@media screen and (max-width: 768px) {
    #brandInformation:empty {
      min-height: auto;
      aspect-ratio: 523 / 402;
    }
    #rt_brand_topics_contents:empty {
      min-height: auto;
      aspect-ratio: 523 / 390;
      margin-top: 0;
    }
}
/* --------------------------------------------------------------------
	スマートフォンクラス
-------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .brand-detail{
        padding: 24px 24px 30px;
    }
    .brand-detail-img{
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }
    .brand-detail-img figure{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 152px;
    }
    .brand-detail-img img{
        border-radius: 4px;
    }
    .brand-detail-itemimg{
        display: none;
    }
    .brand-detail-img--logo img{
        padding: 10px;
    }
    .brand-detail-description{
        font-size: 14px;
    }
    .brand-detail-link{
        gap: 8px;
        margin-top: 24px;
    }
    .brand-detail-link--shop,
    .brand-detail-link--brandsite{
        width: calc(100% / 2 - 8px);
        height: 48px;
        border-radius: 24px;
        font-size: 14px;
    }
}
/* --------------------------------------------------------------------
	ブランド詳細：ロゴ画像の収まり調整
-------------------------------------------------------------------- */
.brand-detail-img--logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-detail-img--logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* PC */
@media screen and (min-width: 769px) {
    .brand-detail-img {
        min-height: 280px;
        height: auto;
        margin-bottom: 40px;
    }

    .brand-detail-img--logo {
        width: 100%;
        max-width: 420px;
        height: 260px;
        margin: 0 auto;
    }

    .brand-detail-img--logo img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 360px;
        max-height: 240px;
        object-fit: contain;
    }
}

/* --------------------------------------------------------------------
	スマートフォンクラス
-------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .brand-detail-img--logo {
        width: 50%;
        min-height: 152px;
    }

    .brand-detail-img--logo img {
        max-width: 100%;
        max-height: 152px;
    }
}