html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: 16px;
  color: #FFFFFF;
  overflow-x: clip;
  background-color: #7BB5A7;
}

*::-webkit-scrollbar {
  display: none;
}

*:focus {
  outline: none;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.withbeer a[target=_blank]:not(.m-no-icon):after {
  display: none;
}

.layout-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.layout-container {
  overflow-x: clip;
}

.l-contents__wrapper {
  margin: 0 auto;
  width: min(1440px, 100%);
  position: relative;
}
.l-contents__inner {
  margin: 0 auto;
  width: min(1000px, 100%);
}

.kv {
  background-color: #7BB5A7;
}
.kv__inner {
  position: relative;
}
.kv__link {
  position: absolute;
  bottom: 15.8974358974vw;
  right: 3.0769230769vw;
  width: 40.5128205128vw;
  z-index: 10;
  display: block;
}
@media screen and (min-width: 769px) {
  .kv__link {
    bottom: min(95px, 7.9166666667vw);
    right: min(170px, 14.1666666667vw);
    width: min(210px, 17.5vw);
  }
}
.kv__link-pic {
  width: 100%;
  display: block;
}
.kv__nav-list {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  display: flex;
  gap: 7.6923076923vw;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  height: 12.0512820513vw;
}
@media screen and (min-width: 769px) {
  .kv__nav-list {
    height: min(60px, 5vw);
    gap: min(100px, 8.3333333333vw);
  }
}
.kv__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.kv__nav-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3.8461538462vw;
  transform: translateY(-50%);
  width: 0.2564102564vw;
  height: 3.0769230769vw;
  background-color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .kv__nav-item:not(:first-child)::before {
    left: max(-50px, -4.1666666667vw);
    width: min(1px, 0.0833333333vw);
    height: min(20px, 1.6666666667vw);
  }
}
.kv__nav-link {
  color: #1E1E1E !important;
  font-size: 3.5897435897vw;
  font-weight: 500;
  line-height: 1;
  font-family: "Lato", sans-serif;
}
@media screen and (min-width: 769px) {
  .kv__nav-link {
    font-size: min(16px, 1.3333333333vw);
  }
}

.kv__splide {
  width: 100%;
}
.kv__splide .splide__pagination {
  bottom: 5.1282051282vw;
}
@media screen and (min-width: 769px) {
  .kv__splide .splide__pagination {
    bottom: min(20px, 1.6666666667vw);
  }
}
.kv__splide .splide__pagination .splide__pagination__page {
  background: rgba(255, 255, 255, 0.5);
  margin: 0 1.2820512821vw;
}
@media screen and (min-width: 769px) {
  .kv__splide .splide__pagination .splide__pagination__page {
    margin: 0 min(5px, 0.4166666667vw);
  }
}
.kv__splide .splide__pagination .splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.2);
}
.kv__splide .splide__slide {
  opacity: 0;
  transition: opacity 1500ms;
}
.kv__splide .splide__slide.is-active {
  opacity: 1;
}

