/** Shopify CDN: Minification failed

Line 212:0 Unexpected "}"

**/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Protein page only. Copied from the Headgear editorial visual language. */

.protein-brand {
  background: var(--protein-bg, #f4f5f6);
  color: var(--protein-text, #1d2228);
  overflow: hidden;
}

.protein-brand *,
.protein-brand *::before,
.protein-brand *::after {
  box-sizing: border-box;
}

.protein-brand__shell {
  width: min(100%, 156rem);
  margin: 0 auto;
  padding-inline: 1.6rem;
}

.protein-brand__eyebrow,
.protein-brand__kicker {
  margin: 0 0 1.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.protein-brand__heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.protein-brand__body {
  margin-top: 2.4rem;
  max-width: 52rem;
  font-size: 1.55rem;
  line-height: 1.8;
}

.protein-brand__body p {
  margin: 0;
}

.protein-brand__button {
  display: inline-flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding: 0 2.6rem;
  border: 1px solid var(--protein-accent, #0757ff);
  border-radius: 999px;
  background: var(--protein-accent, #0757ff);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.protein-brand__button:hover {
  opacity: .88;
}


/* =========================================
   HERO
   ========================================= */

.protein-brand-hero {
  position: relative;
  min-height: 72rem;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--protein-bg, #5b6168);
}

.protein-brand-hero__media,
.protein-brand-hero__overlay {
  position: absolute;
  inset: 0;
}

.protein-brand-hero__media {
  z-index: -2;
  overflow: hidden;
}

.protein-brand-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) contrast(.98) brightness(1.02);
}

.protein-brand-hero__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef0f2, #dde1e5);
  color: #6d7680;
  font-family: var(--font-heading-family);
  font-size: 8rem;
  font-weight: 700;
}

.protein-brand-hero__overlay {
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(21,24,28,.88) 0%,
      rgba(21,24,28,.56) 36%,
      rgba(21,24,28,.18) 72%
    ),
    linear-gradient(
      0deg,
      rgba(21,24,28,.9) 0%,
      transparent 46%
    );
}

.protein-brand-hero__inner {
  padding-top: 10rem;
  padding-bottom: 6rem;
  color: #fff;
}

.protein-brand-hero .protein-brand__eyebrow {
  color: rgba(255,255,255,.72);
}

.protein-brand-hero .protein-brand__heading {
  max-width: 11ch;
  color: #fff;
}

.protein-brand-hero .protein-brand__body {
  color: rgba(255,255,255,.82);
}

.protein-brand-hero .protein-brand__button {
  border-color: #fff;
  background: #fff;
  color: #1d2228;
}


/* =========================================
   GENERAL SECTIONS
   ========================================= */

.protein-brand-section {
  padding: clamp(6rem, 9vw, 12rem) 0;
}

.protein-brand-section--white {
  background: var(--protein-bg, #fff);
}

.protein-brand-section--dark {
  background: var(--protein-bg, #1d2228);
  color: #fff;
}

.protein-brand-section--dark .protein-brand__eyebrow {
  color: rgba(255,255,255,.68);
}

.protein-brand-section--dark .protein-brand__body {
  color: rgba(255,255,255,.78);
}

.protein-brand-why__intro {
  display: block;
}

.protein-brand-why__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 4rem);
}


/* =========================================
   OTHER SECTION GRIDS
   ========================================= */

.protein-brand-product__grid,
.protein-brand-story__grid,
.protein-brand-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 6vw, 10rem);
}

}
.protein-brand-card {
  position: relative;
  min-height: 27rem;
  padding: 2.4rem;
  border: 1px solid rgba(29,34,40,.08);
  background: #fff;
}

.protein-brand-card__number {
  display: block;
  margin-bottom: 5rem;
  color: var(--protein-accent, #0757ff);
  font-weight: 700;
  font-size: 1.2rem;
}

.protein-brand-card h3 {
  margin: 0;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.protein-brand-card p {
  margin: 1.6rem 0 0;
  font-size: 1.4rem;
  line-height: 1.7;
}

.protein-brand-product__media,
.protein-brand-story__media {
  min-height: 48rem;
  overflow: hidden;
  background: #e8eaec;
}

.protein-brand-product__media img,
.protein-brand-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) contrast(.98);
}

