@charset "UTF-8";
/* 基本スタイル */
.p-lp-wrapper {
  /* max-width: 900px; */
  margin: 0 auto;
  /* p {
    line-height: 1.7;
  } */
}

/* ヘッダー */
.p-lp-hero {
  position: relative;
  text-align: center;
  margin-bottom: 0;
}
.p-lp-hero img {
  width: 100%;
}
@media (width < 768px) {
  .p-lp-hero img {
    aspect-ratio: 650/600;
    object-position: 40% 50%;
    object-fit: cover;
  }
}

.lp-title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 1.3;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.3);
  padding: 40px 20px;
}
@media (width < 768px) {
  .lp-title-bg {
    top: 0;
    padding: min(25vw, 30px) 0;
  }
}

.lp-title {
  font-size: 2.5rem;
  font-weight: bold;
}
@media (width < 768px) {
  .lp-title {
    font-size: min(7.2vw, 2.5rem);
  }
}

.lp-subtitle {
  font-size: 1.2rem;
  margin-top: 30px;
}
@media (width < 768px) {
  .lp-subtitle {
    font-size: min(4vw, 1.2rem);
    margin-top: 15px;
  }
}

.beer-map {
  background-color: #edddc4;
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_map_bg.jpg) no-repeat center center/cover;
}
.beer-map .l-inner {
  padding: 0;
}

.beer-map-image {
  position: relative;
}

.beer-map-item {
  position: absolute;
  top: 0;
  left: 0;
  font-size: min(2.5vw, 30px);
  line-height: 1;
}
.beer-map-item a {
  position: relative;
  display: flex;
  align-items: center;
  gap: min(1.2vw, 12px);
  padding: min(0.8vw, 15px) min(1vw, 20px);
  line-height: 1;
  background-color: #54a4a5;
  border: 2px solid currentColor;
  color: #fff;
  border-radius: min(1vw, 10px);
  transition: background-color 0.3s, color 0.3s;
}
@media (width < 768px) {
  .beer-map-item a {
    font-size: min(3.8vw, 30px);
    border-width: 1px;
  }
}
.beer-map-item a::after {
  content: "";
  display: block;
  margin-top: 2px;
  width: min(1.6vw, 16px);
  height: min(1.2vw, 12px);
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.beer-map-item a:hover {
  background-color: #fff;
  color: #54a4a5;
  opacity: 1;
}
.beer-map-item.-iwanai {
  top: 53%;
  left: 1%;
}
@media (width < 768px) {
  .beer-map-item.-iwanai {
    top: 54%;
    left: 2%;
  }
}
.beer-map-item.-north {
  top: 29%;
  left: 5%;
}
@media (width < 768px) {
  .beer-map-item.-north {
    top: 26%;
    left: 4%;
  }
}
.beer-map-item.-otaru {
  top: 43%;
  left: 17.5%;
}
@media (width < 768px) {
  .beer-map-item.-otaru {
    top: 43%;
    left: 10.5%;
  }
}
.beer-map-item.-abashiri {
  top: 22%;
  left: 77%;
}
@media (width < 768px) {
  .beer-map-item.-abashiri {
    top: 19%;
    left: 72%;
  }
}
.beer-map-item.-shimokawa {
  top: 14%;
  left: 12%;
}
@media (width < 768px) {
  .beer-map-item.-shimokawa {
    top: 8%;
    left: 16%;
  }
}

/* ビールタイプ */
.beer-types {
  padding: 100px 0;
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_type_bg.jpg) no-repeat center center/cover;
}
@media (width < 768px) {
  .beer-types {
    padding: 60px 0;
  }
}

