@charset "UTF-8";

/* font */
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
}

/* brandArea */
.brandArea {
  padding-top: 30px;
}

/* background-color(gray) */
.brand-product {
  background-color: var(--color-light-gray);
  border-radius: 2rem 2rem 0 0;
  position: relative;
  top: 0;
  z-index: 10;
}

/* background-color(white) */
.brand-recipe {
  background-color: var(--color-white);
  border-radius: 2rem 2rem 0 0;
  position: relative;
  top: -2rem;
  z-index: 10;
}

/* brand-history */
.h-item-01 .inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}
.brand-desc {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding-bottom: 100px;
}
.h-item-01 .left {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.h-item-01 h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.h-item-01 h2 .ttl {
  font-size: var( --font-lg-minus);
  font-weight: var(--font-weight-mid);
  line-height: var(--line-height-md);
}
.h-item-01 h2 .gold {
  font-size: var(--font-lg-plus);
  font-weight: var(--font-weight-mid);
  color: var(--color-gold);
  line-height: var(--line-height-md);
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.history-list li {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}
.history-list li .item-txt h3 {
  font-size: var(--font-lg);
  color: var(--color-gold);
  font-weight: var(--font-weight-mid);
}
.history-list li .item-txt p {
  padding-top:  1.25rem
}
.history-list li .item-img {
  display: flex;
  flex-direction: row-reverse;
}
.history-list li .item-img .img {
  width: 50%;
}
.history-list li .item-img .img img {
  width: 100%;
}

/* brand-product */
.brand-product .inner {
  padding-top: 120px;
  padding-bottom: 120px;
}
.product-desc {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.brand-product h2 {
  display: flex;
  justify-content: flex-start;
}
.brand-product h2 .ttl {
  font-size: var(--font-lg-plus);
  font-weight: var(--font-weight-mid);
  line-height: var(--line-height-md);
}
.brand-product h2 .b-name {
  font-size: var(--font-lg-plus);
  font-weight: var(--font-weight-mid);
  color: var(--color-gold);
  line-height: var(--line-height-md);
  padding-left: 1.25rem;
  text-transform: uppercase;
}
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding-top: 50px;
}
.product-list li {
  background-color: var(--color-white);
  padding: 40px;
}
.product-list li dl dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}
.product-list li dl dt .cate {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-mid);
  line-height: var(--line-height-md);
  color: var(--color-gold);
}
.product-list li dl dt .p-name {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-mid);
  line-height: var(--line-height-md);
}
.product-list li dl dd .p-img {
  display: flex;
  gap: 10px;
}
.product-list li dl dd .p-img .img {
  margin: 0 auto;
  max-width: 250px;
}
.product-list li dl dd .txt {
  padding-top: 1.875rem;
}
.product-list li dl dd .p-table {
  margin-top: 1.25rem;
  border-top: 1px solid var(--color-main-text);
}
.product-list li dl dd .p-table div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 10px;
  border-bottom: 1px solid var(--color-main-text);
  padding: 10px 0;
}
.product-list li dl dd .p-table div dd {
  grid-column: span 5 / span 5;
  padding-top: 0;
}
.product-list li dl dd {
  padding-top: 1.875rem;
}
.product-list li dl dd .note {
  padding-top: 1.25rem;
  font-weight: var(--font-weight-mid);
}
.product-list li dl dd .other {
  padding-top: 1.25rem;
  color: var(--color-gold);
}

