@charset "UTF-8";
/* noto-sans-jp-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/noto-sans-jp-v56-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/jost-v20-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/jost-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/jost-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/jost-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: italic;
  font-weight: 600;
  src: url("/assets/fonts/jost-v20-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/jost-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/jost-v20-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* jost-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Jost";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/jost-v20-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  --color-gold-base: #B79519;
  --color-white-base: #ffffff;
  --color-red-base: #EA4E59;
  --color-green-base: #5C9181;
  --color-orange-base: #FF6517;
  --color-black-base: #0D0D0D;
  --color-blue-base: #4AAEBF;
  --color-purple-base: #8A5A80;
  --color-gray-base: #E5E7EB;
  --color-beige-base: #F5F1E8;
  --color-text-black-base: #333333;
  --color-text-dark-gray-base: #656565;
  --color-text-gray-base: #9A9A9A;
  --color-text-light-gray-base: #dedede;
  --color-text-yellow-base: #ECC35D;
  --color-text-purple-base: #AA0CA0;
  --color-text-red-base: #F20505;
  --color-text-green-base: #1A6344;
  --color-text-orange-base: #E97735;
  --color-text-blue-base: #5364CE;
  --bg-gold: var(--color-gold-base);
  --bg-white: var(--color-white-base);
  --bg-red: var(--color-red-base);
  --bg-green: var(--color-green-base);
  --bg-orange: var(--color-orange-base);
  --bg-black: var(--color-black-base);
  --bg-blue: var(--color-blue-base);
  --bg-purple: var(--color-purple-base);
  --bg-gray: var(--color-gray-base);
  --bg-beige: var(--color-beige-base);
  --text-black: var(--color-text-black-base);
  --text-dark-gray: var(--color-text-dark-gray-base);
  --text-gray: var(--color-text-gray-base);
  --text-light-gray: var(--color-text-light-gray-base);
  --text-yellow: var(--color-text-yellow-base);
  --text-purple: var(--color-text-purple-base);
  --text-red: var(--color-text-red-base);
  --text-green: var(--color-text-green-base);
  --text-orange: var(--color-text-orange-base);
  --text-blue: var(--color-text-blue-base);
  --text-primary: var(--text-black);
  --text-secondary: var(--text-dark-gray);
  --text-light: var(--text-light-gray);
  --bg-primary: var(--bg-white);
  --bg-dark: var(--bg-black);
  --bg-light: var(--bg-gray);
  --border-color: var(--text-light-gray);
  --color-gold: var(--bg-gold);
  --color-white: var(--bg-white);
  --color-black: var(--bg-black);
  --color-card-border: #E8E6E0;
  --color-badge-standard-light: #f0b01a;
  --color-badge-standard-dark: #d89410;
  --color-badge-limited-light: #e85a70;
  --color-badge-limited-dark: #d63d55;
  --color-badge-regular-light: #4db6ac;
  --color-badge-regular-dark: #3d9a92;
  --color-category-bg: #dfc37d;
  --color-tag-text: #F06159;
  --font-family-base: "Jost", 'Noto Sans JP', Arial, sans-serif;
  --font-family-english: "Jost", sans-serif;
  --font-family-japanese: 'Noto Sans JP', sans-serif;
  --font-size-base: clamp(0.875rem, 0.8125rem + 0.3333vw, 1rem);
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-base-em: 1em;
  --font-size-md: 1.125em;
  --font-size-lg: 1.25em;
  --font-size-xl: 1.5em;
  --font-size-2xl: 2em;
  --font-size-3xl: 2.5em;
  --font-size-4xl: 3em;
  --font-size-5xl: 3.5em;
  --font-size-fixed-xs: 0.75rem;
  --font-size-fixed-sm: 0.875rem;
  --font-size-fixed-base: 1rem;
  --font-size-fixed-md: 1.125rem;
  --font-size-fixed-lg: 1.25rem;
  --font-size-fixed-xl: 1.5rem;
  --font-size-fixed-2xl: 2rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 12rem;
  --space-em-3xs: 0.25em;
  --space-em-2xs: 0.5em;
  --space-em-xs: 0.75em;
  --space-em-sm: 1em;
  --space-em-md: 1.5em;
  --space-em-lg: 2em;
  --space-em-xl: 3em;
  --space-em-2xl: 4em;
  --space-cqi-xs: 1cqi;
  --space-cqi-sm: 2cqi;
  --space-cqi-md: 3cqi;
  --space-cqi-lg: 5cqi;
  --space-cqi-xl: 8cqi;
  --spacing-xs: var(--space-em-xs);
  --spacing-sm: var(--space-em-sm);
  --spacing-md: var(--space-em-md);
  --spacing-lg: var(--space-em-lg);
  --spacing-xl: var(--space-em-xl);
  --spacing-2xl: var(--space-em-2xl);
  --spacing-3xl: 6em;
  --container-sm: 36rem;
  --container-md: 48rem;
  --container-lg: 62rem;
  --container-xl: 75rem;
  --container-xxl: 87.5rem;
  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 4px;
  --border-width: var(--border-width-thin);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-2xl: 0 30px 60px -15px rgb(0 0 0 / 0.3);
  --shadow-gold: 0 10px 20px -5px rgb(183 149 25 / 0.3);
  --shadow-red: 0 10px 20px -5px rgb(234 78 89 / 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-in-out);
  --transition-slow: all var(--duration-slow) var(--ease-in-out);
  --transition-discrete:
    opacity var(--duration-base) var(--ease-in-out),
    scale var(--duration-base) var(--ease-in-out),
    overlay var(--duration-base) var(--ease-in-out) allow-discrete,
    display var(--duration-base) var(--ease-in-out) allow-discrete;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
  --container-max-width: 75rem;
  --container-wide: 87.5rem;
  --container-narrow: 56.25rem;
  --container-tight: 43.75rem;
  --content-max-width: 65ch;
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-ultrawide: 21 / 9;
  --wave-height: clamp(3rem, 10vw, 11.5rem);
  --wave-fill: #EEEAE0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --border-width: var(--border-width-thick);
  }
}
.product-detail {
  position: relative;
}
.product-detail .hero-sec {
  position: relative;
  background-color: #f5f3ef;
  block-size: auto;
  overflow: hidden;
  padding-block-start: clamp(4rem, 8vw, 5rem);
  padding-block-end: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 991px) {
  .product-detail .hero-sec {
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-sm);
  }
}
.product-detail .hero-sec .inner {
  position: static;
  transform: none;
  text-align: center;
  padding-block-start: 2em;
}
.product-detail .hero-sec h1 {
  color: var(--bg-gold);
  font-size: var(--font-size-xl);
  text-wrap: balance;
}
.product-detail .hero-sec p {
  color: var(--text-gray);
  font-size: var(--font-size-base);
}
.product-detail .product-sec {
  padding-block: clamp(2rem, 4vw, 3.75rem);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
@media (max-width: 991px) {
  .product-detail .product-sec {
    padding-inline: 0;
    padding-block: 0;
  }
  .product-detail .product-sec .container {
    padding-inline: 0;
  }
}
@media (max-width: 991px) {
  .product-detail .product-sec .row {
    margin-inline: 0;
  }
  .product-detail .product-sec .row > [class*=col-] {
    padding-inline: 1rem;
    margin-block-start: 0;
  }
}
.product-detail .product-sec .product-image-col {
  background-color: #f5f3ef;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-detail .product-sec .product-image-col[data-saletype]::before {
  content: "";
  position: absolute;
  inset-block-start: -0.75em;
  inset-inline-start: -0.75em;
  inline-size: 4em;
  block-size: 4em;
  z-index: 1;
  mask-image: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7166 1.07169L48.6782 5.70687C49.5678 6.53748 50.8119 6.87095 51.9971 6.59643L58.612 5.0628C60.6507 4.59031 62.707 5.77726 63.3167 7.77898L65.2964 14.2742C65.651 15.4383 66.5617 16.349 67.7258 16.7036L74.221 18.6833C76.2227 19.293 77.4106 21.3493 76.9372 23.388L75.4036 30.0029C75.1291 31.1881 75.4625 32.4331 76.2931 33.3218L80.9283 38.2834C82.3572 39.8126 82.3572 42.1874 80.9283 43.7166L76.2931 48.6782C75.4625 49.5678 75.1291 50.8119 75.4036 51.9971L76.9372 58.612C77.4097 60.6507 76.2227 62.707 74.221 63.3167L67.7258 65.2964C66.5617 65.651 65.651 66.5617 65.2964 67.7258L63.3167 74.221C62.707 76.2227 60.6507 77.4106 58.612 76.9372L51.9971 75.4036C50.8119 75.1291 49.5669 75.4625 48.6782 76.2931L43.7166 80.9283C42.1874 82.3572 39.8126 82.3572 38.2834 80.9283L33.3218 76.2931C32.4322 75.4625 31.1881 75.1291 30.0029 75.4036L23.388 76.9372C21.3493 77.4097 19.293 76.2227 18.6833 74.221L16.7036 67.7258C16.349 66.5617 15.4383 65.651 14.2742 65.2964L7.77898 63.3167C5.77726 62.707 4.58943 60.6507 5.0628 58.612L6.59643 51.9971C6.87095 50.8119 6.53748 49.5669 5.70687 48.6782L1.07169 43.7166C-0.357229 42.1874-0.357229 39.8126 1.07169 38.2834L5.70687 33.3218C6.53748 32.4322 6.87095 31.1881 6.59643 30.0029L5.0628 23.388C4.59031 21.3493 5.77726 19.293 7.77898 18.6833L14.2742 16.7036C15.4383 16.349 16.349 15.4383 16.7036 14.2742L18.6833 7.77898C19.293 5.77726 21.3493 4.58943 23.388 5.0628L30.0029 6.59643C31.1881 6.87095 32.4331 6.53748 33.3218 5.70687L38.2834 1.07169C39.8126-0.357229 42.1874-0.357229 43.7166 1.07169Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7166 1.07169L48.6782 5.70687C49.5678 6.53748 50.8119 6.87095 51.9971 6.59643L58.612 5.0628C60.6507 4.59031 62.707 5.77726 63.3167 7.77898L65.2964 14.2742C65.651 15.4383 66.5617 16.349 67.7258 16.7036L74.221 18.6833C76.2227 19.293 77.4106 21.3493 76.9372 23.388L75.4036 30.0029C75.1291 31.1881 75.4625 32.4331 76.2931 33.3218L80.9283 38.2834C82.3572 39.8126 82.3572 42.1874 80.9283 43.7166L76.2931 48.6782C75.4625 49.5678 75.1291 50.8119 75.4036 51.9971L76.9372 58.612C77.4097 60.6507 76.2227 62.707 74.221 63.3167L67.7258 65.2964C66.5617 65.651 65.651 66.5617 65.2964 67.7258L63.3167 74.221C62.707 76.2227 60.6507 77.4106 58.612 76.9372L51.9971 75.4036C50.8119 75.1291 49.5669 75.4625 48.6782 76.2931L43.7166 80.9283C42.1874 82.3572 39.8126 82.3572 38.2834 80.9283L33.3218 76.2931C32.4322 75.4625 31.1881 75.1291 30.0029 75.4036L23.388 76.9372C21.3493 77.4097 19.293 76.2227 18.6833 74.221L16.7036 67.7258C16.349 66.5617 15.4383 65.651 14.2742 65.2964L7.77898 63.3167C5.77726 62.707 4.58943 60.6507 5.0628 58.612L6.59643 51.9971C6.87095 50.8119 6.53748 49.5669 5.70687 48.6782L1.07169 43.7166C-0.357229 42.1874-0.357229 39.8126 1.07169 38.2834L5.70687 33.3218C6.53748 32.4322 6.87095 31.1881 6.59643 30.0029L5.0628 23.388C4.59031 21.3493 5.77726 19.293 7.77898 18.6833L14.2742 16.7036C15.4383 16.349 16.349 15.4383 16.7036 14.2742L18.6833 7.77898C19.293 5.77726 21.3493 4.58943 23.388 5.0628L30.0029 6.59643C31.1881 6.87095 32.4331 6.53748 33.3218 5.70687L38.2834 1.07169C39.8126-0.357229 42.1874-0.357229 43.7166 1.07169Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  /* 768px以下: 位置を調整（はみ出し防止） */
}
@media (max-width: 767px) {
  .product-detail .product-sec .product-image-col[data-saletype]::before {
    inset-block-start: 0;
    inset-inline-start: 0;
  }
}
.product-detail .product-sec .product-image-col[data-saletype=standard]::before {
  background-color: light-dark(#f0b01a, #d89410);
}
.product-detail .product-sec .product-image-col[data-saletype=limited]::before {
  background-color: light-dark(#e85a70, #d63d55);
}
.product-detail .product-sec .product-image-col[data-saletype=regular]::before {
  background-color: light-dark(#4db6ac, #3d9a92);
}
.product-detail .product-sec .product-image-col[data-saletype]::after {
  position: absolute;
  inset-block-start: 0.25em;
  inset-inline-start: 0.25em;
  inline-size: 3.5em;
  block-size: 3.5em;
  display: grid;
  align-content: center;
  justify-content: center;
  color: var(--bg-white);
  font-size: 0.65em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: center;
  z-index: 2;
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
  white-space: pre-line;
  /* 768px以下: 位置を調整 */
}
@media (max-width: 767px) {
  .product-detail .product-sec .product-image-col[data-saletype]::after {
    inset-block-start: 1.25em;
    inset-inline-start: 1.25em;
  }
}
.product-detail .product-sec .product-image-col[data-saletype=standard]::after {
  content: "Standard\a定番";
}
.product-detail .product-sec .product-image-col[data-saletype=limited]::after {
  content: "Limited\a限定";
}
.product-detail .product-sec .product-image-col[data-saletype=regular]::after {
  content: "Seasonal\a定期";
}
.product-detail .product-sec .product-image-col img {
  inline-size: 90%;
  block-size: auto;
  object-fit: contain;
  padding: 3rem;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-image-col img {
    inline-size: 80%;
    padding-inline: 2em;
  }
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col {
    padding-block-start: 0;
    transform: translateY(-3em);
    margin-block-end: -3em;
  }
}
.product-detail .product-sec .product-info-col .btn-beershop {
  display: none;
}
@media (min-width: 992px) {
  .product-detail .product-sec .product-info-col {
    position: relative;
  }
  .product-detail .product-sec .product-info-col .btn-beershop {
    position: fixed;
    top: 50vh;
    z-index: 100;
    inset-inline-end: 0.5rem;
    display: flex;
    background-color: #5c9181;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    text-align: center;
    inline-size: 6.25em;
    block-size: 6.25em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.0625em;
    flex-shrink: 0;
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  .product-detail .product-sec .product-info-col .btn-beershop:hover {
    filter: drop-shadow(5px 9px 5px rgba(0, 1, 0, 0.2));
    transform: translateY(-0.125em);
  }
  .product-detail .product-sec .product-info-col .btn-beershop span {
    font-size: 0.9rem;
    color: #fff;
  }
}
.product-detail .product-sec .product-info-col .country-tag {
  font-size: var(--font-size-sm);
}
.product-detail .product-sec .product-info-col .country-tag span {
  background-color: #b59212;
  padding: 0.25rem 0.75rem;
  color: #fff;
  display: inline-block;
  margin-inline-end: 5px;
}
.product-detail .product-sec .product-info-col .product-name {
  font-size: var(--font-size-2xl);
  margin-block: var(--space-xl);
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .product-name {
    text-align: center;
    margin-block-start: 0 !important;
    background-color: var(--bg-white);
    padding-inline: 0.5rem;
    padding-block: 0.75rem;
    box-shadow: var(--shadow-base);
    font-size: var(--font-size-xl);
  }
}
.product-detail .product-sec .product-info-col .product-name-en {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--color-text-gray-base);
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .product-name-en {
    justify-content: center;
    padding-block-start: 0.5rem;
  }
}
.product-detail .product-sec .product-info-col .product-name-en:before {
  content: "";
  background-color: var(--bg-gold);
  height: 1px;
  width: 10%;
  display: block;
  margin-inline-end: 1rem;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .product-name-en:before {
    width: 7%;
  }
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .product-name-en {
    font-size: var(--font-size-base);
  }
  .product-detail .product-sec .product-info-col .product-name-en:after {
    content: "";
    background-color: var(--bg-gold);
    height: 1px;
    width: 7%;
    display: block;
    margin-inline-start: 1rem;
  }
}
.product-detail .product-sec .product-info-col .product-desc {
  text-align: justify;
  text-justify: inter-character;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  hanging-punctuation: allow-end;
  min-block-size: 3rem;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .product-desc {
    text-align: justify;
    margin-block-start: 1rem !important;
  }
}
.product-detail .product-sec .product-info-col .product-desc p {
  text-align: justify;
  text-justify: inter-character;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.product-detail .product-sec .product-info-col .product-stats {
  display: flex;
  gap: 0;
  inline-size: 100%;
  justify-content: stretch;
  border-block-start: 1px solid #b59212;
  border-block-end: 1px solid #b59212;
  padding-block: 0.5rem;
  margin-block-start: var(--space-md);
}
.product-detail .product-sec .product-info-col .product-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 0em;
  flex: 1;
  align-items: center;
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
  border-inline-end: 1px solid #b59212;
}
.product-detail .product-sec .product-info-col .product-stats .stat-item:last-child {
  border-inline-end: none;
}
.product-detail .product-sec .product-info-col .product-stats .stat-item .val {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 600;
  font-family: "Lato", sans-serif;
  text-wrap: balance;
}
.product-detail .product-sec .product-info-col .product-stats .stat-item .label {
  font-size: 0.75em;
  color: #7c7c7c;
}
.product-detail .product-sec .product-info-col .flavor-tags {
  margin-block-start: var(--space-md);
}
.product-detail .product-sec .product-info-col .flavor-tags h4 {
  color: var(--text-green);
  font-size: var(--font-size-lg);
  margin-block-start: 0.75em;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .flavor-tags h4 {
    text-align: center;
  }
}
.product-detail .product-sec .product-info-col .flavor-tags ul {
  padding-inline-start: 0;
  list-style: none;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
@media (max-width: 991px) {
  .product-detail .product-sec .product-info-col .flavor-tags ul {
    justify-content: center;
  }
}
.product-detail .product-sec .product-info-col .flavor-tags ul li {
  border: 1px solid #666;
  padding: 0.4em 0.6em;
}
.product-detail .product-detail-long {
  padding-block-end: var(--space-xl);
}
.product-detail .product-detail-long .inner {
  padding: var(--space-lg);
  box-shadow: var(--shadow-base);
  border: solid 1px var(--bg-gold);
}
@media (max-width: 991px) {
  .product-detail .product-detail-long .inner {
    padding: var(--space-sm);
  }
}
.product-detail .spec {
  background-color: #f5f3ef;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 991px) {
  .product-detail .spec {
    padding-inline: 0;
  }
}
@media (max-width: 991px) {
  .product-detail .spec .row {
    margin-inline: 0;
  }
  .product-detail .spec .row > [class*=col-] {
    padding-inline: 1rem;
  }
}
.product-detail .spec h3 {
  margin-block-end: 1.5em;
}
@media (max-width: 991px) {
  .product-detail .spec h3 {
    text-align: center;
  }
}
.product-detail .spec .specs-list .specs-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.product-detail .spec .specs-list .specs-table tr {
  border-block-end: 1px solid #ddd;
}
.product-detail .spec .specs-list .specs-table th,
.product-detail .spec .specs-list .specs-table td {
  padding-block: 0.9375rem;
  padding-inline: 0.25em 0.5em;
  text-align: start;
  vertical-align: top;
}
.product-detail .spec .specs-list .specs-table th {
  inline-size: 40%;
  color: #666;
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.product-detail .spec .specs-list .specs-table td {
  font-weight: 400;
}
.product-detail .spec .taste-chart-card {
  padding-inline: clamp(1rem, 3vw, 3rem);
}
@media (max-width: 991px) {
  .product-detail .spec .taste-chart-card {
    margin-block-start: 2rem;
    padding-inline: 0;
  }
}
@media (max-width: 991px) {
  .product-detail .spec .taste-chart-card h4 {
    text-align: center;
  }
}
.product-detail .spec .taste-chart-card .chart-visual img {
  max-inline-size: 100%;
  block-size: auto;
}
.product-detail .pairing {
  padding-block: clamp(2rem, 4vw, 3.75rem);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.product-detail .pairing h3 {
  color: #666;
  margin-block-end: 1.875em;
  font-weight: 400;
  text-wrap: balance;
  text-align: center;
}
.product-detail .pairing .pairing-grid {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
  text-align: center;
}
.product-detail .pairing .pairing-item {
  border: 1px solid #eee;
  padding: 1.25em;
  inline-size: clamp(8rem, 15vw, 9.375rem);
  text-align: center;
  background: #f5f3ef;
}
.product-detail .pairing .pairing-item p {
  font-size: 0.75rem;
}
.product-detail .pairing .pair-icon img {
  inline-size: 3.125em;
  block-size: 3.125em;
  margin-block-end: 0.625em;
}
.product-detail .awards {
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.product-detail .awards .award-title {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  margin-block-end: 1.875em;
  color: #554433;
  text-wrap: balance;
  text-align: center;
}
.product-detail .awards .award-title .sub {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin-block-start: 0.3125em;
}
.product-detail .awards .award-list {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}
.product-detail .awards .award-badge {
  border: 1px solid #ddd;
  padding: 0.625em 1.25em;
  border-radius: 0.25em;
  font-size: 0.85rem;
  color: #555;
  background: #fff;
}
.product-detail .style-explanation {
  position: relative;
  text-align: center;
  padding-block: var(--space-xl);
  padding-inline: var(--space-xl);
  min-block-size: 15em;
  isolation: isolate;
}
@media (max-width: 767px) {
  .product-detail .style-explanation {
    padding-inline: var(--space-xs);
  }
}
.product-detail .style-explanation::before {
  content: "BEER STYLE";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 600;
  color: rgba(228, 210, 170, 0.2666666667);
  z-index: -1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  letter-spacing: 0.25em;
}
@media (max-width: 767px) {
  .product-detail .style-explanation::before {
    content: "BEER\aSTYLE";
    white-space: pre;
    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 2;
  }
}
.product-detail .style-explanation a {
  color: inherit;
}
.product-detail .style-explanation a:hover {
  opacity: 0.8;
}
.product-detail .style-explanation .style-content {
  max-inline-size: 43.75em;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.product-detail .style-explanation .style-content h3 {
  margin-block-end: 0.25em;
  text-wrap: balance;
  text-align: center;
}
.product-detail .style-explanation .style-content p {
  font-size: 0.9rem;
  line-height: 1.8;
}
.product-detail .brewery-info {
  position: relative;
  background: #eeeae0;
  background-image: url(/assets/images/product_detail/rectangle_133.webp);
  min-block-size: 20em;
  background-size: cover;
  background-position: bottom center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-lg);
}
.product-detail .brewery-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 1;
}
.product-detail .brewery-info > div:first-of-type {
  position: relative;
  z-index: 2;
  color: #fff;
  max-inline-size: 37.5em;
  padding: 1.25em;
  margin-inline: auto;
}
.product-detail .brewery-info .brewery-logo img {
  background: #fff;
  inline-size: 30%;
  padding: 0.3em;
}
@media (max-width: 767px) {
  .product-detail .brewery-info .brewery-logo img {
    inline-size: 50%;
  }
}
.product-detail .brewery-info .brewery-text h4 {
  margin-block: 1em;
  color: #fff;
  text-align: center;
}
.product-detail .brewery-info .brewery-text .description {
  font-size: var(--font-size-base);
  margin-block-end: 1.25em;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 表示したい行数を指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-detail .brewery-info .read-more-circle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  inline-size: 7.5em;
  block-size: 7.5em;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: -2px 3px 4px 0px rgba(0, 0, 0, 0.29);
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(50%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-detail .brewery-info .read-more-circle:hover {
  transform: translateY(50%) translateY(-0.125em);
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.product-detail .brewery-info .read-more-circle a {
  color: var(--bg-gold);
}
.product-detail .brewery-info .read-more-circle a p {
  font-size: 0.8rem;
  line-height: 1.3;
}
.product-detail .recommend {
  background-color: #f5f3ef;
  position: relative;
  padding-block-start: clamp(6rem, 10vw, 10rem);
  padding-block-end: var(--space-xl);
  color: var(--bg-gold);
}
@media (max-width: 991px) {
  .product-detail .recommend {
    padding-block-end: var(--space-lg);
  }
}
.product-detail .recommend h3 {
  text-align: center;
  margin-block-end: 2em;
  font-weight: var(--font-weight-regular);
}
.product-detail .recommend .beer-grid {
  margin-block-start: 1em;
}
.product-detail .recommend .beer-grid .item {
  position: relative;
}
.product-detail .recommend .beer-grid .item .inner {
  background-color: var(--bg-white);
  padding: var(--space-sm);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: visible;
  border: solid 1px #f0f0f0;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
  transition: box-shadow 0.3s ease;
}
@media (width < 768px) {
  .product-detail .recommend .beer-grid .item .inner {
    padding: 0.25rem;
  }
}
.product-detail .recommend .beer-grid .item .inner:hover {
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
}
.product-detail .recommend .beer-grid .item .inner .img-row {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  height: fit-content;
}
.product-detail .recommend .beer-grid .item .inner .img-row img {
  max-inline-size: 70%;
  max-block-size: 70%;
  object-fit: contain;
  max-height: 200px;
}
@media (width < 992px) {
  .product-detail .recommend .beer-grid .item .inner .img-row img {
    max-height: 150px;
  }
}
@media (width < 576px) {
  .product-detail .recommend .beer-grid .item .inner .img-row img {
    max-inline-size: 80%;
    max-height: 120px;
  }
}
.product-detail .recommend .beer-grid .item .inner[data-saletype]::before {
  content: "";
  position: absolute;
  inset-block-start: -0.85em;
  inset-inline-start: -0.85em;
  inline-size: 5em;
  block-size: 5em;
  z-index: 2;
  mask: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7166 1.07169L48.6782 5.70687C49.5678 6.53748 50.8119 6.87095 51.9971 6.59643L58.612 5.0628C60.6507 4.59031 62.707 5.77726 63.3167 7.77898L65.2964 14.2742C65.651 15.4383 66.5617 16.349 67.7258 16.7036L74.221 18.6833C76.2227 19.293 77.4106 21.3493 76.9372 23.388L75.4036 30.0029C75.1291 31.1881 75.4625 32.4331 76.2931 33.3218L80.9283 38.2834C82.3572 39.8126 82.3572 42.1874 80.9283 43.7166L76.2931 48.6782C75.4625 49.5678 75.1291 50.8119 75.4036 51.9971L76.9372 58.612C77.4097 60.6507 76.2227 62.707 74.221 63.3167L67.7258 65.2964C66.5617 65.651 65.651 66.5617 65.2964 67.7258L63.3167 74.221C62.707 76.2227 60.6507 77.4106 58.612 76.9372L51.9971 75.4036C50.8119 75.1291 49.5669 75.4625 48.6782 76.2931L43.7166 80.9283C42.1874 82.3572 39.8126 82.3572 38.2834 80.9283L33.3218 76.2931C32.4322 75.4625 31.1881 75.1291 30.0029 75.4036L23.388 76.9372C21.3493 77.4097 19.293 76.2227 18.6833 74.221L16.7036 67.7258C16.349 66.5617 15.4383 65.651 14.2742 65.2964L7.77898 63.3167C5.77726 62.707 4.58943 60.6507 5.0628 58.612L6.59643 51.9971C6.87095 50.8119 6.53748 49.5669 5.70687 48.6782L1.07169 43.7166C-0.357229 42.1874-0.357229 39.8126 1.07169 38.2834L5.70687 33.3218C6.53748 32.4322 6.87095 31.1881 6.59643 30.0029L5.0628 23.388C4.59031 21.3493 5.77726 19.293 7.77898 18.6833L14.2742 16.7036C15.4383 16.349 16.349 15.4383 16.7036 14.2742L18.6833 7.77898C19.293 5.77726 21.3493 4.58943 23.388 5.0628L30.0029 6.59643C31.1881 6.87095 32.4331 6.53748 33.3218 5.70687L38.2834 1.07169C39.8126-0.357229 42.1874-0.357229 43.7166 1.07169Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (width < 992px) {
  .product-detail .recommend .beer-grid .item .inner[data-saletype]::before {
    inline-size: 3.5em;
    block-size: 3.5em;
  }
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=standard]::before {
  background-color: #F0B01A;
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=limited]::before {
  background-color: #F06159;
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=regular]::before {
  background-color: #4AAEBF;
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=standard][data-theme=black]::before {
  background-color: light-dark(#2c2c2c, #1a1a1a);
}
.product-detail .recommend .beer-grid .item .inner[data-saletype]::after {
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-start: 0.8em;
  inline-size: 3.5em;
  block-size: 3.5em;
  display: grid;
  place-content: center;
  color: white;
  font-size: 0.65em;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
  white-space: pre-line;
}
@media (width < 992px) {
  .product-detail .recommend .beer-grid .item .inner[data-saletype]::after {
    inline-size: 1.5em;
    block-size: 1.5em;
    font-size: 0.65em;
  }
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=standard]::after {
  content: "Standard\a定番";
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=limited]::after {
  content: "Limited\a限定";
}
.product-detail .recommend .beer-grid .item .inner[data-saletype=regular]::after {
  content: "Seasonal\a定期";
}
.product-detail .recommend .beer-grid .item .h-type {
  border: solid 1px var(--bg-gold);
  background-color: var(--bg-gold);
  color: var(--bg-white);
  font-size: var(--font-size-xs);
  padding-inline: var(--space-sm);
  text-align: center;
  inline-size: 100%;
}
@media (width < 992px) {
  .product-detail .recommend .beer-grid .item .h-type {
    padding-inline: 0.25rem;
  }
}
.product-detail .recommend .beer-grid .item h3 {
  font-size: var(--font-size-base);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
}
.product-detail .recommend .beer-grid .item a {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  position: relative;
  inset: 0;
  cursor: pointer;
  transform: translateY(-100%);
  z-index: 2;
}
.product-detail .recommend .beer-grid .item a > span {
  position: absolute;
  bottom: 1rem;
  right: 1.2rem;
}
@media (width < 768px) {
  .product-detail .recommend .beer-grid .item a > span {
    bottom: 0.25rem;
    right: 0.25rem;
    font-size: 0.8rem;
  }
}
.product-detail .recommend .beer-grid .item:has(.stretched-link:hover) .inner {
  background-color: rgba(228, 220, 182, 0.534);
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
}
.product-detail .read-more-circle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  inline-size: 7.5em;
  block-size: 7.5em;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: -2px 3px 4px 0px rgba(0, 0, 0, 0.29);
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(50%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-detail .read-more-circle:hover {
  transform: translateY(50%) translateY(-0.125em);
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.product-detail .read-more-circle p {
  color: var(--bg-gold);
  font-size: 0.8rem;
}
.product-detail .column {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.product-detail .btn-beershop-mobile {
  display: none;
}
@media (max-width: 991px) {
  .product-detail .btn-beershop-mobile {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 100;
  }
  .product-detail .btn-beershop-mobile.at-bottom {
    position: relative;
  }
  .product-detail .btn-beershop-mobile a {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    block-size: 3.5rem;
    background-color: var(--color-green-base);
    color: #fff;
    font-size: var(--font-size-base);
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  .product-detail .btn-beershop-mobile a:hover {
    background-color: #a08416;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
  }
  .product-detail .btn-beershop-mobile a span {
    letter-spacing: 0.05em;
  }
}