.ybt {
  --ybt-color-main: #9d684e;
  --ybt-color-main-rgb: 157 104 78;
  --ybt-color-main-dark: #381107;
  --ybt-color-main-dark-rgb: 56 17 7;
  --ybt-color-sub: #eee3d8;
  --ybt-color-sub-rgb: 238 227 216;
  --ybt-color-black: #191816;
  --ybt-color-black-rgb: 25 24 22;
}

:root {
  --ybs-header-height: 70px;
}

@media (max-width: 768px) {
  :root {
    --ybt-scroll-padding: 15.66667vw;
  }
}

@media (min-width: 769px) {
  :root {
    --ybt-scroll-padding: calc(var(--ybs-header-height)  + clamp(8.4375px, .78125vw, 10px));
  }
}

.ybt :where([hidden]) {
  display: none !important;
}

.ybt :where(header, footer, section, article, aside, nav):before, .ybt :where(header, footer, section, article, aside, nav):after {
  content: none;
}

.ybt :where(p) {
  margin: 0;
  padding: 0;
}

.ybt :where(picture) {
  max-width: 100%;
  display: inline-block;
}

.ybt :where(picture) > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.ybt :where(svg) {
  fill: currentColor;
}

.ybt a[target="_blank"]:after {
  content: none;
}

.ybt-container {
  box-sizing: border-box;
  margin: auto;
  position: relative;
}