/* brand-recipe */
.brand-recipe .inner {
  padding-top: 120px;
  padding-bottom: 120px;
}
.recipe-desc {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.r-item-01 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}
.r-item-01 .left {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.r-item-01 h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.r-item-01 h2 .ttl {
  font-size: var(--font-lg-plus);
  font-weight: var(--font-weight-mid);
  line-height: var(--line-height-md);
}
.r-item-01 h2 .r-name {
  font-size: var(--font-lg-minus);
  font-weight: var(--font-weight-mid);
  color: var(--color-gold);
  line-height: var(--line-height-md);
  padding-left: 1.25rem;
  text-transform: uppercase;
}
.r-item-01 .item {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.r-item-02 {
  width: 100%;
}
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 56.25%;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}





@media screen and (max-width: 1200px) {
/* brand-history */
  .h-item-01 .inner {
    gap: 60px;
  }

/* brand-recipe */
  .r-item-01 {
    gap: 60px;
  }
}


@media screen and (max-width: 1000px) {
/* brandArea */
  .brandArea {
    padding-top: 20px;
  }

/* brand-history */
  .h-item-01 .inner {
    gap: 30px;
  }
  .brand-desc {
    gap: 70px;
    padding-bottom: 80px;
  }
  .h-item-01 .left {
    gap: 30px;
  }
  .h-item-01 h2 .ttl {
    font-size: clamp(1.375rem, 1.199rem + 0.88vw, 1.75rem);
  }
  .h-item-01 h2 .gold {
    font-size: clamp(1.625rem, 1.449rem + 0.88vw, 2rem);
  }
  .history-list {
    gap: 30px;
  }
  .history-list li {
    gap: 26px;
  }
  .history-list li .item-txt h3 {
    font-size: clamp(1.125rem, 0.831rem + 1.47vw, 1.75rem);
  }
  .history-list li .item-txt p {
    padding-top: 1rem;
  }

/* brand-product */
  .brand-product .inner {
    padding-top: 80px;
    padding-bottom: 110px;
  }
  .brand-product h2 .ttl {
    font-size: clamp(1.625rem, 1.449rem + 0.88vw, 2rem);
  }
  .brand-product h2 .b-name {
    font-size: clamp(1.625rem, 1.449rem + 0.88vw, 2rem);
    padding-left: 1.125rem;
  }
  .product-desc {
    gap: 70px;
  }
  .product-list {
    gap: 16px;
    padding-top: 40px;
  }
  .product-list li {
    padding: 26px 20px;
  }
  .product-list li dl dt .cate {
    font-size: clamp(1rem, 0.765rem + 1.18vw, 1.5rem);
  }
  .product-list li dl dt .p-name {
    font-size: clamp(1rem, 0.765rem + 1.18vw, 1.5rem);
  }
  .product-list li dl dd .p-img .img {
    max-width: 150px;
  }

/* brand-recipe */
  .brand-recipe .inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .recipe-desc {
    gap: 70px;
  }
  .r-item-01 {
    gap: 30px;
  }
  .r-item-01 h2 .ttl {
    font-size: clamp(1.625rem, 1.449rem + 0.88vw, 2rem);
  }
  .r-item-01 h2 .r-name {
    font-size: clamp(1.375rem, 1.257rem + 0.59vw, 1.625rem);
    padding-left: 1rem;
  }
  .r-item-01 .left {
    gap: 30px;
  }
  .r-item-01 .item {
    gap: 30px;
  }
}

@media screen and (max-width: 768px) {
/* brand-history */
  .h-item-01 .inner {
    display: flex;
    flex-direction: column;
  }
  .h-item-01 .right {
    max-width: 600px;
    margin: 0 auto;
  }
  .history-list {
    gap: 40px;
  }
  .history-list li {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

/* brand-product */
  .product-list {
    gap: 16px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
  }
  .product-list li {
    padding: 30px 26px;
  }

/* brand-recipe */
  .r-item-01 {
    gap: 30px;
    display: flex;
    flex-direction: column;
  }
  .r-item-01 .right {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 600px) {
/* brand-history */
  .brand-desc {
    gap: 55px;
    padding-bottom: 60px;
  }
  .h-item-01 .inner {
    gap: 36px;
  }
  .h-item-01 .left {
    gap: 26px;
  }
  .history-list li .item-txt p {
    padding-top: 0.625rem;
  }
  .history-list li {
    gap: 20px;
  }

/* brand-product */
  .brand-product .inner {
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .product-desc {
    gap: 56px;
  }
  .product-list {
    gap: 16px;
    padding-top: 30px;
  }
  .product-list li {
    padding: 26px 20px;
  }
  .product-list li dl dd .txt {
    padding-top: 1rem;
  }
  .product-list li dl dd .note {
    padding-top: 1rem;
  }
  .product-list li dl dd .other {
    padding-top: 1rem;
  }
  .product-list li dl dd .p-table div {
    display: flex;
    gap: 2px;
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;
  }

/* brand-recipe */
  .brand-recipe .inner {
      padding-top: 60px;
      padding-bottom: 60px;
  }
  .recipe-desc {
      gap: 56px;
  }
}