.beer-types-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 15px;
  text-align: center;
}
@media (width < 768px) {
  .beer-types-list {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.beer-types-list li {
  border-radius: 50px;
  background-color: #fff;
  overflow: hidden;
}

.beer-types-list a {
  display: block;
  padding: 12px 25px;
  font-size: min(2.2vw, 1.2rem);
  font-weight: bold;
  /* transition: background-color 0.3s, color 0.3s; */
}
@media (width < 768px) {
  .beer-types-list a {
    padding: 12px 12px;
    font-size: min(3.2vw, 1.2rem);
  }
}

/* セクション共通 */
.yellow-bg {
  background: linear-gradient(#FFFFE6, #F8FCA5);
}

.promo-section,
.feature-section,
.product-grid,
.ingredients {
  position: relative;
  padding-block: 60px;
}
@media (width < 768px) {
  .promo-section,
  .feature-section,
  .product-grid,
  .ingredients {
    padding-block: 30px;
  }
}
.promo-section .l-inner,
.feature-section .l-inner,
.product-grid .l-inner,
.ingredients .l-inner {
  position: relative;
}

@media (width < 768px) {
  .bg-blur::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
  }
}

.nakafurano-bg {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_nakafurano_bg.jpg) no-repeat bottom center/cover;
}
@media (width >= 768px) {
  .nakafurano-bg {
    /* padding-block: 100px; */
  }
  .nakafurano-bg .promo-text.-wide {
    margin-bottom: min(32vw, 400px);
  }
}

.north-bg {
  color: #fff;
  background: #151f42;
}

.shimokawa-bg01 {
  position: relative;
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_shimokawa_bg01.jpg) no-repeat bottom center/cover;
}
@media (width >= 768px) {
  .shimokawa-bg01 {
    padding-block: 60px 30px;
  }
}
@media (width < 768px) {
  .shimokawa-bg01 .promo-content-bottom .promo-logo {
    width: 10%;
    top: 10px;
    left: 10px;
  }
}

.shimokawa-bg02 {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_shimokawa_bg02.jpg?v2) no-repeat bottom center/cover;
}
@media (width >= 768px) {
  .shimokawa-bg02 {
    padding-block: 60px 30px;
  }
}
.shimokawa-bg02 .promo-text-box {
  background-color: rgba(255, 255, 255, 0.8);
}

.otaru-bg01 {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_otaru_bg01.jpg) no-repeat center center/cover;
}
@media (width >= 768px) {
  .otaru-bg01 {
    padding-block: 60px 30px;
  }
}
.otaru-bg01 .promo-logo {
  width: 30%;
}
.otaru-bg01 .promo-text-box {
  background-color: rgba(255, 255, 255, 0.8);
}

.otaru-bg02 {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_otaru_bg02.jpg) no-repeat center center/cover;
}
@media (width >= 768px) {
  .otaru-bg02 {
    padding-block: 60px 30px;
  }
}
.otaru-bg02 .promo-text-box {
  background-color: rgba(255, 255, 255, 0.8);
}

.abashiri-bg01 {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_abashiri_bg01.jpg) no-repeat center center/cover;
}
@media (width >= 768px) {
  .abashiri-bg01 {
    padding-block: 60px 30px;
  }
  .abashiri-bg01 .promo-image {
    max-width: 30%;
  }
}
@media (width < 768px) {
  .abashiri-bg01 .promo-content-bottom .promo-logo {
    position: relative;
    width: 40%;
  }
}
.abashiri-bg01 .promo-text-box {
  background-color: rgba(255, 255, 255, 0.8);
}

.abashiri-bg02 {
  background: url(https://stprodaeonblob.blob.core.windows.net/eshop-files/images/other/food_alcohol_010_abashiri_bg02.jpg) no-repeat center center/cover;
}
@media (width >= 768px) {
  .abashiri-bg02 {
    padding-block: 60px 30px;
  }
  .abashiri-bg02 .promo-image {
    max-width: 50%;
  }
}
.abashiri-bg02 .promo-text-box {
  background-color: rgba(255, 255, 255, 0.8);
}

.promo-content,
.feature-content {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media (width < 768px) {
  .promo-content,
  .feature-content {
    flex-direction: column;
    gap: 30px;
  }
}

/* flexアイテムの並び順を反転 */
@media (width >= 768px) {
  .feature-content.reverse {
    flex-direction: row-reverse;
  }
}

.promo-content-bottom {
  position: relative;
}
@media (width >= 768px) {
  .promo-content-bottom {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    align-content: end;
    aspect-ratio: 16/9;
  }
}
.promo-content-bottom .promo-logo {
  position: absolute;
  top: 0;
  left: 0;
}
@media (width >= 768px) {
  .promo-content-bottom .promo-image {
    margin-left: auto;
  }
}
.promo-content-bottom .promo-text {
  max-width: inherit;
  align-self: end;
  margin-top: 50px;
}
@media (width < 768px) {
  .promo-content-bottom .promo-text {
    margin-top: 20px;
  }
}

.promo-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 10px;
}
@media (width < 768px) {
  .promo-title {
    font-size: 1.4rem;
  }
}

.promo-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.7;
}
@media (width < 768px) {
  .promo-subtitle {
    font-size: 1.2rem;
  }
}