.profile__bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  z-index: -1;
}
.profile__bg-item {
  position: absolute;
  top: 115.3846153846vw;
  right: 0;
  width: 87.4358974359vw;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .profile__bg-item {
    top: min(60px, 5vw);
    width: min(708px, 59vw);
  }
}
.profile__inner {
  padding-top: 15.3846153846vw;
}
@media screen and (min-width: 769px) {
  .profile__inner {
    padding-top: min(100px, 8.3333333333vw);
  }
}
.profile__copy {
  padding: 0 19.2307692308vw;
}
@media screen and (min-width: 769px) {
  .profile__copy {
    padding: 0 min(120px, 8.3333333333vw);
    width: min(308px, 21.3888888889vw);
  }
}
.profile__box {
  margin: 94.8717948718vw 3.8461538462vw 0;
  background-color: #FFFFFF;
  padding: 5.1282051282vw;
  border-radius: 2.5641025641vw;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 2.5641025641vw;
}
@media screen and (min-width: 769px) {
  .profile__box {
    margin: min(50px, 4.1666666667vw) 0 0;
    padding: min(30px, 2.5vw);
    border-radius: min(10px, 0.8333333333vw);
    gap: min(10px, 0.8333333333vw) min(20px, 1.6666666667vw);
  }
}
.profile__name-wrapper {
  grid-column: 1/3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 5.1282051282vw;
}
@media screen and (min-width: 769px) {
  .profile__name-wrapper {
    grid-column: 2;
    grid-row: 1;
    gap: min(30px, 2.5vw);
  }
}
.profile__name-title {
  font-size: 4.1025641026vw;
  font-weight: 700;
  color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .profile__name-title {
    font-size: min(22px, 1.8333333333vw);
  }
}
.profile__name-text {
  margin-top: 0;
  font-weight: 500;
  color: #1E1E1E;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.0256410256vw;
}
@media screen and (min-width: 769px) {
  .profile__name-text {
    gap: min(4px, 0.3333333333vw);
  }
}
.profile__name-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2.5641025641vw;
  transform: translateY(-50%);
  width: 0.2564102564vw;
  height: 3.8461538462vw;
  background-color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .profile__name-text::before {
    left: max(-15px, -1.25vw);
    width: min(1px, 0.0833333333vw);
    height: min(22px, 1.8333333333vw);
  }
}
.profile__name-text--ja {
  font-size: 3.5897435897vw;
}
@media screen and (min-width: 769px) {
  .profile__name-text--ja {
    font-size: min(20px, 1.6666666667vw);
  }
}
.profile__name-text--en {
  font-size: 3.5897435897vw;
  font-family: "Lato", sans-serif;
}
@media screen and (min-width: 769px) {
  .profile__name-text--en {
    font-size: min(22px, 1.8333333333vw);
  }
}
.profile__img-wrapper {
  grid-column: 1;
  grid-row: 2;
  width: 22.5641025641vw;
  height: 26.4102564103vw;
}
@media screen and (min-width: 769px) {
  .profile__img-wrapper {
    grid-column: 1;
    grid-row: 1/4;
    width: min(170px, 14.1666666667vw);
    height: min(200px, 16.6666666667vw);
  }
}
.profile__img-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile__text {
  margin-top: 0;
  grid-column: 2;
  grid-row: 2;
  font-size: 2.8205128205vw;
  line-height: 4.6153846154vw;
  color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .profile__text {
    grid-column: 2;
    grid-row: 2;
    font-size: min(14px, 1.1666666667vw);
    line-height: min(24px, 2vw);
  }
}
.profile__sns-list {
  grid-column: 1/3;
  grid-row: 3;
}
@media screen and (min-width: 769px) {
  .profile__sns-list {
    grid-column: 2;
    grid-row: 3;
  }
}
.profile__sns-item {
  display: flex;
  align-items: center;
  gap: 3.0769230769vw;
}
@media screen and (min-width: 769px) {
  .profile__sns-item {
    gap: min(14px, 1.1666666667vw);
  }
}
.profile__sns-title {
  font-size: 3.0769230769vw;
  line-height: 6.6666666667vw;
  font-weight: 700;
  color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .profile__sns-title {
    font-size: min(14px, 1.1666666667vw);
    line-height: min(24px, 2vw);
  }
}
.profile__sns-link {
  font-size: 3.0769230769vw;
  line-height: 6.6666666667vw;
  font-weight: 700;
  color: #A6477B !important;
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .profile__sns-link {
    font-size: min(14px, 1.1666666667vw);
    line-height: min(24px, 2vw);
  }
}
.profile a[target=_blank]:not(.m-no-icon):after {
  display: none;
}

