@charset "utf-8";
.grapefruit__container, .lemon__container, .modal__bg, .cont__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grapefruit__container > *, .lemon__container > *, .modal__bg > *, .cont__center > * {
  min-height: 0%;
}

.msg__container, .mv__container, .mv__caution-text, .menu__content, .cont__container, .cont__container--small {
  box-sizing: content-box !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .msg__container, .mv__container, .mv__caution-text, .menu__content, .cont__container, .cont__container--small {
    max-width: 92vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.product__btn--lemon, .product__btn--gf, .statement__movie-thumb, .menu__item--01 a, .menu__item--02 a, .menu__item--03 a, .modal__movie-close {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
.product__btn--lemon:hover, .product__btn--gf:hover, .statement__movie-thumb:hover, .menu__item--01 a:hover, .menu__item--02 a:hover, .menu__item--03 a:hover, .modal__movie-close:hover {
  opacity: 0.7;
}

/* common:start */
[v-cloak] {
  display: none;
}

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

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

.innerlink-target {
  position: absolute;
  z-index: -1;
  width: 1;
  height: 45px;
  top: -45px;
}
@media screen and (max-width: 768px) {
  .innerlink-target {
    height: 30px;
    top: -30px;
  }
}

body {
  min-width: 0;
}
body.fixed {
  overflow-y: hidden;
}

.cont {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cont {
    margin-bottom: 26.6666666667vw;
  }
}
.cont img,
.cont picture,
.cont video,
.cont canvas,
.cont svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.cont img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .cont .menu {
    order: -1;
  }
}
.cont__container--small {
  max-width: 1000px;
}
@media screen and (max-width: 768px) {
  .cont__container--small {
    max-width: 92vw;
  }
}
.cont__contents {
  overflow: hidden;
}

/* common:end */
/* js-fade:start */
:root {
  --fade-translate-x: 0px;
  --fade-translate-y: 0px;
  --fade-duration: 500ms;
}

/* 表示方向 */
.up {
  --fade-translate-y: 50px;
}

.down {
  --fade-translate-y: -50px;
}

.fromLeft {
  --fade-translate-x: -50px;
}

.fromRight {
  --fade-translate-x: 50px;
}

.jsScroll {
  opacity: 0;
  transition-duration: 750ms;
  transition-property: opacity, transform;
  transition-delay: 0ms;
  transform: translate(var(--fade-translate-x), var(--fade-translate-y));
}
@media screen and (min-width: 769px) {
  .jsScroll.delayPc--100 {
    transition-delay: 100ms;
  }
  .jsScroll.delayPc--200 {
    transition-delay: 200ms;
  }
  .jsScroll.delayPc--300 {
    transition-delay: 300ms;
  }
  .jsScroll.delayPc--400 {
    transition-delay: 400ms;
  }
  .jsScroll.delayPc--500 {
    transition-delay: 500ms;
  }
}

.jsScrollIn {
  opacity: 1;
  transform: translate(0, 0);
}

.jsFvHide,
.jsHide {
  opacity: 0;
  transition-duration: 1.5s;
  transition-property: opacity, transform;
  transition-delay: 0s;
}
.jsFvHide.jsFvShow,
.jsHide.jsFvShow {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 0.8s;
}
.fade-leave-active {
  transition: opacity 0.8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* js-fade:end */
.movie-area {
  margin: auto;
  max-width: 100%;
}
.movie-area__container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.movie-area iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal {
  position: fixed;
  z-index: 9999;
}
.modal__bg {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.modal__movie {
  width: 800px;
  max-width: 90vw;
  position: relative;
}
@media (orientation: landscape) {
  .modal__movie {
    max-width: 100vmin;
  }
}
.modal__movie-close {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 5px;
  width: 20px;
  height: 20px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/index-modal-icon-close.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.menu__item--03, .menu__item--02, .menu__item--01 {
  width: 100%;
}
/* menu:start */
.menu {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-menu-obi.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .menu {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-menu-obi.jpg);
  }
}
@media screen and (min-width: 769px) {
  .menu__container {
    background-image: linear-gradient(90deg, rgb(255, 201, 102), rgb(255, 210, 128) 100%, rgb(255, 201, 102) 30%);
  }
}
@media screen and (max-width: 768px) {
  .menu__container {
    position: relative;
  }
}
.menu__head {
  position: relative;
  z-index: 3;
  background-image: linear-gradient(90deg, rgb(255, 201, 102), rgb(255, 210, 128) 100%, rgb(255, 201, 102) 30%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media screen and (min-width: 769px) {
  .menu__head {
    display: none;
  }
}
.menu__trigger {
  width: 50px;
}
.menu__content {
  max-width: 1200px;
}
@media screen and (max-width: 768px) {
  .menu__content {
    position: absolute;
    top: 31px;
    left: 0;
    z-index: 2;
    width: 100%;
    padding-top: 5.3333333333vw;
    padding-bottom: 8vw;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-menu.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
  }
}
.menu__bg {
  position: absolute;
  top: 31px;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
}
.menu__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  .menu__list {
    flex-direction: column;
    width: 100%;
  }
}
.menu__list li {
  position: relative;
}
@media screen and (min-width: 769px) {
  .menu__list li:not(:last-child):after {
    position: absolute;
    width: 1px;
    height: 52%;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #02224d;
    content: "";
  }
}
@media screen and (min-width: 769px) {
  .menu__item--01 {
    width: 16.6666666667%;
  }
}
@media screen and (min-width: 769px) {
  .menu__item--02 {
    width: 22.1666666667%;
  }
}
@media screen and (min-width: 769px) {
  .menu__item--03 {
    width: 11.6666666667%;
  }
}

.menu-enter-active {
  transition: all 0.5s;
}
.menu-leave-active {
  transition: all 0.5s;
}
.menu-enter, .menu-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

/* menu:end */
/* mv:start */
.mv {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-mv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mv {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-mv.jpg);
  }
}
@media screen and (max-width: 768px) {
  .mv__container {
    max-width: 100vw;
  }
}
.mv__contents {
  width: 100%;
  position: relative;
}
.mv__text-logo {
  width: 30.8333333333%;
  position: absolute;
  top: 16.3636363636%;
  left: 0;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .mv__text-logo {
    width: 100%;
    top: 0;
  }
}
.mv__text-statement {
  width: 24.75%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .mv__text-statement {
    width: 100%;
    top: 41.4364640884%;
  }
}
.mv__text-new {
  width: 9.5833333333%;
  position: absolute;
  top: 5.4545454545%;
  left: 25.5833333333%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mv__text-new {
    width: 17.2%;
    top: 55.2486187845%;
    left: 4.6666666667%;
  }
}
.mv__product {
  width: 100%;
  position: relative;
  z-index: 2;
}
.mv__note {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.mv__caution {
  background-color: #0e5ca4;
}
@media screen and (max-width: 768px) {
  .mv__caution-text {
    max-width: 100vw;
  }
}

.mv__product, .mv__note, .mv__text-new, .mv__text-logo, .mv__text-statement, .mv__caution {
  opacity: 0;
}

.jsFvAnime .mv__product {
  animation: fade-in 0.8s ease both;
  animation-delay: 0.2s;
}
.jsFvAnime .mv__note {
  animation: fade-in 0.8s ease both;
  animation-delay: 0.2s;
}
.jsFvAnime .mv__text-new {
  animation: fade-in 0.8s ease both;
  animation-delay: 0.2s;
}
.jsFvAnime .mv__text-logo {
  animation: fade-in 1.2s ease both;
  animation-delay: 0.8s;
}
.jsFvAnime .mv__text-statement {
  animation: fade-in 1.2s ease both;
  animation-delay: 1.1s;
}
.jsFvAnime .mv__caution {
  animation: fade-in 0.8s ease both;
  animation-delay: 2s;
}

/**
 * ----------------------------------------
 * fade-in
 * ----------------------------------------
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* mv:end */
/* msg:start */
.msg__text {
  margin-top: 1.6666666667%;
  margin-bottom: 1.6666666667%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.6666666667%;
  padding-bottom: 0.6666666667%;
  padding-left: 7.6666666667%;
  padding-right: 7.6666666667%;
  width: fit-content;
  font-size: 2.2rem;
  line-height: 1.3636363636;
  letter-spacing: 0.08em;
  color: #02224d;
  text-align: center;
  font-feature-settings: "palt";
  border: 2px solid #02224d;
  font-weight: bold;
}
@media screen and (max-width: 1240px) {
  .msg__text {
    font-size: 1.7741935484vw;
  }
}
@media screen and (max-width: 768px) {
  .msg__text {
    margin-top: 2.6666666667vw;
    margin-bottom: 2.6666666667vw;
    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
    padding-left: 1.3333333333vw;
    padding-right: 1.3333333333vw;
    font-size: 3.7333333333vw;
    border-width: 0.2666666667vw;
    width: 86.6666666667vw;
    line-height: 1.4285714286;
  }
}
@media screen and (min-width: 769px) {
  .msg__space {
    padding-left: 1em;
  }
}

/* msg:end */
/* statement:start */
.statement {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-statement.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
}
@media screen and (max-width: 768px) {
  .statement {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-statement.jpg);
  }
}
@media screen and (max-width: 768px) {
  .statement .cont__container {
    max-width: 100vw;
  }
}
.statement__container {
  padding-top: 10%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .statement__container {
    padding-top: 16%;
  }
}
.statement__movie {
  width: 53.3333333333%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8.3333333333%;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .statement__movie {
    width: 85.3333333333%;
    margin-bottom: 18%;
  }
}
.statement__movie-text {
  width: 87.8125%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.90625%;
}
@media screen and (max-width: 768px) {
  .statement__movie-text {
    width: 95.9375%;
    margin-top: 4.6875%;
  }
}
.statement__text {
  width: 100%;
  position: relative;
  z-index: 2;
}
.statement__text-image {
  width: 53.3333333333%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6.6666666667%;
}
@media screen and (max-width: 768px) {
  .statement__text-image {
    width: 92%;
    margin-bottom: 12.6666666667%;
  }
}
.statement__product {
  width: 100%;
}
.statement__product-image {
  position: relative;
  z-index: 2;
}
.statement__product::before {
  content: "";
  display: block;
  width: 27.25%;
  height: 88.3870967742vw;
  max-height: 1096px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-statement-bubble-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .statement__product::before {
    width: 26.6666666667%;
    height: 152.2666666667vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-statement-bubble-left.png);
  }
}
.statement__product::after {
  content: "";
  display: block;
  width: 24.3333333333%;
  height: 88.3870967742vw;
  max-height: 1096px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-statement-bubble-right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .statement__product::after {
    width: 18.1333333333%;
    height: 152.2666666667vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-statement-bubble-right.png);
  }
}

/* statement:end */
/* fact:start */
.fact {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-fact.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
}
@media screen and (max-width: 768px) {
  .fact {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-fact.jpg);
  }
}
.fact__container {
  position: relative;
  padding-top: 8.3333333333%;
  padding-bottom: 8.75%;
}
@media screen and (max-width: 768px) {
  .fact__container {
    padding-top: 17.3913043478%;
    padding-bottom: 17.3913043478%;
  }
}
.fact__logo {
  width: 20.1666666667%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .fact__logo {
    width: 40.8695652174%;
  }
}
.fact__title {
  width: 100%;
}
.fact__text {
  width: 100%;
  margin-bottom: 8.3333333333%;
}
@media screen and (max-width: 768px) {
  .fact__text {
    margin-bottom: 17.3913043478%;
  }
}
.fact__graph {
  width: 100%;
}

/* fact:end */
/* lemon:start */
.lemon {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-lemon.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
@media screen and (max-width: 768px) {
  .lemon {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-lemon.jpg);
  }
}
.lemon__container {
  padding-top: 10%;
  padding-bottom: 13.3333333333%;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lemon__container {
    padding-top: 17.3913043478%;
    padding-bottom: 37.1014492754%;
  }
}
.lemon__container::before {
  content: "";
  display: block;
  width: 15.3333333333%;
  height: 38.064516129vw;
  max-height: 472px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-lemon-bubble-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -239px;
  left: 0;
}
@media screen and (max-width: 1240px) {
  .lemon__container::before {
    top: -19.2741935484vw;
  }
}
@media screen and (max-width: 768px) {
  .lemon__container::before {
    width: 16.9565217391%;
    height: 53.0666666667vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-lemon-bubble-left.png);
    top: -14.1333333333vw;
    left: -4.347826087%;
  }
}
.lemon__container::after {
  content: "";
  display: block;
  width: 15.75%;
  height: 38.064516129vw;
  max-height: 472px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-lemon-bubble-right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -239px;
  right: 0;
}
@media screen and (max-width: 1240px) {
  .lemon__container::after {
    top: -19.2741935484vw;
  }
}
@media screen and (max-width: 768px) {
  .lemon__container::after {
    width: 19.7101449275%;
    height: 65.2vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-lemon-bubble-right.png);
    top: -26.2666666667vw;
    right: -4.347826087%;
  }
}
.lemon__title {
  width: 34.25%;
  margin-bottom: 8.75%;
}
@media screen and (max-width: 768px) {
  .lemon__title {
    width: 100%;
    margin-bottom: 17.3913043478%;
  }
}
.lemon__kodawari {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .lemon__kodawari {
    width: 45.652173913%;
  }
}
.lemon__subtitle {
  width: 100%;
}
.lemon__content--01 {
  height: 35.1612903226vw;
  max-height: 436px;
  margin-bottom: 13%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .lemon__content--01 {
    height: 112.6666666667vw;
    max-height: none;
    margin-bottom: 51.4492753623%;
  }
}
.lemon__content--02 {
  height: 29.8387096774vw;
  max-height: 370px;
  margin-bottom: 13.8333333333%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .lemon__content--02 {
    height: 96vw;
    max-height: none;
    margin-bottom: 50.4347826087%;
  }
}
.lemon__content--03 {
  height: 30.4838709677vw;
  max-height: 378px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .lemon__content--03 {
    height: 84.8vw;
    max-height: none;
  }
}
.lemon__image--left {
  width: 52.3333333333%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__image--left {
    width: 100%;
  }
}
.lemon__image--right {
  width: 52.3333333333%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__image--right {
    width: 100%;
  }
}
.lemon__text-area--left {
  width: 53.3333333333%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lemon__text-area--left {
    width: 100%;
    top: auto;
    bottom: 0;
  }
}
.lemon__text-area--right {
  width: 53.3333333333%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lemon__text-area--right {
    width: 100%;
    top: auto;
    bottom: 0;
  }
}
.lemon__num--01 {
  width: 20.78125%;
  position: absolute;
  top: -4.5871559633%;
  right: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__num--01 {
    width: 15.0724637681%;
    top: -9.3333333333vw;
    right: 0;
  }
}
.lemon__num--02 {
  width: 23.4375%;
  position: absolute;
  top: -5.4054054054%;
  left: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__num--02 {
    width: 17.3913043478%;
    top: -9.3333333333vw;
    left: 0;
  }
}
.lemon__num--03 {
  width: 22.03125%;
  position: absolute;
  top: -5.291005291%;
  right: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__num--03 {
    width: 17.2463768116%;
    top: -9.3333333333vw;
    right: 0;
  }
}
.lemon__decoration--01 {
  width: 40.625%;
  position: absolute;
  bottom: -15.5963302752%;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__decoration--01 {
    width: 37.6811594203%;
    bottom: -15.3333333333vw;
  }
}
.lemon__decoration--02 {
  width: 53.75%;
  position: absolute;
  bottom: -21.0810810811%;
  left: 1.5625%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__decoration--02 {
    width: 49.8550724638%;
    bottom: -14.4vw;
    left: 0;
  }
}
.lemon__decoration--03 {
  width: 24.53125%;
  position: absolute;
  bottom: -15.3439153439%;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lemon__decoration--03 {
    width: 22.7536231884%;
    bottom: -17.4666666667vw;
  }
}

