@charset "UTF-8";
/*///////////////////////////////////////////////////////
    ブランドページ設定
///////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////
    変数設定
///////////////////////////////////////////////////////*/
/* custom style */
/*///////////////////////////////////////////////////////
    mixin設定
///////////////////////////////////////////////////////*/
#breadcrumb .component-breadcrumb--container {
  margin: 0 0 4.8rem auto;
}

.link-btn .link .icon {
  width: 1.2em;
  transform: scale(-1, 1);
}
.link-btn .link::after {
  content: "";
  display: block;
  width: 1.2em;
}

.brand-read {
  margin-bottom: 3.6rem;
  padding: 0.6rem 0 0.6rem 1.5rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  border-left: 7px solid #E3B308;
}
.brand-read .brand-read--ttl {
  margin-bottom: 0.8rem;
  line-height: 1.4;
  font-size: 2.2rem;
}
.brand-read .brand-read--body {
  line-height: 1.8;
  font-size: 1.2rem;
}

.brand-image {
  display: flex;
  flex-flow: row wrap;
  gap: 3.6rem 2rem;
  margin-bottom: 8.8rem;
}
.brand-image .image_01,
.brand-image .image_04 {
  flex: 0 0 100%;
}
.brand-image .image_02 {
  flex: 1;
  margin-bottom: 15%;
}
.brand-image .image_03 {
  flex: 1;
  margin-top: 15%;
}