.song__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  z-index: -1;
}
.song__bg-text {
  margin-top: 0;
  position: absolute;
  top: 8.9743589744vw;
  left: 16.1538461538vw;
  width: 79.2307692308vw;
}
@media screen and (min-width: 769px) {
  .song__bg-text {
    top: min(104px, 8.6666666667vw);
    left: min(277px, 19.2361111111vw);
    width: min(438px, 36.5vw);
  }
}
.song__bg-item {
  position: absolute;
  z-index: -1;
}
.song__bg-item--01 {
  top: -12.8205128205vw;
  left: -26.4102564103vw;
  width: 75.8974358974vw;
}
@media screen and (min-width: 769px) {
  .song__bg-item--01 {
    top: max(-202px, -16.8333333333vw);
    left: max(-111px, -7.7083333333vw);
    width: min(377px, 31.4166666667vw);
  }
}
.song__bg-item--02 {
  top: 48.7179487179vw;
  left: 64.1025641026vw;
  width: 50.2564102564vw;
}
@media screen and (min-width: 769px) {
  .song__bg-item--02 {
    top: min(661px, 55.0833333333vw);
    left: min(50px, 3.4722222222vw);
    width: min(316px, 26.3333333333vw);
  }
}
.song__bg-item--03 {
  top: 265.1282051282vw;
  left: -5.1282051282vw;
  width: 130.7692307692vw;
}
@media screen and (min-width: 769px) {
  .song__bg-item--03 {
    top: max(-36px, -3vw);
    left: min(843px, 58.5416666667vw);
    width: min(931px, 77.5833333333vw);
  }
}
.song__bg-title {
  display: none;
}
@media screen and (min-width: 769px) {
  .song__bg-title {
    display: block;
    position: absolute;
    top: min(588px, 49vw);
    left: min(1274px, 88.4722222222vw);
    width: min(186px, 15.5vw);
  }
}
.song__inner {
  padding-top: 76.9230769231vw;
}
@media screen and (min-width: 769px) {
  .song__inner {
    padding-top: min(350px, 29.1666666667vw);
  }
}
.song__title {
  margin-left: 15.8974358974vw;
  width: 82.8205128205vw;
}
@media screen and (min-width: 769px) {
  .song__title {
    margin-left: min(332px, 69.1666666667vw);
    width: min(463px, 38.5833333333vw);
  }
}
.song__text {
  margin-top: 12.8205128205vw;
  padding: 0 3.8461538462vw;
  font-size: 4.1025641026vw;
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .song__text {
    margin-top: min(60px, 5vw);
    padding: 0;
    font-size: min(22px, 1.8333333333vw);
    line-height: min(46px, 3.8333333333vw);
  }
}
.song__music-wrapper {
  margin-top: 10.2564102564vw;
  padding: 0 3.8461538462vw;
}
@media screen and (min-width: 769px) {
  .song__music-wrapper {
    margin-top: min(35px, 2.9166666667vw);
    padding: 0;
  }
}
.song__music-wrapper iframe {
  width: 100%;
  max-width: 100% !important;
}
.song__banner-list {
  margin-top: 5.1282051282vw;
  padding: 0 8.9743589744vw;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5641025641vw;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .song__banner-list {
    margin-top: min(20px, 1.6666666667vw);
    padding: 0;
    gap: min(15px, 1.25vw);
  }
}
.song__banner-item {
  width: calc(50% - 1.2820512821vw);
}
@media screen and (min-width: 769px) {
  .song__banner-item {
    width: calc((100% - min(15px, 1.25vw) * 4) / 5);
  }
}
.song__box {
  margin: 10.2564102564vw 3.8461538462vw 0;
  padding: 7.6923076923vw;
  background-color: #FFFFFF;
  border-radius: 2.5641025641vw;
}
@media screen and (min-width: 769px) {
  .song__box {
    margin: min(50px, 4.1666666667vw) 0 0;
    padding: min(30px, 2.5vw);
    border-radius: min(10px, 0.8333333333vw);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: min(40px, 3.3333333333vw);
  }
}
@media screen and (min-width: 769px) {
  .song__box-pic {
    width: min(260px, 21.6666666667vw);
  }
}
.song__box-text {
  margin-top: 5.1282051282vw;
  font-size: 2.8205128205vw;
  line-height: 4.6153846154vw;
  color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .song__box-text {
    margin-top: 0;
    font-size: min(14px, 1.1666666667vw);
    line-height: min(24px, 2vw);
  }
}
.song a[target=_blank]:not(.m-no-icon):after {
  display: none;
}

.diary__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
}
.diary__bg-item {
  position: absolute;
  z-index: -1;
}
.diary__bg-item--01 {
  top: -60vw;
  left: -54.1025641026vw;
  width: 187.4358974359vw;
}
@media screen and (min-width: 769px) {
  .diary__bg-item--01 {
    top: max(-200px, -16.6666666667vw);
    left: max(-70px, -4.8611111111vw);
    width: min(455px, 37.9166666667vw);
  }
}
.diary__bg-item--01-0530 {
  top: -20.5128205128vw;
  left: -24.1025641026vw;
  width: 136.6666666667vw;
}
@media screen and (min-width: 769px) {
  .diary__bg-item--01-0530 {
    top: max(-200px, -16.6666666667vw);
    left: max(-70px, -4.8611111111vw);
    width: min(455px, 37.9166666667vw);
  }
}
.diary__bg-item--02 {
  top: 91.7948717949vw;
  left: -3.3333333333vw;
  width: 112.3076923077vw;
}
@media screen and (min-width: 769px) {
  .diary__bg-item--02 {
    top: min(145px, 12.0833333333vw);
    left: min(900px, 62.5vw);
    width: min(348px, 29vw);
  }
}
.diary__bg-item--03 {
  top: 255.8974358974vw;
  left: -47.1794871795vw;
  width: 164.1025641026vw;
}
@media screen and (min-width: 769px) {
  .diary__bg-item--03 {
    top: min(337px, 28.0833333333vw);
    left: min(75px, 5.2083333333vw);
    width: min(1418px, 118.1666666667vw);
  }
}
.diary__bg-item--03-0530 {
  display: none;
}
@media screen and (min-width: 769px) {
  .diary__bg-item--03-0530 {
    display: block;
    top: max(-243px, -20.25vw);
    left: min(987px, 68.5416666667vw);
    width: min(510px, 42.5vw);
  }
}
.diary__bg-title {
  display: none;
}
@media screen and (min-width: 769px) {
  .diary__bg-title {
    display: block;
    position: absolute;
    top: min(800px, 49vw);
    left: max(-24px, -2vw);
    width: min(200px, 16.6666666667vw);
  }
}
@media screen and (min-width: 769px) {
  .diary__bg-title--0530 {
    top: min(235px, 19.5833333333vw);
  }
}
.diary__inner {
  padding-top: 51.2820512821vw;
}
@media screen and (min-width: 769px) {
  .diary__inner {
    padding-top: min(150px, 12.5vw);
  }
}
.diary__title {
  margin-left: 7.6923076923vw;
  width: 84.1025641026vw;
}
@media screen and (min-width: 769px) {
  .diary__title {
    margin-left: min(298px, 24.8333333333vw);
    width: min(405px, 33.75vw);
  }
}
.diary__text {
  margin-top: 12.8205128205vw;
  font-size: 4.1025641026vw;
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .diary__text {
    margin-top: min(60px, 5vw);
    padding: 0;
    font-size: min(22px, 1.8333333333vw);
    line-height: min(46px, 3.8333333333vw);
  }
}
.diary__movie {
  margin: 10.2564102564vw auto 0;
  width: 82.3076923077vw;
}
@media screen and (min-width: 769px) {
  .diary__movie {
    margin-top: min(40px, 3.3333333333vw);
    width: min(315px, 26.25vw);
  }
}
.diary__movie > * {
  width: 100%;
}
.diary__movie-iframe {
  height: 146.1538461538vw;
  aspect-ratio: 9/16;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 769px) {
  .diary__movie-iframe {
    height: min(560px, 46.6666666667vw);
  }
}