/* lemon:end */
/* grapefruit:start */
.grapefruit {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-gf.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
@media screen and (max-width: 768px) {
  .grapefruit {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-gf.jpg);
  }
}
.grapefruit__container {
  padding-top: 10%;
  padding-bottom: 15.5%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .grapefruit__container {
    padding-top: 17.3913043478%;
    padding-bottom: 39.1304347826%;
  }
}
.grapefruit__container::before {
  content: "";
  display: block;
  width: 19.3333333333%;
  height: 31.6935483871vw;
  max-height: 393px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-gf-bubble-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -207px;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 1240px) {
  .grapefruit__container::before {
    top: -16.6935483871vw;
  }
}
@media screen and (max-width: 768px) {
  .grapefruit__container::before {
    width: 16.6666666667%;
    height: 45.0666666667vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-gf-bubble-left.png);
    top: -11.3333333333vw;
    left: -4.347826087%;
  }
}
.grapefruit__container::after {
  content: "";
  display: block;
  width: 19.3333333333%;
  height: 40.1612903226vw;
  max-height: 498px;
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-img-gf-bubble-right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -310px;
  right: -4.1666666667%;
  z-index: 1;
}
@media screen and (max-width: 1240px) {
  .grapefruit__container::after {
    top: -25vw;
  }
}
@media screen and (max-width: 768px) {
  .grapefruit__container::after {
    width: 16.5217391304%;
    height: 61.4666666667vw;
    max-height: none;
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-img-gf-bubble-right.png);
    top: -27.7333333333vw;
    right: -4.347826087%;
  }
}
.grapefruit__title {
  width: 38.1666666667%;
  margin-bottom: 8.75%;
}
@media screen and (max-width: 768px) {
  .grapefruit__title {
    width: 100%;
    margin-bottom: 15.9420289855%;
  }
}
.grapefruit__kodawari {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .grapefruit__kodawari {
    width: 45.652173913%;
  }
}
.grapefruit__subtitle {
  width: 100%;
}
.grapefruit__content--01 {
  height: 31.7741935484vw;
  max-height: 394px;
  margin-bottom: 15%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .grapefruit__content--01 {
    height: 102.1333333333vw;
    max-height: none;
    margin-bottom: 52.1739130435%;
  }
}
.grapefruit__content--02 {
  height: 32.2580645161vw;
  max-height: 400px;
  margin-bottom: 17.3333333333%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .grapefruit__content--02 {
    height: 106.1333333333vw;
    max-height: none;
    margin-bottom: 53.6231884058%;
  }
}
.grapefruit__content--03 {
  height: 30.4838709677vw;
  max-height: 378px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .grapefruit__content--03 {
    height: 84.8vw;
    max-height: none;
  }
}
.grapefruit__image--left {
  width: 52.3333333333%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__image--left {
    width: 100%;
  }
}
.grapefruit__image--right {
  width: 52.3333333333%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__image--right {
    width: 100%;
  }
}
.grapefruit__text-area--left {
  width: 53.3333333333%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .grapefruit__text-area--left {
    width: 100%;
    top: auto;
    bottom: 0;
  }
}
.grapefruit__text-area--right {
  width: 53.3333333333%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .grapefruit__text-area--right {
    width: 100%;
    top: auto;
    bottom: 0;
  }
}
.grapefruit__num--01 {
  width: 20.78125%;
  position: absolute;
  top: -5.076142132%;
  right: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__num--01 {
    width: 15.0724637681%;
    top: -9.3333333333vw;
    right: 0;
  }
}
.grapefruit__num--02 {
  width: 23.4375%;
  position: absolute;
  top: -5%;
  left: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__num--02 {
    width: 17.3913043478%;
    top: -9.3333333333vw;
    left: 0;
  }
}
.grapefruit__num--03 {
  width: 22.03125%;
  position: absolute;
  top: -5.291005291%;
  right: 10.9375%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__num--03 {
    width: 17.2463768116%;
    top: -9.3333333333vw;
    right: 0;
  }
}
.grapefruit__decoration--01 {
  width: 45.15625%;
  position: absolute;
  bottom: -23.6040609137%;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__decoration--01 {
    width: 41.884057971%;
    bottom: -16.6666666667vw;
  }
}
.grapefruit__decoration--02 {
  width: 40.78125%;
  position: absolute;
  bottom: -30%;
  left: 1.5625%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__decoration--02 {
    width: 37.8260869565%;
    bottom: -17.0666666667vw;
    left: 0;
  }
}
.grapefruit__decoration--03 {
  width: 24.0625%;
  position: absolute;
  bottom: -21.9576719577%;
  right: 3.125%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .grapefruit__decoration--03 {
    width: 22.3188405797%;
    bottom: -20.4vw;
    right: 0.7246376812%;
  }
}

