/* ========================================
       FV Section  (1440 × 50.8125rem)
    ======================================== */
    #fv {
      position: relative;
      overflow: hidden;
      padding:0;
    }
    #fv > .inner {
      position: relative;
      max-width:none;
      padding:0;
    }
    #fv .fv-bottle {
      /*! border-radius: 1.5625rem; */ /* 25px */
      overflow: hidden;
    }
    #fv .fv-bottle .mv {
      position: relative;
      width: 100%;
      aspect-ratio: 2710 / 1260;
      overflow: hidden;
    }
    #fv .fv-bottle .mv-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      user-select: none;
    }
#fv .fv-bottle .mv-splash {
  position:absolute;
  bottom:0;
  width:56%;
  right:-2%;
  transform-origin: center bottom;
}
#fv .fv-bottle .mv-splash-img {
  transform:scale(0.5);
  animation:none;
  opacity:1;
  transform-origin: center bottom;
  transition:transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#fv .fv-bottle .mv-splash-img.js-reveal {
  transform:scale(1);
}
    #fv .fv-bottle .mv-logo {
      position: absolute;
      left: 6%;
      top: 22%;
      width: 42%;
      height: auto;
      display: block;
      /*! filter: drop-shadow(0 0.125rem 0.375rem rgba(0, 0, 0, 0.35)); */
      pointer-events: none;
      user-select: none;
    }
    #fv .fv-bottle .mv-product {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 48%;
      height: auto;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    /* ---------- Beer bottle / cocktail ---------- */
    
    /* ---------- 新感覚（回転ラベル）---------- */
    .fv-label {
      position: absolute;
      left: 19.375rem;
      top: 13.4375rem;
      transform: rotate(-2deg);
      transform-origin: top left;
    }
    .fv-label-text {
      display: block;
      font-size: 2.5rem;
      font-weight: 500;
      color: #fbf5e6;
      white-space: nowrap;
      line-height: normal;
    }
    .fv-label-line {
      display: block;
      margin-top: 0.25rem;
      width: 7.625rem;
    }

    /* ---------- ジンジャーエール!! ---------- */
    .fv-ginger-ale {
      position: absolute;
      left: 27.5rem;
      top: 13.5625rem;
      font-size: 2.8125rem;
      font-weight: 900;
      color: #fbf5e6;
      white-space: nowrap;
      line-height: normal;
    }

    /* ---------- REED'S ---------- */
    .fv-reeds {
      position: absolute;
      left: 23.875rem;
      top: 18.6875rem;
      font-size: 5.3125rem;
      font-weight: 800;
      color: #f5f7fa;
      font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
      letter-spacing: 1.0625rem;
      text-shadow: 0rem 0.125rem 0.375rem rgba(0,0,0,0.7);
      white-space: nowrap;
      line-height: normal;
    }
    /* D' の直後の S だけ少し詰める */
    .fv-reeds .tight {
      letter-spacing: 0.16rem;
    }

    /* ---------- ジンジャービア ---------- */
    .fv-gingerbeer {
      position: absolute;
      left: 22.75rem;
      top: 25rem;
      font-size: 3.875rem;
      font-weight: 400;
      color: #f5f7fa;
      text-shadow: 0rem 0.125rem 0.375rem rgba(0,0,0,0.7);
      white-space: nowrap;
      line-height: normal;
      letter-spacing: -0.1163rem;
    }
    .fv-gingerbeer .ya {
      letter-spacing: -0.31rem;
    }

    /* ---------- バッジ ---------- */
    .fv-badge {
      position: absolute;
      left: 29.5rem;
      top: 31.8125rem;
      width: 12.5625rem;
      height: 6.375rem;
      background: rgba(251,245,230,0.7);
      border-radius: 0.5rem;
    }
    .fv-badge-main {
      position: absolute;
      left: 1.625rem;
      top: 0.8125rem;
      font-size: 2.1875rem;
      font-weight: 700;
      color: var(--c-primary);
      letter-spacing: 0.175rem;
      white-space: nowrap;
    }
    .fv-badge-sub {
      position: absolute;
      left: 1.25rem;
      top: 3.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--c-primary);
      letter-spacing: -0.075rem;
      white-space: nowrap;
    }

    /* ========================================
       NEWS Section
    ======================================== */
    #news {
      /*! background: #ffffff; */
      padding: 1.8125rem 0 3.75rem;
    }
    .news-heading-en {
                        color: var(--c-primary);
          }
    .news-heading-ja {
                  color: var(--c-primary);
          }
    .news-slider-wrap {
      position: relative;
    }
    .news-nav {
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border: 0;
      background: transparent center / contain no-repeat;
      cursor: pointer;
    }
    .news-nav.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .news-nav--prev {
      left: 0;
      background-image: url("../images/swiper-prev.png");
    }
    .news-nav--next {
      right: 0;
      background-image: url("../images/swiper-next.png");
    }
    /* スライド内カードを縦いっぱいに（兄弟スライドと高さ揃え） */
    #news .news-cards .swiper-wrapper {
      align-items: stretch;
    }
    #news .news-cards .swiper-slide {
      display: flex;
      height: auto;
      box-sizing: border-box;
    }
    #news .news-cards .swiper-slide .news-card {
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      align-self: stretch;
    }
    /* Swiper のスライド幅はインライン指定。!important はデスクトップのみ（SPで潰さない） */
    @media (min-width: 561px) {
      #news .news-cards.swiper {
        overflow: visible;
      }
      #news .news-cards .swiper-wrapper {
        gap: 3%;
      }
      #news .news-cards .swiper-slide {
        flex: 1 1 0%;
        min-width: 0;
        width: auto !important;
        box-sizing: border-box;
      }
    }
    .news-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
    }
    .news-purchase {
      background: var(--c-primary);
      color: #fbf5e6;
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .news-card {
      flex:1;
      background: #ffffff;
      border-radius: 0.625rem;
      box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0,0,0,0.25);
      position: relative;
      overflow: hidden;
      display:flex;
      flex-direction: column;
    }
    .news-card-img {
      width:100%;
      display: block;
    }
    .news-card > .news-card-link {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      text-decoration: none;
      color: inherit;
    }
    .news-card-body {
      padding: 1rem 0.9375rem;
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      flex:1;
    }
    .news-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--c-primary);
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      height: 1.25rem;
      border-radius: 0.625rem;
      padding: 0 0.625rem;
      white-space: nowrap;
      margin-bottom: 0.4375rem;
    }
    .news-card-text {
      font-size: 1rem;
      font-weight: 700;
      color: var(--c-primary);
      line-height: 1.3125;
      text-align: justify;
      flex:1;
    }
    .news-card-date {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      color: #777777;
      line-height: 1.75;
      margin-top: 0.875rem;
    }
    .news-card-cta {
      margin-left:auto;
      width:fit-content;
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--c-primary);
      white-space: nowrap;
    }
    .news-card-arrow {
      width: 1.4em;
      aspect-ratio: 1 / 1;
      border: 1px solid var(--c-primary);
      border-radius: 9999px;
      position: relative;
      background: transparent;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      margin-left:0.5rem;
    }
    .news-card-arrow-line {
      height: 1px;
      width: 130%;
      background: var(--c-primary);
      border-radius: 9999px;
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translate(0, -50%);
    }

    /* ========================================
       ABOUT BRAND（リーズとは？）
    ======================================== */
    #about-brand {
      position: relative;
      padding-bottom:0;
    }

    .ab-ginger {
      position: relative;
      width: 100%;
      height: 19.625rem;
      overflow: hidden;
    }
    .ab-ginger-mask {
      position: absolute;
      left: 50%;
      top: -6.9375rem;
      transform: translateX(-50%);
      width: 100.25rem;
      height: 60.75rem;
    }
    .ab-ginger-mask img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ab-story {
      position: relative;
      padding: 3rem 0 2rem;
      text-align: center;
      color: var(--c-primary);
    }
    .ab-deco-ginger {
      margin-inline:auto;
      width: 33.5625rem;
      pointer-events: none;
      z-index: 0;
    }
    .ab-deco-ginger img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ab-story-inner {
      position: relative;
      z-index: 1;
    }
    .ab-heading-en {
                              margin-bottom: 0.5rem;
    }
    .ab-heading-sub {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      margin-bottom: 1.5rem;
    }
    .ab-heading-sub-en {
      font-family: 'Montserrat', sans-serif;
      font-size: 2.6875rem;
      font-weight: 700;
      line-height: 1;
    }
    .ab-body {
                        /*! max-width: 61.75rem; */
      margin: 0 auto;
          }
    .ab-body p + p {
      margin-top: 0;
    }

    .ab-beach-wrap {
      aspect-ratio: 100 / 20;
      overflow: hidden;
      position: relative;
    }
    .ab-beach-mask {
      /*! position: absolute; */
      /*! left: 50%; */
      /*! top: -10.4375rem; */
      /*! transform: translateX(-50%); */
      width: 100%;
      /*! aspect-ratio: 1454 / 560; */
      height: 200%;
    }
    .ab-beach-mask video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
      display: block;
    }

    /* 下部：緑エリア＋ボトル重ね（波形・コピーは同一レイヤで重ねる） */
    .ab-bottom {
      position: relative;
      background: #00443f;
      margin-top: 2rem;
      padding-bottom:0;
    }
    .ab-bottom--v2 {
      background: transparent;
      margin-top: 0;
      padding-bottom: 0;
      /*! overflow: hidden; */
      aspect-ratio: 1440 / 408;
      padding-top: 0;
    }
    .ab-bottom > .inner {
      position:relative;
      height: 100%;
      max-width: none;
    }
    .ab-bottom::before {
      content: "";
      position: absolute;
      /*! inset: 0; */
      background-image: url('../images/about-brand_05.webp');
      background-repeat: no-repeat;
      background-position: left top;
      background-size: cover;
      opacity: 0.7;
      pointer-events: none;
      z-index: 1;
      bottom: 0;
      width:100%;
      height:calc(100% + 4rem);
    }
    .ab-bottom--v2::before {
      content: none;
    }
    .ab-bottom--v2 .ab-bottom-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0; /* 70px */
      width:100%;
      height:100%;
      /*! aspect-ratio: 1440 / 408.944; */
      background-image: url('../images/ab-bottom_bg.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      z-index: 0;
      pointer-events: none;
    }
    .ab-wave-img {
      display: block;
      width: 100%;
      height: auto;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      pointer-events: none;
    }
    .ab-bottom-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      /*! padding: 4.5rem 0 0; */
      /*! min-height: 22.5rem; */
    }
    .ab-bottom--v2 .ab-bottom-inner {
      /*! min-height: 34.5rem; */ /* bottle height 552px */
      z-index: 2;
      display: block;
      height: 100%;
    }
    .ab-founder {
      width:25%;
      text-align: center;
    }
    .ab-founder-photo {
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      overflow: hidden;
    }
    .ab-founder-caption {
      margin-top: 0.5em;
      font-size: 1em;
      font-weight: 500;
      color: #fbf5e6;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .ab-bottom--v2 .ab-founder--v2 {
      position: static;
      width: 48%; /* 280px */
      text-align: center;
      margin: 0;
      padding: 0;
    }
    .ab-bottom--v2 .ab-founder-photo {
      border: 0.25rem solid #fff; /* 4px */
    }
    .ab-bottom--v2 .ab-founder-photo img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 280 / 188;
    }
    .ab-bottom--v2 .ab-founder-caption {
      font-size: 1.2em; /* 14px */
      letter-spacing: 0.02em;
    }
    .ab-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width:50%;
      align-self: center;
    }