.message__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
}
.message__bg-item {
  position: absolute;
  z-index: -1;
}
.message__bg-item--01 {
  top: 31.0256410256vw;
  left: -44.358974359vw;
  width: 96.6666666667vw;
}
@media screen and (min-width: 769px) {
  .message__bg-item--01 {
    display: none;
  }
}
.message__bg-item--01-0530 {
  top: 207.6923076923vw;
  left: -41.0256410256vw;
  width: 96.6666666667vw;
}
@media screen and (min-width: 769px) {
  .message__bg-item--01-0530 {
    display: none;
  }
}
.message__bg-item--02 {
  top: 222.3076923077vw;
  left: 59.2307692308vw;
  width: 61.2820512821vw;
}
@media screen and (min-width: 769px) {
  .message__bg-item--02 {
    display: none;
  }
}
.message__bg-item--02-0530 {
  top: 149.2307692308vw;
  left: 45.3846153846vw;
  width: 67.1794871795vw;
}
@media screen and (min-width: 769px) {
  .message__bg-item--02-0530 {
    display: none;
  }
}
.message__inner {
  padding-top: 25.641025641vw;
}
@media screen and (min-width: 769px) {
  .message__inner {
    padding-top: min(150px, 12.5vw);
  }
}
.message__inner--0530 {
  padding-top: 51.2820512821vw;
}
@media screen and (min-width: 769px) {
  .message__inner--0530 {
    padding-top: min(150px, 12.5vw);
  }
}
.message__title {
  margin-left: 3.8461538462vw;
  width: 92.3076923077vw;
}
@media screen and (min-width: 769px) {
  .message__title {
    margin-left: min(160px, 13.3333333333vw);
    width: min(680px, 56.6666666667vw);
  }
}
.message__list {
  margin-top: 12.8205128205vw;
  padding: 0 3.8461538462vw;
  display: flex;
  flex-direction: column;
  gap: 5.8974358974vw;
}
@media screen and (min-width: 769px) {
  .message__list {
    margin-top: min(60px, 5vw);
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 min(80px, 6.6666666667vw);
    justify-content: center;
  }
}
.message__item {
  display: flex;
  gap: 3.8461538462vw;
}
@media screen and (min-width: 769px) {
  .message__item {
    width: calc((100% - min(80px, 6.6666666667vw) * 2) / 3);
    flex-direction: column;
    justify-content: flex-end;
    gap: min(20px, 1.6666666667vw);
  }
}
.message__item:nth-of-type(even) {
  flex-direction: row-reverse;
}
@media screen and (min-width: 769px) {
  .message__item:nth-of-type(even) {
    flex-direction: column;
  }
}
@media screen and (min-width: 769px) {
  .message__item:nth-of-type(n + 4) {
    flex-direction: column-reverse;
  }
}
.message__item-pic {
  width: 47.4358974359vw;
}
@media screen and (min-width: 769px) {
  .message__item-pic {
    width: 100%;
  }
}
.message__item-text {
  width: calc(100% - 47.4358974359vw - 3.8461538462vw);
  font-size: 3.5897435897vw;
  line-height: 5.641025641vw;
}
@media screen and (min-width: 769px) {
  .message__item-text {
    width: 100%;
    font-size: min(16px, 1.3333333333vw);
    line-height: min(28px, 2.3333333333vw);
  }
}

