@charset "utf-8";

/****共通*****************************************************************/
#brand-top--content .is-pc {
  display: block;
}
#brand-top--content .is-sp {
  display: none;
}
#brand-top--content .f-large {
  font-size: 17px;
  line-height: 1.8em;
}
#brand-top--content .f-xlarge {
  font-size: 20px;
}
#brand-top--content .f-xxlarge {
  font-size: 30px;
}
#brand-top--content .color-lightgray {
  color: #999;
}


#brand-top--content .od-category-hero-image-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
}
#brand-top--content .od-category-hero-image {
  width: 100%;
  height: auto;
  /* object-fit: cover; */
  aspect-ratio: auto;
  max-width: 1920px;
}
/* グローバル変数の定義 */
:root {
 --delay: 5s; /* スライドショーの速度 */
}

#brand-top--content .od-category-hero-image-container .brand-logo {
    position: absolute;
    width: 80%;
    height: 100%;
    max-width: 1920px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#brand-top--content #bg-animation {
    position: relative;
    margin: 50px auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: 32/13;
}
#brand-top--content #bg-animation .img-item {
  position: absolute;
  top : 0;
  left : 0;
  max-width : 100%;
  max-height : 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 32/13;
  /*animation : itemFade-anim 15s infinite;
  opacity : 0;*/
}
#brand-top--content #bg-animation .img-item picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#brand-top--content #bg-animation #photo1 {
  animation-delay : 0s;
}
#brand-top--content #bg-animation #photo2 {
  animation-delay : 5s;
}
#brand-top--content #bg-animation #photo3 {
  animation-delay : 10s;
}
@keyframes itemFade-anim {
  0% {
    opacity : 0;
  }
  10%{
    opacity : 1;
    z-index : 3;
  }
  33%{
    opacity : 1;
  }
  40%{
    opacity : 1;
  }
  50%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}


/*hero 以下*/

#brand-top--header {
  margin: 50px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#brand-top--header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1em !important;
}
#brand-top--header h2.brand-top--header_logo {
  max-width: 200px;
  margin-right: 100px;
}
#brand-top--header h2.brand-top--header_logo img {
  width: 100%;
}

#brand-top--cont-Seciton h3 {
  color: #222;
}
#brand-top--cont-Seciton h3+p {
  margin-top: 20px;
}
#brand-top--cont-Seciton p {
  line-height: 1.6em;
}
#brand-top--cont-Seciton p+p {
  margin-top: 15px;
}


.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox.spacebetween {
  justify-content: space-between;
}
.flex--leftbox.w50,
.flex--rightbox.w50 {
  width: 48%;
}
.flex--leftbox img,
.flex--rightbox img {
  width: 100%;
}

/****ACME*****/
.message {
  display: flex;
  flex-direction: column;
  justify-content: center;
}



/****Tablet SP*****************************************************************/

@media(max-width: 768px) {

  /****共通*****/
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
  #brand-top--content .f-large {
    font-size: 15px;
    line-height: 1.8em;
  }
  #brand-top--content .f-xlarge {
    font-size: 18px;
  }
  #brand-top--content .f-xxlarge {
    font-size: 24px;
  }
  #brand-top--content #bg-animation {
    aspect-ratio: 5/6;
  }
  #brand-top--content #bg-animation .img-item {
    aspect-ratio: 5/6;
  }
  #brand-top--content .od-product-list-container {
    padding: 0 15px;
  }
  #brand-top--content .od-category-hero-image-container .brand-logo {
      width: 90%;
      height: 100%;
      max-width: 1920px;
      top:0;
      left:50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  }
  #brand-top--content .od-category-hero-image-container .brand-logo img {
      width: 50%;
  }
  .flexbox {
    display: block;
  }
  .flex--leftbox.w50,
  .flex--rightbox.w50 {
    width: 100%;
  }
  .flex--rightbox {
    margin-top: 20px;
  }
  .flex--leftbox img,
  .flex--rightbox img {
    width: 100%;
  }

}
@media(max-width: 480px) {
#brand-top--header h2.brand-top--header_logo {
  max-width: 120px;
  margin-right: 0;
}
#brand-top--content #bg-animation {
    margin: 12px auto 0;
}
}