.ab-center, .ab-founder {
  padding-bottom:3rem;
}

    .ab-tagline {
      font-size: 2.1875rem;
      font-weight: 700;
      color: #fbf5e6;
      text-align: center;
      line-height: 1.6;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      max-width: 37.1875rem;
      margin-bottom: 2rem;
    }
    .ab-bottom--v2 .ab-center--v2 {
      position: static;
      width: auto; /* 500px */
      align-items: flex-start;
      text-align: left;
      padding-bottom: 0;
      /*! font-size: 1vw; */
      align-self: unset;
    }

    .ab-bottom--v2 .ab-center-founder-area {
      position: absolute;
      left: 56.2%;
      top: 20%; /* 142px */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(1rem, 2vw, 2rem);
      justify-content: flex-start;
      font-size: 1vw;
    }
    .ab-bottom--v2 .ab-cta-founder {
      display: flex;
      align-items: flex-start;
      gap: clamp(1rem, 2vw, 2rem);
      justify-content: space-between;
      padding-right: 21%;
    }
    .ab-bottom--v2 .ab-tagline {
      font-size: 1.8em; /* 28px */
      line-height: 1.8; /* 42px */
      text-align: left;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(58,108,142,0.9);
      margin-bottom: 0;
      max-width: none;
      /*! white-space: nowrap; */
    }
    .ab-bottom--v2 .ab-cta {
      background: #13433f;
      color: #fbf5e6;

      display: inline-grid;
      place-items: center;
      border-radius: 0.1875rem; /* 3px */
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      font-size: 1.1em;
      max-width: none;
    }
    .ab-cta {
                                    background: #fbf5e6;
            box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
                        color: var(--c-primary);
    }
    .ab-bottle-wrap {
      position: relative;
      width:25%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    .ab-bottom--v2 .ab-bottle-wrap {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 10.5%; /* 163px */
      padding-bottom: 0;
    }
    .ab-bottle-media {
      /*! display: flex; */
      /*! align-items: flex-end; */
      /*! width: 74%; */
      /*! aspect-ratio: 201 / 1015; */
      /*! overflow: hidden; */
      /*! position: absolute; */
    }
    .ab-bottom--v2 .ab-bottle-media {
      /*! position: static; */
      /*! width: 100%; */
      /*! aspect-ratio: auto; */
      /*! overflow: visible; */
    }
    .ab-bottom--v2 .ab-bottle-media img {
      width: 100%;
      height: auto;
    }
    .ab-bottle-media img {
      display: block;
    }

    /* ========================================
       PRODUCT（商品紹介）
    ======================================== */
    #product {
      position: relative;
      /*! background: #fbf5e6; */
      overflow: hidden;
    }
    .product-texture {
      position: absolute;
      left: 50%;
      top: -9rem;
      transform: translateX(-50%);
      width: 193.4375rem;
      height: 117.1875rem;
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }
    .product-texture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .product-inner {
      position: relative;
      z-index: 1;
      padding: 4.5rem 3rem 6rem;
    }
    .product-head {
      position: relative;
      /*! --sec-head-mb: 3rem; */
    }
    .product-heading-en {
                        color: var(--c-primary);
                }
    .product-heading-ja {
                  color: var(--c-primary);
          }
    .product-lime {
      position: absolute;
      left: 95%;
      top: -1.5rem;
      width:25%;
      transform:translateX(-50%);
    }
    .product-lime img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .product-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2.5rem;
    }
    .product-visual {
      position: relative;
      flex: 0 0 50%;
      /*! height: 40.5rem; */
    }
    .product-ginger {
      position: absolute;
      left:0;
      bottom:0;
      width:50%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transform:translate(-10%, 50%);
      z-index: 1;
    }
    .product-ginger-inner {
      /*! width: 21.125rem; */
      /*! height: 16.875rem; */
      transform: rotate(-166.83deg) scaleY(-1);
      transform-origin: center center;
    }
    .product-ginger-inner img {
      /*! width: 115.14%; */
      /*! max-width: none; */
      /*! height: 100%; */
      /*! margin-left: -8.9%; */
      /*! object-fit: cover; */
      display: block;
    }
    .product-hero {
      margin-left:auto;
      filter: drop-shadow(0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25));
    }
    .product-hero-mask {
      width: 100%;
      height: 100%;
    }
    .product-hero-mask img {
      width: 85%;
      height: 100%;
      margin-left:auto;
      object-fit: cover;
      display: block;
    }
    .product-detail {
      flex: 1;
      max-width: 30.1875rem;
      padding-top: 0.5rem;
      color: var(--c-primary);
    }
    .product-name-a {
                              margin: 0 0 0.25rem;
    }
    .product-name-b {
                              margin: 0 0 1rem;
    }
    .product-meta {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.25rem 0.5rem;
      margin-bottom: 0.2em;
      font-weight: 500;
    }
    .product-meta-kind {
      font-size: 1.25rem;
      letter-spacing: 0.0625rem;
    }
    .product-meta-sub {
      font-size: 1rem;
      letter-spacing: -0.06em;
    }
    .product-volume {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.25rem;
      margin-bottom: 1.5em;
      font-size: 0.875rem;
      font-weight: 500;
    }
    .product-volume-val {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
    }
    .product-features {
      border: 1px solid var(--c-primary);
      border-radius: 0.25rem;
      padding: 0.625rem 0.75rem 0.75rem;
      max-width: 21.8125rem;
      margin: 0 auto 1.5rem;
    }
    .product-feature-row {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.6429;
    }
    .product-feature-row + .product-feature-row {
      margin-top: 0.375em;
    }
    .product-feature-row img {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      margin-top: 0.1875rem;
    }
    .product-body {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.6429;
      margin-bottom: 2rem;
    }
    .product-body p {
      margin: 0 0 1em;
    }
    .product-body p:last-child {
      margin-bottom: 0;
    }
    .product-ctas {
      display: flex;
      
      gap: 2.5rem 5%;
      justify-content: center;
    }
    .product-purchase-cta {
      background: var(--c-primary);
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
      color: #fbf5e6;
      transition: opacity 0.2s;
    }
    .product-purchase-cta:hover {
      opacity: 0.88;
    }
    .product-btn-amazon {
                                    background: #e87000;
            box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
                        color: #fbf5e6;
    }
    .product-btn-rakuten {
                                    background: #f0000f;
                              color: #fbf5e6;
    }

    /* ========================================
       WHAT'S GINGER BEER
    ======================================== */
    #whats-ginger-beer {
      position: relative;
      background: var(--c-primary);
    }
    .gb-inner {
      position: relative;
      /*! padding-bottom: 6rem; */
    }
    .gb-head {
            padding: 0.5rem 0 2.5rem;
      color: #fbf5e6;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .gb-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2.5rem;
      padding: 0 3rem 0;
    }
    .gb-intro-copy {
      flex: 1;
      /*! max-width: 39.3125rem; */
      color: #fbf5e6;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .gb-lead {
      text-align: center;
      font-weight: 500;
      margin-bottom: 1.25rem;
    }
    .gb-lead p {
      margin: 0;
      /*! line-height: 2.6875; */
    }
    .gb-tx {
      font-size: 1.5625rem;
    }
    .gb-em {
      font-size: 2.1875rem;
      font-weight: 700;
    }
    .gb-tx-md {
      font-size: 1.875rem;
      font-weight: 700;
    }
    .gb-star {
      display: block;
      margin: 0.75rem auto 1.25rem;
      width: 1rem;
      aspect-ratio: 1 / 1;
    }
    .gb-body p {
      margin: 0;
    }