.beer__bg {
  position: absolute;
  top: 25.641025641vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .beer__bg {
    top: max(-50px, -4.1666666667vw);
  }
}
.beer__bg-img {
  width: 100%;
  height: 100%;
}
.beer__bg-item {
  position: absolute;
  z-index: -1;
}
.beer__bg-item--01 {
  top: 3.5897435897vw;
  left: -20.7692307692vw;
  width: 74.8717948718vw;
}
@media screen and (min-width: 769px) {
  .beer__bg-item--01 {
    top: max(-412px, -34.3333333333vw);
    left: max(-150px, -10.4166666667vw);
    width: min(766px, 63.8333333333vw);
  }
}
.beer__bg-item--02 {
  top: -1.7948717949vw;
  left: 51.5384615385vw;
  width: 46.1538461538vw;
}
@media screen and (min-width: 769px) {
  .beer__bg-item--02 {
    top: max(-472px, -39.3333333333vw);
    left: min(898px, 62.3611111111vw);
    width: min(632px, 52.6666666667vw);
  }
}
.beer__bg-title {
  position: absolute;
  top: 15.3846153846vw;
  left: 27.4358974359vw;
  width: 72.0512820513vw;
}
@media screen and (min-width: 769px) {
  .beer__bg-title {
    top: min(10px, 0.8333333333vw);
    left: min(761px, 52.8472222222vw);
    width: min(463px, 38.5833333333vw);
  }
}
.beer__inner {
  padding-top: 76.9230769231vw;
  padding-bottom: 15.3846153846vw;
}
@media screen and (min-width: 769px) {
  .beer__inner {
    padding-top: min(350px, 29.1666666667vw);
    padding-bottom: min(100px, 8.3333333333vw);
  }
}
.beer__title {
  margin-left: 20.5128205128vw;
  width: 58.9743589744vw;
}
@media screen and (min-width: 769px) {
  .beer__title {
    margin-left: min(270px, 22.5vw);
    width: min(460px, 38.3333333333vw);
  }
}
.beer__contents {
  margin-top: 5.1282051282vw;
  position: relative;
}
@media screen and (min-width: 769px) {
  .beer__contents {
    margin-top: min(55px, 1.6666666667vw);
  }
}
.beer__contents-pic {
  margin-left: 15.3846153846vw;
  width: 69.2307692308vw;
  display: block;
}
@media screen and (min-width: 769px) {
  .beer__contents-pic {
    margin-left: 0;
    width: min(497px, 41.4166666667vw);
    position: absolute;
    top: max(-37px, -3.0833333333vw);
    left: max(-106px, -8.8333333333vw);
    z-index: 1;
  }
}
.beer__date-pic {
  position: absolute;
  top: 64.1025641026vw;
  left: 69.2307692308vw;
  width: 25.641025641vw;
}
@media screen and (min-width: 769px) {
  .beer__date-pic {
    top: max(-188px, -15.6666666667vw);
    left: min(814px, 67.8333333333vw);
    width: min(216px, 18vw);
  }
}
.beer__text-wrapper {
  margin-top: 7.6923076923vw;
  padding: 0 3.8461538462vw;
}
@media screen and (min-width: 769px) {
  .beer__text-wrapper {
    margin-top: min(55px, 4.5833333333vw);
    margin-left: min(420px, 35vw);
    padding: 0;
  }
}
.beer__text-pic {
  width: 74.358974359vw;
  display: block;
}
@media screen and (min-width: 769px) {
  .beer__text-pic {
    width: min(455px, 37.9166666667vw);
  }
}
.beer__text {
  margin-top: 5.1282051282vw;
  font-size: 3.5897435897vw;
  line-height: 5.641025641vw;
}
@media screen and (min-width: 769px) {
  .beer__text {
    margin-top: min(30px, 1.6666666667vw);
    font-size: min(16px, 1.3333333333vw);
    line-height: min(32px, 2.6666666667vw);
  }
}
.beer__box {
  margin: 25.641025641vw 3.8461538462vw 0;
  padding: 23.0769230769vw 7.6923076923vw 10.2564102564vw;
  background-color: #FFFFFF;
  border-radius: 7.6923076923vw;
  position: relative;
}
@media screen and (min-width: 769px) {
  .beer__box {
    margin: min(52px, 4.3333333333vw) 0 0;
    padding: min(200px, 16.6666666667vw) min(30px, 2.5vw) min(30px, 2.5vw);
    border-radius: min(30px, 2.5vw);
  }
}
.beer__box-pic {
  position: absolute;
  top: -15.3846153846vw;
  left: 7.6923076923vw;
  width: 88.4615384615vw;
  display: block;
}
@media screen and (min-width: 769px) {
  .beer__box-pic {
    top: min(30px, 2.5vw);
    left: min(420px, 35vw);
    width: min(610px, 50.8333333333vw);
  }
}
.beer__list {
  display: grid;
  gap: 7.6923076923vw;
}
@media screen and (min-width: 769px) {
  .beer__list {
    grid-template-columns: repeat(3, 1fr);
    gap: min(20px, 1.6666666667vw);
  }
}
.beer__item-title {
  margin-top: 5.1282051282vw;
  font-size: 4.1025641026vw;
  font-weight: 700;
  color: #1E1E1E;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .beer__item-title {
    margin-top: min(20px, 1.6666666667vw);
    font-size: min(22px, 1.8333333333vw);
  }
}
.beer__item-text {
  margin-top: 2.5641025641vw;
  font-size: 3.5897435897vw;
  line-height: 5.1282051282vw;
  color: #1E1E1E;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .beer__item-text {
    margin-top: min(10px, 0.8333333333vw);
    font-size: min(14px, 1.3333333333vw);
    line-height: min(24px, 2vw);
  }
}

