@charset "UTF-8";
/*------------------------------------------------------------
  Variables & Mixins
------------------------------------------------------------*/
:root {
  --color-white: #ffffff;
  --color-red: #be2d2a;
  --color-gray: #999999;
  --color-gold: #b29502;
  --color-black: #000000;
  --text-scale-sm: 0.875;
  --text-scale-base: 1;
  --text-scale-lg: 1.2;
  --text-scale-xl: 1.5;
  --font-en: Barrio, cursive;
  --font-ja: Noto Sans JP, sans-serif;
  --font-base: Arial, Helvetica, Noto Sans JP, sans-serif;
}

/*------------------------------------------------------------
  Base & Typography
------------------------------------------------------------*/
html {
  font-size: 16px;
}
@media (max-width: 991px) {
  html {
    font-size: 14px;
  }
}

body {
  font-family: var(--font-base);
  padding-block-start: 0;
}

:lang(en) {
  font-family: var(--font-en);
}

:lang(ja) {
  font-family: var(--font-base);
}

.ja-text {
  font-family: var(--font-ja);
}

.en-text {
  font-family: var(--font-en);
}

a {
  text-decoration: none;
}

img {
  inline-size: 100%;
  block-size: auto;
}

/*------------------------------------------------------------
  Header - グローバルナビゲーション
------------------------------------------------------------*/
.p-header {
  z-index: 1000;
  padding: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: transparent;
}

#mainNav.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.12);
}
#mainNav.scrolled .container-fluid {
  padding-block: 0.25em;
}
#mainNav.scrolled .navbar-brand {
  padding-block: 0.3125em;
  font-size: 1.25em;
}
@media (max-width: 991px) {
  #mainNav.scrolled .navbar-brand .logo-img {
    block-size: 1.75em;
  }
}
#mainNav.scrolled .logo-img--dark {
  opacity: 1;
  inset-block-start: 0.15em;
}
#mainNav.scrolled .logo-img--light {
  opacity: 0;
}
#mainNav.scrolled .navbar-toggler {
  font-size: 1.25em;
  padding-block: 0.3em;
}
@media (max-width: 991px) {
  #mainNav.scrolled .navbar-toggler {
    font-size: 1em;
    padding-block: 0.2em;
  }
}
#mainNav.scrolled .navbar-toggler::after {
  color: #be2d2a;
}
#mainNav.scrolled .navbar-toggler-icon::before, #mainNav.scrolled .navbar-toggler-icon::after,
#mainNav.scrolled .navbar-toggler-icon .icon-left,
#mainNav.scrolled .navbar-toggler-icon .icon-right,
#mainNav.scrolled .navbar-toggler-icon span {
  background-color: #be2d2a;
}
#mainNav.menu-open {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.12);
}
#mainNav.menu-open .logo-img--light {
  opacity: 0;
}
#mainNav.menu-open .logo-img--dark {
  opacity: 1;
}
#mainNav.menu-open .navbar-toggler::after {
  color: #be2d2a;
}
#mainNav.menu-open .navbar-toggler-icon::before, #mainNav.menu-open .navbar-toggler-icon::after,
#mainNav.menu-open .navbar-toggler-icon .icon-left,
#mainNav.menu-open .navbar-toggler-icon .icon-right,
#mainNav.menu-open .navbar-toggler-icon span {
  background-color: #be2d2a;
}
#mainNav:not(.scrolled):not(.menu-open) .logo-img--light {
  opacity: 1;
}
#mainNav:not(.scrolled):not(.menu-open) .logo-img--dark {
  opacity: 0;
}

body.page-story #mainNav:not(.scrolled):not(.menu-open) .logo-img--light,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .logo-img--light {
  opacity: 0;
}
body.page-story #mainNav:not(.scrolled):not(.menu-open) .logo-img--dark,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .logo-img--dark {
  opacity: 1;
}
body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler::after,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler::after {
  color: #be2d2a;
}
body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon::before, body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon::after,
body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon .icon-left,
body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon .icon-right,
body.page-story #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon span,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon::before,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon::after,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon .icon-left,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon .icon-right,
body.page-beer #mainNav:not(.scrolled):not(.menu-open) .navbar-toggler-icon span {
  background-color: #be2d2a;
}

.container-fluid {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-inline: 1em;
  padding-block: 0.5em;
  transition: padding 0.3s ease;
}
@media (max-width: 991px) {
  .container-fluid {
    padding-block: 0.3em;
  }
}

/*------------------------------------------------------------
  Logo
------------------------------------------------------------*/
.navbar-brand {
  display: inline-block;
  padding-block: 0.3125em;
  font-size: 1.25em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s ease, font-size 0.3s ease;
  transform-origin: center center;
  text-align: center;
  position: relative;
}
@media (max-width: 991px) {
  .navbar-brand {
    padding-block: 0.2em;
    font-size: 1em;
  }
}
.navbar-brand .logo-img {
  block-size: clamp(1.5em, 1.5em + 1vw, 2.5em);
  transition: opacity 0.3s ease, block-size 0.3s ease;
  inline-size: auto;
}
@media (max-width: 991px) {
  .navbar-brand .logo-img {
    block-size: 1.5em;
  }
}