.gb-body p + p {
  margin-top:1.5em;
}
    .gb-intro-photo {
      flex: 0 0 40%;
      /*! width: 24.9375rem; */
      /*! height: 31.0625rem; */
      /*! box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25); */
      /*! overflow: hidden; */
    }
    .gb-intro-photo img {
      /*! width: 100%; */
      /*! height: 100%; */
      /*! object-fit: cover; */
      /*! display: block; */
    }
    .gb-compare {
      padding: 0 rem;
      max-width: 78rem;
      margin: 0 auto;
    }
    .gb-compare-shell {
      background: #ffffff;
      border-radius: 0.1875rem;
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      padding: 1.8125rem 1.5rem 2rem;
      position: relative;
    }
    .gb-compare-frame {
      position: relative;
      border: 0.125rem solid var(--c-primary);
      border-radius: 0.1875rem;
      background: #fbf5e6;
    }
    /* ---------- Grid 比較表 ---------- */
    .gb-grid {
      display: grid;
      grid-template-columns: 18% 45% 37%;
      position: relative;
      font-size: 1.375rem;
      color: var(--c-primary);
    }
    .gb-grid::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 18%;
      width: 45%;
      border: 0.8rem solid var(--c-primary);
      pointer-events: none;
      z-index: 1;
      border-radius: 0.4em;
      transform:scale(1.03);
    }

    /* --- 行コンテナ --- */
    .gb-grid-header,
    .gb-grid-row {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }

    /* --- 全セル共通 --- */
    .gb-grid-header > div,
    .gb-grid-row > div {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.125rem 1.25rem;
      line-height: 1.4;
    }

    /* --- ヘッダー行 --- */
    .gb-grid-header > .gb-col-label {
      border-bottom: 0.0625rem dashed var(--c-primary);
    }
    .gb-grid-header > .gb-col-beer {
      background: var(--c-primary);
      color: #fbf5e6;
      font-size: 2.0625rem;
      font-weight: 800;
      padding-top: 1.75rem;
      padding-bottom: 1.75rem;
      position: relative;
      z-index: 2;
    }
    .gb-col-beer-inner {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
    }
    .gb-col-beer-inner img {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
    }
    .gb-grid-header > .gb-col-ale {
      font-size: 1.875rem;
      font-weight: 700;
      border-bottom: 0.0625rem dashed var(--c-primary);
    }

    /* --- データ行 --- */
    .gb-grid-row > .gb-col-label {
      font-size: 1.125rem;
      font-weight: 700;
      padding: 1.125rem 0.75rem;
      border-bottom: 0.0625rem dashed var(--c-primary);
    }
    .gb-grid-row > .gb-col-beer {
      font-weight: 700;
      border-bottom: 0.0625rem dashed var(--c-primary);
      font-size:1.375rem;
    }
    .gb-grid-row > .gb-col-ale {
      font-weight: 500;
      border-bottom: 0.0625rem dashed var(--c-primary);
      font-size:1.375rem;
    }
    .gb-grid-row:last-child > div {
      border-bottom: none;
    }

    /* ========================================
       ジンジャービアの歴史
    ======================================== */
    #history {
      position: relative;
      background: #ffffff;
      padding: 6.9375rem 0; /* 111px */
      overflow: hidden;
    }
    #history::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../images/history_bg.webp") center / cover no-repeat;
      opacity: 0.2;
      pointer-events: none;
      z-index: 0;
    }
    #history::after {
      content: "";
      position: absolute;
      inset: 0;
      background: #f2ebe9;
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: 0;
    }

    .history-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 3.5rem; /* 40px */
      align-items: center;
      width: 100%;
      max-width: 74.9375rem; /* 1199px */
      margin-inline: auto;
    }
    .history-title {
      margin: 0;
      font-size: 3rem; /* 48px */
      font-weight: 700;
      line-height: 1;
      color: var(--c-primary);
      text-align: center;
      width: 100%;
    }

    .history-lead {
      position: relative;
      width: 100%;
      min-height: 17rem; /* 272px */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .history-lead-text {
      margin: 0;
      font-size: 1.125rem; /* 18px */
      font-weight: 500;
      line-height: 2.5rem; /* 40px */
      color: var(--c-primary);
      text-align: center;
      width: 100%;
      max-width: 75rem; /* 1200px */
      position: relative;
      z-index: 1;
    }
    .history-line {
      /*! display: block; */
      background-image: linear-gradient(to bottom, #efe4da 0, #efe4da 100%);
      background-repeat: no-repeat;
      /* 行高(40px)の中に色面(32px)を中央配置 */
      background-size: 100% 2rem;
      background-position: center;
    }

    .history-table-placeholder {
      margin: 0;
      font-size: 3rem; /* 48px */
      font-weight: 700;
      line-height: 1;
      color: var(--c-primary);
      text-align: center;
      width: 100%;
    }

    /* ========================================
       そのままでも（楽しみ方）
    ======================================== */
    #enjoy {
      position: relative;
      /*! background: #fbf5e6; */
      overflow: hidden;
    }
    .enjoy-texture {
      position: absolute;
      left: 50%;
      top: -9.375rem;
      transform: translateX(-50%);
      width: 134.4375rem;
      height: 81.4375rem;
      pointer-events: none;
      z-index: 0;
      opacity: 0.9;
    }
    .enjoy-texture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .enjoy-inner {
      position: relative;
      z-index: 1;
      padding: 4.5rem 1.5rem 7rem;
    }
    .enjoy-title {
      text-align: center;
      margin: 0 auto 1.75rem;
    }
.enjoy-title img {
  width:auto;
  height:7.5rem;
}
    .enjoy-lead {
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 2;
      color: var(--c-primary);
      text-align: center;
      max-width: 46.6875rem;
      margin: 0 auto 5.5rem;
    }
    .enjoy-lead p {
      margin: 0;
    }
    .enjoy-grid {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
      max-width: 82.5rem;
      margin: 0 auto;
    }
    .enjoy-card {
      flex: 1;
      min-width: 0;
      /*! max-width: 24.375rem; */
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .enjoy-card-visual {
      width: 100%;
      margin-bottom: 1.25rem;
      filter: drop-shadow(0.0625rem 0.0625rem 0.5rem rgba(0,0,0,0.25));
    }

    .enjoy-card-panel {
      width: 90%;
      /*! overflow: hidden; */
    }
    .enjoy-card-panel img {
      width:100%;
      /*! transform:scale(1.1); */
      /*! max-width:none; */
      display: block;
      position: relative;
      left:1em;
    }
    .enjoy-card-masked img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.enjoy-card-caption {
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6667;
      color: var(--c-primary);
      /*! text-align: center; */
      width: 100%;
      max-width: 24.25rem;
    }
    .enjoy-card-caption p {
      margin: 0;
    }
    .enjoy-gallery {
      position: relative;
      z-index: 1;
      padding: 2.125rem 0.625rem;
      background: #D38D00;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
    }
    .enjoy-gallery .swiper-wrapper {
      align-items: center;
    }
    .enjoy-gallery .swiper-slide {
      height: auto;
    }
    .enjoy-gallery .swiper-slide img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }
    .enjoy-pagination {
      position: static;
      margin: 0.625rem auto 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
    }
    

    /* ========================================
       FAQ
    ======================================== */
    #faq {
      position: relative;
      /*! background: #fbf5e6; */
      overflow: hidden;
      padding: 4.5rem 0 6.875rem;
    }
    .faq-texture {
      position: absolute;
      left: 50%;
      top: -31.1875rem;
      transform: translateX(-50%);
      width: 165.4375rem;
      height: 100.25rem;
      pointer-events: none;
      z-index: 0;
      transform-origin: center;
    }
    .faq-texture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: rotate(90deg);
      transform-origin: center;
    }
    .faq-inner {
      position: relative;
      z-index: 1;
    }
    .faq-head {
            color: var(--c-primary);
      --sec-head-mb: 1.75rem;
    }
    .faq-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 0 auto 3.5rem;
      color: var(--c-primary);
      font-size: 1.25rem;
      letter-spacing: 0.1125rem;
      text-align: center;
      user-select: none;
      width:fit-content;
      border-left:2px solid var(--c-primary);
      border-right:2px solid var(--c-primary);
    }
    .faq-tabs a {
      color: inherit;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      padding: 0 1.75rem;
      position: relative;
    }

    .faq-tabs a:not(:first-child) {
      border-left: 2px solid var(--c-primary);
    }
    .faq-tabs a::after {
      content: "";
      width: 0.8em;
      height: 0.8em;
      border-right: 2px solid var(--c-primary);
      border-bottom: 2px solid var(--c-primary);
      transform: rotate(45deg) translateY(-0.05rem);
      margin-left: 0.75em;
      flex: 0 0 auto;
    }
    .faq-section {
      max-width: 58.25rem;
      margin: 0 auto 3rem;
    }
    .faq-section-title {
      text-align: center;
      font-size: 1.625rem;
      font-weight: 700;
      color: var(--c-primary);
      margin: 0 0 1.375rem;
    }
    .faq-item {
      /*! width: 58.25rem; */
      margin: 0 auto 1.5rem;
      box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      background: #ffffff;
    }
    .faq-q {
      background: var(--c-primary);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1rem 1.375rem;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
    }
    .faq-q:focus-visible {
      outline: 0.1875rem solid #fac138;
      outline-offset: 0.1875rem;
    }
    .faq-q .qtext {
      flex: 1;
    }
    .faq-q .icon {
      width: 1.375rem;
      height: 1.125rem;
      flex: 0 0 auto;
      display: block;
      object-fit: contain;
      object-position: center;
    }
    .faq-a {
      overflow: hidden;
      height: 0;
      transition: height 520ms cubic-bezier(0.77, 0, 0.175, 1);
    }
    .faq-item.is-collapsed .faq-a {
      pointer-events: none;
    }
    .faq-a-inner {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 1.125rem 1.375rem;
      color: var(--c-primary);
      font-size: 1rem;
      font-weight: 700;
    }
    .faq-a .atext {
      flex: 1;
    }
    .faq-item.is-collapsed .faq-q {
      background: #ffffff;
      color: var(--c-primary);
    }
    .faq-item.is-collapsed .faq-q .qmark {
      color: var(--c-primary);
    }
    .faq-item.is-collapsed .faq-q .qtext {
      color: var(--c-primary);
    }
    .faq-item.is-collapsed .faq-q .icon {
      filter: none;
    }

    /* ========================================
       Photo strip (image 24)
    ======================================== */
    #photo-24 {
      aspect-ratio: 1000 / 250;
      overflow: hidden;
      background: #000;
      padding:0;
    }
    #photo-24 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ========================================
       CONTACT US（お問い合わせ）
    ======================================== */
    #contact {
      position: relative;
      background: #0F4D3C;
      background-image: url('../images/bg_grass_l.webp'), url('../images/bg_grass_r.webp');
      background-position: left center, right center;
      background-repeat: no-repeat, no-repeat;
      background-size: auto 100%;
      color: #fbf5e6;
      padding: 6.875rem 0 7.5rem;
      overflow: hidden;
    }
    .contact-bg {
      position: absolute;
      left: 50%;
      top: -1.5rem;
      transform: translateX(-50%);
      width: 97.0625rem;
      height: 72.0625rem;
      pointer-events: none;
      opacity: 0.3;
    }
    .contact-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .contact-inner {
      position: relative;
      z-index: 1;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .contact-lead {
      max-width: 41.5rem;
      margin: 0 auto 3rem;
                            }
    .contact-form {
      width:100%;
      max-width:775px;
      margin: 0 auto;
    }
    .contact-row {
      display: flex;
      align-items: center;
      gap: 1.125rem;
      margin-bottom: 1.75rem;
    }
    .contact-label {
      flex: 0 0 32.5%;
      min-width: 0;
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .req {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.875rem;
      height: 0.8125rem;
      background: #fbf5e6;
      color: #e21910;
      font-size: 0.625rem;
      font-weight: 700;
      line-height: 1;
      text-shadow: none;
    }
    .contact-field {
      flex: 1 1 0%;
      min-width: 0;
    }
    .contact-input,
    .contact-textarea {
      width: 100%;
      border: 0;
      border-radius: 0.1875rem;
      background: #fbf5e6;
      font-size: 1rem;
      padding: 0.625rem 0.75rem;
      outline: none;
      color: var(--c-primary);
    }
    .contact-input {
      height: 2.5rem;
    }
    .contact-textarea {
      height: 7.5625rem;
      resize: vertical;
      min-height: 7.5625rem;
    }
    .contact-consent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin: 2.25rem 0 2rem;
      font-size: 1rem;
      font-weight: 700;
      text-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
    }
    .contact-check {
      width: 1.875rem;
      height: 1.875rem;
      background: #fbf5e6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.125rem;
      flex: 0 0 auto;
    }
    .contact-check input {
      width: 1.125rem;
      height: 1.125rem;
      accent-color: var(--c-primary);
    }
    .contact-consent a {
      color: #fbf5e6;
      text-decoration: underline;
    }
    .contact-submit {
      display: flex;
      justify-content: center;
    }
    .contact-btn {
                  background: #fbf5e6;
      border: 0;
            box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0,0.25);
      color: var(--c-primary);
                      }

    /* ========================================
       COMPANY PROFILE（会社概要）
    ======================================== */
    #company-profile {
      position: relative;
      overflow: hidden;
      padding: 5.25rem 0 3.5rem;
    }
    .cp-inner {
      position: relative;
      color: var(--c-primary);
    }
    .cp-head {
      --sec-head-mb: 3.5rem;
    }
    .cp-block {
      max-width: 67.25rem;
      margin: 0 auto 3.375rem;
    }
    .cp-block-title {
      font-size: 1.75rem;
      font-weight: 700;
      margin: 0 0 1.5rem;
    }
    .cp-row {
      display: flex;
      align-items: baseline;
      gap: 1.5rem;
      padding: 0.75rem 0 0.875rem;
      border-bottom: 0.0625rem solid rgba(19,67,63,0.6);
    }
    .cp-key {
      width: 15%;
      font-size: 1.125rem;
      font-weight: 500;
    }
    .cp-val {
      flex: 1;
      font-size: 1.125rem;
      font-weight: 500;
    }
    .cp-sns {
      margin-top: 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.125rem;
    }
    .cp-icons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.875rem;
    }
    .cp-icons a {
      display: block;
      line-height: 0;
      width: 8.3125rem;
      /*! aspect-ratio: 1 / 1; */
    }
    .cp-handle {
      font-size: 1.875rem;
      font-weight: 500;
    }

    /* ---------- SCROLL ---------- */
    .fv-scroll-outer {
      position: absolute;
      left: 50%;
      bottom: 2rem;
      transform: translateX(-50%);
    }
    .fv-scroll {
      position: relative;
    }
    .fv-scroll-text {
      display: block;
      font-size: 0.5rem;
      font-weight: 500;
      color: #fbf5e6;
      text-shadow: 0rem 0.125rem 0.5rem rgba(0,0,0,0.4);
      letter-spacing: 0.1em;
    }
    /* circle + vertical line */
    .fv-scroll-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      filter: drop-shadow(0rem 0.125rem 0.5rem rgba(0,0,0,0.4));
    }