.story__kv-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  z-index: -1;
}
.story__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 100vw);
  height: 100%;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .story__bg {
    top: 0;
  }
}
.story__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.story__inner {
  padding-top: 15.1282051282vw;
  padding-bottom: 20.5128205128vw;
}
@media screen and (min-width: 769px) {
  .story__inner {
    padding-top: min(280px, 23.3333333333vw);
    padding-bottom: min(100px, 8.3333333333vw);
  }
}
@media screen and (min-width: 769px) {
  .story__title {
    margin-left: min(136px, 27.0833333333vw);
    width: min(740px, 61.6666666667vw);
  }
}
.story__text {
  margin-top: 12.8205128205vw;
  font-size: 4.1025641026vw;
  line-height: 8.2051282051vw;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .story__text {
    margin-top: min(50px, 4.1666666667vw);
    font-size: min(22px, 1.8333333333vw);
    line-height: min(46px, 3.8333333333vw);
  }
}
.story__beer-pic {
  margin-top: 7.6923076923vw;
  display: block;
}
@media screen and (min-width: 769px) {
  .story__beer-pic {
    margin: min(20px, 1.6666666667vw) max(-195px, -13.5416666667vw) 0;
  }
}
.story__accordion {
  display: grid;
  transition: grid-template-rows 0.5s;
  grid-template-rows: 0fr;
  margin: 0 calc(50% - 50vw);
}
.story__accordion.is-open {
  grid-template-rows: 1fr;
}
.story__accordion > * {
  overflow: hidden;
}
.story__accordion-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.story__interview-title {
  margin-top: 27.1794871795vw;
  margin-left: 12.3076923077vw;
  width: 75.8974358974vw;
}
@media screen and (min-width: 769px) {
  .story__interview-title {
    margin-top: min(126px, 10.5vw);
    margin-left: min(68px, 5.6666666667vw);
    width: min(864px, 72vw);
  }
}
.story__interview-text-wrapper {
  margin-top: 12.8205128205vw;
}
@media screen and (min-width: 769px) {
  .story__interview-text-wrapper {
    margin-top: min(50px, 4.1666666667vw);
  }
}
.story__interview-title-text {
  font-size: 5.1282051282vw;
  line-height: 8.2051282051vw;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .story__interview-title-text {
    font-size: min(20px, 1.6666666667vw);
    line-height: min(32px, 2.6666666667vw);
  }
}
.story__interview-text {
  margin-top: 5.1282051282vw;
  font-size: 3.5897435897vw;
  line-height: 6.1538461538vw;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .story__interview-text {
    margin-top: min(30px, 2.5vw);
    font-size: min(18px, 1.5vw);
    line-height: min(46px, 3.8333333333vw);
  }
}
.story__interview-pic {
  margin: 7.6923076923vw 3.8461538462vw 0;
  display: block;
}
@media screen and (min-width: 769px) {
  .story__interview-pic {
    margin: min(20px, 1.6666666667vw) max(-105px, -7.2916666667vw) 0;
    width: calc(100% + min(210px, 14.5833333333vw));
    max-width: none;
  }
}
@media screen and (min-width: 769px) {
  .story__interview-img {
    width: 100%;
    max-width: none;
  }
}
.story__voice-title {
  margin-top: 20.5128205128vw;
  margin-left: 6.6666666667vw;
  width: 87.1794871795vw;
}
@media screen and (min-width: 769px) {
  .story__voice-title {
    margin-top: min(100px, 8.3333333333vw);
    margin-left: 0;
    width: 100%;
  }
}
.story__voice-pic {
  margin: 10.2564102564vw 6.4102564103vw 0;
  display: block;
}
@media screen and (min-width: 769px) {
  .story__voice-pic {
    margin: min(50px, 4.1666666667vw) 0 0;
  }
}
.story__taste-title {
  margin-top: 30.7692307692vw;
  margin-left: 24.6153846154vw;
  width: 50.7692307692vw;
}
@media screen and (min-width: 769px) {
  .story__taste-title {
    margin-top: min(120px, 10vw);
    margin-left: min(356px, 29.6666666667vw);
    width: min(288px, 24vw);
  }
}
.story__taste-sub-title {
  margin-top: 10.2564102564vw;
  font-size: 4.6153846154vw;
  line-height: 8.2051282051vw;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .story__taste-sub-title {
    margin-top: min(50px, 4.1666666667vw);
    font-size: min(20px, 1.6666666667vw);
    line-height: min(32px, 2.6666666667vw);
  }
}
.story__taste-pic {
  margin: 10.2564102564vw 3.8461538462vw 0;
  display: block;
}
@media screen and (min-width: 769px) {
  .story__taste-pic {
    margin: min(30px, 2.5vw) 0 0;
  }
}
.story__accordion-button-wrapper {
  margin-top: 20.5128205128vw;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .story__accordion-button-wrapper {
    margin-top: min(100px, 8.3333333333vw);
  }
}
.story__open-button {
  width: 89.7435897436vw;
  border: none;
  background-color: transparent;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .story__open-button {
    width: min(450px, 37.5vw);
  }
}
.story__open-button.is-open {
  display: none;
}
.story__close-button {
  width: 20.5128205128vw;
  border: none;
  background-color: transparent;
  padding: 0;
  display: none;
}
@media screen and (min-width: 769px) {
  .story__close-button {
    width: min(100px, 8.3333333333vw);
  }
}
.story__close-button.is-open {
  display: block;
}