/* grapefruit:end */
/* product:start */
.product {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-product.png);
  background-repeat: repeat;
  background-position: center top;
  position: relative;
}
@media screen and (max-width: 768px) {
  .product {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-product.png);
    background-size: 8.5333333333%;
  }
}
.product__container {
  padding-top: 12%;
  padding-bottom: 12%;
}
@media screen and (max-width: 768px) {
  .product__container {
    padding-top: 17.3913043478%;
    padding-bottom: 17.3913043478%;
  }
}
.product__title {
  width: 29.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7%;
}
@media screen and (max-width: 768px) {
  .product__title {
    width: 40.7246376812%;
    margin-bottom: 9.8550724638%;
  }
}
.product__lemon {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-product-lemon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  margin-bottom: 6.5%;
}
@media screen and (max-width: 768px) {
  .product__lemon {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-product-lemon.png);
    margin-bottom: 9.4202898551%;
  }
}
.product__grapefruit {
  background-image: url(/alcohol/rtd/kirinhyakunen/index/images/pc/index-bg-product-gf.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .product__grapefruit {
    background-image: url(/alcohol/rtd/kirinhyakunen/index/images/sp/index-bg-product-gf.png);
  }
}
.product__name--lemon {
  width: 46.5%;
  padding-top: 5%;
  padding-bottom: 6%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .product__name--lemon {
    width: 94.2028985507%;
    padding-top: 6.9565217391%;
    padding-bottom: 0;
  }
}
.product__name--gf {
  width: 50.1%;
  padding-top: 5%;
  padding-bottom: 6%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .product__name--gf {
    width: 94.2028985507%;
    padding-top: 6.9565217391%;
    padding-bottom: 0;
  }
}
.product__detail--lemon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 5%;
}
@media screen and (max-width: 768px) {
  .product__detail--lemon {
    flex-direction: column;
    align-items: center;
    padding-bottom: 7.2463768116%;
  }
}
.product__detail--gf {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding-bottom: 5%;
}
@media screen and (max-width: 768px) {
  .product__detail--gf {
    flex-direction: column;
    align-items: center;
    padding-bottom: 7.2463768116%;
  }
}
.product__image--lemon {
  width: 46%;
}
@media screen and (max-width: 768px) {
  .product__image--lemon {
    width: 46.6666666667%;
  }
}
.product__image--gf {
  width: 41.4%;
}
@media screen and (max-width: 768px) {
  .product__image--gf {
    width: 46.6666666667%;
  }
}
.product__texts--lemon {
  width: 54%;
}
@media screen and (max-width: 768px) {
  .product__texts--lemon {
    width: 94.2028985507%;
  }
}
.product__texts--gf {
  width: 58.6%;
}
@media screen and (max-width: 768px) {
  .product__texts--gf {
    width: 94.2028985507%;
  }
}
.product__btn--lemon {
  display: block;
  width: 60.1851851852%;
}
@media screen and (max-width: 768px) {
  .product__btn--lemon {
    width: 72.3076923077%;
    margin-left: auto;
    margin-right: auto;
  }
}
.product__btn--gf {
  display: block;
  width: 55.4607508532%;
  margin-left: 17.0648464164%;
}
@media screen and (max-width: 768px) {
  .product__btn--gf {
    width: 72.3076923077%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* product:end */