@media screen and (min-width: 961px) {
  #breadcrumb .component-breadcrumb--container {
    justify-content: flex-end;
    width: 116rem;
    margin: 0 auto 8.8rem auto;
  }
  .brand-read {
    margin-bottom: 9rem;
    padding: 0.6rem 9rem 0.6rem 8rem;
    border-left: 11px solid #E3B308;
  }
  .brand-read .brand-read--ttl {
    margin-bottom: 2rem;
    font-size: 4.2rem;
  }
  .brand-read .brand-read--body {
    font-size: 1.4rem;
  }
  .brand-image {
    gap: 10rem 8rem;
    margin-bottom: 8.8rem;
  }
  .brand-image .image_02 {
    padding-left: 8rem;
  }
  .brand-image .image_03 {
    padding-right: 8rem;
  }
}
.bw-contents {
  margin-bottom: 10rem;
  padding: 4.6rem 0 8rem;
  background: #F0F0F0;
}
.bw-contents .bw-contents--ttl {
  margin-bottom: 3.4rem;
  text-align: center;
  letter-spacing: 0.1em;
}
.bw-contents .bw-contents--ttl .bw-contents--ttl-en {
  margin-bottom: 0.6em;
  font-family: "Montserrat", "Zen Kaku Gothic New", serif;
  font-weight: 700;
  font-size: 3.2rem;
}
.bw-contents .bw-contents--ttl .bw-contents--ttl-ja {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: bold;
  font-size: 1.3rem;
}
.bw-contents .bw-contents--body {
  margin-bottom: 3.2rem;
}
.bw-contents .bw-contents--body + .bw-contents--ttl {
  margin-top: 5em;
}
.bw-contents .bw-contents--item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 0.5rem;
}
.bw-contents .bw-contents--item .brand-wheel--outer {
  padding: 0.5rem 0.8rem 1.4rem;
  background: #fff;
  border: 1px solid #E0E0E0;
}
.bw-contents .bw-contents--item .brand-wheel--head {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.bw-contents .bw-contents--item .brand-wheel--head .structure {
  display: flex;
  -moz-column-gap: 0.4rem;
  column-gap: 0.4rem;
  transform: translate(-0.2rem, -0.2rem);
}
.bw-contents .bw-contents--item .brand-wheel--head .structure .label {
  padding: 0.2rem 0.4rem;
  line-height: 1;
  font-weight: 700;
  font-size: 1.1rem;
  background: #E0E0E0;
  border-radius: 1px;
}
.bw-contents .bw-contents--item .brand-wheel--head .madein {
  width: 7.4rem;
  font-size: 0;
  line-height: 1;
  transform: translate(0.2rem, -0.2rem);
}
.bw-contents .bw-contents--item .brand-wheel--img {
  margin-bottom: 2.8rem;
}
.bw-contents .bw-contents--item .brand-wheel--img .no-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1/1;
  background: #f5f2f2;
}
.bw-contents .bw-contents--item .brand-wheel--img .no-image::before {
  content: "NO IMAGE";
  color: #1D2087;
  font-size: 1em;
}
.bw-contents .bw-contents--item .brand-wheel--body {
  letter-spacing: 0;
}
.bw-contents .bw-contents--item .brand-wheel--body .name {
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 1.4rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .name .new_flag {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 100%;
  font-weight: 500;
  line-height: 1;
  font-size: 0.715em;
  color: #FF0000;
}
.bw-contents .bw-contents--item .brand-wheel--body .kana {
  margin-bottom: 0.8rem;
  font-weight: 500;
  font-size: 1rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .size {
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 0.6rem;
  column-gap: 0.6rem;
  margin-bottom: 0.8rem;
  word-break: break-word;
  font-weight: 700;
  font-size: 1.1rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .size .label {
  flex: 0 0 auto;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  font-weight: 500;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.bw-contents .bw-contents--item .brand-wheel--body .other {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.4rem;
  column-gap: 0.4rem;
  row-gap: 0.8rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copttl {
  font-weight: 700;
  font-size: 1rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copbody {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.4rem;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copbody .label {
  line-height: 1;
  padding: 0.2rem 0.4rem;
  font-size: 1rem;
  background: #E0E0E0;
  word-break: break-word;
  border-radius: 2px;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copbody .color_class-1 {
  background: #FEBC00;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copbody .color_class-3 {
  background: #F0B2CF;
}
.bw-contents .bw-contents--item .brand-wheel--body .cop .copbody .color_class-8 {
  background: #84E7FF;
}

@media screen and (min-width: 961px) {
  .bw-contents {
    margin-bottom: 12rem;
    padding: 8rem 0;
  }
  .bw-contents .bw-contents--ttl {
    margin-bottom: 5rem;
  }
  .bw-contents .bw-contents--ttl .bw-contents--ttl-en {
    font-size: 5rem;
  }
  .bw-contents .bw-contents--ttl .bw-contents--ttl-ja {
    font-size: 1.8rem;
  }
  .bw-contents .bw-contents--body {
    margin-bottom: 6rem;
  }
  .bw-contents .bw-contents--body + .bw-contents--ttl {
    margin-top: 8em;
  }
  .bw-contents .bw-contents--item {
    flex: 3.8;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--outer {
    padding: 0.5rem 1.2rem 1.6rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--outer:hover .brand-wheel--img img {
    transform: scale(1.05);
  }
  .bw-contents .bw-contents--item .brand-wheel--head .structure {
    transform: translate(-0.9rem, -0.2rem);
  }
  .bw-contents .bw-contents--item .brand-wheel--head .structure .label {
    font-size: 1.2rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--head .madein {
    width: 8.2rem;
    transform: translate(0.9rem, -0.2rem);
  }
  .bw-contents .bw-contents--item .brand-wheel--img {
    margin-bottom: 3.2rem;
    aspect-ratio: 1/1;
    overflow: hidden;
  }
  .bw-contents .bw-contents--item .brand-wheel--img img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.2s ease-out;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .name {
    margin-bottom: 0.4em;
    font-size: 1.8rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .kana {
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .size {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .other {
    margin-bottom: 1rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .cop .copttl {
    font-size: 1.2rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .cop .copbody {
    gap: 0.6rem;
  }
  .bw-contents .bw-contents--item .brand-wheel--body .cop .copbody .label {
    padding: 0.4rem 0.4rem;
    font-size: 1.1rem;
  }
}