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

.cont__container, .shop__container, .product__container, .features__container, .function__container, .mechanism__content, .graphic__container, .cm__container, .profile__container, .mode__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) {
  .cont__container, .shop__container, .product__container, .features__container, .function__container, .mechanism__content, .graphic__container, .cm__container, .profile__container, .mode__container, .cont__container--small {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .cont__container, .shop__container, .product__container, .features__container, .function__container, .mechanism__content, .graphic__container, .cm__container, .profile__container, .mode__container, .cont__container--small {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}

.shop__container, .product__container, .features__container, .function__container, .mechanism__content, .graphic__container, .cm__container, .profile__container, .mode__container, .cont__container--small {
  max-width: 840px;
}
@media screen and (max-width: 768px) {
  .shop__container, .product__container, .features__container, .function__container, .mechanism__content, .graphic__container, .cm__container, .profile__container, .mode__container, .cont__container--small {
    max-width: none;
  }
}

.link {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
.link: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;
  }
}

.healthya__content {
  overflow: hidden;
  opacity: 0;
  transition: 0.5s opacity;
}
.healthya__content.is-active {
  opacity: 1;
}

a {
  opacity: 1;
  transition: 0.2s opacity;
}
a:hover {
  opacity: 0.5 !important;
}

.imgcover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.fade-in {
  /* 初期状態: 透明かつ少し下に移動 */
  opacity: 0;
  transform: translateY(20px);
  /* アニメーション時間の設定 */
  transition: opacity 0.5s, transform 0.5s;
}

.fade-in.is-show {
  /* 表示状態: 透明度を戻し、位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}

.fade-item {
  opacity: 0;
  transform: translateY(20px);
  /* アニメーション時間の設定 */
  transition: opacity 0.5s, transform 0.5s;
}

.fade-item.is-show {
  /* 表示状態: 透明度を戻し、位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}

.fade-item-icon {
  opacity: 0;
  transform: translateY(20px);
  /* アニメーション時間の設定 */
  transition: opacity 0.5s, transform 0.5s;
}

.fade-item-icon.is-show {
  /* 表示状態: 透明度を戻し、位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}

/* common:end */
.kv__content--03, .kv__content--02, .kv__content--01 {
  background-size: 1920px;
  background-position: bottom center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1921px) {
  .kv__content--03, .kv__content--02, .kv__content--01 {
    background-size: cover;
  }
}
@media screen and (max-width: 1200px) {
  .kv__content--03, .kv__content--02, .kv__content--01 {
    background-size: 160vw;
  }
}
@media screen and (max-width: 768px) {
  .kv__content--03, .kv__content--02, .kv__content--01 {
    background-size: cover;
  }
}

/* kv:start */
.kv__container {
  position: relative;
  /* 子要素の基準 */
  width: 100%;
  /* 500vhはそのまま維持。これが全体のスクロール長になる */
  height: 500vh;
  background-color: #f8fafa;
  z-index: 0;
  transition: opacity 0.3s;
}
.kv__contents {
  position: fixed;
  top: 197px;
  left: 0;
  width: 100%;
  height: 100vh;
  /* 画面いっぱいに表示 */
  z-index: 1;
  overflow: hidden;
  background-color: #f8fafa;
  will-change: opacity, transform;
  /* ブラウザに描画を最適化させる */
  max-height: 570px;
}
@media screen and (min-width: 1921px) {
  .kv__contents {
    max-height: 29.6875vw;
  }
}
@media screen and (max-width: 1200px) {
  .kv__contents {
    max-height: 47.5vw;
  }
}
@media screen and (max-width: 1080px) {
  .kv__contents {
    /* 常に画面全体に固定 */
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .kv__contents {
    max-height: 144vw;
  }
}
@media screen and (max-width: 280px) {
  .kv__contents {
    max-height: 165.3333333333vw;
  }
}
.kv__content--01 {
  z-index: 3;
  background-image: url(/softdrink/healthya/images/kv-image-01-pc.png);
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .kv__content--01 {
    background-image: url(/softdrink/healthya/images/kv-image-01-sp.png);
  }
}
.kv__content--02 {
  z-index: 2;
  opacity: 0;
  background-image: url(/softdrink/healthya/images/kv-image-02-pc.png);
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .kv__content--02 {
    background-image: url(/softdrink/healthya/images/kv-image-02-sp.png);
  }
}
.kv__content--03 {
  z-index: 1;
  opacity: 0;
  background-image: url(/softdrink/healthya/images/kv-image-03-pc.png);
  pointer-events: all;
}
@media screen and (max-width: 768px) {
  .kv__content--03 {
    background-image: url(/softdrink/healthya/images/kv-image-03-sp.png);
  }
}
.kv__content-inner {
  position: absolute;
  width: 62.5%;
  max-width: 1200px;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 1921px) {
  .kv__content-inner {
    width: 62.5vw;
    max-width: none;
  }
}
@media screen and (max-width: 1920px) {
  .kv__content-inner {
    width: 1200px;
    right: 50%;
  }
}
@media screen and (max-width: 1200px) {
  .kv__content-inner {
    width: 100%;
    height: 47.5vw;
  }
}
@media screen and (max-width: 768px) {
  .kv__content-inner {
    width: 100%;
    height: 100%;
  }
}
.kv__content-anchor {
  position: absolute;
  width: 152px;
  top: 324px;
  right: 395px;
  z-index: 100;
}
@media screen and (min-width: 1921px) {
  .kv__content-anchor {
    width: 12.6666666667%;
    top: 56.8421052632%;
    right: 32.9166666667%;
  }
}
@media screen and (max-width: 1920px) {
  .kv__content-anchor {
    width: 12.6666666667%;
    top: 56.8421052632%;
    right: 32.9166666667%;
  }
}
@media screen and (max-width: 1200px) {
  .kv__content-anchor {
    width: 12.6666666667%;
    top: 56.8421052632%;
    right: 32.9166666667%;
  }
}
@media screen and (max-width: 768px) {
  .kv__content-anchor {
    width: 24.8vw;
    top: auto;
    bottom: 50.6666666667vw;
    right: 5.7333333333vw;
  }
}
.kv__content-anchor img {
  display: inline !important;
  max-width: 100% !important;
}
.kv__content-anchor::after {
  position: absolute;
  display: block;
  content: "";
  background-image: url(/softdrink/healthya/images/kv-anchor-arrow-pc.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 19.7368421053%;
  height: 9.8684210526%;
  left: 50%;
  bottom: 11.1842105263%;
  transform: translateX(-50%);
  animation: 1s upDown infinite;
}
@media screen and (max-width: 768px) {
  .kv__content-anchor::after {
    background-image: url(/softdrink/healthya/images/kv-anchor-arrow-sp.png);
    width: 6.4vw;
    height: 3.0666666667vw;
    bottom: 10.2150537634%;
  }
}
@keyframes upDown {
  /* --- 最初の1秒（動き） --- */
  0% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(40%) translateX(-50%);
  }
  100% {
    transform: translateY(0) translateX(-50%);
  }
}
.kv__title {
  position: absolute;
  width: 1200px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
@media screen and (min-width: 1921px) {
  .kv__title {
    width: 62.5vw;
  }
}
@media screen and (max-width: 1920px) {
  .kv__title {
    width: 1200px;
  }
}
@media screen and (max-width: 1200px) {
  .kv__title {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .kv__title {
    width: 100%;
  }
}
.kv__background {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #f8fafa 0%, #f8fafa 40%, #ffffff 40%, #ffffff 100%);
}
.kv .js-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* kv:end */
/* mode:start */
.mode {
  position: relative;
  z-index: 10;
  background: #fff;
}
.mode__container {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media screen and (max-width: 880px) {
  .mode__container {
    padding-top: 13.6363636364vw;
    padding-bottom: 13.6363636364vw;
  }
}
@media screen and (max-width: 768px) {
  .mode__container {
    padding-top: 16vw;
    padding-bottom: 14vw;
  }
}
.mode__content {
  display: flex;
}
@media screen and (max-width: 768px) {
  .mode__content {
    flex-direction: column;
    padding-inline: 0;
  }
}
.mode__title {
  width: 42.7380952381%;
  margin-top: 19.2857142857%;
}
@media screen and (max-width: 768px) {
  .mode__title {
    width: 100%;
    margin-inline: auto;
  }
}
.mode__lead {
  width: 44.5238095238%;
  margin-left: 12.8571428571%;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .mode__lead {
    width: 100%;
    margin-top: 12.8vw;
    margin-left: auto;
  }
}

/* mode:end */
/* inrto:start */
.intro {
  position: relative;
  z-index: 10;
  background-color: #fff;
}
.intro__container {
  padding-top: 120px;
  padding-bottom: 140px;
}
@media screen and (max-width: 880px) {
  .intro__container {
    padding-top: 13.6363636364vw;
    padding-bottom: 15.9090909091vw;
  }
}
@media screen and (max-width: 768px) {
  .intro__container {
    padding-top: 13.3333333333vw;
    padding-bottom: 13.0666666667vw;
  }
}

/* intro:end */
/* profile:start */
.profile__container {
  margin-inline: auto;
}
.profile__contents {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .profile__contents {
    flex-direction: column;
  }
}
.profile__lead {
  width: 44.0476190476%;
}
.profile__title {
  width: 74.0540540541%;
}
@media screen and (max-width: 768px) {
  .profile__title {
    width: 54.6666666667vw;
    margin-bottom: 8vw;
  }
}
.profile__text {
  display: block;
  width: 88.6486486486%;
  margin-top: 10.2702702703%;
}
@media screen and (max-width: 768px) {
  .profile__text {
    width: 85.8666666667vw;
    margin-top: 7.7333333333vw;
  }
}
.profile__image {
  width: 55.9523809524%;
}
@media screen and (max-width: 768px) {
  .profile__image {
    width: 100%;
  }
}

/* profile:end */
/* cm:start */
.cm {
  margin-top: 100px;
}
@media screen and (max-width: 880px) {
  .cm {
    margin-top: 11.3636363636vw;
  }
}
@media screen and (max-width: 768px) {
  .cm {
    margin-top: 13.3333333333vw;
  }
}
.cm__container {
  margin-inline: auto;
}
.cm__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cm__content + .cm__content {
  margin-top: 7.1428571429%;
}
@media screen and (max-width: 768px) {
  .cm__content + .cm__content {
    margin-top: 13.3333333333vw;
  }
}
.cm__title--01 {
  width: 22.380952381%;
}
@media screen and (max-width: 768px) {
  .cm__title--01 {
    width: 37.4666666667vw;
  }
}
.cm__title--02 {
  width: 23.2142857143%;
}
@media screen and (max-width: 768px) {
  .cm__title--02 {
    width: 38.9333333333vw;
  }
}
.cm__movie {
  position: relative;
  margin-top: 2.380952381%;
}
@media screen and (max-width: 768px) {
  .cm__movie {
    margin-top: 8vw;
  }
}

/* cm:end */
/* graphic:start */
.graphic {
  margin-top: 60px;
}
@media screen and (max-width: 880px) {
  .graphic {
    margin-top: 6.8181818182vw;
  }
}
@media screen and (max-width: 768px) {
  .graphic {
    margin-top: 13.3333333333vw;
  }
}
.graphic__container {
  margin-inline: auto;
}
.graphic__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.graphic__title {
  width: 26.1904761905%;
  margin-bottom: 2.1428571429%;
}
@media screen and (max-width: 768px) {
  .graphic__title {
    width: 44vw;
    margin-bottom: 8vw;
  }
}
.graphic__image {
  width: 100%;
  display: block;
}
.graphic__image + .graphic__image {
  margin-top: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .graphic__image + .graphic__image {
    margin-top: 5.3333333333vw;
  }
}

/* graphic:end */
/* mechanism:start */
.mechanism {
  background-image: url(/softdrink/healthya/images/mechanism-bg-iamge-pc.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .mechanism {
    background-image: url(/softdrink/healthya/images/mechanism-bg-iamge-sp.jpg);
  }
}
.mechanism__container {
  padding-top: 140px;
  padding-bottom: 120px;
}
@media screen and (max-width: 880px) {
  .mechanism__container {
    padding-top: 15.9090909091vw;
    padding-bottom: 13.6363636364vw;
  }
}
@media screen and (max-width: 768px) {
  .mechanism__container {
    padding-top: 13.3333333333vw;
    padding-bottom: 13.3333333333vw;
  }
}
.mechanism__content {
  position: relative;
}

/* mechanism:end */
/* function:start */
.function__container {
  margin-inline: auto;
  padding: 0;
}
.function__text {
  width: 86.5476190476%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .function__text {
    width: 89.3333333333vw;
    margin-left: 0;
  }
}
.function__image {
  width: 90.4761904762%;
  margin-top: 10.7142857143%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .function__image {
    width: 89.3333333333vw;
    margin-top: 10.6666666667vw;
    margin-inline: auto;
  }
}

/* function:end */
/* help:start */
.help__container {
  margin-inline: auto;
}
.help__title {
  width: 93.5714285714%;
  padding-top: 3.3333333333%;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .help__title {
    width: 87.0666666667vw;
    padding-top: 4vw;
    margin-left: 0;
  }
}
.help__movie {
  width: 100%;
  margin-top: 4.5238095238%;
  margin-bottom: 9.5238095238%;
  margin-inline: auto;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .help__movie {
    width: 100%;
    margin-top: 8vw;
    margin-bottom: 13.3333333333vw;
  }
}
.help__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .help__contents {
    flex-direction: column;
  }
}
.help__contents + .help__contents {
  margin-top: 7.1428571429%;
}
@media screen and (max-width: 768px) {
  .help__contents + .help__contents {
    margin-top: 5.3333333333vw;
    flex-direction: column-reverse;
  }
}
.help__content {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .help__content {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .help__content:not(:last-child) {
    margin-bottom: 8vw;
  }
}
@media screen and (max-width: 768px) {
  .help__content:nth-child(2) {
    margin-bottom: 10.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .help__content:nth-child(n+3) {
    margin-top: 9.5238095238%;
  }
}
.help__image--02 {
  margin-top: -3.3333333333vw;
}

/* help:end */
/* catechin:start */
.catechin {
  margin-top: 11.9047619048%;
}
@media screen and (max-width: 768px) {
  .catechin {
    margin-top: 17.3333333333vw;
  }
}
.catechin__container {
  margin-inline: auto;
}
.catechin__title {
  width: 53.9285714286%;
  margin-bottom: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .catechin__title {
    width: 88.8vw;
    margin-bottom: 16.8vw;
  }
}
.catechin__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .catechin__contents {
    flex-direction: column;
  }
}
.catechin__content {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .catechin__content {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .catechin__content:not(:last-child) {
    margin-bottom: 16.8vw;
  }
}

/* catechin:end */
/* work:start */
.work {
  padding-top: 11.6666666667%;
}
@media screen and (max-width: 768px) {
  .work {
    padding-top: 16.8vw;
  }
}
.work__container {
  margin-inline: auto;
}
.work__title {
  width: 53.4523809524%;
  margin-bottom: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .work__title {
    width: 87.2vw;
    margin-bottom: 8vw;
  }
}
.work__content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .work__content {
    flex-direction: column;
  }
}
.work__image {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .work__image {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .work__image:last-child {
    width: 100%;
    margin-top: 7.1428571429%;
  }
}
@media screen and (max-width: 768px) {
  .work__image:not(:last-child) {
    margin-bottom: 13.3333333333vw;
  }
}

/* work:end */
/* features:start */
.features {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
}
.features__container {
  padding-top: 140px;
  padding-bottom: 120px;
}
@media screen and (max-width: 880px) {
  .features__container {
    padding-top: 13.6363636364vw;
    padding-bottom: 13.6363636364vw;
  }
}
@media screen and (max-width: 768px) {
  .features__container {
    padding-top: 12.8vw;
    padding-bottom: 13.3333333333vw;
  }
}
.features__head {
  display: flex;
  align-items: center;
  margin-bottom: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .features__head {
    margin-bottom: 8vw;
  }
}
.features__title {
  width: 78.2142857143%;
}
@media screen and (max-width: 768px) {
  .features__title {
    width: 76.1333333333vw;
  }
}
.features__contents {
  display: flex;
  flex-wrap: wrap;
  gap: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .features__contents {
    flex-direction: column;
  }
}
.features__content {
  width: 47.619047619%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .features__content {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .features__content:nth-child(n+3) {
    margin-top: 4.7619047619%;
  }
}
@media screen and (max-width: 768px) {
  .features__content:not(:last-child) {
    margin-right: 0;
    margin-bottom: 5.3333333333vw;
  }
}
.features__link {
  position: absolute;
  width: 26%;
  left: 7.5%;
  bottom: 8.1300813008%;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .features__link {
    width: 26.1333333333vw;
    left: 5.3333333333vw;
    bottom: 4vw;
  }
}

/* features:end */
/* product:start */
.product {
  position: relative;
  z-index: 10;
  background-color: #fff;
}
.product__container {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media screen and (max-width: 880px) {
  .product__container {
    padding-top: 13.6363636364vw;
    padding-bottom: 13.6363636364vw;
  }
}
@media screen and (max-width: 768px) {
  .product__container {
    padding-top: 13.3333333333vw;
    padding-bottom: 16.2666666667vw;
  }
}
.product__title {
  width: 28.2142857143%;
}
@media screen and (max-width: 768px) {
  .product__title {
    width: 47.3333333333vw;
  }
}
.product__contents {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .product__contents {
    flex-direction: column;
  }
}
.product__content {
  width: 50%;
  position: relative;
  padding-top: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .product__content {
    width: 100%;
    padding-top: 13.3333333333vw;
  }
}
.product__link--01 {
  position: absolute;
  width: 25%;
  left: 0;
  bottom: 8.3969465649%;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .product__link--01 {
    width: 26.5333333333vw;
    left: 5.3333333333vw;
    bottom: 6.9333333333vw;
  }
}
.product__link--02 {
  position: absolute;
  width: 25%;
  left: 9.0476190476%;
  bottom: 15.6488549618%;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .product__link--02 {
    width: 26.5333333333vw;
    left: 5.3333333333vw;
    bottom: 18.8vw;
  }
}

/* product:end */
/* shop:start */
.shop {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
}
.shop__container {
  padding-top: 120px;
  padding-bottom: 187px;
}
@media screen and (max-width: 880px) {
  .shop__container {
    padding-top: 13.6363636364vw;
    padding-bottom: 21.25vw;
  }
}
@media screen and (max-width: 768px) {
  .shop__container {
    padding-top: 10vw;
    padding-bottom: 37.3333333333vw;
  }
}
.shop__title {
  width: 45%;
  margin-bottom: 4.7619047619%;
}
@media screen and (max-width: 768px) {
  .shop__title {
    width: 76.9333333333vw;
    margin-bottom: 8.5333333333vw;
  }
}
.shop__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .shop__contents {
    flex-direction: column;
  }
}
.shop__content {
  width: 23.5714285714%;
}
@media screen and (max-width: 768px) {
  .shop__content {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .shop__content:not(:last-child) {
    margin-bottom: 5.3333333333vw;
  }
}

/* shop:end */
/* float:start */
.float {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 80px;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s opacity;
}
@media screen and (max-width: 768px) {
  .float {
    top: auto;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    height: 14.4vw;
    transition: 0.2s transform;
    transform: translateY(100%);
  }
}
.float__container {
  background-color: #209847;
}
.float__link {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .float__link {
    flex-direction: row;
  }
}
.float__link-item:not(:last-child) {
  position: relative;
}
.float__link-item:not(:last-child)::after {
  position: absolute;
  display: block;
  content: "";
  width: 76px;
  height: 1px;
  background-color: #87d89c;
  bottom: 0;
  left: 2px;
}
@media screen and (max-width: 768px) {
  .float__link-item:not(:last-child)::after {
    width: 0.2666666667vw;
    height: 100%;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
.float.is-visible {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 768px) {
  .float.is-visible {
    transform: translateY(0);
  }
}

/* float:end */
/* modal:start */
.modal {
  /* 初期状態は非表示 */
  display: none;
  /* 常に最前面に表示 */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* モーダル自体がスクロールしないように */
  /* JavaScriptでモーダルが表示されたときに適用 */
}
.modal.is-active {
  display: block;
}
.modal {
  /* ====================================
    モーダルの背景
    ==================================== */
}
.modal__bg {
  background: rgba(255, 255, 255, 0.9);
  /* 半透明の黒 */
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* 背景クリックで閉じられることを示す */
}
.modal {
  /* ====================================
    モーダルの中身（動画コンテナと閉じるボタン）
    ==================================== */
}
.modal__content {
  /* 画面中央に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* サイズ設定 */
  width: 90%;
  max-width: 1140px;
  /* 動画の最大幅の目安 */
  padding: 0;
}
@media screen and (max-width: 768px) {
  .modal__content {
    width: 90%;
  }
}
.modal {
  /* ====================================
    動画コンテナ（レスポンシブ対応のための親要素）
    ==================================== */
}
.modal__video-container {
  position: relative;
  /* 16:9のアスペクト比を維持するためのpadding (縦/横 = 9/16 = 56.25%) */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: black;
}
.modal {
  /* iframe（動画プレイヤー）のスタイル */
}
.modal__video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal {
  /* ====================================
    画像コンテナ（レスポンシブ対応のための親要素）
    ==================================== */
}
.modal__image-container {
  position: relative;
  overflow: hidden;
}
.modal {
  /* ====================================
  閉じるボタン
  ==================================== */
}
.modal__close {
  position: absolute;
  top: -56px;
  /* 動画コンテナの上部に配置 */
  right: 22.5px;
  /* ボタンの見た目 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
  font-size: 0;
}
.modal__close::before {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 6px;
  background-color: #259e3c;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}
@media screen and (max-width: 768px) {
  .modal__close::before {
    width: 5.8670143416vw;
    height: 0.7822685789vw;
  }
}
.modal__close::after {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 6px;
  background-color: #259e3c;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
@media screen and (max-width: 768px) {
  .modal__close::after {
    width: 5.8670143416vw;
    height: 0.7822685789vw;
  }
}
@media screen and (max-width: 768px) {
  .modal__close {
    top: -5.6062581486vw;
    right: 2.6075619296vw;
  }
}
.modal__close:hover {
  opacity: 1;
}

/* 初期状態：非表示 */
#js-modal-image {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* クラスがついたら表示 */
#js-modal-image.is-active {
  display: block;
  /* レイアウトに合わせてflexなどでも可 */
  opacity: 1;
}

/* モーダル内の画像はJSで制御するので、基本のスタイルだけ */
.modal__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* modal:end */
/* character:start */
.character {
  position: fixed;
  bottom: 10%;
  left: 10%;
  z-index: 20;
  opacity: 0;
  transition: 0.2s opacity;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .character {
    bottom: 16vw;
    left: 5%;
  }
}
.character__container--01 {
  width: 270px;
  height: 270px;
  display: none;
}
@media screen and (max-width: 768px) {
  .character__container--01 {
    width: 53.4666666667vw;
    height: 42.2666666667vw;
  }
}
.character__container--02 {
  width: 312px;
  height: 235px;
  display: none;
}
@media screen and (max-width: 768px) {
  .character__container--02 {
    width: 58.4vw;
    height: 47.6vw;
  }
}
.character__container--03 {
  width: 368px;
  height: 294px;
  display: none;
}
@media screen and (max-width: 768px) {
  .character__container--03 {
    width: 71.4666666667vw;
    height: 56.8vw;
  }
}
.character__container--04 {
  width: 393px;
  height: 344px;
  display: none;
}
@media screen and (max-width: 768px) {
  .character__container--04 {
    width: 75.8666666667vw;
    height: 64.8vw;
  }
}
.character__container--05 {
  width: 439px;
  height: 424px;
  display: none;
}
@media screen and (max-width: 768px) {
  .character__container--05 {
    width: 80.9333333333vw;
    height: 72.8vw;
  }
}
.character {
  /* 基本は非表示 */
}
.character [class*=character__container--] {
  display: none;
}
.character {
  /* is-active がついた時だけ表示 */
}
.character [class*=character__container--].is-active {
  display: block;
}
.character.js-character-visible {
  opacity: 1;
  scale: 1;
  animation: yurayura 0.5s 3s ease-in-out;
}
@keyframes yurayura {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* character:end */