.article {
  background-color: #A3CBC1;
}
.article__inner {
  padding-top: 15.3846153846vw;
  padding-bottom: 15.3846153846vw;
}
@media screen and (min-width: 769px) {
  .article__inner {
    padding-top: min(60px, 5vw);
    padding-bottom: min(60px, 5vw);
  }
}
.article__title {
  margin-left: 30.2564102564vw;
  width: 39.4871794872vw;
}
@media screen and (min-width: 769px) {
  .article__title {
    margin-left: min(429px, 35.75vw);
    width: min(154px, 12.8333333333vw);
  }
}
.article__text {
  margin-top: 10.2564102564vw;
  font-size: 4.1025641026vw;
  line-height: 8.2051282051vw;
  text-align: center;
  color: #1E1E1E;
}
@media screen and (min-width: 769px) {
  .article__text {
    margin-top: min(48px, 4vw);
    font-size: min(22px, 1.3333333333vw);
    line-height: min(46px, 2.6666666667vw);
  }
}
.article__pic {
  margin: 10.2564102564vw 3.0769230769vw 0;
  display: block;
  filter: drop-shadow(0 1.2820512821vw 5.1282051282vw rgba(0, 0, 0, 0.2));
}
@media screen and (min-width: 769px) {
  .article__pic {
    margin: min(58px, 4.8333333333vw) min(130px, 10.8333333333vw) 0;
    filter: drop-shadow(0 min(5px, 0.4166666667vw) min(20px, 1.6666666667vw) rgba(0, 0, 0, 0.2));
  }
}

.bottom__sns-wrapper {
  padding: 15.3846153846vw 0;
}
@media screen and (min-width: 769px) {
  .bottom__sns-wrapper {
    padding: min(60px, 5vw) 0;
  }
}
.bottom__sns-title {
  font-size: 4.1025641026vw;
  line-height: 6.1538461538vw;
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .bottom__sns-title {
    font-size: min(22px, 1.3333333333vw);
    line-height: min(46px, 2vw);
  }
}
.bottom__sns-list {
  margin-top: 10.2564102564vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12.8205128205vw;
}
@media screen and (min-width: 769px) {
  .bottom__sns-list {
    margin-top: min(40px, 3.3333333333vw);
    gap: min(56px, 4.6666666667vw);
  }
}
.bottom__sns-item:nth-of-type(1) {
  width: 12.8205128205vw;
}
@media screen and (min-width: 769px) {
  .bottom__sns-item:nth-of-type(1) {
    width: min(50px, 4.1666666667vw);
  }
}
.bottom__sns-item:nth-of-type(2) {
  width: 11.7948717949vw;
}
@media screen and (min-width: 769px) {
  .bottom__sns-item:nth-of-type(2) {
    width: min(46px, 3.8333333333vw);
  }
}
.bottom__banner-wrapper {
  padding: 15.3846153846vw 0;
  background-color: #A6477B;
}
@media screen and (min-width: 769px) {
  .bottom__banner-wrapper {
    padding: min(110px, 9.1666666667vw) 0;
  }
}
.bottom__banner-title {
  font-size: 4.1025641026vw;
  line-height: 6.1538461538vw;
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .bottom__banner-title {
    font-size: min(22px, 1.3333333333vw);
    line-height: min(46px, 2vw);
  }
}
.bottom__banner-list {
  margin-top: 10.2564102564vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.1282051282vw;
}
@media screen and (min-width: 769px) {
  .bottom__banner-list {
    margin-top: min(40px, 3.3333333333vw);
    gap: min(30px, 2.5vw);
    flex-direction: row;
  }
}
.bottom__banner-item {
  height: 21.7948717949vw;
}
@media screen and (min-width: 769px) {
  .bottom__banner-item {
    height: min(85px, 7.0833333333vw);
  }
}
.bottom__banner-img {
  width: auto;
  height: 100%;
}