.promo-text,
.feature-text {
  flex: 1;
  font-weight: 500;
}
@media (width >= 768px) {
  .promo-text,
  .feature-text {
    max-width: calc(50% - 50px);
    font-size: 1.15rem;
  }
  .promo-text.-wide,
  .feature-text.-wide {
    max-width: inherit;
  }
}

.promo-text-box {
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
@media (width < 768px) {
  .promo-text-box {
    padding: 20px;
  }
}

.promo-image,
.feature-image {
  flex: 1;
}

.logo {
  /* width: 120px; */
  margin-bottom: 10px;
}

/* 商品グリッド */
.p-lp-category-product--pickup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  gap: 30px;
}

.p-lp-category-product--pickup .p-item-list-category__item {
  width: calc(50% - 15px);
  /* width: calc(33.333% - ((30px * 2) / 3)); */
  max-width: 480px;
  background-color: #fff;
}

@media (width >= 768px) {
  .p-lp-category-product--pickup:has(> :nth-child(1):last-child) .p-item-list-category__item {
    width: 100%;
  }
}
@media (width >= 768px) {
  .p-lp-category-product--pickup .c-card {
    padding: 20px;
    background-color: #fff;
  }
  .p-lp-category-product--pickup .c-card .c-price {
    font-size: 2rem;
  }
  .p-lp-category-product--pickup .c-card .c-price span {
    font-size: 50%;
  }
  .p-lp-category-product--pickup .c-card .c-price small {
    font-size: 80%;
  }
}
@media (width < 768px) {
  .p-lp-category-product--pickup {
    /* flex-direction: column; */
    align-items: center;
    gap: 10px;
  }
  .p-lp-category-product--pickup:has(> :nth-child(1):last-child) .p-item-list-category__item {
    width: 100%;
  }
  .p-lp-category-product--pickup .p-item-list-category__item {
    /* width: 100%; */
    width: calc(50% - 5px);
  }
  .p-lp-category-product--pickup .c-card {
    padding: 10px;
  }
}
.p-lp-category-product--normal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  gap: 30px;
}

.p-lp-category-product--normal .p-item-list-category__item {
  width: calc(25% - 22.5px);
  background-color: #fff;
}

@media (width >= 768px) {
  .p-lp-category-product--normal:has(> :nth-child(-n+3):last-child) .p-item-list-category__item,
  .p-lp-category-product--normal:has(> :nth-child(3):last-child) .p-item-list-category__item,
  .p-lp-category-product--normal:has(> :nth-child(6):last-child) .p-item-list-category__item {
    width: calc(33.333% - 20px);
  }
}
.p-lp-category-product--normal .c-card {
  padding: 10px;
  background-color: #fff;
}

@media (width < 768px) {
  .p-lp-category-product--normal {
    /* flex-direction: column; */
    align-items: center;
    gap: 10px;
  }
  .p-lp-category-product--normal .p-item-list-category__item {
    width: calc(50% - 5px);
  }
}
/* .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 30px 20px;
}

.product-item {
  background-color: #f7f6a7;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: bold;
} */
/* 余市ビール */
.yoichi-beer {
  background: url("https://via.placeholder.com/900x500") no-repeat center center;
  background-size: cover;
  padding: 50px 20px;
}

.yoichi-content {
  display: flex;
  align-items: center;
  gap: 30px;
}

.yoichi-text {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 30px;
  border-radius: 8px;
}

.yoichi-image {
  flex: 1;
}

.yoichi-image img {
  margin: 0 auto;
}

/* 原材料 */
.ingredients {
  text-align: center;
  /* background-color: #CAEDEF; */
  background-color: #c5e8ef;
}

.ingredients-title {
  font-size: 2rem;
  color: #60655e;
}

.ingredients-list {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 30px;
  margin-top: 30px;
}
@media (width < 768px) {
  .ingredients-list {
    gap: 30px 15px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.ingredient-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

.ingredient-item img {
  /* width: 150px;
  height: 150px; */
  border-radius: 30%;
  object-fit: cover;
  margin-inline: auto;
  margin-bottom: 10px;
}

.ingredient-item-text {
  position: relative;
  display: grid;
  place-content: center;
  padding: 20px;
  line-height: 1.7;
  text-align: left;
  background: #fff;
  border-radius: 10px;
}
@media (width < 768px) {
  .ingredient-item-text {
    padding: 15px;
    font-size: 0.9rem;
  }
}

/* レスポンシブ対応 */
/* @media (max-width: 768px) {
  .lp-title {
    font-size: 1.8rem;
  }
  .promo-content,
  .feature-content,
  .feature-content.reverse,
  .yoichi-content {
    flex-direction: column;
  }

} */