.fv-scroll-circle {
      width: 1.25em;
      height: 1.25em;
      border: 2px solid #fbf5e6; /* 1px */
      border-radius: 6.25em; /* 100px 相当 */
      position: relative;
      background: transparent;
      display: grid;
      place-items: center;
    }
.fv-scroll-line {
  width: 2px; /* 1px */
  height: 250%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.fv-scroll-line::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fbf5e6;
      border-radius: 6.25rem;
      transform-origin: top center;
      transform: scaleY(0);
      animation: fv-scroll-line-draw 1.75s linear infinite;
    }
@keyframes fv-scroll-line-draw {
  /* 0.6s で上→下に伸長 */
  0% {
    transform: scaleY(0);
  }
  34.286% {
    transform: scaleY(1);
  }
  /* 1s 保持（計 1.6s まで） */
  91.429% {
    transform: scaleY(1);
  }
  /* リセット後、次ループまで短い余白 */
  91.43%,
  100% {
    transform: scaleY(0);
  }
}
    .fv-scroll-star {
      position: absolute;
      left: 0.8125rem;
      top: 6.3125rem;
      width: 1rem;
    }
    .fv-scroll-dot {
      position: absolute;
      left: 2.0625rem;
      top: 6.625rem;
      width: 0.4375rem;
    }