.u-hidden {
  display: none !important;
}

.u-visible {
  display: block !important;
}

@media screen and (min-width: 500px) {
  .u-hidden-xs-up {
    display: none !important;
  }
}

@media screen and (max-width: 499px) {
  .u-hidden-xs-down {
    display: none !important;
  }
}

.u-visible-xs-up {
  display: none !important;
}
@media screen and (min-width: 500px) {
  .u-visible-xs-up {
    display: block !important;
  }
}

.u-visible-xs-down {
  display: none !important;
}
@media screen and (max-width: 499px) {
  .u-visible-xs-down {
    display: block !important;
  }
}

@media screen and (min-width: 769px) {
  .u-hidden-md-up {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .u-hidden-md-down {
    display: none !important;
  }
}

.u-visible-md-up {
  display: none !important;
}
@media screen and (min-width: 769px) {
  .u-visible-md-up {
    display: block !important;
  }
}

.u-visible-md-down {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .u-visible-md-down {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  .u-hidden-lg-up {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  .u-hidden-lg-down {
    display: none !important;
  }
}

.u-visible-lg-up {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .u-visible-lg-up {
    display: block !important;
  }
}

.u-visible-lg-down {
  display: none !important;
}
@media screen and (max-width: 1023px) {
  .u-visible-lg-down {
    display: block !important;
  }
}

@media screen and (min-width: 1440px) {
  .u-hidden-xl-up {
    display: none !important;
  }
}

@media screen and (max-width: 1439px) {
  .u-hidden-xl-down {
    display: none !important;
  }
}

.u-visible-xl-up {
  display: none !important;
}
@media screen and (min-width: 1440px) {
  .u-visible-xl-up {
    display: block !important;
  }
}

.u-visible-xl-down {
  display: none !important;
}
@media screen and (max-width: 1439px) {
  .u-visible-xl-down {
    display: block !important;
  }
}

@media screen and (min-width: 1920px) {
  .u-hidden-xxl-up {
    display: none !important;
  }
}

@media screen and (max-width: 1919px) {
  .u-hidden-xxl-down {
    display: none !important;
  }
}

.u-visible-xxl-up {
  display: none !important;
}
@media screen and (min-width: 1920px) {
  .u-visible-xxl-up {
    display: block !important;
  }
}

.u-visible-xxl-down {
  display: none !important;
}
@media screen and (max-width: 1919px) {
  .u-visible-xxl-down {
    display: block !important;
  }
}

@media screen and (min-width: 2560px) {
  .u-hidden-xxxl-up {
    display: none !important;
  }
}

@media screen and (max-width: 2559px) {
  .u-hidden-xxxl-down {
    display: none !important;
  }
}

.u-visible-xxxl-up {
  display: none !important;
}
@media screen and (min-width: 2560px) {
  .u-visible-xxxl-up {
    display: block !important;
  }
}

.u-visible-xxxl-down {
  display: none !important;
}
@media screen and (max-width: 2559px) {
  .u-visible-xxxl-down {
    display: block !important;
  }
}

.u-display-inline-block {
  display: inline-block !important;
}

.u-display-block {
  display: block !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

.u-text-lowercase {
  text-transform: lowercase !important;
}

.u-text-uppercase {
  text-transform: uppercase !important;
}

.u-text-capitalize {
  text-transform: capitalize !important;
}

.u-font-weight-normal {
  font-weight: 400 !important;
}

.u-font-weight-bold {
  font-weight: 700 !important;
}

.u-font-italic {
  font-style: italic !important;
}

.u-position-relative {
  position: relative !important;
}

.u-position-absolute {
  position: absolute !important;
}

.u-position-fixed {
  position: fixed !important;
}

.u-position-sticky {
  position: sticky !important;
  position: -webkit-sticky !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mr-0 {
  margin-right: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-ml-0 {
  margin-left: 0 !important;
}

.u-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.u-p-0 {
  padding: 0 !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-pr-0 {
  padding-right: 0 !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pl-0 {
  padding-left: 0 !important;
}

.u-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/*# sourceMappingURL=style.css.map */