.protein-brand-product__placeholder,
.protein-brand-story__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #6d7680;
  font-family: var(--font-heading-family);
  font-size: 4rem;
  font-weight: 700;
}

.protein-brand-product__price {
  display: block;
  margin-top: 2rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.protein-brand-product__list {
  padding: 0;
  margin: 2.4rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(29,34,40,.14);
}

.protein-brand-product__list li {
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(29,34,40,.14);
  font-size: 1.4rem;
}

.protein-brand-product__list li::before {
  content: "—";
  color: var(--protein-accent, #0757ff);
  margin-right: .8rem;
}

.protein-brand-story__quote {
  align-self: end;
  margin: 0;
  padding: 2.4rem 0 0;
  border-top: 1px solid rgba(29,34,40,.16);
  font-family: var(--font-heading-family);
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
}

.protein-brand-faq__list {
  border-top: 1px solid rgba(29,34,40,.16);
}

.protein-brand-faq__item {
  border-bottom: 1px solid rgba(29,34,40,.16);
}

.protein-brand-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 700;
  list-style: none;
}

.protein-brand-faq__item summary::after {
  content: "+";
  color: var(--protein-accent, #0757ff);
  font-size: 2.4rem;
  font-weight: 400;
}

.protein-brand-faq__item[open] summary::after {
  content: "−";
}

.protein-brand-faq__answer {
  padding: 0 0 2rem;
  font-size: 1.4rem;
  line-height: 1.75;
}

.protein-brand-faq__answer p {
  margin: 0;
}

.protein-brand-cta {
  text-align: center;
}

.protein-brand-cta .protein-brand__heading,
.protein-brand-cta .protein-brand__body {
  margin-inline: auto;
}

.protein-brand-cta .protein-brand__button {
  background: #fff;
  border-color: #fff;
  color: #1d2228;
}


/* =========================================
   MOBILE GENERAL
   ========================================= */

@media screen and (max-width: 749px) {
  .protein-brand-hero {
    min-height: 62rem;
  }

  .protein-brand-hero__inner {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }

  .protein-brand-product__grid,
  .protein-brand-story__grid,
  .protein-brand-faq__grid {
    grid-template-columns: 1fr;
  }

  .protein-brand-why__intro {
    display: block;
  }

  .protein-brand-why__cards {
    grid-template-columns: 1fr;
  }

  .protein-brand-card {
    min-height: auto;
  }

  .protein-brand-card__number {
    margin-bottom: 3rem;
  }

  .protein-brand-product__media,
  .protein-brand-story__media {
    min-height: 34rem;
  }
}


/* =========================================
   PROTEIN HERO SLIDER
   ========================================= */

.protein-hero-slider__track {
  position: relative;
  width: 100%;
  min-height: 72rem;
}

.protein-hero-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 72rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.protein-hero-slider__slide.is-active {
  position: absolute;
  inset: 0;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.protein-hero-slider__slide .protein-brand-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.protein-hero-slider__slide .protein-brand-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.protein-hero-slider__slide .protein-brand-hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
}

.protein-hero-slider__dots {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.protein-hero-slider__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.protein-hero-slider__dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

@media screen and (max-width: 749px) {
  .protein-hero-slider__track {
    min-height: 62rem;
  }

  .protein-hero-slider__slide {
    min-height: 62rem;
  }

  .protein-hero-slider__dots {
    bottom: 1.8rem;
  }
}


/* =========================================
   HERO SLIDER CONTENT ALIGNMENT
   ========================================= */

.protein-hero-slider__slide .protein-brand-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}


/* =========================================
   BEBAS NEUE TYPOGRAPHY
   ========================================= */

.protein-brand__heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

.protein-brand-hero .protein-brand__heading {
  font-size: clamp(4.8rem, 10vw, 8rem);
  letter-spacing: 0.01em;
  line-height: 0.9;
}

.protein-brand__eyebrow,
.protein-brand__kicker {
  font-family: var(--font-heading-family);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* =========================================
   TYPOGRAPHY REFINEMENT — SECTION NUMBERS
   ========================================= */

.protein-brand-card__number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}


/* =========================================
   GO. RUGBY GOLD ACCENT
   ========================================= */

:root {
  --protein-gold: #B08D57;
}

/* セクション番号 */
.protein-brand-card__number {
  color: var(--protein-gold);
}

/* リストのアクセント */
.protein-brand-product__list li::before {
  color: var(--protein-gold);
}

/* FAQの＋／− */
.protein-brand-faq__item summary::after {
  color: var(--protein-gold);
}

/* 商品価格 */
.protein-brand-product__price {
  color: var(--protein-gold);
}

/* ストーリーの引用ライン */
.protein-brand-story__quote {
  border-top-color: var(--protein-gold);
}

/* セクションの細いアクセントライン */
.protein-brand-card {
  position: relative;
}

.protein-brand-card::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-bottom: 1.6rem;
  background: var(--protein-gold);
}

/* 数値・強調テキスト */
.protein-brand .rte strong,
.protein-brand .rte b {
  color: var(--protein-gold);
  font-weight: 700;
}

.protein-brand-product__list li strong,
.protein-brand-product__list li b {
  color: var(--protein-gold);
  font-weight: 700;
}

.protein-brand-card__body strong,
.protein-brand-card__body b {
  color: var(--protein-gold);
  font-weight: 700;
}


/* =========================================
   GO. RUGBY OVERLAY LOGO
   ========================================= */

.protein-brand {
  position: relative;
}

.protein-brand-logo {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 78px;
  z-index: 30;
  pointer-events: none;
}

.protein-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================
   MOBILE — LOGO POSITION
   ========================================= */

@media screen and (max-width: 749px) {
  .protein-brand-logo {
    top: 5%;
    left: 10%;
    width: 64px;
  }
}


/* =========================================
   SLIDE 1 — EVENING LEFT TOP VISIBILITY
   ========================================= */

.protein-hero-slider__slide:nth-child(1) .protein-brand-hero__overlay {
  background:
    radial-gradient(
      ellipse 65% 48% at 18% 12%,
      rgba(15, 18, 20, 0.40) 0%,
      rgba(15, 18, 20, 0.08) 45%,
      rgba(15, 18, 20, 0.00) 78%
    );
}

.protein-hero-slider__slide:nth-child(1) .protein-brand-hero__subtitle {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* =========================================
   1枚目が表示中のときだけ
   GO. RUGBYロゴをネイビーにする
   ========================================= */

.protein-brand:has(.protein-hero-slider__slide:nth-child(1).is-active)
.protein-brand-logo img {
  filter:
    brightness(0)
    saturate(100%)
    invert(18%)
    sepia(25%)
    saturate(1500%)
    hue-rotate(180deg)
    brightness(80%)
    contrast(105%);
}


/* 1枚目のロゴだけ少し左上へ */
.protein-brand:has(.protein-hero-slider__slide:nth-child(1).is-active)
.protein-brand-logo {
  top: 4%;
  left: 4%;
}


/* 1枚目：サブタイトルを少し下へ */
.protein-hero-slider__slide:nth-child(1) .protein-brand-hero__subtitle {
  position: relative !important;
  top: 10px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* =========================================
   WHY RUGBY PROTEIN
   PC：左に見出し、右に3つのカード
   スマホ：現在の縦並びを維持
   ========================================= */

@media screen and (min-width: 750px) {

  /*
    WHYセクションだけ2カラム。
    ヒーローの .protein-brand__shell には
    影響させない。
  */
  .protein-brand-section:has(.protein-brand-why__intro) .protein-brand__shell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 8rem);
    align-items: start;
  }

  .protein-brand-section:has(.protein-brand-why__intro)
  .protein-brand-why__intro {
    display: block;
  }

  .protein-brand-section:has(.protein-brand-why__intro)
  .protein-brand-why__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: 0;
  }

}


/* =========================================
   MOBILE
   今のスマホ表示を維持
   ========================================= */

@media screen and (max-width: 749px) {

  /*
    スマホでは元の縦並び。
    ヒーローにも影響なし。
  */
  .protein-brand-section:has(.protein-brand-why__intro)
  .protein-brand__shell {
    display: block;
  }

  .protein-brand-section:has(.protein-brand-why__intro)
  .protein-brand-why__intro {
    display: block;
  }

  .protein-brand-section:has(.protein-brand-why__intro)
  .protein-brand-why__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: clamp(2rem, 6vw, 4rem);
  }

}
/* WHY RUGBY PROTEIN — カード外枠＋余白 */
.protein-brand-why__cards > * {
  border: 1px solid rgba(29, 34, 40, 0.12);
  box-sizing: border-box;
  padding: 3rem 2.8rem;
}