/* ---------- Scroll animations ---------- */
:root{--reveal-dur:900ms;--reveal-delay:0ms;}
@media (prefers-reduced-motion: reduce){
  .js-reveal,.js-parallax{transition:none!important;animation:none!important;transform:none!important;opacity:1!important;}
  .faq-a{transition:none!important;height:auto!important;overflow:visible!important;}
  #fv .fv-bottle,
  #fv .fv-scroll{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    will-change:auto!important;
  }
  .fv-scroll-line::before{
    animation:none!important;
    transform:none!important;
  }
}
.js-reveal{
  opacity:0;
  transform: translate3d(var(--rx,0), var(--ry,18px), 0) rotate(var(--rrot,0deg)) scale(0.96);
  will-change: transform, opacity;
}
.js-reveal.is-revealed{
  opacity:1;
  animation: reveal-elastic var(--reveal-dur) cubic-bezier(.2,.9,.2,1.2) var(--reveal-delay) both;
}
@keyframes reveal-elastic{
  0%{opacity:0;transform: translate3d(var(--rx,0), var(--ry,18px), 0) rotate(var(--rrot,0deg)) scale(0.92);}
  55%{opacity:1;transform: translate3d(calc(var(--rx,0)*-0.12), calc(var(--ry,18px)*-0.18), 0) rotate(calc(var(--rrot,0deg)*-0.35)) scale(1.06);}
  78%{transform: translate3d(0,0,0) rotate(calc(var(--rrot,0deg)*0.15)) scale(0.985);}
  100%{opacity:1;transform: translate3d(0,0,0) rotate(0deg) scale(1);}
}
/* MV 入場（reveal-elastic 終了後に下層の IntersectionObserver を起動） */
#fv .fv-bottle{
  --rx:0;
  --ry:26px;
  --rrot:-2deg;
  /* fv-bottle の入場アニメーションは一旦無効 */
  animation:none;
  opacity:1;
  transform:none;
  will-change:auto;
}
#fv .fv-bottle video {
  width:100%;
}
#fv .fv-scroll{
  --rx:0;
  --ry:18px;
  --rrot:1.5deg;
  will-change:transform,opacity;
  animation:reveal-elastic var(--reveal-dur,900ms) cubic-bezier(.2,.9,.2,1.2) 140ms both;
}
.js-parallax{will-change: transform;}