@media (max-width: 768px) {
  .ybt-container {
    padding-left: 5.33333vw;
    padding-right: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-container {
    width: clamp(1080px, 100vw, 1280px);
    padding-left: clamp(33.75px, 3.125vw, 40px);
    padding-right: clamp(33.75px, 3.125vw, 40px);
  }
}

.ybt-btn:is(a) {
  justify-content: center;
  align-items: center;
  display: inline-flex;
  transition: all .3s ease-out !important;
}

.ybt-btn__icon {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ybt-btn__icon > svg {
  fill: currentColor;
  width: 100%;
}

.ybt-btn--filled:is(a) {
  background-color: var(--ybt-color-main);
  font-weight: 700;
  color: var(--ybt-color-sub) !important;
  transition: all .3s ease-out !important;
}

@media (hover: hover) {
  .ybt-btn--filled:is(a):hover {
    background-color: #fff;
    color: var(--ybt-color-main) !important;
  }
}

@media (max-width: 768px) {
  .ybt-btn--filled:is(a) {
    padding-top: 3.73333vw;
    padding-bottom: 1.6vw;
    letter-spacing: -.133333vw;
    flex-direction: column;
    height: 19.2vw;
    padding-inline: 1.06667vw;
    font-size: 4.26667vw;
    line-height: 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--filled:is(a) {
    letter-spacing: clamp(.084375px, .0078125vw, .1px);
    gap: clamp(6.75px, .625vw, 8px);
    padding-block: clamp(7.59375px, .703125vw, 9px);
    padding-inline: clamp(13.5px, 1.25vw, 16px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

@media (max-width: 768px) {
  .ybt-btn--filled .ybt-btn__icon {
    width: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--filled .ybt-btn__icon {
    width: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-btn--outline:is(a) {
  height: var(--ybt-btn-outline-height);
  border-color: var(--ybt-color-main);
  border-radius: calc(var(--ybt-btn-outline-height) / 2);
  letter-spacing: .005em;
  border-style: solid;
  font-weight: 700;
  color: var(--ybt-color-main) !important;
  transition: all .3s ease-out !important;
}

@media (hover: hover) {
  .ybt-btn--outline:is(a):hover {
    background-color: var(--ybt-color-main);
    color: var(--ybt-color-sub) !important;
  }
}

@media (max-width: 768px) {
  .ybt-btn--outline:is(a) {
    --ybt-btn-outline-height: 16vw;
    border-width: .533333vw;
    gap: 1.06667vw;
    padding-inline: 5.86667vw;
    font-size: 3.73333vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--outline:is(a) {
    --ybt-btn-outline-height: clamp(54px, 5vw, 64px);
    border-width: clamp(1.6875px, .15625vw, 2px);
    gap: clamp(5.0625px, .46875vw, 6px);
    padding-inline: clamp(20.25px, 1.875vw, 24px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(20.25px, 1.875vw, 24px);
  }
}

@media (max-width: 768px) {
  .ybt-btn--outline .ybt-btn__icon {
    width: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--outline .ybt-btn__icon {
    width: clamp(16.875px, 1.5625vw, 20px);
  }
}

.ybt-btn--text:is(a) {
  border-bottom: 1px solid;
  color: var(--ybt-color-main) !important;
}

@media (hover: hover) {
  .ybt-btn--text:is(a):hover {
    opacity: .5;
  }
}

@media (max-width: 768px) {
  .ybt-btn--text:is(a) {
    letter-spacing: .0266667vw;
    gap: 1.6vw;
    padding: 1.06667vw 1.6vw;
    font-size: 3.2vw;
    line-height: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--text:is(a) {
    letter-spacing: clamp(.084375px, .0078125vw, .1px);
    gap: clamp(6.75px, .625vw, 8px);
    padding: clamp(5.0625px, .46875vw, 6px) clamp(6.75px, .625vw, 8px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

@media (max-width: 768px) {
  .ybt-btn--text .ybt-btn__icon {
    width: 3.73333vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--text .ybt-btn__icon {
    width: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-btn--twitter:is(a) {
  --ybt-btn-twitter-icon-bg: #f8f4ef;
  --ybt-btn-twitter-icon-logo: #000;
  background-color: var(--ybt-color-main);
  transition: var(--ybt-btn-twitter-transition);
  font-weight: 500;
  --ybt-btn-twitter-transition: all ease-out .3s !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .ybt-btn--twitter:is(a) {
    border-radius: 7.46667vw;
    gap: 2.66667vw;
    height: 14.9333vw;
    padding-left: 2.66667vw;
    padding-right: 7.46667vw;
    font-size: 3.73333vw;
    line-height: 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--twitter:is(a) {
    border-radius: clamp(25.3125px, 2.34375vw, 30px);
    gap: clamp(8.4375px, .78125vw, 10px);
    height: clamp(50.625px, 4.6875vw, 60px);
    padding-left: clamp(8.4375px, .78125vw, 10px);
    padding-right: clamp(23.625px, 2.1875vw, 28px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

@media (hover: hover) {
  .ybt-btn--twitter:is(a):hover {
    --ybt-btn-twitter-icon-bg: #191816;
    --ybt-btn-twitter-icon-logo: #fff;
    background-color: #fff;
    color: var(--ybt-color-main) !important;
  }
}

.ybt-btn--twitter .ybt-btn__icon {
  background-color: var(--ybt-btn-twitter-icon-bg);
  color: var(--ybt-btn-twitter-icon-logo);
  transition: var(--ybt-btn-twitter-transition);
  border-radius: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ybt-btn--twitter .ybt-btn__icon {
    width: 10.1333vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--twitter .ybt-btn__icon {
    width: clamp(35.4375px, 3.28125vw, 42px);
  }
}

.ybt-btn--reserve:is(a) {
  background-color: var(--ybt-color-main);
  border-radius: 100%;
  flex-direction: column;
  font-weight: 700;
  color: #f8f4ef !important;
  transition: all .3s ease-out !important;
}

@media (hover: hover) {
  .ybt-btn--reserve:is(a):hover {
    background-color: #f8f4ef;
    color: var(--ybt-color-main) !important;
  }
}

@media (max-width: 768px) {
  .ybt-btn--reserve:is(a) {
    box-shadow: 0 .533333vw 1.06667vw .266667vw rgb(var(--ybt-color-main-dark-rgb) / .15);
    letter-spacing: -.0533333vw;
    width: 19.2vw;
    height: 19.2vw;
    padding: 1.06667vw 2.13333vw 1.86667vw;
    font-size: 2.93333vw;
    line-height: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--reserve:is(a) {
    box-shadow: 0 clamp(3.375px, .3125vw, 4px) clamp(6.75px, .625vw, 8px) clamp(1.6875px, .15625vw, 2px) rgb(var(--ybt-color-main-dark-rgb) / .15);
    gap: clamp(4.21875px, .390625vw, 5px);
    width: clamp(109.688px, 10.1563vw, 130px);
    height: clamp(109.688px, 10.1563vw, 130px);
    padding: clamp(3.375px, .3125vw, 4px) clamp(13.5px, 1.25vw, 16px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(16.0313px, 1.48438vw, 19px);
  }
}

@media (max-width: 768px) {
  .ybt-btn--reserve .ybt-btn__icon {
    width: 10.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-btn--reserve .ybt-btn__icon {
    width: clamp(50.625px, 4.6875vw, 60px);
  }
}

.ybt-btn--reserve .ybt-btn__label {
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .ybt-btn--reserve .ybt-btn__label i {
    display: none;
  }
}

:root {
  --ybs-loading-duration: 3.5s;
  --ybt-hero-duration-1to2: 2.3s;
  --ybt-hero-duration-2to3: 1.4s;
  --ybt-hero-delay: 0s;
}

@keyframes HeroAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ybt-hero:before, .ybt-hero:after, .ybt-hero .ybt-container {
  opacity: 0;
  animation-name: HeroAnimation;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.ybs-loading {
  animation-duration: var(--ybs-loading-duration);
}

.ybt-hero:before {
  animation-duration: var(--ybt-hero-duration-1to2);
  animation-delay: calc(var(--ybs-loading-duration)  + var(--ybt-hero-delay));
}

.ybt-hero:after, .ybt-hero .ybt-container {
  animation-duration: var(--ybt-hero-duration-2to3);
  animation-delay: calc(var(--ybs-loading-duration)  + var(--ybt-hero-delay)  + var(--ybt-hero-duration-1to2));
}

.ybt-hero {
  color: #fff;
  position: relative;
}

@media (max-width: 768px) {
  .ybt-hero {
    background-color: #fbf8f5;
  }
}

@media (min-width: 769px) {
  .ybt-hero {
    background-color: var(--ybt-color-main-dark);
  }
}

.ybt-hero:before, .ybt-hero:after {
  content: "";
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.ybt-hero:before {
  background-color: var(--ybt-color-main-dark);
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .ybt-hero:before {
    background-image: url("../images/hero.bg.sp.webp");
    background-size: cover;
  }
}

@media (min-width: 769px) {
  .ybt-hero:before {
    background-image: url("../images/hero.bg.pc.webp");
    background-size: clamp(1215px, 112.5vw, 1440px);
  }
}

.ybt-hero:after {
  background-color: rgb(var(--ybt-color-main-dark-rgb) / .1);
  mix-blend-mode: multiply;
}

.ybt-hero .ybt-container {
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

@media (max-width: 768px) {
  .ybt-hero .ybt-container {
    gap: 4.8vw;
    height: 123.733vw;
    padding-bottom: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-hero .ybt-container {
    gap: clamp(23.625px, 2.1875vw, 28px);
    height: clamp(580.5px, 53.75vw, 688px);
    padding-bottom: clamp(16.875px, 1.5625vw, 20px);
  }
}

.ybt-hero__title {
  text-align: center;
}

@media (max-width: 768px) {
  .ybt-hero__title {
    filter: drop-shadow(0 0 3.73333vw rgb(var(--ybt-color-main-dark-rgb) / .5));
    width: 58.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-hero__title {
    width: clamp(659.813px, 61.0938vw, 782px);
  }
}

.ybt-hero__title > picture {
  width: 100%;
}

.ybt-hero__catchy {
  text-align: center;
}

@media (max-width: 768px) {
  .ybt-hero__catchy {
    width: 77.3333vw;
  }
}

@media (min-width: 769px) {
  .ybt-hero__catchy {
    width: clamp(453.938px, 42.0313vw, 538px);
  }
}

.ybt-hero__catchy picture {
  width: 100%;
}

.ybt-statement {
  color: var(--ybt-color-main);
  background-color: #fbf7f4;
  position: relative;
}

@media (max-width: 768px) {
  .ybt-statement {
    padding-top: 17.0667vw;
    padding-bottom: 24vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement {
    padding-top: clamp(101.25px, 9.375vw, 120px);
    padding-bottom: clamp(123.188px, 11.4063vw, 146px);
  }
}

.ybt-statement:before, .ybt-statement:after {
  content: "";
  z-index: 0;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}

@media (max-width: 768px) {
  .ybt-statement:before, .ybt-statement:after {
    background-size: 13.3333vw;
    width: 13.3333vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement:before, .ybt-statement:after {
    background-size: clamp(324px, 30vw, 384px);
    width: calc(50vw + clamp(702px, 65vw, 832px) / -2);
  }
}

.ybt-statement:before {
  background-position: 100% 0;
  left: 0;
}

@media (max-width: 768px) {
  .ybt-statement:before {
    background-image: url("../images/statement_before.bg.sp.webp");
  }
}

@media (min-width: 769px) {
  .ybt-statement:before {
    background-image: url("../images/statement_before.bg.pc.webp");
  }
}

.ybt-statement:after {
  background-position: 0 0;
  right: 0;
}

@media (max-width: 768px) {
  .ybt-statement:after {
    background-image: url("../images/statement_after.bg.sp.webp");
  }
}

@media (min-width: 769px) {
  .ybt-statement:after {
    background-image: url("../images/statement_after.bg.pc.webp");
  }
}

.ybt-statement .ybt-container {
  z-index: 1;
}

@media (min-width: 769px) {
  .ybt-statement__header {
    margin-bottom: clamp(47.25px, 4.375vw, 56px);
  }
}

.ybt-statement__header-title {
  text-align: center;
}

.ybt-statement__header-title > img {
  display: inline-block;
}

@media (max-width: 768px) {
  .ybt-statement__header-title > img {
    width: 63.4667vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement__header-title > img {
    width: clamp(236.25px, 21.875vw, 280px);
  }
}

@media (max-width: 768px) {
  .ybt-statement__content {
    margin-top: 12.8vw;
    padding-inline: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement__content {
    margin-top: clamp(47.25px, 4.375vw, 56px);
  }
}

.ybt-statement__content p {
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .ybt-statement__content p {
    letter-spacing: .08vw;
    font-size: 4.26667vw;
    line-height: 8vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement__content p {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(28.6875px, 2.65625vw, 34px);
  }
}

@media (max-width: 768px) {
  .ybt-statement__content p + p {
    margin-top: 8vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement__content p + p {
    margin-top: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-statement__content p span {
  display: inline-block;
}

.ybt-statement__content .ybt-statement__content-catchy {
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ybt-statement__content .ybt-statement__content-catchy {
    margin-top: 8.53333vw;
    font-size: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-statement__content .ybt-statement__content-catchy {
    font-size: clamp(20.25px, 1.875vw, 24px);
  }
}

.ybt-news-item {
  border-bottom: 1px solid var(--ybt-color-sub);
}

.ybt-news-item__link {
  display: flex;
  color: inherit !important;
  transition: opacity .3s ease-out !important;
}

@media (max-width: 768px) {
  .ybt-news-item__link {
    flex-direction: column;
    gap: 2.13333vw;
    padding: 5.33333vw 1.6vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-item__link {
    align-items: center;
    gap: clamp(18.5625px, 1.71875vw, 22px);
    padding: clamp(33.75px, 3.125vw, 40px) clamp(5.0625px, .46875vw, 6px);
  }
}

@media (hover: hover) {
  .ybt-news-item__link:not(.ybt-news-item__link--noitem):hover {
    opacity: .5;
  }
}

.ybt-news-item__link--noitem {
  word-break: keep-all;
  justify-content: center;
  align-items: center;
  gap: unset;
}

@media (max-width: 768px) {
  .ybt-news-item__link--noitem {
    font-size: 3.73333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-item__link--noitem {
    font-size: clamp(11.8125px, 1.09375vw, 14px);
  }
}

.ybt-news-item__meta {
  flex-shrink: 0;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-news-item__meta {
    gap: .533333vw;
    font-size: 3.2vw;
    line-height: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-item__meta {
    gap: clamp(15.1875px, 1.40625vw, 18px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-news-item__meta-published {
  font-optical-sizing: auto;
  font-family: Cinzel, serif;
  font-weight: 700;
  display: inline-block;
}

@media (max-width: 768px) {
  .ybt-news-item__meta-published {
    letter-spacing: .133333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-item__meta-published {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    width: clamp(69.1875px, 6.40625vw, 82px);
  }
}

.ybt-news-item__meta-category {
  justify-content: center;
  display: inline-block;
}

@media (max-width: 768px) {
  .ybt-news-item__meta-category {
    letter-spacing: .0533333vw;
    width: clamp(60.75px, 5.625vw, 72px);
  }
}

@media (min-width: 769px) {
  .ybt-news-item__meta-category {
    letter-spacing: clamp(.16875px, .015625vw, .2px);
    width: clamp(91.125px, 8.4375vw, 108px);
  }
}

.ybt-news-item__title {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ybt-news-item__title {
    letter-spacing: .0266667vw;
    font-size: 3.73333vw;
    line-height: 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-item__title {
    letter-spacing: clamp(.084375px, .0078125vw, .1px);
    flex-grow: 1;
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(21.9375px, 2.03125vw, 26px);
  }
}

.ybt-news {
  color: var(--ybt-color-main);
}

@media (max-width: 768px) {
  .ybt-news {
    padding-block: 17.0667vw;
  }
}

@media (min-width: 769px) {
  .ybt-news {
    padding-block: clamp(60.75px, 5.625vw, 72px);
  }
}

.ybt-news__header {
  margin: 0 auto;
}

@media (max-width: 768px) {
  .ybt-news__header {
    width: 38.9333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news__header {
    width: clamp(136.688px, 12.6563vw, 162px);
  }
}

@media (max-width: 768px) {
  .ybt-news__content {
    margin-top: 8.53333vw;
    padding: 0 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news__content {
    --ybt-news-col-left: clamp(649.688px, 60.1563vw, 770px);
    --ybt-news-col-right: clamp(210.938px, 19.5313vw, 250px);
    justify-content: center;
    align-items: center;
    gap: clamp(59.0625px, 5.46875vw, 70px);
    margin-top: clamp(54px, 5vw, 64px);
    display: flex;
  }

  .ybt-news__list {
    width: var(--ybt-news-col-left);
  }
}

@media (max-width: 768px) {
  .ybt-news-twitter {
    width: 61.3333vw;
    margin: 10.6667vw auto 0;
  }
}

@media (min-width: 769px) {
  .ybt-news-twitter {
    width: var(--ybt-news-col-right);
  }

  .ybt-news-twitter:before {
    --ybt-news-twitter-circle: calc(var(--ybt-news-col-right) * 1.62 / 2);
    content: "";
    background-color: var(--ybt-color-sub);
    clip-path: circle(var(--ybt-news-twitter-circle) at 50% var(--ybt-news-twitter-circle));
    height: clamp(48.0938px, 4.45313vw, 57px);
    display: block;
  }
}

.ybt-news-twitter__inner {
  background-color: var(--ybt-color-sub);
  flex-direction: column;
  align-items: center;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-news-twitter__inner {
    border-radius: 2.66667vw;
    gap: 3.2vw;
    padding: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-twitter__inner {
    padding: clamp(13.5px, 1.25vw, 16px);
    gap: clamp(10.125px, .9375vw, 12px);
    padding-top: 0;
  }
}

.ybt-news-twitter__shoulder {
  columns: var(--ybt-color-main);
  align-items: flex-end;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-news-twitter__shoulder {
    gap: 3.2vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-twitter__shoulder {
    gap: clamp(10.125px, .9375vw, 12px);
  }
}

.ybt-news-twitter__shoulder-copy {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ybt-news-twitter__shoulder-copy {
    font-size: 3.73333vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-twitter__shoulder-copy {
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(16.875px, 1.5625vw, 20px);
  }
}

@media (max-width: 768px) {
  .ybt-news-twitter__shoulder-icon {
    width: 13.3333vw;
  }
}

@media (min-width: 769px) {
  .ybt-news-twitter__shoulder-icon {
    width: clamp(42.1875px, 3.90625vw, 50px);
  }
}

.ybt-area {
  padding-top: var(--ybt-scroll-padding);
  display: flex;
}

@media (max-width: 768px) {
  .ybt-area {
    flex-direction: column;
    gap: 10.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-area {
    justify-content: space-between;
    align-items: center;
    gap: clamp(79.3125px, 7.34375vw, 94px);
  }

  .ybt-area:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
}

.ybt-area__content {
  flex-shrink: 1;
}

.ybt-area__content-inner {
  position: relative;
}

@media (max-width: 768px) {
  .ybt-area__content-inner {
    margin-top: 5.33333vw;
    padding-top: 2.13333vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__content-inner {
    margin-top: clamp(20.25px, 1.875vw, 24px);
    padding-top: clamp(20.25px, 1.875vw, 24px);
  }

  .ybt-area:nth-of-type(odd) .ybt-area__content {
    flex-basis: clamp(430.313px, 39.8438vw, 510px);
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-of-type(odd) .ybt-area__content-inner {
    padding-left: 14.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-area:nth-of-type(odd) .ybt-area__content-inner {
    padding-left: clamp(62.4375px, 5.78125vw, 74px);
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-last-of-type(2n) .ybt-area__content {
    padding-left: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-area:nth-last-of-type(2n) .ybt-area__content {
    flex-basis: clamp(426.938px, 39.5313vw, 506px);
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-last-of-type(2n) .ybt-area__content-inner {
    padding-right: 12vw;
  }
}

@media (min-width: 769px) {
  .ybt-area:nth-last-of-type(2n) .ybt-area__content-inner {
    padding-left: clamp(59.0625px, 5.46875vw, 70px);
  }
}

.ybt-area__catchy {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-area__catchy {
    padding-inline: 1.06667vw;
  }

  #ybt-area-museum .ybt-area__catchy > picture {
    width: 53.6vw;
  }
}

@media (min-width: 769px) {
  #ybt-area-museum .ybt-area__catchy > picture {
    width: clamp(367.875px, 34.0625vw, 436px);
  }
}

@media (max-width: 768px) {
  #ybt-area-brewery .ybt-area__catchy > picture {
    width: 71.7333vw;
  }
}

@media (min-width: 769px) {
  #ybt-area-brewery .ybt-area__catchy > picture {
    width: clamp(256.5px, 23.75vw, 304px);
  }
}

@media (max-width: 768px) {
  #ybt-area-taproom .ybt-area__catchy > picture {
    width: 80.2667vw;
  }
}

@media (min-width: 769px) {
  #ybt-area-taproom .ybt-area__catchy > picture {
    width: clamp(285.188px, 26.4063vw, 338px);
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-of-type(2n) .ybt-area__catchy {
    align-items: flex-end;
  }
}

.ybt-area__state {
  position: absolute;
  top: 0;
}

@media (max-width: 768px) {
  .ybt-area__state {
    width: 10.1333vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__state {
    width: clamp(28.6875px, 2.65625vw, 34px);
    left: 0;
  }
}

.ybt-area__state > picture {
  width: 100%;
}

@media (max-width: 768px) {
  .ybt-area:nth-of-type(odd) .ybt-area__state {
    left: 0;
  }

  .ybt-area:nth-of-type(2n) .ybt-area__state {
    right: 0;
  }

  .ybt-area__title {
    letter-spacing: .133333vw;
    font-size: 4.26667vw;
    line-height: 8vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__title {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(27px, 2.5vw, 32px);
  }
}

.ybt-area__summary {
  color: var(--ybt-color-black);
  font-weight: 400;
}

@media (max-width: 768px) {
  .ybt-area__summary {
    letter-spacing: .08vw;
    margin-top: 2.13333vw;
    font-size: 3.73333vw;
    line-height: 6.4vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__summary {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    margin-top: clamp(20.25px, 1.875vw, 24px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(25.3125px, 2.34375vw, 30px);
  }
}

.ybt-area__imgs {
  flex-direction: column-reverse;
  display: flex;
  position: relative;
}

@media (min-width: 769px) {
  .ybt-area__imgs {
    flex: 1 0 clamp(604.125px, 55.9375vw, 716px);
  }
}

.ybt-area__imgs-item {
  position: relative;
}

@media (max-width: 768px) {
  .ybt-area__imgs-item--lower {
    width: 78.9333vw;
    margin-top: -11.2vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__imgs-item--lower {
    width: clamp(405px, 37.5vw, 480px);
    margin-top: clamp(-112px, -8.75vw, -94.5px);
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .ybt-area__imgs-item--upper {
    width: 52.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-area__imgs-item--upper {
    box-shadow: clamp(-12px, -.9375vw, -10.125px) clamp(10.125px, .9375vw, 12px) 0 rgb(var(--ybt-color-main-rgb) / .85);
    width: clamp(295.313px, 27.3438vw, 350px);
    margin-left: auto;
  }

  .ybt-area:nth-of-type(odd) .ybt-area__imgs {
    margin-right: max(clamp(1012.5px, 93.75vw, 1200px) / 2 - 50vw, clamp(-120px, -9.375vw, -101.25px));
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-of-type(odd) .ybt-area__imgs-item--lower {
    margin-right: auto;
    transform: translateX(-5.33333vw);
  }

  .ybt-area:nth-of-type(odd) .ybt-area__imgs-item--upper {
    box-shadow: -2.13333vw 2.13333vw 0 rgb(var(--ybt-color-main-rgb) / .85);
    margin-left: auto;
  }
}

@media (min-width: 769px) {
  .ybt-area:nth-of-type(2n) .ybt-area__imgs {
    margin-left: max(clamp(1012.5px, 93.75vw, 1200px) / 2 - 50vw, clamp(-120px, -9.375vw, -101.25px));
  }
}

@media (max-width: 768px) {
  .ybt-area:nth-of-type(2n) .ybt-area__imgs-item--lower {
    margin-left: auto;
    transform: translateX(5.33333vw);
  }

  .ybt-area:nth-of-type(2n) .ybt-area__imgs-item--upper {
    box-shadow: 2.13333vw 2.13333vw 0 rgb(var(--ybt-color-main-rgb) / .85);
    margin-right: auto;
  }
}

.ybt-areas {
  background-color: var(--ybt-color-sub);
  color: var(--ybt-color-main);
}

@media (max-width: 768px) {
  .ybt-areas {
    padding-top: 17.0667vw;
    padding-bottom: 48vw;
  }
}

@media (min-width: 769px) {
  .ybt-areas {
    padding-top: clamp(113.063px, 10.4688vw, 134px);
    padding-bottom: clamp(162px, 15vw, 192px);
  }
}

.ybt-areas__header {
  position: relative;
}

.ybt-areas__header-inner {
  flex-direction: column;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-areas__header-inner {
    gap: 10.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-inner {
    gap: clamp(50.625px, 4.6875vw, 60px);
    width: clamp(410.063px, 37.9688vw, 486px);
    padding-block: clamp(15.1875px, 1.40625vw, 18px);
  }
}

@media (max-width: 768px) {
  .ybt-areas__header-title img {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-title img {
    width: clamp(390.656px, 36.1719vw, 463px);
  }
}

.ybt-areas__header-summary {
  color: var(--ybt-color-black);
}

@media (max-width: 768px) {
  .ybt-areas__header-summary > p {
    letter-spacing: .08vw;
    font-size: 4.26667vw;
    line-height: 7.46667vw;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-summary > p {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(27px, 2.5vw, 32px);
  }
}

.ybt-areas__header-summary > p:not(:first-of-type) {
  margin-top: 1em;
}

@media (max-width: 768px) {
  .ybt-areas__header-summary br {
    display: none;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-map {
    max-height: unset;
    width: clamp(548.438px, 50.7813vw, 650px);
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media (max-width: 768px) {
  .ybt-areas__header-nav {
    margin-top: -2.13333vw;
  }
}

.ybt-areas__header-nav-title {
  font-weight: 700;
}

@media (max-width: 768px) {
  .ybt-areas__header-nav-title {
    letter-spacing: .133333vw;
    font-size: 5.33333vw;
    line-height: 9.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-nav-title {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(20.25px, 1.875vw, 24px);
    line-height: clamp(32.0625px, 2.96875vw, 38px);
  }
}

@media (max-width: 768px) {
  .ybt-areas__header-nav-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.66667vw;
    margin-top: 4.26667vw;
    display: grid;
  }
}

@media (min-width: 769px) {
  .ybt-areas__header-nav-list {
    gap: clamp(13.5px, 1.25vw, 16px);
    margin-top: clamp(13.5px, 1.25vw, 16px);
    display: flex;
  }
}

.ybt-areas__header-nav-list-item {
  grid-template-columns: 1fr;
  display: grid;
}

.ybt-areas__content {
  flex-direction: column;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-areas__content {
    margin-top: calc(21.3333vw - var(--ybt-scroll-padding));
    gap: calc(21.3333vw - var(--ybt-scroll-padding));
  }
}

@media (min-width: 769px) {
  .ybt-areas__content {
    margin-top: calc(clamp(135px, 12.5vw, 160px)  - var(--ybt-scroll-padding));
    gap: calc(clamp(135px, 12.5vw, 160px)  - var(--ybt-scroll-padding));
  }
}

.ybt-beer {
  width: var(--ybt-beer-width);
  color: var(--ybt-color-black);
  flex-direction: column;
  flex-shrink: 0;
  font-weight: 400;
  display: flex;
}

.ybt-beer:before, .ybt-beer__inner {
  background-color: var(--ybt-color-sub);
}

.ybt-beer:before {
  --ybt-beer-circle: calc(var(--ybt-beer-width) * 1.62 / 2);
  content: "";
  height: var(--ybt-beer-circle-height);
  clip-path: circle(var(--ybt-beer-circle) at 50% var(--ybt-beer-circle));
  display: block;
}

.ybt-beer__inner {
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-beer__inner {
    gap: 1.6vw;
    padding: 22.4vw 6.13333vw 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__inner {
    gap: clamp(5.0625px, .46875vw, 6px);
    padding: clamp(70.0313px, 6.48438vw, 83px) clamp(24.4688px, 2.26563vw, 29px) clamp(24.4688px, 2.26563vw, 29px);
  }
}

.ybt-beer__header {
  color: var(--ybt-color-main);
  position: relative;
}

@media (max-width: 768px) {
  .ybt-beer__header {
    --ybt-beer-header-state-size: 16.5333vw;
    --ybt-beer-header-state-top: -3.2vw;
    --ybt-beer-header-state-right: -3.46667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header {
    --ybt-beer-header-state-size: clamp(54px, 5vw, 64px);
    --ybt-beer-header-state-top: clamp(-2px, -.15625vw, -1.6875px);
    --ybt-beer-header-state-right: clamp(-20px, -1.5625vw, -16.875px);
  }
}

.ybt-beer__header-stamp {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .ybt-beer__header-stamp {
    width: 25.6vw;
    top: -29.3333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-stamp {
    width: clamp(84.375px, 7.8125vw, 100px);
    top: clamp(-117px, -9.14063vw, -98.7188px);
  }
}

.ybt-beer__header-name {
  padding-right: calc(var(--ybt-beer-header-state-right)  + var(--ybt-beer-header-state-size));
  border-bottom: 1px solid rgb(var(--ybt-color-main-rgb) / .5);
  flex-direction: column;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-beer__header-name {
    padding-bottom: 1.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-name {
    gap: clamp(1.6875px, .15625vw, 2px);
    padding-bottom: clamp(3.375px, .3125vw, 4px);
  }
}

.ybt-beer__header-name-official {
  font-weight: 700;
}

@media (max-width: 768px) {
  .ybt-beer__header-name-official {
    letter-spacing: .133333vw;
    font-size: 4.8vw;
    line-height: 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-name-official {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

.ybt-beer__header-name-kana {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ybt-beer__header-name-kana {
    letter-spacing: .0266667vw;
    font-size: 3.2vw;
    line-height: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-name-kana {
    font-size: clamp(10.125px, .9375vw, 12px);
    line-height: clamp(13.5px, 1.25vw, 16px);
  }
}

.ybt-beer__header-catchy {
  word-break: keep-all;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ybt-beer__header-catchy {
    letter-spacing: .133333vw;
    margin-top: 1.6vw;
    font-size: 3.73333vw;
    line-height: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-catchy {
    padding-right: calc(var(--ybt-beer-header-state-right)  + var(--ybt-beer-header-state-size));
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    margin-top: clamp(5.0625px, .46875vw, 6px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-beer__header-state {
  top: var(--ybt-beer-header-state-top);
  right: var(--ybt-beer-header-state-right);
  width: var(--ybt-beer-header-state-size);
  height: var(--ybt-beer-header-state-size);
  background-color: var(--ybt-color-main);
  color: var(--ybt-color-sub);
  text-align: center;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  display: flex;
  position: absolute;
}

@media (max-width: 768px) {
  .ybt-beer__header-state {
    letter-spacing: .266667vw;
    padding: 3.2vw;
    font-size: 3.73333vw;
    line-height: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-state {
    letter-spacing: clamp(.84375px, .078125vw, 1px);
    padding: clamp(10.125px, .9375vw, 12px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(16.875px, 1.5625vw, 20px);
  }
}

.ybt-beer__header-announcement {
  font-weight: 500;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .ybt-beer__header-announcement {
    border: .266667vw solid var(--ybt-color-main);
    letter-spacing: .0266667vw;
    padding: .266667vw 1.33333vw;
    font-size: 3.2vw;
    line-height: 4.8vw;
    top: -5.6vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__header-announcement {
    border: 1px solid var(--ybt-color-main);
    letter-spacing: clamp(.084375px, .0078125vw, .1px);
    padding: clamp(.84375px, .078125vw, 1px) clamp(5.0625px, .46875vw, 6px);
    font-size: clamp(10.125px, .9375vw, 12px);
    line-height: clamp(15.1875px, 1.40625vw, 18px);
    top: clamp(-24px, -1.875vw, -20.25px);
  }
}

@media (max-width: 768px) {
  .ybt-beer__content p {
    letter-spacing: .0533333vw;
    font-size: 3.2vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__content p {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

.ybt-beer__notes-list {
  padding-left: 1em;
}

@media (max-width: 768px) {
  .ybt-beer__notes-list {
    font-size: 3.2vw;
    line-height: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-beer__notes-list {
    font-size: clamp(10.125px, .9375vw, 12px);
    line-height: clamp(15.1875px, 1.40625vw, 18px);
  }
}

.ybt-beer__notes-list-item {
  font-size: inherit;
  text-indent: -1em;
}

.ybt-beer__notes-list-item:before {
  content: "※";
  text-indent: 0;
  width: 1em;
  display: inline-block;
}

.ybt-beers {
  background-color: rgb(var(--ybt-color-sub-rgb) / .25);
  color: var(--ybt-color-main);
  position: relative;
}

@media (max-width: 768px) {
  .ybt-beers {
    padding-top: 40.5333vw;
    padding-bottom: 17.0667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers {
    padding-top: clamp(162px, 15vw, 192px);
    padding-bottom: clamp(135px, 12.5vw, 160px);
  }
}

.ybt-beers__separator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 768px) {
  .ybt-beers__separator {
    background-image: url("../images/beers_separator.sp.svg");
    padding-top: 48vw;
    transform: translateY(-26.6667vw);
  }
}

@media (min-width: 769px) {
  .ybt-beers__separator {
    background-image: url("../images/beers_separator.pc.svg");
    padding-top: 6.38889vw;
    transform: translateY(-50%);
  }
}

.ybt-beers__header {
  text-align: center;
}

.ybt-beers__header-title {
  text-transform: uppercase;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ybt-beers__header-title {
    letter-spacing: .133333vw;
    font-size: 5.33333vw;
    line-height: 9.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__header-title {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(20.25px, 1.875vw, 24px);
    line-height: clamp(32.0625px, 2.96875vw, 38px);
  }
}

.ybt-beers__header-summary {
  color: var(--ybt-color-black);
  word-break: keep-all;
}

@media (max-width: 768px) {
  .ybt-beers__header-summary {
    margin-top: 2.13333vw;
    font-size: 4.26667vw;
    line-height: 7.46667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__header-summary {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    margin-top: clamp(6.75px, .625vw, 8px);
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(27px, 2.5vw, 32px);
  }
}

@media (max-width: 768px) {
  .ybt-beers__list {
    width: 100vw;
    margin-top: 10.6667vw;
    margin-left: -5.33333vw;
    overflow-x: auto;
  }
}

@media (min-width: 769px) {
  .ybt-beers__list {
    margin-top: clamp(54px, 5vw, 64px);
  }
}

@media (max-width: 768px) {
  .ybt-beers__list-wrapper {
    --ybt-beer-width: 74.1333vw;
    --ybt-beer-circle-height: 13.8667vw;
    gap: 5.33333vw;
    padding-inline: 5.33333vw;
    display: inline-flex;
  }
}

@media (min-width: 769px) {
  .ybt-beers__list-wrapper {
    --ybt-beer-width: clamp(258.188px, 23.9063vw, 306px);
    --ybt-beer-circle-height: clamp(47.25px, 4.375vw, 56px);
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(33.75px, 3.125vw, 40px);
    display: flex;
  }

  .ybt-beers__list-wrapper:has(.ybt-beer:last-of-type:nth-of-type(4n)) {
    --ybt-beer-width: clamp(237.938px, 22.0313vw, 282px);
    --ybt-beer-circle-height: clamp(46.4063px, 4.29688vw, 55px);
    justify-content: space-between;
    gap: unset;
  }
}

.ybt-beers__footer {
  flex-direction: column;
  align-items: center;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-beers__footer {
    gap: 2.13333vw;
    margin-top: 10.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__footer {
    gap: clamp(6.75px, .625vw, 8px);
    margin-top: clamp(47.25px, 4.375vw, 56px);
  }
}

.ybt-beers__footer-notes {
  padding-left: 1em;
}

@media (max-width: 768px) {
  .ybt-beers__footer-notes {
    letter-spacing: .133333vw;
    font-size: 3.2vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__footer-notes {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(21.0938px, 1.95313vw, 25px);
  }
}

.ybt-beers__footer-notes-item {
  font-size: inherit;
  text-indent: -1em;
}

.ybt-beers__footer-notes-item:before {
  content: "※";
  text-indent: 0;
  text-align: right;
  width: 1em;
  display: inline-block;
}

@media (max-width: 768px) {
  .ybt-beers__aside {
    margin-top: 21.3333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__aside {
    margin-top: clamp(135px, 12.5vw, 160px);
  }
}

.ybt-beers__brewer {
  position: relative;
}

@media (max-width: 768px) {
  .ybt-beers__brewer {
    flex-direction: column-reverse;
    gap: 7.46667vw;
    padding-right: 17.3333vw;
    display: flex;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer {
    direction: rtl;
    grid-template-columns: clamp(313.875px, 29.0625vw, 372px) clamp(310.5px, 28.75vw, 368px);
    gap: clamp(43.875px, 4.0625vw, 52px);
    width: clamp(668.25px, 61.875vw, 792px);
    margin-inline: auto;
    padding-top: clamp(55.6875px, 5.15625vw, 66px);
    display: grid;
  }
}

@media (max-width: 768px) {
  .ybt-beers__brewer-profile {
    padding-top: 25.0667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer-profile {
    direction: ltr;
    padding-top: clamp(50.625px, 4.6875vw, 60px);
    padding-left: clamp(59.0625px, 5.46875vw, 70px);
  }
}

.ybt-beers__brewer-profile-decorator {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

@media (max-width: 768px) {
  .ybt-beers__brewer-profile-decorator {
    background-image: url("../images/beers_brewer_separator.sp.svg");
    width: 10.1333vw;
    height: 142.4vw;
    top: 0;
    right: 0;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer-profile-decorator {
    background-image: url("../images/beers_brewer_separator.pc.svg");
    width: clamp(35.4375px, 3.28125vw, 42px);
    height: clamp(338.344px, 31.3281vw, 401px);
    bottom: 0;
    left: 0;
  }
}

.ybt-beers__brewer-profile-role {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ybt-beers__brewer-profile-role > picture {
  width: 100%;
}

.ybt-beers__brewer-profile-name {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ybt-beers__brewer-profile-name {
    letter-spacing: .133333vw;
    font-size: 8.53333vw;
    line-height: 11.7333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer-profile-name {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(33.75px, 3.125vw, 40px);
    line-height: clamp(40.5px, 3.75vw, 48px);
  }
}

.ybt-beers__brewer-profile-content {
  color: var(--ybt-color-black);
  font-weight: 400;
}

@media (max-width: 768px) {
  .ybt-beers__brewer-profile-content {
    letter-spacing: .0533333vw;
    margin-top: 4.8vw;
    font-size: 3.2vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer-profile-content {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    margin-top: clamp(16.875px, 1.5625vw, 20px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(21.9375px, 2.03125vw, 26px);
  }
}

.ybt-beers__brewer-profile-footer {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-beers__brewer-profile-footer {
    gap: 2.66667vw;
    margin-top: 1.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__brewer-profile-footer {
    gap: clamp(8.4375px, .78125vw, 10px);
    margin-top: clamp(3.375px, .3125vw, 4px);
  }
}

.ybt-access {
  background-color: var(--ybt-color-sub);
  color: var(--ybt-color-main);
}

@media (max-width: 768px) {
  .ybt-access {
    padding-top: 17.0667vw;
    padding-bottom: 20.2667vw;
  }
}

@media (min-width: 769px) {
  .ybt-access {
    padding-block: clamp(114.75px, 10.625vw, 136px);
  }
}

.ybt-access .ybt-container {
  display: flex;
}

@media (max-width: 768px) {
  .ybt-access .ybt-container {
    flex-direction: column;
    gap: 14.9333vw;
  }
}

@media (min-width: 769px) {
  .ybt-access .ybt-container {
    justify-content: center;
    gap: clamp(81px, 7.5vw, 96px);
  }
}

.ybt-access__header {
  flex-direction: column;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-access__header {
    gap: 14.9333vw;
  }
}

@media (min-width: 769px) {
  .ybt-access__header {
    justify-content: center;
    gap: clamp(94.5px, 8.75vw, 112px);
    width: clamp(506.25px, 46.875vw, 600px);
  }
}

@media (max-width: 768px) {
  .ybt-access__header-title {
    width: 41.0667vw;
  }
}

@media (min-width: 769px) {
  .ybt-access__header-title {
    width: clamp(224.438px, 20.7813vw, 266px);
  }
}

@media (max-width: 768px) {
  .ybt-access__movie {
    box-shadow: 4.26667vw 4.26667vw 0 0 rgb(var(--ybt-color-main-rgb) / .85);
    width: 63.4667vw;
    height: 112.83vw;
    margin: 0 auto;
  }
}

@media (min-width: 769px) {
  .ybt-access__movie {
    box-shadow: clamp(13.5px, 1.25vw, 16px) clamp(13.5px, 1.25vw, 16px) 0 0 rgb(var(--ybt-color-main-rgb) / .85);
    width: clamp(284.766px, 26.3672vw, 337.5px);
    height: clamp(506.25px, 46.875vw, 600px);
  }
}

.ybt-access__movie iframe {
  width: 100%;
  height: 100%;
}

.ybt-info {
  background-color: var(--ybt-color-main);
  color: #fff;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 768px) {
  .ybt-info {
    background-image: url("../images/info.bg.sp.webp");
    background-size: contain;
    padding-block: 17.0667vw;
  }
}

@media (min-width: 769px) {
  .ybt-info {
    background-image: url("../images/info.bg.pc.webp");
    background-size: clamp(1289.25px, 119.375vw, 1528px);
    padding-block: clamp(101.25px, 9.375vw, 120px);
  }
}

.ybt-info:before {
  content: "";
  background-color: rgb(var(--ybt-color-main-rgb) / .87);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

@media (min-width: 769px) {
  .ybt-info .ybt-container {
    grid-template-columns: clamp(190.688px, 17.6563vw, 226px) clamp(487.688px, 45.1563vw, 578px);
    grid-template-areas: "logo header"
                         "logo content";
    justify-content: center;
    align-items: center;
    column-gap: clamp(101.25px, 9.375vw, 120px);
    display: grid;
  }
}

.ybt-info__logo {
  flex-direction: column;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-info__logo {
    width: 46.4vw;
    margin: 0 auto;
  }
}

@media (min-width: 769px) {
  .ybt-info__logo {
    grid-area: logo;
  }
}

@media (max-width: 768px) {
  .ybt-info__header {
    margin-top: 10.6667vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__header {
    grid-area: header;
  }

  .ybt-info__header-title {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .ybt-info__content {
    margin-top: 8.53333vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__content {
    grid-area: content;
    margin-top: clamp(54px, 5vw, 64px);
  }
}

.ybt-info__list {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1em;
  display: grid;
}

@media (max-width: 768px) {
  .ybt-info__list {
    letter-spacing: .0533333vw;
    row-gap: 4.26667vw;
    font-size: 3.73333vw;
    line-height: 5.86667vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__list {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    row-gap: clamp(18.5625px, 1.71875vw, 22px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(20.25px, 1.875vw, 24px);
  }
}

@media (max-width: 768px) {
  .ybt-info__list--aside {
    gap: clamp(5.0625px, .46875vw, 6px);
    margin-block: 1.6vw;
    font-size: 3.2vw;
    line-height: 4.26667vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__list--aside {
    gap: clamp(13.5px, 1.25vw, 16px);
    margin-block: clamp(5.0625px, .46875vw, 6px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(16.875px, 1.5625vw, 20px);
    display: flex;
  }
}

.ybt-info__list-title {
  font-size: 1em;
  line-height: inherit;
}

.ybt-info__list--aside .ybt-info__list-title {
  border-right: 1px solid rgb(var(--ybt-color-sub-rgb) / .5);
}

@media (max-width: 768px) {
  .ybt-info__list--aside .ybt-info__list-title {
    padding-right: 1.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__list--aside .ybt-info__list-title {
    margin-right: clamp(-8px, -.625vw, -6.75px);
    padding-right: clamp(6.75px, .625vw, 8px);
  }
}

.ybt-info__list-description {
  font-size: 1em;
  line-height: inherit;
  flex-wrap: wrap;
  display: inline-flex;
}

.ybt-info__list-description small {
  display: inline-block;
}

@media (max-width: 768px) {
  .ybt-info__list-description small {
    font-size: 3.2vw;
    line-height: 4.8vw;
  }
}

@media (min-width: 769px) {
  .ybt-info__list-description small {
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(18.5625px, 1.71875vw, 22px);
  }
}

.ybt-info__list-description .ybt-btn {
  color: inherit !important;
}

@media (min-width: 769px) {
  .ybt-info__list-description .ybt-btn {
    gap: clamp(5.0625px, .46875vw, 6px);
    padding: clamp(3.375px, .3125vw, 4px) clamp(5.0625px, .46875vw, 6px);
    font-size: clamp(11.8125px, 1.09375vw, 14px);
    line-height: clamp(16.875px, 1.5625vw, 20px);
  }
}

.ybt-info__list-description .ybt-info__list {
  flex-basis: 100%;
}

.ybt-info__list-description .ybt-info__list:not(.ybt-info__list-description .ybt-info__list--aside) {
  row-gap: 0;
}

.ybt {
  font-family: Zen Kaku Gothic New, sans-serif;
  font-weight: 500;
  position: relative;
}

.ybt .ybt-btn--reserve {
  z-index: 50;
  position: fixed;
}

@media (max-width: 768px) {
  .ybt .ybt-btn--reserve {
    bottom: 64px;
    right: 3.73333vw;
  }
}

@media (min-width: 769px) {
  .ybt .ybt-btn--reserve {
    bottom: clamp(62.3px, 5.7692vw, 75px);
    right: clamp(18.5625px, 1.71875vw, 22px);
  }
}

/* guide */

.ybt-guide{
  background-color: #fbf7f4;
  color: var(--ybt-color-main);
}

@media (min-width: 769px) {
.ybt-guide{
    padding: clamp(83.1px, 7.6923vw, 100px) 0;
}
}

@media (max-width: 768px) {
.ybt-guide{
    padding: 17.0667vw 0;
}
}

.ybt-guide__header-summary{
    color: var(--ybt-color-black);
    font-weight: 500;
}

@media (min-width: 769px) {
.ybt-guide__header-summary{
    font-size: clamp(15.1875px, 1.40625vw, 18px);
    line-height: clamp(27px, 2.5vw, 32px);
    width: clamp(747.7px, 69.2308vw, 900px);
    margin: clamp(33.2px, 3.0769vw, 40px) auto 0;
}
}

@media (max-width: 768px) {
.ybt-guide__header-summary{
    font-size: 4.26667vw;
    line-height: 7.46667vw;
    margin: 8vw auto 0;
}
}

@media (min-width: 769px) {
      .ybt-guide__header-title{
      width: clamp(321.5px, 29.7692vw, 387px);
      margin: 0 auto;
      }
}

@media (max-width: 768px) {
      .ybt-guide__header-title{
      width: 77.33333333333333vw;
      margin: 0 auto;
      }
}

@media (max-width: 768px) {
.ybt-guide__header-title img {
      width: 100%;
      height: auto;
      max-width: none;
    }
}

.ybt-guide__brewer {
  position: relative;
}

@media (max-width: 768px) {
  .ybt-guide__brewer {
    flex-direction: column;
    gap: 7.46667vw;
    padding-left: 17.3333vw;
    display: flex;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer {
    direction: rtl;
    grid-template-columns: clamp(397.1px, 36.7692vw, 478px)
  clamp(249.2px, 23.0769vw, 300px);
    gap: clamp(43.875px, 4.0625vw, 52px);
    width: clamp(747.7px, 69.2308vw, 900px);
    margin-inline: auto;
    padding-top: clamp(54.8px, 5.0769vw, 66px);
    display: grid;
  }
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile {
    padding-top: 16vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile {
    direction: ltr;
    /* padding-top: clamp(50.625px, 4.6875vw, 60px); */
    /* padding-left: clamp(59.0625px, 5.46875vw, 70px); */
  }
}

.ybt-guide__brewer-profile-decorator {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile-decorator {
    background-image: url("../images/beers_brewer_separator.sp.svg");
    width: 10.1333vw;
    height: 142.4vw;
    top: 0;
    left: 0;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile-decorator {
    background-image: url("../images/beers_brewer_separator.pc.svg");
    width: clamp(35.4375px, 3.28125vw, 42px);
    height: clamp(338.344px, 31.3281vw, 450px);
    bottom: 0;
    left: 0;
  }
}

@media (min-width: 769px) {
.ybt-guide__brewer-profile-role {
  width: clamp(224.3px, 20.7692vw, 270px);
  position: absolute;
  top: 0;
  left: 0;
}
}

@media (max-width: 768px) {
.ybt-guide__brewer-profile-role {
  width: 56.00000000000001vw;
  position: absolute;
  top: 0;
  left: 0;
}
}

.ybt-guide__brewer-profile-role > picture {
  width: 100%;
}

.ybt-guide__brewer-profile-name {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile-name {
    letter-spacing: .133333vw;
    font-size: 8.53333vw;
    line-height: 11.7333vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile-name {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    font-size: clamp(33.75px, 3.125vw, 40px);
    line-height: clamp(40.5px, 3.75vw, 48px);
  }
}

.ybt-guide__brewer-profile-content {
  color: var(--ybt-color-black);
  font-weight: 400;
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile-content {
    letter-spacing: .0533333vw;
    margin-top: 4.8vw;
    font-size: 3.2vw;
    line-height: 5.33333vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile-content {
    letter-spacing: clamp(.421875px, .0390625vw, .5px);
    margin-top: clamp(16.875px, 1.5625vw, 20px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(21.9375px, 2.03125vw, 26px);
  }
}

.ybt-guide__brewer-profile-footer {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile-footer {
    gap: 2.66667vw;
    margin-top: 1.06667vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile-footer {
    gap: clamp(8.4375px, .78125vw, 10px);
    margin-top: clamp(3.375px, .3125vw, 4px);
  }
}

@media (max-width: 768px) {
  .ybt-guide__aside {
    margin-top: 17.066666666666666vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__aside {
    margin-top: clamp(83.1px, 7.6923vw, 100px);
  }
}

.ybt-guide__brewer-profile-decorator {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

@media (max-width: 768px) {
  .ybt-guide__brewer-profile-decorator {
    background-image: url("../images/guide_brewer_separator.sp.svg");
    width: 10.1333vw;
    height: 129.6vw;
    bottom: 0;
    right: 0;
  }
}

@media (min-width: 769px) {
  .ybt-guide__brewer-profile-decorator {
    background-image: url("../images/guide_brewer_separator.pc.svg");
    width: clamp(34.9px, 3.2308vw, 42px);
    height: clamp(374px, 34.6154vw, 450px);
    bottom: 0;
    left: 0;
  }
}

/* voice */

@media (min-width: 769px) {
  .ybt-guide__voice-content{
    width: clamp(629.7px, 58.3077vw, 758px);
    margin-inline: auto;
    padding-top: clamp(83.1px, 7.6923vw, 100px);
  }
}

@media (max-width: 768px) {
  .ybt-guide__voice-content{
    padding-top: 17.066666666666666vw;
  }
}

    .ybt-guide__voice-title {
      color: #9d684e;
      font-weight: bold;
    }

@media (min-width: 769px) {
  .ybt-guide__voice-title{
      font-size: clamp(20.25px, 1.875vw, 24px);
  }
}

@media (max-width: 768px) {
  .ybt-guide__voice-title{
      font-size: 6.4vw;
  }
}

@media (min-width: 769px) {
  .ybt-guide__info {
    padding-top: clamp(6.7px, 0.6154vw, 8px);
  }
}

@media (max-width: 768px) {
  .ybt-guide__info {
    padding-top: 3.2vw;
  }
}

.ybt-guide__list-title {
  font-weight: 500;
  font-size: 1em;
}

@media (min-width: 769px) {
  .ybt-guide__list-title {
    width: clamp(58.2px, 5.3846vw, 70px);
  }
}

.ybt-guide__list-description {
  font-size: 1em;
  line-height: inherit;
  flex-wrap: wrap;
  display: inline-flex;
  font-weight: 400;
}

@media (max-width: 768px) {
  .ybt-guide__list-description .spD {
    display: block;
  }
}

@media (min-width: 769px) {
  .ybt-guide__list-description .spD {
    display: none;
  }
}


.ybt-guide__list {
  display: flex;
  color: var(--ybt-color-black);
}

@media (min-width: 769px) {
  .ybt-guide__list {
    gap: clamp(29.9px, 2.7692vw, 36px);
    font-size: clamp(13.5px, 1.25vw, 16px);
    line-height: clamp(20.25px, 1.875vw, 24px);
    padding-top: clamp(13.3px, 1.2308vw, 16px);
  }
}

@media (max-width: 768px) {
  .ybt-guide__list {
    flex-direction: column;
    font-size: 3.2vw;
    line-height: 5.86667vw;
    padding-top: 4.266666666666667vw;
  }
}
/* archive */
@media (min-width: 769px) {
  .ybt-beers__archive-header {
    margin-top: clamp(133px, 12.307692307692308vw, 160px);
  }
}

@media (max-width: 768px) {
  .ybt-beers__archive-header{
    margin-top: 21.333333333333336vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__archive {
    margin-top: clamp(54px, 5vw, 64px);
  }
}

@media (max-width: 768px) {
  .ybt-beers__archive {
    margin-top: 10.666666666666668vw;
  }
}

@media (min-width: 769px) {
  .ybt-beers__archive-image {
    width: clamp(418px, 38.75vw, 496px);
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .ybt-beers__archive-image {
    width: 91.46666666666667vw;
  }
}