.logo-img--dark {
  position: absolute;
  inset-block-start: 0.3125em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (max-width: 991px) {
  .logo-img--dark {
    inset-block-start: 0.2em;
  }
}

/*------------------------------------------------------------
  Hamburger Menu
------------------------------------------------------------*/
.navbar-toggler {
  position: relative;
  padding-block: 0.5em;
  padding-inline: 0.5em;
  font-size: 1.5em;
  line-height: 1;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out, font-size 0.3s ease, padding 0.3s ease;
  z-index: 1003;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-direction: column;
}
@media (max-width: 991px) {
  .navbar-toggler {
    font-size: 1.2em;
    padding-block: 0.3em;
    gap: 0.3em;
  }
}
.navbar-toggler:focus-visible {
  outline: 2px solid #be2d2a;
  outline-offset: 0.25em;
}
.navbar-toggler::after {
  content: "MENU";
  color: #ffffff;
  font-size: 0.625em;
  font-family: var(--font-en);
  text-align: center;
  transition: color 0.3s ease;
  margin-block-start: -0.625em;
}
@media (max-width: 991px) {
  .navbar-toggler::after {
    font-size: 0.55em;
    margin-block-start: -0.5em;
  }
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before,
.navbar-toggler:not(.collapsed) .navbar-toggler-icon .icon-left {
  inset-block-start: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after,
.navbar-toggler:not(.collapsed) .navbar-toggler-icon .icon-right {
  inset-block-end: auto;
  inset-block-start: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon span {
  opacity: 0;
}
.navbar-toggler:not(.collapsed)::after {
  content: "CLOSE";
}

.navbar-toggler-icon {
  display: inline-block;
  inline-size: 1.5em;
  block-size: 1.5em;
  vertical-align: middle;
  background-image: none;
  position: relative;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 0.125em;
  background-color: #ffffff;
  inset-inline-start: 0;
  transition: all 0.3s ease;
}
.navbar-toggler-icon::before {
  inset-block-start: 0.3em;
}
.navbar-toggler-icon::after {
  inset-block-end: 0.3em;
}
.navbar-toggler-icon .icon-left,
.navbar-toggler-icon .icon-right {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 0.125em;
  background-color: #ffffff;
  inset-inline-start: 0;
  transition: all 0.3s ease;
}
.navbar-toggler-icon .icon-left {
  inset-block-start: 0.3em;
}
.navbar-toggler-icon .icon-right {
  inset-block-end: 0.3em;
}
.navbar-toggler-icon span {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 48%;
  inline-size: 100%;
  block-size: 0.125em;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/*------------------------------------------------------------
  Navigation Menu
------------------------------------------------------------*/
.navbar-collapse {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 18.75em;
  block-size: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  padding-block-start: 5em;
  padding-block-end: 2em;
  padding-inline: 1.5em;
  overflow-y: auto;
  box-shadow: -0.25em 0 1em rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  z-index: 1002;
}
.navbar-collapse.show {
  transform: translateX(0);
}

.collapse:not(.show) {
  display: block;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-inline-start: 0;
  margin-block-end: 0;
  list-style: none;
  inline-size: 100%;
  text-align: center;
}

.nav-item {
  list-style: none;
}

.nav-link,
.c-nav__link {
  display: block;
  padding-block: 0.75em;
  padding-inline: 1.5em;
  font-family: var(--font-en);
  font-size: 1.125em;
  font-weight: 900;
  font-variant: small-caps;
  letter-spacing: 0;
  color: #be2d2a;
  text-decoration: none;
  text-align: center;
  border-block-end: 1px solid rgba(0, 0, 0, 0.1);
  transition: color 0.15s ease-in-out;
}
.nav-link:hover, .nav-link:focus,
.c-nav__link:hover,
.c-nav__link:focus {
  color: #000000;
}
.nav-link:focus-visible,
.c-nav__link:focus-visible {
  outline: 2px solid #be2d2a;
  outline-offset: 0.25em;
}

/*------------------------------------------------------------
  Common Components
------------------------------------------------------------*/
.c-text-white {
  color: #ffffff;
}

.c-text-red {
  color: #be2d2a;
}

.c-text-gray {
  color: #999999;
}

.c-text-gold {
  color: #b29502;
}

.c-section-title__en {
  font-family: var(--font-en);
  font-size: 3.875em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.053em;
  text-wrap: balance;
}
@media (max-width: 991px) {
  .c-section-title__en {
    font-size: 2.875em;
  }
}
.c-section-title__ja {
  font-family: var(--font-base);
  font-size: 1em;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: -0.75em;
  text-wrap: balance;
}

.u-border-red {
  overflow-x: clip;
}

.u-border-stripe-red {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0.25;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 2.18625em;
}
.u-border-stripe-red span {
  display: block;
  inline-size: 100%;
  block-size: 2.18625em;
  background-color: #be2d2a;
}

.c-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.c-button:hover {
  opacity: 0.7;
}
.c-button--circle, .c-button--product {
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05em;
  inline-size: 6.25em;
  block-size: 6.25em;
  border-radius: 50%;
  background-color: #be2d2a;
  font-size: 1em;
  color: #ffffff;
}
.c-button--product {
  font-family: var(--font-ja);
  inline-size: 6.125em;
  block-size: 6.125em;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 1em;
  padding-inline: 3em;
  background-color: #be2d2a;
  color: #ffffff;
  border-radius: 50%;
  border: none;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  transition: all 0.3s ease;
  aspect-ratio: 1/1;
  max-inline-size: 6.25em;
  margin-inline: auto;
  cursor: pointer;
}
@media (max-width: 991px) {
  .btn-more {
    padding-inline: 1em;
    max-inline-size: 4.25em;
  }
}
.btn-more:hover {
  opacity: 0.7;
}

/*------------------------------------------------------------
  Blog Section - News List
------------------------------------------------------------*/
.blog-section {
  padding-block-end: clamp(6.25rem, 6.25rem + 6.25 * (100vi - 23.4375rem) / 70.3125, 12.5rem);
}
@media (max-width: 991px) {
  .blog-section .bloglist {
    padding-inline: 0.5em;
  }
}
.blog-section .bloglist > .col-lg-4,
.blog-section .bloglist > .col-md-6,
.blog-section .bloglist > [class*=col-] {
  position: relative;
  margin-block-end: clamp(2.5rem, 2.5rem + 1.25 * (100vi - 23.4375rem) / 70.3125, 3.75rem);
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body,
.blog-section .bloglist > .col-md-6 .c-news-card__body,
.blog-section .bloglist > [class*=col-] .c-news-card__body {
  background-color: #ffffff;
  border: 1px solid rgba(190, 45, 42, 0.27);
  overflow: hidden;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body::before {
  content: attr(data-category-label);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding-block: 0.5em;
  padding-inline: 1em;
  font-size: 0.75em;
  font-family: var(--font-ja);
  letter-spacing: 0.05em;
  z-index: 2;
  line-height: 1;
  font-weight: 500;
  color: #ffffff;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body:not([data-category-label])::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body:not([data-category-label])::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body:not([data-category-label])::before {
  display: none;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body .c-news-card_inner,
.blog-section .bloglist > .col-md-6 .c-news-card__body .c-news-card_inner,
.blog-section .bloglist > [class*=col-] .c-news-card__body .c-news-card_inner {
  padding-block: 1.5em;
  padding-inline: 1.5em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991px) {
  .blog-section .bloglist > .col-lg-4 .c-news-card__body .c-news-card_inner,
  .blog-section .bloglist > .col-md-6 .c-news-card__body .c-news-card_inner,
  .blog-section .bloglist > [class*=col-] .c-news-card__body .c-news-card_inner {
    padding-block: 1em;
    padding-inline: 1em;
  }
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body .column-image,
.blog-section .bloglist > .col-md-6 .c-news-card__body .column-image,
.blog-section .bloglist > [class*=col-] .c-news-card__body .column-image {
  aspect-ratio: 4/3;
  object-fit: cover;
  inline-size: 100%;
  display: block;
  background-color: #f5f5f5;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body .c-news-card__date,
.blog-section .bloglist > .col-md-6 .c-news-card__body .c-news-card__date,
.blog-section .bloglist > [class*=col-] .c-news-card__body .c-news-card__date {
  color: #999999;
  font-size: 0.8125em;
  font-family: var(--font-ja);
  letter-spacing: 0.1em;
  margin-block-end: 0.5em;
  font-weight: 400;
  flex-shrink: 0;
  line-height: 2;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body .c-news-card__title,
.blog-section .bloglist > .col-md-6 .c-news-card__body .c-news-card__title,
.blog-section .bloglist > [class*=col-] .c-news-card__body .c-news-card__title {
  font-size: 1em;
  font-family: var(--font-ja);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-wrap: balance;
  color: #000000;
  margin-block-end: 0;
  flex-grow: 1;
  font-weight: 500;
}
@media (max-width: 991px) {
  .blog-section .bloglist > .col-lg-4 .c-news-card__body .c-news-card__title,
  .blog-section .bloglist > .col-md-6 .c-news-card__body .c-news-card__title,
  .blog-section .bloglist > [class*=col-] .c-news-card__body .c-news-card__title {
    font-size: 0.875em;
  }
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body[data-category=tag-19]::before, .blog-section .bloglist > .col-lg-4 .c-news-card__body[data-template="19"]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-category=tag-19]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-template="19"]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-category=tag-19]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-template="19"]::before {
  background-color: #be2d2a;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body[data-category=tag-15]::before, .blog-section .bloglist > .col-lg-4 .c-news-card__body[data-template="15"]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-category=tag-15]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-template="15"]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-category=tag-15]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-template="15"]::before {
  background-color: #b29502;
  color: #ffffff;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body[data-category=tag-13]::before, .blog-section .bloglist > .col-lg-4 .c-news-card__body[data-template="13"]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-category=tag-13]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-template="13"]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-category=tag-13]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-template="13"]::before {
  background-color: #594747;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body[data-category=tag-17]::before, .blog-section .bloglist > .col-lg-4 .c-news-card__body[data-template="17"]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-category=tag-17]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-template="17"]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-category=tag-17]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-template="17"]::before {
  background-color: #8b2d2a;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__body[data-category=tag-14]::before, .blog-section .bloglist > .col-lg-4 .c-news-card__body[data-template="14"]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-category=tag-14]::before,
.blog-section .bloglist > .col-md-6 .c-news-card__body[data-template="14"]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-category=tag-14]::before,
.blog-section .bloglist > [class*=col-] .c-news-card__body[data-template="14"]::before {
  background-color: #999999;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__link,
.blog-section .bloglist > .col-md-6 .c-news-card__link,
.blog-section .bloglist > [class*=col-] .c-news-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.blog-section .bloglist > .col-lg-4 .c-news-card__link:focus-visible,
.blog-section .bloglist > .col-md-6 .c-news-card__link:focus-visible,
.blog-section .bloglist > [class*=col-] .c-news-card__link:focus-visible {
  outline: 2px solid #be2d2a;
  outline-offset: 0.25em;
}
.blog-section .bloglist > .col-lg-4:hover .c-news-card__body,
.blog-section .bloglist > .col-md-6:hover .c-news-card__body,
.blog-section .bloglist > [class*=col-]:hover .c-news-card__body {
  translate: 0 -0.5em;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
}
.blog-section .bloglist > .col-lg-4:hover .c-news-card__body .column-image,
.blog-section .bloglist > .col-md-6:hover .c-news-card__body .column-image,
.blog-section .bloglist > [class*=col-]:hover .c-news-card__body .column-image {
  transform: scale(1.05);
}
.blog-section .bloglist > .col-lg-4:has(.c-news-card__link:focus-visible) .c-news-card__body,
.blog-section .bloglist > .col-md-6:has(.c-news-card__link:focus-visible) .c-news-card__body,
.blog-section .bloglist > [class*=col-]:has(.c-news-card__link:focus-visible) .c-news-card__body {
  outline: 2px solid #be2d2a;
  outline-offset: 0.25em;
}

/*------------------------------------------------------------
  Footer
------------------------------------------------------------*/
.p-footer__inner {
  background-color: #000000;
  padding-block: 1.4375em 2.5em;
}
.p-footer__inner p {
  margin-block-end: 0;
}
.p-footer__logo {
  max-inline-size: 6.25em;
  margin-inline: auto;
  display: inline-block;
}
.p-footer__logo img {
  inline-size: 100%;
}
.p-footer__copyright {
  text-align: center;
  font-size: 0.75em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-block-start: 1em;
}

/*------------------------------------------------------------
  Index Page - FV
------------------------------------------------------------*/
.p-fv {
  background: url("/assets/images/liefmans/index/top-bg.webp") no-repeat center 0%/cover;
  overflow: clip;
  padding-block-start: 5em;
  min-block-size: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-fv__inner {
  padding-block-end: clamp(23.75rem, 23.75rem + 4.0625 * (100vi - 23.4375rem) / 70.3125, 27.8125rem);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-fv__inner::after {
  content: "";
  background: url("/assets/images/liefmans/index/top-glass.webp") no-repeat center center/contain;
  position: absolute;
  inset-block-end: clamp(-19rem, -12.5rem - 6.5 * (100vi - 23.4375rem) / 70.3125, -12.5rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: clamp(20rem, 20rem + 14.9375 * (100vi - 23.4375rem) / 70.3125, 34.9375rem);
  block-size: 100%;
}
.p-fv__title {
  max-inline-size: 78.125em;
  margin-inline: auto;
  margin-block-start: clamp(0rem, 0rem + 3.6875 * (100vi - 23.4375rem) / 70.3125, 3.6875rem);
  gap: 1.125em;
  position: relative;
  z-index: 1;
}
@media (max-width: 991px) {
  .p-fv__title {
    padding-inline-start: 0.3125em;
  }
}
.p-fv__title img {
  inline-size: 100%;
}

/*------------------------------------------------------------
  Index Page - Our Style
------------------------------------------------------------*/
.p-our-style__inner {
  padding-block: clamp(8.75rem, 8.75rem + 4.875 * (100vi - 23.4375rem) / 70.3125, 13.625rem) 6.25em;
  position: relative;
}
@media (max-width: 991px) {
  .p-our-style__inner {
    padding-inline: 1.25em;
  }
}
.p-our-style__inner::after {
  content: "";
  background: url("/assets/images/liefmans/index/bottle.webp") no-repeat center center/cover;
  inline-size: 11.83125em;
  block-size: 45.625em;
  position: absolute;
  inset-block-start: -10.625em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.p-our-style__text {
  text-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.25);
  font-family: var(--font-base);
  font-size: clamp(0.8125rem, 0.8125rem + 0.1875 * (100vi - 23.4375rem) / 70.3125, 1rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: 1.875em;
  text-wrap: pretty;
}
.p-our-style__text span {
  font-weight: 400;
}
.p-our-style__button {
  margin-block-start: clamp(3.5rem, 6.25rem - 2.75 * (100vi - 23.4375rem) / 70.3125, 6.25rem);
  position: relative;
  z-index: 10;
}

body.index .p-our-style__inner {
  padding-block: 6.25em;
}
body.index .p-story {
  background: none;
}
body.index .p-story__inner {
  padding-block: 6.25em;
}
body.index .p-beer {
  padding-block: 6.25em;
}
body.index .p-news__inner {
  padding-block: 6.25em;
}

/*------------------------------------------------------------
  Story Section
------------------------------------------------------------*/
.p-story {
  background: url("/assets/images/liefmans/story/stripe.svg") no-repeat;
  background-size: contain;
  background-position: top center;
}
@media (max-width: 991px) {
  .p-story {
    background-position: top 9.375em center;
  }
}
.p-story__inner {
  padding-block: 4.6875em;
  padding-inline-end: 1.375em;
  gap: 0.625em;
}
@media (max-width: 991px) {
  .p-story__inner {
    padding-inline: 1.25em;
  }
}
.p-story__image {
  max-inline-size: 43.75em;
}
.p-story__image img {
  inline-size: 100%;
}
.p-story__body {
  padding-block-start: 0.6875em;
}
.p-story__text {
  font-size: clamp(0.8125rem, 0.8125rem + 0.1875 * (100vi - 23.4375rem) / 70.3125, 1rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-block-start: 1.875em;
  text-wrap: pretty;
}
.p-story__button {
  margin-block-start: 2.9375em;
}

/*------------------------------------------------------------
  Beer Section (Index)
------------------------------------------------------------*/
.p-beer__list {
  margin-block-start: 2.1875em;
  max-inline-size: 66.5em;
  margin-inline: auto;
}
.p-beer__row {
  row-gap: clamp(1.875rem, 3.125rem - 1.25 * (100vi - 23.4375rem) / 70.3125, 3.125rem);
}
.p-beer__button {
  margin-block-start: 3.5em;
  padding-inline-end: 1.5em;
}
@media (max-width: 991px) {
  .p-beer__button {
    padding-inline-end: 0;
  }
}

.p-beer-card {
  border: 1px solid #e6e6e6;
  background: rgba(217, 217, 217, 0);
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 31.4375em;
  max-block-size: 16.9014em;
  margin-inline: auto;
}
@media (max-width: 991px) {
  .p-beer-card {
    padding-inline-end: 0.625em;
    padding-block: 0.9375em;
  }
}
.p-beer-card--1 {
  padding-inline-start: clamp(0.625rem, 0.625rem + 2 * (100vi - 23.4375rem) / 70.3125, 2.625rem);
  padding-block-start: 0.3125em;
  gap: clamp(1.5625rem, 1.5625rem + 2.625 * (100vi - 23.4375rem) / 70.3125, 4.1875rem);
}
.p-beer-card--1 .p-beer-card__image {
  max-inline-size: clamp(6.875rem, 6.875rem + 3.6363 * (100vi - 23.4375rem) / 70.3125, 10.5113rem);
}
.p-beer-card--1 .p-beer-card__name {
  padding-block-start: clamp(4.6875rem, 4.6875rem + 3.625 * (100vi - 23.4375rem) / 70.3125, 8.3125rem);
}
.p-beer-card--2 {
  padding-inline-start: clamp(0.625rem, 0.625rem + 1.4375 * (100vi - 23.4375rem) / 70.3125, 2.0625rem);
  padding-block: 0.5625em 0.1875em;
  gap: clamp(1.5625rem, 1.5625rem + 2.25 * (100vi - 23.4375rem) / 70.3125, 3.8125rem);
}
.p-beer-card--2 .p-beer-card__image {
  max-inline-size: clamp(6.875rem, 6.875rem + 2.345 * (100vi - 23.4375rem) / 70.3125, 9.22rem);
}
.p-beer-card--2 .p-beer-card__name {
  padding-block-start: clamp(3.4375rem, 3.4375rem + 4.5 * (100vi - 23.4375rem) / 70.3125, 7.9375rem);
  max-inline-size: 10.375em;
  line-height: 1.2em;
}
.p-beer-card--3 {
  padding-inline-start: clamp(0.625rem, 0.625rem + 2 * (100vi - 23.4375rem) / 70.3125, 2.625rem);
  padding-block-start: 0.0625em;
  gap: clamp(1.5625rem, 1.5625rem + 1.6875 * (100vi - 23.4375rem) / 70.3125, 3.25rem);
}
.p-beer-card--3 .p-beer-card__image {
  max-inline-size: clamp(6.875rem, 6.875rem + 3.907 * (100vi - 23.4375rem) / 70.3125, 10.782rem);
}
.p-beer-card--3 .p-beer-card__name {
  padding-block-start: clamp(4.375rem, 4.375rem + 4 * (100vi - 23.4375rem) / 70.3125, 8.375rem);
  max-inline-size: 11.25em;
  line-height: 1.2em;
}
.p-beer-card--4 {
  padding-inline-start: clamp(0.625rem, 0.625rem + 2.5 * (100vi - 23.4375rem) / 70.3125, 3.125rem);
  gap: clamp(1.5625rem, 1.5625rem + 2.8125 * (100vi - 23.4375rem) / 70.3125, 4.375rem);
}
.p-beer-card--4 .p-beer-card__image {
  max-inline-size: clamp(6.875rem, 6.875rem + 2.107 * (100vi - 23.4375rem) / 70.3125, 8.982rem);
}
.p-beer-card--4 .p-beer-card__name {
  padding-block-start: clamp(5rem, 5rem + 3.5 * (100vi - 23.4375rem) / 70.3125, 8.5rem);
  max-inline-size: 12.1875em;
  line-height: 1.2em;
}
.p-beer-card__image img {
  inline-size: 100%;
}
.p-beer-card__name {
  font-size: clamp(1.25rem, 1.25rem + 0.25 * (100vi - 23.4375rem) / 70.3125, 1.5rem);
  font-weight: 600;
  line-height: normal;
  text-wrap: balance;
}

/*------------------------------------------------------------
  News Section
------------------------------------------------------------*/
.p-news__inner {
  padding-block: 6.125em clamp(7.5rem, 7.5rem + 9.5625 * (100vi - 23.4375rem) / 70.3125, 17.0625rem);
  padding-inline: clamp(1.25rem, 1.25rem + 13.8125 * (100vi - 23.4375rem) / 70.3125, 15.0625rem) clamp(1.25rem, 1.25rem + 12.875 * (100vi - 23.4375rem) / 70.3125, 14.125rem);
}
.p-news__inner .c-section-title {
  padding-inline-end: 0.875em;
}
.p-news__list {
  margin-block-start: 1.375em;
  max-inline-size: 64.5em;
  margin-inline: auto;
}
@media (max-width: 991px) {
  .p-news__container .row {
    --bs-gutter-y: 3.75rem;
  }
}
.p-news__button {
  margin-block-start: 1.875em;
  padding-inline-end: 1.5em;
}
@media (max-width: 991px) {
  .p-news__button {
    padding-inline-end: 0;
  }
}

/*------------------------------------------------------------
  Our Style Page
------------------------------------------------------------*/
.p-our-style-fv {
  background: url("/assets/images/liefmans/our-style/ourStyle-top.webp") no-repeat 47% center/cover;
}
.p-our-style-fv__inner {
  padding-block: clamp(14.0625rem, 14.0625rem + 9.875 * (100vi - 23.4375rem) / 70.3125, 23.9375rem) clamp(17.0625rem, 17.0625rem + 1.625 * (100vi - 23.4375rem) / 70.3125, 18.6875rem);
}
.p-our-style-fv__inner .c-section-title {
  padding-inline-start: 0.25em;
}
.p-our-style-fv__text {
  font-family: var(--font-base);
  font-size: clamp(1rem, 1rem + 0.25 * (100vi - 23.4375rem) / 70.3125, 1.25rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-inline-start: 3.9375em;
  margin-block-start: 3.6875em;
  text-wrap: pretty;
}
@media (max-width: 991px) {
  .p-our-style-fv__text {
    padding-inline: 1.25em;
  }
}

.p-our-style-quality__inner {
  padding-block-end: 16.875em;
  position: relative;
}
@media (max-width: 991px) {
  .p-our-style-quality__inner {
    padding-block-end: 9.375em;
  }
}
.p-our-style-quality__inner::after {
  content: "";
  background: url("/assets/images/liefmans/our-style/bottle.webp") no-repeat center center/cover;
  inline-size: 11.83125em;
  block-size: 45.625em;
  position: absolute;
  inset-block-start: -2.9375em;
  inset-inline-start: 51%;
  transform: translateX(-50%);
}
.p-our-style-quality__inner .u-border-red {
  margin-block-start: 1.3125em;
}
.p-our-style-quality__title {
  font-size: 4em;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: 15.125em;
  padding-inline-start: 2.125em;
  text-wrap: balance;
}
@media (max-width: 991px) {
  .p-our-style-quality__title {
    margin-block-start: 12.5em;
    padding-inline-start: 0.6875em;
    font-size: 3.4375em;
  }
}
.p-our-style-quality__list {
  margin-block-start: clamp(15.9375rem, 15.9375rem + 12.625 * (100vi - 23.4375rem) / 70.3125, 28.5625rem);
  padding-inline-end: 5.5em;
  gap: 14.6875em;
}
@media (max-width: 991px) {
  .p-our-style-quality__list {
    padding-inline-end: 0;
    gap: 9.375em;
  }
}
.p-our-style-quality__item {
  gap: 4.375em;
}
@media (max-width: 991px) {
  .p-our-style-quality__item {
    gap: 1.5625em;
  }
}
.p-our-style-quality__stripe {
  overflow: clip;
  inline-size: 20%;
}
@media (max-width: 991px) {
  .p-our-style-quality__stripe {
    inline-size: 100%;
  }
}
.p-our-style-quality__stripe svg {
  inline-size: clamp(17rem, 17rem + (100vi - 93.75rem) * 0.8, 100vi);
}
.p-our-style-quality__content {
  padding-block-start: 2.4375em;
  inline-size: 27.1875em;
}
@media (max-width: 991px) {
  .p-our-style-quality__content {
    inline-size: 90%;
    margin-inline: auto;
    padding-block-start: 0;
  }
}
.p-our-style-quality__heading {
  font-family: var(--font-base);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}
.p-our-style-quality__text {
  font-family: var(--font-base);
  font-size: clamp(0.75rem, 0.75rem + 0.25 * (100vi - 23.4375rem) / 70.3125, 1rem);
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: clamp(1.875rem, 1.875rem + 1.1875 * (100vi - 23.4375rem) / 70.3125, 4.625rem);
  text-wrap: pretty;
}
.p-our-style-quality__image {
  inline-size: 42%;
}
@media (max-width: 991px) {
  .p-our-style-quality__image {
    inline-size: 90%;
    margin-inline: auto;
  }
}
.p-our-style-quality__image img {
  inline-size: 100%;
}

.page-our-style .p-our-style-quality__inner::after {
  block-size: 30.4167em;
  background-size: contain;
  inset-block-start: -1.75em;
}
.page-our-style .p-our-style-quality__inner .u-border-red {
  margin-block-start: 0;
}
.page-our-style .p-our-style-quality__title {
  margin-block-start: 1.0417em;
  font-family: var(--font-ja);
}
@media (max-width: 991px) {
  .page-our-style .p-our-style-quality__title {
    margin-block-start: 1.1667em;
  }
}

.p-feel-free {
  background-image: url("/assets/images/liefmans/our-style/feelFree.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 88%;
}
@media (max-width: 991px) {
  .p-feel-free {
    background-position: center 48%;
  }
}
.p-feel-free__inner {
  border: 1px solid #000000;
  background: rgba(89, 60, 60, 0.8);
  gap: clamp(4.375rem, 4.375rem + 11.375 * (100vi - 23.4375rem) / 70.3125, 15.75rem);
  padding-block: clamp(11.25rem, 11.25rem + 5.9375 * (100vi - 23.4375rem) / 70.3125, 17.1875rem) 10.5625em;
  padding-inline-end: 0.6875em;
}
@media (max-width: 991px) {
  .p-feel-free__inner {
    padding-inline: 1.25em;
  }
}
.p-feel-free__title {
  font-family: var(--font-en);
  font-size: clamp(2.8125rem, 2.8125rem + 1.1875 * (100vi - 23.4375rem) / 70.3125, 4rem);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.1em;
  text-wrap: balance;
}
.p-feel-free__body {
  margin-block-start: 3.25em;
}
@media (max-width: 991px) {
  .p-feel-free__body {
    margin-block-start: 0;
  }
}
.p-feel-free__subTitle {
  font-family: var(--font-base);
  font-size: clamp(1.1875rem, 1.1875rem + 0.8125 * (100vi - 23.4375rem) / 70.3125, 2rem);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.1em;
  text-wrap: balance;
}
.p-feel-free__text {
  font-family: var(--font-base);
  font-size: clamp(0.875rem, 0.875rem + 0.375 * (100vi - 23.4375rem) / 70.3125, 1.25rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-block-start: 3em;
  text-wrap: pretty;
}

.p-our-style-looks__inner {
  padding-block-end: 11.25em;
  overflow: clip;
}
.p-our-style-looks__list {
  margin-block-start: clamp(6.25rem, 6.25rem + 4.9375 * (100vi - 23.4375rem) / 70.3125, 11.1875rem);
  gap: 10.4375em;
}
@media (max-width: 991px) {
  .p-our-style-looks__list {
    gap: 0;
  }
}

.p-looks-card {
  gap: 3.5em;
}
@media (max-width: 991px) {
  .p-looks-card {
    gap: 2.5em;
  }
}
.p-looks-card__body {
  max-inline-size: 45.0625em;
  inline-size: 100%;
  margin-block-start: 7.5em;
}
.p-looks-card__title {
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-wrap: balance;
}
.p-looks-card--ice-rock .p-looks-card__title {
  font-size: 3em;
  line-height: 0.9375;
}
@media (max-width: 991px) {
  .p-looks-card--ice-rock .p-looks-card__title {
    margin-inline-start: 0.625em;
  }
}
.p-looks-card--ice-rock .p-looks-card__title span {
  font-size: 0.75em;
  letter-spacing: 0.1em;
}
.p-looks-card--berry .p-looks-card__title {
  font-size: 2.25em;
  line-height: 1.1111;
}
.p-looks-card--berry .p-looks-card__image {
  position: relative;
}
.p-looks-card--fruits {
  margin-block-start: clamp(2.5625rem, 21.875rem - 19.3125 * (100vi - 23.4375rem) / 70.3125, 21.875rem);
  gap: 2.625em;
}
.p-looks-card--fruits .p-looks-card__title {
  font-size: 2.25em;
  line-height: normal;
  margin-inline-end: 0.25em;
}
.p-looks-card__stripe {
  margin-block-start: 2em;
  display: flex;
  flex-direction: column;
  gap: 0.8542em;
  position: relative;
}
.p-looks-card__stripe span {
  display: block;
  inline-size: 100%;
  block-size: 0.8542em;
  background-color: #be2d2a;
}
.p-looks-card--ice-rock .p-looks-card__stripe, .p-looks-card--fruits .p-looks-card__stripe {
  margin-inline-start: calc(-100vw + 100%);
}
@media (max-width: 991px) {
  .p-looks-card--ice-rock .p-looks-card__stripe, .p-looks-card--fruits .p-looks-card__stripe {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }
}
.p-looks-card--berry .p-looks-card__stripe {
  margin-inline-end: calc(-100vw + 100%);
}
@media (max-width: 991px) {
  .p-looks-card--berry .p-looks-card__stripe {
    margin-inline-end: 0;
    padding-inline-end: 0;
  }
}
.p-looks-card__image {
  max-inline-size: clamp(20.625rem, 20.625rem + 21.6875 * (100vi - 23.4375rem) / 70.3125, 42.3125rem);
}
.p-looks-card__image img {
  inline-size: 100%;
}
.p-looks-card__text {
  font-family: var(--font-ja);
  font-size: 1.25em;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-wrap: pretty;
  margin-block-start: 2em;
}
@media (max-width: 991px) {
  .p-looks-card__text {
    margin-inline-start: 0.625em;
  }
}

/*------------------------------------------------------------
  Story Page
------------------------------------------------------------*/
.p-story-fv {
  inline-size: 100%;
}
.p-story-fv__inner {
  padding-block: clamp(9.375rem, 9.375rem + 1.75 * (100vi - 23.4375rem) / 70.3125, 14.25rem) clamp(5rem, 5rem + 5 * (100vi - 23.4375rem) / 70.3125, 10rem);
  overflow: clip;
}
.p-story-fv__head {
  padding-inline-start: 6.875em;
  gap: 14.75em;
}
@media (max-width: 991px) {
  .p-story-fv__head {
    padding-inline-start: 0;
    gap: 0;
  }
}
.p-story-fv__image {
  max-inline-size: 49.25em;
  inline-size: 90%;
  border: solid 0.625em #ffffff;
  box-shadow: 0.125em 0.1875em 0.625em 0 rgba(170, 170, 170, 0.25);
}
.p-story-fv__image img {
  inline-size: 100%;
}
@media (max-width: 991px) {
  .p-story-fv__image {
    margin-inline: auto;
  }
}
.p-story-fv__title {
  padding-block-start: clamp(5.625rem, 5.625rem + 6.125 * (100vi - 23.4375rem) / 70.3125, 11.75rem);
}
.p-story-fv__text {
  font-family: var(--font-base);
  font-size: clamp(1rem, 1rem + 0.25 * (100vi - 23.4375rem) / 70.3125, 1.25rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: clamp(2.5rem, 2.5rem + 1.9375 * (100vi - 23.4375rem) / 70.3125, 4.4375rem);
  text-wrap: pretty;
}
@media (max-width: 991px) {
  .p-story-fv__text {
    padding-inline: 1.25em;
  }
}

.p-story-history__inner {
  padding-block: clamp(0rem, 0rem + 12.4375 * (100vi - 23.4375rem) / 70.3125, 18.0625rem) clamp(6.25rem, 6.25rem + 6.25 * (100vi - 23.4375rem) / 70.3125, 12.5rem);
}
.p-story-history__list {
  gap: clamp(4.375rem, 4.375rem + 5.125 * (100vi - 23.4375rem) / 70.3125, 9.5rem);
}
@media (max-width: 991px) {
  .p-story-history__list {
    margin-block-start: 0;
  }
}

.p-story-card {
  padding-inline: 1.25em;
}
@media (max-width: 991px) {
  .p-story-card {
    margin-inline: auto;
  }
}
.p-story-card--1697 {
  gap: clamp(1.25rem, 1.25rem + 4.4375 * (100vi - 23.4375rem) / 70.3125, 5.6875rem);
  padding-inline-end: 0.8125em;
}
@media (max-width: 991px) {
  .p-story-card--1697 {
    padding-inline: 1.25em;
  }
}
.p-story-card--19xx {
  gap: clamp(2.5rem, 2.5rem + 3.25 * (100vi - 23.4375rem) / 70.3125, 5.75rem);
  padding-inline-start: 2.5em;
}
@media (max-width: 991px) {
  .p-story-card--19xx {
    padding-inline: 1.25em;
  }
}
.p-story-card--19xx .p-story-card__image {
  max-inline-size: clamp(13.75rem, 13.75rem + 19 * (100vi - 23.4375rem) / 70.3125, 32.75rem);
}
@media (max-width: 991px) {
  .p-story-card--19xx .p-story-card__image {
    margin-inline: auto;
  }
}
.p-story-card--19xx .p-story-card__content {
  max-inline-size: 33.3125em;
}
.p-story-card--19xx .p-story-card__text {
  padding-inline-end: 0.9375em;
}
@media (max-width: 991px) {
  .p-story-card--19xx .p-story-card__text {
    padding-inline-end: 0;
  }
}
.p-story-card--194x {
  gap: 2.625em;
}
@media (max-width: 991px) {
  .p-story-card--194x {
    padding-inline-end: 1.25em;
  }
}
.p-story-card--194x .p-story-card__image {
  max-inline-size: clamp(13.75rem, 13.75rem + 20.75 * (100vi - 23.4375rem) / 70.3125, 34.5rem);
}
@media (max-width: 991px) {
  .p-story-card--194x .p-story-card__image {
    margin-inline: auto;
  }
}
.p-story-card--194x .p-story-card__content {
  max-inline-size: 39.3125em;
  padding-block-start: 2.5em;
}
.p-story-card--194x .p-story-card__text {
  max-inline-size: 42.125em;
  margin-block-end: 0;
}
.p-story-card--195x {
  gap: 2.625em;
}
.p-story-card--195x .p-story-card__image {
  max-inline-size: 32.75em;
}
.p-story-card--195x .p-story-card__content {
  max-inline-size: 33.625em;
  padding-block-start: 6.25em;
}
.p-story-card--2xxx {
  gap: 3.75em;
}
@media (max-width: 991px) {
  .p-story-card--2xxx {
    padding-inline: 1.25em;
    gap: 2.5em;
    margin-inline: auto;
  }
}
.p-story-card--2xxx .p-story-card__image {
  max-inline-size: 29.625em;
}
.p-story-card--2xxx .p-story-card__content {
  max-inline-size: 100%;
}
@media (max-width: 991px) {
  .p-story-card--2xxx .p-story-card__content {
    max-inline-size: 34.6875em;
    margin-inline: auto;
  }
}
.p-story-card--2xxx .p-story-card__text {
  max-inline-size: 42.125em;
  margin-block-start: 3.8125em;
}
.p-story-card__content {
  max-inline-size: 32.625em;
  padding-block-start: 5.0625em;
  overflow: hidden;
}
@media (max-width: 991px) {
  .p-story-card__content {
    margin-inline: auto;
    padding-block-start: 2.5em;
  }
}
.p-story-card__image {
  max-inline-size: 37.375em;
}
.p-story-card__image img {
  inline-size: 100%;
}
.p-story-card__title {
  font-family: var(--font-ja);
  font-size: clamp(3.25rem, 3.25rem + 2 * (100vi - 23.4375rem) / 70.3125, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-block-end: 1em;
  text-wrap: balance;
  inline-size: 100%;
}
.p-story-card__title::before {
  content: "";
  flex: 1;
  max-inline-size: 20rem;
  block-size: 0.3125rem;
  background: #be2d2a;
  flex-shrink: 1;
}
@media (max-width: 991px) {
  .p-story-card__title::before {
    max-inline-size: 8rem;
  }
}
.p-story-card__sub-title {
  font-size: clamp(1.25rem, 1.25rem + 2 * (100vi - 23.4375rem) / 70.3125, 1.5rem);
  line-height: 1;
  position: relative;
  color: #be2d2a;
  margin-block-end: 1.25em;
  text-wrap: balance;
}
.p-story-card__quote {
  background-image: url("/assets/images/liefmans/story/story-quote_after.svg"), url("/assets/images/liefmans/story/story-quote_before.svg");
  background-position: right 0.3125em top 0.3125em, left 0.3125em bottom 0.3125em;
  background-size: 2.8125em 2.4375em;
  background-repeat: no-repeat;
  background-color: #fff5f5;
  max-inline-size: 34.25em;
  min-block-size: 7.0625em;
  margin-inline: auto;
  margin-block-start: 0.625em;
}
.p-story-card__quote__text {
  font-family: var(--font-base);
  font-size: 1.25em;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
  margin-block-end: 0;
  padding-block-start: 2.3125em;
  text-wrap: balance;
}
@media (max-width: 991px) {
  .p-story-card__quote__text {
    font-size: 1em;
    padding-block-start: 1.5em;
  }
}
.p-story-card__quote__name {
  font-family: var(--font-base);
  font-size: 1em;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: end;
  padding-inline-end: 2.875em;
}
@media (max-width: 991px) {
  .p-story-card__quote__name {
    font-size: 0.875em;
  }
}
.p-story-card__text {
  font-family: var(--font-ja);
  font-size: 1em;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: pretty;
}
@media (max-width: 991px) {
  .p-story-card__text {
    font-size: 0.875em;
  }
}

.p-story-brewery__inner {
  padding-block-end: clamp(9.375rem, 9.375rem + 10.0625 * (100vi - 23.4375rem) / 70.3125, 19.4375rem);
}
.p-story-brewery__inner .c-section-title {
  padding-inline-end: 2.375em;
}
@media (max-width: 991px) {
  .p-story-brewery__inner .c-section-title {
    padding-inline-end: 0;
  }
}
.p-story-brewery__inner .c-section-title__ja {
  margin-block-start: -0.125em;
}
.p-story-brewery__imageContainer {
  margin-block-start: 5.0625em;
}
.p-story-brewery__row {
  gap: clamp(0rem, 0rem + 4.1875 * (100vi - 87.5rem) / 6.25, 4.1875rem);
  padding-inline-end: 0.9375em;
}
@media (max-width: 991px) {
  .p-story-brewery__row {
    gap: 0;
    padding-inline-end: 0;
  }
}
.p-story-brewery__item {
  max-inline-size: 23.375em;
}
.p-story-brewery__item img {
  inline-size: 100%;
}

/*------------------------------------------------------------
  Product Page
------------------------------------------------------------*/
.p-product-fv {
  position: relative;
}
.p-product-fv svg {
  position: absolute;
  inset-block-end: -4.5%;
  z-index: -1;
}
@media (max-width: 991px) {
  .p-product-fv svg {
    display: none;
  }
}
.p-product-fv__inner {
  padding-block: 9.1875em 3.75em;
}
@media (max-width: 991px) {
  .p-product-fv__inner {
    padding-block-start: 3.5em;
  }
}
.p-product-fv__head {
  gap: clamp(3.125rem, 3.125rem + 8.625 * (100vi - 23.4375rem) / 70.3125, 14.25rem);
  position: relative;
}
.p-product-fv__head__inner {
  max-inline-size: 93.75em;
  margin-inline: auto;
}
.p-product-fv__image {
  max-inline-size: 50.3125em;
  inline-size: 100%;
}
.p-product-fv__image img {
  inline-size: 100%;
}
.p-product-fv__title {
  padding-block-start: 0.75em;
  max-inline-size: 43.1875em;
  inline-size: 100%;
}
.p-product-fv__text {
  font-family: var(--font-base);
  font-size: 1.25em;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-start: clamp(2.8125rem, 2.8125rem + 4.25 * (100vi - 23.4375rem) / 70.3125, 7.0625rem);
  text-wrap: pretty;
}
@media (max-width: 991px) {
  .p-product-fv__text {
    font-size: 1rem;
    padding-inline: 1.25em;
    margin-block-start: 2em;
  }
}

/*------------------------------------------------------------
  CMS Content Styles
------------------------------------------------------------*/
.cms-content h2 {
  color: #be2d2a;
  text-align: start;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.108em;
  text-wrap: balance;
}
@media (max-width: 991px) {
  .cms-content h2 {
    font-size: 1.25em;
    text-align: center;
  }
}
.cms-content p:first-of-type {
  color: #050505;
  font-family: var(--font-base);
  font-size: 1em;
  font-weight: 350;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-block-start: 1.9375em;
  text-wrap: pretty;
}
@media (max-width: 991px) {
  .cms-content p:first-of-type {
    font-size: 0.875em;
    margin-block-start: 0;
  }
}
.cms-content p:nth-of-type(n+2) {
  display: inline-block;
  margin-inline-end: 0.75em;
  margin-block-start: 4.6875em;
  color: #000000;
  text-align: center;
  font-family: var(--font-base);
  font-size: 1em;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.1em;
  border-radius: 0.625em;
  background: #f2dedd;
  block-size: 3.125em;
  padding-block-start: 0.5em;
  padding-inline: 1.25em;
  text-wrap: balance;
}
@media (max-width: 991px) {
  .cms-content p:nth-of-type(n+2) {
    font-size: 0.75em;
    block-size: 2.625em;
    margin-block-start: 0;
    padding-inline: 1.25em;
  }
}

/*------------------------------------------------------------
  Beer List Page - VEDETT準拠のGrid＋バッジ対応
  ★★★ 変更箇所 ★★★
------------------------------------------------------------*/
.beer-listpage {
  transform: translateY(-10svh);
  padding-block-end: 15svh;
  padding-bottom: 1svh;
}
.beer-listpage .beer-item {
  justify-content: space-between;
  margin-block-end: 5em;
  border: none;
  border-bottom: solid 1px #be2d2a;
}
@media (max-width: 991px) {
  .beer-listpage .beer-item {
    margin-block-end: 0;
  }
}
.beer-listpage .beer-item .beer-image {
  max-block-size: 24.0625rem;
  padding: 2em;
  flex-shrink: 0;
  position: relative;
}
.beer-listpage .beer-item .beer-inner {
  padding: 2em;
  flex-grow: 1;
  text-align: start;
}
.beer-listpage .beer-item .beer-inner .beer-name {
  padding-inline-start: 0;
  font-size: 1.125em;
  font-weight: 400;
}
@media (max-width: 991px) {
  .beer-listpage .beer-item .beer-inner .beer-name {
    padding: 0;
    font-size: 1.125em;
    line-height: 1.35;
    margin-block-start: 1em;
  }
}
.beer-listpage .beer-item .btn-wrapper {
  margin-block-start: 0;
  align-self: center;
  padding-right: 0;
}
@media (min-width: 992px) {
  .beer-listpage .beer-item .btn-wrapper {
    margin-block-start: 5em;
    padding-right: 5rem;
    align-self: end;
  }
  .beer-listpage .beer-item .btn-wrapper .btn-more {
    margin-inline-end: 0;
  }
}
.beer-listpage .beer-item:nth-child(even) .beer-image {
  order: 3;
}
@media (max-width: 991px) {
  .beer-listpage .beer-item:nth-child(even) .beer-image {
    order: 1;
  }
}
.beer-listpage .beer-item:nth-child(even) .beer-inner {
  order: 1;
}
@media (max-width: 991px) {
  .beer-listpage .beer-item:nth-child(even) .beer-inner {
    order: 2;
  }
}
.beer-listpage .beer-item:nth-child(even) .btn-wrapper {
  order: 2;
}
@media (max-width: 991px) {
  .beer-listpage .beer-item:nth-child(even) .btn-wrapper {
    order: 3;
  }
}
.beer-listpage .beer-item:hover {
  transform: none;
  box-shadow: none;
}

/*------------------------------------------------------------
  Beer Item 共通
------------------------------------------------------------*/
.beer-item {
  transition: all 0.3s ease;
  border: solid 1px #e6e6e6;
  position: relative;
  padding: 1.5em;
  text-align: center;
  block-size: 100%;
}
@media (min-width: 992px) {
  .beer-item {
    display: flex;
    align-items: center;
  }
}
@media (max-width: 991px) {
  .beer-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1em;
  }
}
.beer-item:hover {
  transform: translateY(-0.5em);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.12);
}
.beer-item:focus-within {
  outline: 2px solid #be2d2a;
  outline-offset: 0.25em;
}
.beer-item[data-saletype] .beer-image::before, .beer-item[data-saletype] .beer-image::after {
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-end: -0.5em;
  inline-size: 3.2875em;
  block-size: 3.6625em;
}
@media (min-width: 992px) {
  .beer-item[data-saletype] .beer-image::before, .beer-item[data-saletype] .beer-image::after {
    inline-size: 4.3125em;
    block-size: 4.8125em;
  }
}
.beer-item[data-saletype] .beer-image::before {
  content: "";
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.beer-item[data-saletype] .beer-image::after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
  font-weight: 400;
  color: #ffffff;
  z-index: 2;
  font-weight: 400;
  color: #ffffff;
  z-index: 2;
  padding-block-start: 1em;
  padding-inline-end: 0.5em;
}
@media (min-width: 992px) {
  .beer-item[data-saletype] .beer-image::after {
    padding-block-end: 0.4em;
  }
}
.beer-item[data-saletype=limited] .beer-image::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 77'%3E%3Cpath d='M34.208 0L68.416 19.25V57.75L34.208 77L0 57.75V19.25L34.208 0Z' fill='%23C775A4'/%3E%3C/svg%3E");
}
.beer-item[data-saletype=limited] .beer-image::after {
  content: "限定";
}
.beer-item[data-saletype=standard] .beer-image::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 77'%3E%3Cpath d='M34.208 0L68.416 19.25V57.75L34.208 77L0 57.75V19.25L34.208 0Z' fill='%23B2CD77'/%3E%3C/svg%3E");
}
.beer-item[data-saletype=standard] .beer-image::after {
  content: "定番";
}
.beer-item[data-saletype=regular] .beer-image::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 77'%3E%3Cpath d='M34.208 0L68.416 19.25V57.75L34.208 77L0 57.75V19.25L34.208 0Z' fill='%23994747'/%3E%3C/svg%3E");
}
.beer-item[data-saletype=regular] .beer-image::after {
  content: "定期";
}
.beer-item .beer-image {
  aspect-ratio: 1/1;
  inline-size: 100%;
  max-inline-size: 24.0625em;
  position: relative;
}
@media (min-width: 992px) {
  .beer-item .beer-image {
    inline-size: 50%;
  }
}
@media (max-width: 991px) {
  .beer-item .beer-image {
    inline-size: 70%;
    max-block-size: 18em;
    margin-inline: auto;
    padding: 1em;
  }
}
.beer-item .beer-image img {
  display: block;
  margin-inline: auto;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: 100%;
  object-fit: contain;
}
@media (min-width: 992px) {
  .beer-item .beer-image img {
    max-block-size: 15.625em;
  }
}
.beer-item .beer-name {
  font-size: 1.125em;
  font-weight: 400;
  padding-block: 1.5em;
  font-family: var(--font-ja);
  line-height: 1.75;
  text-align: start;
  color: #be2d2a;
}
@media (max-width: 991px) {
  .beer-item .beer-name {
    padding-block: 0.75em;
    font-size: 1em;
    line-height: 1.35;
    margin-block-start: 1em;
  }
}
.beer-item .btn-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-inline-end: 1em;
}
@media (max-width: 991px) {
  .beer-item .btn-wrapper {
    margin-block-start: 1em;
  }
}

/*------------------------------------------------------------
  Page Top Button
------------------------------------------------------------*/
.p-page-top {
  position: fixed;
  inset-block-end: 1.25em;
  inset-inline-end: 1.25em;
  z-index: 1000;
}
.p-page-top a {
  display: block;
  inline-size: 4em;
  block-size: 4em;
}

/*------------------------------------------------------------
  Scroll to Top Button (Modern)
------------------------------------------------------------*/
.scrolltotop {
  position: fixed;
  inset-block-end: 2rem;
  inset-inline-end: 0.5rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.25rem);
  transition: all 0.3s ease;
}
@starting-style {
  .scrolltotop {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}
@media (min-width: 768px) {
  .scrolltotop {
    inset-block-end: 2.5rem;
    inset-inline-end: 2.5rem;
  }
}
.scrolltotop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top {
  display: grid;
  place-items: center;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  border-radius: 50%;
  background-color: #be2d2a;
  cursor: pointer;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .back-to-top {
    inline-size: 4rem;
    block-size: 4rem;
  }
}
.back-to-top:hover {
  background-color: rgb(148.2327586207, 35.1077586207, 32.7672413793);
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
}
.back-to-top:active {
  transform: translateY(0);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
.back-to-top:focus-visible {
  outline: 2px solid white;
  outline-offset: 0.25em;
}
.back-to-top::before {
  content: "";
  display: block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-block-start: 2px solid white;
  border-inline-start: 2px solid white;
  transform: rotate(45deg) translate(0.15rem, 0.135rem);
}
@media (min-width: 768px) {
  .back-to-top::before {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }
}