/* ============================================================
   RESPONSIVE  ≤ 560px  (1rem = 6.9vw)
   ============================================================ */
@media (max-width: 560px) {
  /* ---- 共通（ベース・ユーティリティは common.css）---- */

  .pagetop-fixed{
    width: 2.5rem;
    height: 2.5rem;
    right:0.8rem;
    bottom:1rem;
  }

  /* ---- FV ---- */
  #fv {
    /*! padding-top:1rem; */
  }
  #fv .fv-bottle .mv {
    aspect-ratio: 351 / 516;
    padding:4vw;
  }
  #fv .fv-bottle { /*! border-radius: 0.55rem; */ }
  #fv .fv-bottle .mv-logo {
    width:100%;
    position: static;
  }
  #fv .fv-bottle .mv-splash {
    width:110vw;
    left:-12vw;
    
    bottom: 14%;
    max-width: none;
  }
  #fv .fv-bottle .mv-product {
    
  width: 100%;
  }
  .fv-scroll-outer { bottom: 1rem; }

  /* ---- NEWS ---- */
  #news { padding: 1.2rem 0 2rem; }
  .news-slider-wrap { padding-inline: 0.25rem; }
  .news-nav { display: block; width: 1.75rem; height: 1.75rem; top: 42%; }
  .news-nav--prev { left: -0.15rem; }
  .news-nav--next { right: -0.15rem; }
  #news .news-cards.swiper { left: 50%; transform: translateX(-50%); width: 100vw; padding-bottom: 0.25rem; overflow: hidden; }
  .news-card-body { padding: 0.6rem 0.6rem; }
  .news-card-text { font-size: 0.55rem; line-height: 1.6364; }
  .news-badge { font-size: 0.4rem; height: 0.75rem; }
  .news-card-date { font-size: 0.4rem; }
  .news-card-cta { font-size: 0.45rem; gap: 0.3rem; }
  .news-actions { justify-content: center; margin-top: 1rem; }

  /* ---- ABOUT BRAND ---- */
  .ab-beach-wrap { aspect-ratio: 100 / 60; }
  .ab-beach-mask {
    
  }
  .ab-beach-mask img {
    max-width:none;
    width:250vw;
    margin-left:-75vw;
    height:auto;
  }
  .ab-story { padding: 1.5rem 0 1rem; }
  .ab-heading-sub-en { font-size: 1.2rem; }
  .ab-heading-sub { margin-bottom: 1rem; font-size:0.65em;gap: unset;}
  .ab-heading-sub > * {font-size:inherit !important;}
  .ab-deco-ginger { width: 100%; }
  .ab-body { font-size: 0.55rem; line-height: 1.9091; }
  .ab-body p + p { margin-top: 0.4rem; }
  .ab-bottom::before {
    
  height: calc(100% + 2rem);
  }
  .ab-bottom-inner { flex-direction: column; align-items: center; min-height: auto; gap: 1.2rem; }
  .ab-center, .ab-founder { width: 100%; padding-bottom: 0.5rem; }
  
  
  .ab-bottom--v2 {
    aspect-ratio: 375 / 794;
  }
  .ab-bottom--v2 .ab-bottom-bg {
    background:url('../images/ab-bottom_bg_sp.webp');
    background-size:cover;
  }
  .ab-bottom--v2 .ab-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    gap: 1.2rem;
    padding-top: 3rem;
  }
  .ab-bottom--v2 .ab-center-founder-area {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    font-size: 2.7vw;
  }
  .ab-bottom--v2 .ab-cta-founder {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    order: 1;
    padding: 0;
  }
  
  .ab-bottom--v2 .ab-center--v2,
  .ab-bottom--v2 .ab-founder--v2 {
    position: static;
    transform: none;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
  }
  .ab-bottom--v2 .ab-bottle-wrap { 
    top:auto;
    bottom:-8%;
    width:29%;
    right:0;
    left:auto;
  }
  .ab-bottom--v2 .ab-center--v2 { /*! order: 1; */ align-items: center; text-align: center; }
  .ab-bottom--v2 .ab-tagline { white-space: normal; text-align: center; }
  .ab-bottom--v2 .ab-founder--v2 { order: 2; }
  .ab-bottom--v2 .ab-cta {
    font-size:1.8em;
  }
  .ab-founder-photo {
    width:80%;
    margin-inline:auto;
  }
  .ab-center { order: 1; }
  .ab-founder { order: 2; }
  .ab-bottom--v2 .ab-founder-caption {
    font-size:1.5em;
    text-shadow: 0.125em 0.125em 0.2em rgba(0,0,0,0.5);
  }
  .ab-bottle-wrap { 
    position: absolute;
    top:0;
    right:-0.7rem;
  }
  .ab-bottle-media { 
    overflow:visible;
    width: 100%;
  }
  .ab-tagline { font-size: 0.7rem; line-height: 1.7647; max-width: 100%; margin-bottom: 1rem; }

  /* ---- PRODUCT ---- */
  .product-inner { padding: 1.5rem 0 2.5rem; }
  .product-main { flex-direction: column; gap: 1.5rem; }
  .product-visual { flex: none; width: 90%; height: auto; margin-inline:auto;}
  .product-visual .product-lime {
    width:30%;
    height:auto;
    z-index: 1;
    right:-10%;
  }
  .product-ginger {
    width:50%;
    transform:translate(-30%, 50%);
  }
  .product-hero-mask img {margin:0;width: auto;height: auto;}
  
  .product-detail { max-width: 100%; padding-top: 0; }
  .product-meta-kind { font-size: 0.65rem; }
  .product-meta-sub { font-size: 0.55rem; }
  .product-volume { font-size: 0.5rem; margin-bottom: 0.8rem; }
  .product-features { max-width: 100%; padding: 0.3rem 0.5rem; margin-top:2rem;margin-bottom: 0.8rem; }
  .product-feature-row { font-size: 0.5rem; line-height: 1.6; }
  .product-body { font-size: 0.5rem; line-height: 1.7; margin-bottom: 1rem; }
  .product-ctas { flex-direction: column; align-items: center; gap: 0.7rem; }

  /* ---- WHAT'S GINGER BEER ---- */
  .gb-head { padding: 0.5rem 0 1rem; }
  .gb-intro { flex-direction: column; padding: 0 0 1.5rem; gap: 1.5rem; }
  .gb-intro-copy {
    order:1;
  }
  .gb-star {
    width:0.6rem;
  }
  .gb-intro-photo {margin-inline:auto;padding-left:1em;}
  .gb-lead p { font-size:0.7em;line-height: 1.8; }
  .gb-lead p span {font-size:inherit !important;}
  .gb-compare { padding: 0; }
  .gb-compare-shell { padding: 0.6rem 0.3rem; }
  .gb-grid { font-size: 0.5rem; }
  .gb-grid::before {
    border-width:0.3rem;
    transform:scale(1.05);
  }
  .gb-grid-header > div,
  .gb-grid-row > div { padding: 0.55rem 0.35rem; line-height: 1.4; }
  .gb-grid-header > .gb-col-beer { font-size: 0.4rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .gb-col-beer-inner {gap:0.5em;}
  .gb-col-beer-inner img {width:1em;height:1em;}
  .gb-grid-header > .gb-col-ale { font-size: 0.65rem; font-size:0.38rem;}
  .gb-grid-row > .gb-col-label { font-size: 0.5rem; padding: 0.4rem 0.2rem; font-size:0.3rem;}
  .gb-grid-row > .gb-col-beer {font-size:0.38rem;}
  .gb-grid-row > .gb-col-ale {font-size:0.36rem;}
  
  /* ---- HISTORY ---- */
  #history { padding: 2.5rem 0; }
  .history-inner { gap: 2rem; }
  .history-title { font-size: 1.2rem; line-height: 1.25; }
  .history-lead { min-height: auto; }
  .history-lead-text { font-size: 0.55rem; line-height: 1.8; text-align: left; }
  .history-line { /*! background-size: 100% 1.4rem; */ }
  .history-table-placeholder { font-size: 1.2rem; line-height: 1.25; }

  /* ---- ENJOY ---- */
  .enjoy-inner { padding: 1.5rem 0 1.5rem; }
  .enjoy-title { margin-bottom: 0.5rem; }
  .enjoy-title img { height: auto;}
  .enjoy-lead { font-size: 0.6rem; line-height: 1.8333; margin-bottom: 1.5rem; }
  .enjoy-grid { flex-direction: column; gap: 1.8rem; }
  .enjoy-card { width: 100%; }
  .enjoy-card-panel img {
    left:5%;
    width:calc(100% + 1em);
    max-width:none;
  }
  .enjoy-card-visual {margin-bottom:0.5em;}
  .enjoy-card-panel {width:90%;}
  .enjoy-card-caption { font-size: 0.55rem; line-height: 1.7273; }
  .enjoy-gallery {padding-top:1rem;padding-bottom:1rem;}
  
  
  /* ---- FAQ ---- */
  #faq { padding: 1.8rem 0 2.5rem; }
  .faq-head { --sec-head-mb: 1rem; }
  .faq-tabs { /*! flex-wrap: wrap; */ gap: 0.4rem 0; font-size: 0.36rem; letter-spacing: 0; margin-bottom: 1.5rem; }
  .faq-tabs a { padding: 0.2em 1em; }
  .faq-section { width: 100%; margin-bottom: 1.5rem; }
  .faq-item { margin-bottom: 0.5rem; }
  .faq-section-title { font-size: 0.6rem; margin-bottom: 0.75rem; }
  .faq-q { padding: 0.6rem 0.75rem; font-size: 0.5rem; gap: 0.4rem; }
  .faq-q .icon { width: 0.75rem; height: 0.65rem; }
  .faq-a-inner { padding: 0.6rem 0.75rem; font-size: 0.5rem; gap: 0.4rem; }

  /* ---- PHOTO-24 ---- */
  #photo-24 { aspect-ratio: 4 / 2; }
  #photo-24 .inner { width: 180vw; margin-left: -40vw; }

  /* ---- CONTACT ---- */
  #contact { background-image: none; padding: 2.5rem 0 3rem; }
  .contact-inner { text-shadow: none; }
  .contact-lead { width: 100%; padding-inline: 0.75rem; font-size: 0.5rem; line-height: 1.8182; margin-bottom: 1.5rem; text-align:left;}
  .contact-form { width: 100%; }
  .contact-row { flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
  .contact-label { width: 100%; flex: none; font-size: 0.5rem; }
  .contact-field { width: 100%; flex: none; }
  .contact-input { height: 1.8rem; font-size: 0.6rem; padding: 0.35rem 0.5rem; }
  .contact-textarea { font-size: 0.6rem; padding: 0.35rem 0.5rem; height: 4rem; min-height: 4rem; }
  .contact-consent { font-size: 0.55rem; gap: 0.4rem; margin: 1.2rem 0 1rem; }
  .contact-check { width: 1.1rem; height: 1.1rem; }
  .contact-check input { width: 0.7rem; height: 0.7rem; }
  .req { width: 1.3rem; height: 0.6rem; font-size: 0.4rem; }

  /* ---- COMPANY PROFILE ---- */
  #company-profile { padding: 2rem 0 0rem; }
  .cp-block { width: 100%; margin-bottom: 1.5rem; }
  .cp-block-title { font-size: 0.6rem; margin-bottom: 0.75em; }
  .cp-row { gap: 0.75rem; padding: 0.4rem 0 0.5rem; }
  .cp-key { width: 7em; font-size: 0.5rem; }
  .cp-val { font-size: 0.5rem; }
  .cp-sns { margin-top: 1.8rem; gap: 0.75rem; }
  .cp-handle { font-size: 0.75rem; }
  .cp-icons { gap: 1.5rem; }
  .cp-icons a {width:20%;}
}