/*
* top.css
*
*/
/* --------------------------------
  .js-** , .is-**
-------------------------------- */
.js-fadeIn,
.js-fadeIn-mv {
  opacity: 0;
}

.js-line span {
  position: relative;
}
.js-line span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
  background-color: #fff000;
}
@media (min-width: 768px) {
  .js-line span::after {
    border-radius: 0.1302083333vw;
    height: 0.2604166667vw;
  }
}
@media (max-width: 767.98px) {
  .js-line span::after {
    border-radius: 0.3333333333vw;
    height: 0.6666666667vw;
  }
}

@media (min-width: 768px) {
  .is-lined span::after {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .is-lined span::after {
    width: 100%;
  }
}

.is-loaded .mv .mv__image {
  opacity: 1;
}
.is-loaded .mv .mv__image .mv__logo {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------
  .mv
-------------------------------- */
.mv {
  position: relative;
}
@media (min-width: 768px) {
  .mv {
    padding-top: 7.6171875vw;
  }
}
@media (max-width: 767.98px) {
  .mv {
    padding-top: 39.2vw;
  }
}
.mv .mv__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.mv .mv__bg img {
  width: 100%;
}
.mv .mv__image {
  opacity: 0;
  position: relative;
  margin: 0 auto;
  transition: opacity 0.6s;
}
.mv .mv__image img {
  width: 100%;
}
@media (min-width: 768px) {
  .mv .mv__image {
    width: 83.203125vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__image {
    width: 94.4vw;
  }
}
.mv .mv__image .mv__logo {
  opacity: 0;
  position: absolute;
  transition: opacity 0.5s 0.7s, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transform: translateY(40px);
}
@media (min-width: 768px) {
  .mv .mv__image .mv__logo {
    top: -3.0598958333vw;
    left: 3.515625vw;
    width: 35.0260416667vw;
  }
}
@media (max-width: 1180px) {
  .mv .mv__image .mv__logo {
    top: -1.4973958333vw;
    left: 6.3802083333vw;
    width: 28.515625vw;
  }
}
@media (max-width: 950px) {
  .mv .mv__image .mv__logo {
    top: 0.6510416667vw;
    left: 10.4166666667vw;
    width: 24.609375vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__image .mv__logo {
    top: -25.3333333333vw;
    left: 13.3333333333vw;
    width: 70vw;
  }
}
.mv .mv__body {
  position: relative;
  text-align: center;
}
@media (min-width: 768px) {
  .mv .mv__body {
    margin: 0 auto;
    padding: 4.2317708333vw 0 5.9895833333vw;
    width: 66.6666666667vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__body {
    padding: 12vw 0 24vw;
  }
}
.mv .mv__text {
  color: #015db2;
}
.mv .mv__text span {
  display: block;
}
@media (min-width: 768px) {
  .mv .mv__text {
    font-size: 22px;
    line-height: 1.7272727273;
  }
  .mv .mv__text span + span {
    margin-top: 1.3671875vw;
  }
}
@media (min-width: 1536px) {
  .mv .mv__text {
    font-size: 1.4322916667vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__text {
    font-size: 3.7333333333vw;
    line-height: 1.6428571429;
  }
  .mv .mv__text span + span {
    margin-top: 2.8vw;
  }
}
.mv .mv__lead {
  color: #015db2;
  font-weight: bold;
}
.mv .mv__lead span {
  display: block;
}
@media (min-width: 768px) {
  .mv .mv__lead {
    margin-top: 0.9765625vw;
    letter-spacing: 1px;
    font-size: 26px;
    line-height: 2.8846153846;
  }
  .mv .mv__lead span + span {
    margin-top: -1.2369791667vw;
  }
}
@media (min-width: 1536px) {
  .mv .mv__lead {
    font-size: 1.6927083333vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__lead {
    margin-top: 3.2vw;
    font-size: 4.4vw;
    line-height: 2.9696969697;
  }
  .mv .mv__lead span + span {
    margin-top: -3.7333333333vw;
  }
}
@media (min-width: 768px) {
  .mv .mv__lead .large {
    font-size: 54px;
    line-height: 1.3888888889;
  }
}
@media (min-width: 1536px) {
  .mv .mv__lead .large {
    font-size: 3.515625vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__lead .large {
    font-size: 9.0666666667vw;
    line-height: 1.4411764706;
  }
}
.mv .mv__drink .drink {
  position: absolute;
}
.mv .mv__drink .drink img {
  width: 100%;
}
@media (min-width: 768px) {
  .mv .mv__drink .drink.drink-1 {
    top: -7.5520833333vw;
    right: -1.6276041667vw;
    width: 11.5234375vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__drink .drink.drink-1 {
    top: -12.5333333333vw;
    right: 4.2666666667vw;
    width: 20vw;
  }
}
@media (min-width: 768px) {
  .mv .mv__drink .drink.drink-2 {
    top: 3.3854166667vw;
    left: 1.1067708333vw;
    width: 12.5vw;
  }
}
@media (max-width: 1280px) {
  .mv .mv__drink .drink.drink-2 {
    left: -2.6041666667vw;
  }
}
@media (max-width: 1050px) {
  .mv .mv__drink .drink.drink-2 {
    left: -5.2083333333vw;
  }
}
@media (max-width: 1080px) {
  .mv .mv__drink .drink.drink-2 {
    left: -10.4166666667vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__drink .drink.drink-2 {
    bottom: 2.6666666667vw;
    left: 2.9333333333vw;
    width: 21.8666666667vw;
  }
}
.mv .mv__cloud .cloud {
  position: absolute;
}
.mv .mv__cloud .cloud img {
  width: 100%;
}
@media (min-width: 768px) {
  .mv .mv__cloud .cloud.cloud-1 {
    top: 12.3697916667vw;
    right: -27.7994791667vw;
    width: 24.3489583333vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__cloud .cloud.cloud-1 {
    top: 7.2vw;
    left: -16vw;
    width: 35.6vw;
  }
}
@media (min-width: 768px) {
  .mv .mv__cloud .cloud.cloud-2 {
    top: 21.2890625vw;
    left: -24.7395833333vw;
    width: 17.3828125vw;
  }
}
@media (max-width: 767.98px) {
  .mv .mv__cloud .cloud.cloud-2 {
    right: -18.6666666667vw;
    bottom: 0vw;
    width: 40.4vw;
  }
}

/* --------------------------------
  .hydration
-------------------------------- */
.hydration {
  position: relative;
}
@media (min-width: 768px) {
  .hydration {
    padding: 5.2083333333vw 0 13.9973958333vw;
  }
}
@media (max-width: 767.98px) {
  .hydration {
    padding: 10.1333333333vw 8vw 34.1333333333vw;
  }
}
.hydration .hydration__heading {
  text-align: center;
  color: #fff;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .hydration .hydration__heading {
    letter-spacing: 6px;
    font-size: 3.90625vw;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__heading {
    font-size: 9.8666666667vw;
  }
}
@media (min-width: 768px) {
  .hydration .hydration__heading .shoulderCopy {
    letter-spacing: 2px;
    font-size: 1.4322916667vw;
    line-height: 2.3636363636;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__heading .shoulderCopy {
    font-size: 3.7333333333vw;
    line-height: 2.2857142857;
  }
}
@media (min-width: 768px) {
  .hydration .hydration__heading .small {
    font-size: 2.8645833333vw;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__heading .small {
    font-size: 6.9333333333vw;
  }
}
@media (min-width: 768px) {
  .hydration .hydration__body {
    margin: 5.7291666667vw auto 0;
    width: 1040px;
  }
  .hydration .hydration__body + .hydration__body {
    margin-top: 6.5104166667vw;
  }
}
@media (min-width: 1536px) {
  .hydration .hydration__body {
    width: 67.7083333333vw;
  }
}
@media (max-width: 1100px) {
  .hydration .hydration__body {
    padding: 0 30px;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body {
    margin-top: 8vw;
    padding: 0;
  }
  .hydration .hydration__body + .hydration__body {
    margin-top: 13.3333333333vw;
  }
}
.hydration .hydration__body .block {
  display: flex;
  width: 100%;
}
@media (min-width: 768px) {
  .hydration .hydration__body .block {
    gap: 3.125vw;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block {
    flex-direction: column;

    row-gap: 6.6666666667vw;
  }
}
.hydration .hydration__body .block .block__image img {
  width: 100%;
}
@media (min-width: 768px) {
  .hydration .hydration__body .block .block__image {
    width: 520px;
  }
}
@media (min-width: 1536px) {
  .hydration .hydration__body .block .block__image {
    width: 33.8541666667vw;
  }
}
@media (max-width: 1100px) {
  .hydration .hydration__body .block .block__image {
    width: 50%;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block .block__image {
    order: 2;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .hydration .hydration__body .block .block__article {
    width: 470px;
  }
}
@media (min-width: 1536px) {
  .hydration .hydration__body .block .block__article {
    width: 30.5989583333vw;
  }
}
@media (max-width: 1100px) {
  .hydration .hydration__body .block .block__article {
    width: 45%;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block .block__article {
    order: 1;
    width: 100%;
  }
}
.hydration .hydration__body .block .block__article .bubble img {
  width: 100%;
}
@media (min-width: 768px) {
  .hydration .hydration__body .block .block__article .bubble {
    position: relative;
    top: -0.1953125vw;
    left: -1.2369791667vw;
    width: 11.0677083333vw;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block .block__article .bubble {
    margin: 0 auto;
    width: 23.8666666667vw;
  }
}
.hydration .hydration__body .block .block__heading {
  color: #fff;
  font-weight: bold;
}
@media (min-width: 768px) {
  .hydration .hydration__body .block .block__heading {
    margin-top: 0.5859375vw;
    letter-spacing: 3.5px;
    font-size: 2.6041666667vw;
    line-height: 1.45;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block .block__heading {
    text-align: center;
    letter-spacing: 2px;
    font-size: 6.1333333333vw;
    line-height: 1.5217391304;
  }
}
.hydration .hydration__body .block .block__text {
  color: #fff;
}
@media (min-width: 768px) {
  .hydration .hydration__body .block .block__text {
    margin-top: 1.5625vw;
    font-size: 16px;
    line-height: 2;
  }
}
@media (min-width: 1536px) {
  .hydration .hydration__body .block .block__text {
    font-size: 1.0416666667vw;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration__body .block .block__text {
    margin-top: 3.2vw;
    font-size: 3.7333333333vw;
    line-height: 2;
  }
}
.hydration .hydration_bg {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
@media (max-width: 1500px) {
  .hydration .hydration_bg {
    display: flex;
    align-items: center;
    right: -50%;
    left: -50%;
    min-width: 1500px;
  }
}
@media (max-width: 1350px) {
  .hydration .hydration_bg {
    min-width: 1400px;
  }
}
@media (max-width: 1150px) {
  .hydration .hydration_bg {
    min-width: 1350px;
  }
}
@media (max-width: 1050px) {
  .hydration .hydration_bg {
    min-width: 1250px;
  }
}
@media (max-width: 1000px) {
  .hydration .hydration_bg {
    min-width: 1200px;
  }
}
@media (max-width: 950px) {
  .hydration .hydration_bg {
    min-width: 1150px;
  }
}
@media (max-width: 900px) {
  .hydration .hydration_bg {
    min-width: 1100px;
  }
}
@media (max-width: 850px) {
  .hydration .hydration_bg {
    min-width: 1050px;
  }
}
@media (max-width: 767.98px) {
  .hydration .hydration_bg {
    display: block;
    right: 0;
    left: 0;
    min-width: auto;
  }
}
.hydration .hydration_bg img {
  width: 100%;
}

/* --------------------------------
  .pocari
-------------------------------- */
.pocari {
  position: relative;
}
@media (min-width: 768px) {
  .pocari {
    padding: 113px 0 142px;
  }
}
@media (min-width: 1536px) {
  .pocari {
    padding: 7.3567708333vw 0 9.2447916667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari {
    padding: 10.9333333333vw 0 18.9333333333vw;
  }
}
.pocari .pocari__heading {
  text-align: center;
  color: #015db2;
  font-weight: bold;
}
@media (min-width: 768px) {
  .pocari .pocari__heading {
    letter-spacing: 2px;
    font-size: 3.2552083333vw;
    line-height: 1.52;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__heading {
    font-size: 7.4666666667vw;
    line-height: 1.4285714286;
  }
}
@media (min-width: 768px) {
  .pocari .pocari__heading .small {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__heading .small {
    font-size: 5.8666666667vw;
  }
}
@media (min-width: 768px) {
  .pocari .pocari__body {
    margin: 0 auto;
    width: 1280px;
  }
}
@media (min-width: 1536px) {
  .pocari .pocari__body {
    width: 83.3333333333vw;
  }
}
@media (max-width: 1280px) {
  .pocari .pocari__body {
    padding: 0 30px;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body {
    margin: auto;
    padding: 0 8vw;
    width: 100%;
  }
}
.pocari .pocari__body .block {
  display: flex;
  position: relative;
}
@media (min-width: 768px) {
  .pocari .pocari__body .block {
    margin: 3.5807291667vw auto 0;
    width: 1040px;

    gap: 3.2552083333vw;
  }
}
@media (min-width: 1536px) {
  .pocari .pocari__body .block {
    width: 67.7083333333vw;
  }
}
@media (max-width: 1100px) {
  .pocari .pocari__body .block {
    padding: 0 30px;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block {
    flex-direction: column;
    margin-top: 4.8vw;
    padding: 0;

    row-gap: 6.6666666667vw;
  }
}
.pocari .pocari__body .block .block__cloud {
  position: absolute;
}
.pocari .pocari__body .block .block__cloud img {
  width: 100%;
}
@media (min-width: 768px) {
  .pocari .pocari__body .block .block__cloud {
    right: -3.515625vw;
    bottom: -2.7994791667vw;
    width: 13.4114583333vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block .block__cloud {
    display: none;
  }
}
.pocari .pocari__body .block .block__image img {
  width: 100%;
}
@media (min-width: 768px) {
  .pocari .pocari__body .block .block__image {
    width: 520px;
  }
}
@media (min-width: 1536px) {
  .pocari .pocari__body .block .block__image {
    width: 33.8541666667vw;
  }
}
@media (max-width: 1100px) {
  .pocari .pocari__body .block .block__image {
    width: 50%;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block .block__image {
    order: 2;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .pocari .pocari__body .block .block__article {
    padding-top: 0.9765625vw;
    width: 470px;
  }
}
@media (min-width: 1536px) {
  .pocari .pocari__body .block .block__article {
    width: 30.5989583333vw;
  }
}
@media (max-width: 1100px) {
  .pocari .pocari__body .block .block__article {
    width: 45%;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block .block__article {
    order: 1;
    padding-top: 2vw;
    width: 100%;
  }
}
.pocari .pocari__body .block .block__heading {
  color: #015db2;
  font-weight: bold;
}
@media (min-width: 768px) {
  .pocari .pocari__body .block .block__heading {
    letter-spacing: 1.5px;
    font-size: 2.6041666667vw;
    line-height: 1.45;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block .block__heading {
    text-align: center;
    font-size: 6.1333333333vw;
    line-height: 1.5217391304;
  }
}
.pocari .pocari__body .block .block__text {
  color: #015db2;
}
@media (min-width: 768px) {
  .pocari .pocari__body .block .block__text {
    margin-top: 1.2369791667vw;
    font-size: 16px;
    line-height: 2;
  }
}
@media (min-width: 1536px) {
  .pocari .pocari__body .block .block__text {
    font-size: 1.0416666667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__body .block .block__text {
    margin-top: 0;
    font-size: 3.7333333333vw;
    line-height: 2;
  }
}
.pocari .group {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background-color: #f2f9ff;
}
@media (min-width: 768px) {
  .pocari .group {
    margin-top: 5.7942708333vw;
    padding: 53px 0 5.2083333333vw;
    box-shadow: 11px 10px 61.75px 3.25px rgba(50, 143, 225, 0.16);
  }
}
@media (min-width: 1536px) {
  .pocari .group {
    padding: 3.4505208333vw 0 5.2083333333vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group {
    margin-top: 16.5333333333vw;
    padding: 10.1333333333vw 6.6666666667vw 14.1333333333vw;
  }
}
.pocari .group .group__heading {
  text-align: center;
  color: #015db2;
}
@media (min-width: 768px) {
  .pocari .group .group__heading {
    letter-spacing: 2px;
    font-size: 40px;
    line-height: 1.5;
  }
}
@media (min-width: 1536px) {
  .pocari .group .group__heading {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__heading {
    font-size: 6.1333333333vw;
    line-height: 1.5217391304;
  }
}
@media (min-width: 768px) {
  .pocari .group .group__heading .small {
    font-size: 34px;
  }
}
@media (min-width: 1536px) {
  .pocari .group .group__heading .small {
    font-size: 2.2135416667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__heading .small {
    font-size: 4.8vw;
  }
}
.pocari .group .group__heading .bubble {
  display: block;
  margin: 0 auto;
}
.pocari .group .group__heading .bubble img {
  width: 100%;
}
@media (min-width: 768px) {
  .pocari .group .group__heading .bubble {
    width: 11.0677083333vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__heading .bubble {
    width: 25.0666666667vw;
  }
}
@media (min-width: 768px) {
  .pocari .group .group__block {
    display: flex;
    justify-content: center;
    margin-top: 2.6041666667vw;

    gap: 6.5104166667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__block {
    margin-top: 6.9333333333vw;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .pocari .group .group__card {
    width: 30.46875vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__card {
    width: 100%;
  }
  .pocari .group .group__card + .group__card {
    margin-top: 9.3333333333vw;
  }
}
.pocari .group .group__image {
  width: 100%;
}
.pocari .group .group__image img {
  width: 100%;
}
.pocari .group .group__text {
  width: 100%;
  color: #015db2;
}
.pocari .group .group__text .note {
  padding-left: 1em;
  text-indent: -1em;
}
.pocari .group .group__text .en {
  font-family: Arial, Helvetica, sans-serif;
}
@media (min-width: 768px) {
  .pocari .group .group__text {
    margin-top: 1.6927083333vw;
    font-size: 16px;
    line-height: 2;
  }
  .pocari .group .group__text .note {
    display: block;
    margin-top: 1.0416666667vw;
    font-size: 12px;
  }
}
@media (min-width: 1536px) {
  .pocari .group .group__text {
    font-size: 1.0416666667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__text {
    margin-top: 3.2vw;
    font-size: 3.7333333333vw;
    line-height: 2;
  }
  .pocari .group .group__text .note {
    display: block;
    margin-top: 2.1333333333vw;
    font-size: 2.9333333333vw;
    line-height: 1.8181818182;
  }
}
.pocari .group .group__person .person {
  position: absolute;
  top: 0;
}
.pocari .group .group__person .person img {
  width: 100%;
}
@media (min-width: 768px) {
  .pocari .group .group__person .person.person-1 {
    top: -2.6692708333vw;
    left: 2.4739583333vw;
    width: 16.2109375vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__person .person.person-1 {
    top: -6.1333333333vw;
    left: -7.7333333333vw;
    width: 30.4vw;
  }
}
@media (min-width: 768px) {
  .pocari .group .group__person .person.person-2 {
    top: -4.1015625vw;
    right: 0.2604166667vw;
    width: 20.2473958333vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .group .group__person .person.person-2 {
    top: -12vw;
    right: -8vw;
    width: 34.8vw;
  }
}
.pocari .pocari__cloud .cloud {
  position: absolute;
}
.pocari .pocari__cloud .cloud img {
  width: 100%;
}
@media (min-width: 768px) {
  .pocari .pocari__cloud .cloud.cloud-1 {
    top: 6.25vw;
    right: -9.9609375vw;
    width: 24.2838541667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__cloud .cloud.cloud-1 {
    top: 9.8666666667vw;
    right: -19.4666666667vw;
    width: 40.2666666667vw;
  }
}
@media (min-width: 768px) {
  .pocari .pocari__cloud .cloud.cloud-2 {
    top: 15.7552083333vw;
    left: -11.8489583333vw;
    width: 24.2838541667vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__cloud .cloud.cloud-2 {
    top: 24vw;
    left: -14.1333333333vw;
    width: 28.5333333333vw;
  }
}
@media (min-width: 768px) {
  .pocari .pocari__cloud .cloud.cloud-3 {
    bottom: 1.0416666667vw;
    left: -1.171875vw;
    width: 17.7734375vw;
  }
}
@media (max-width: 767.98px) {
  .pocari .pocari__cloud .cloud.cloud-3 {
    right: -16vw;
    bottom: 16vw;
    width: 40.2666666667vw;
  }
}

/* --------------------------------
  .products
-------------------------------- */
.products {
  position: relative;
}
@media (min-width: 768px) {
  .products {
    padding: 14.0625vw 0 11.0677083333vw;
  }
}
@media (max-width: 767.98px) {
  .products {
    padding: 20.2666666667vw 8vw 25.0666666667vw;
  }
}
.products .products__heading {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
@media (min-width: 768px) {
  .products .products__heading {
    font-size: 3.90625vw;
  }
}
@media (max-width: 767.98px) {
  .products .products__heading {
    font-size: 12vw;
  }
}
.products .products__heading .en {
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  line-height: 1;
}
.products .products__heading .ja {
  display: block;
}
@media (min-width: 768px) {
  .products .products__heading .ja {
    margin-top: 0.5208333333vw;
    letter-spacing: 2px;
    font-size: 14px;
  }
}
@media (min-width: 1536px) {
  .products .products__heading .ja {
    font-size: 0.9114583333vw;
  }
}
@media (max-width: 767.98px) {
  .products .products__heading .ja {
    margin-top: 1.8666666667vw;
    font-size: 3.4666666667vw;
  }
}
.products .products_list {
  display: flex;
}
@media (min-width: 768px) {
  .products .products_list {
    flex-wrap: wrap;
    margin: 5.9895833333vw auto 0;
    width: 1040px;

    gap: 2.6041666667vw;
    row-gap: 2.6041666667vw;
  }
}
@media (min-width: 1536px) {
  .products .products_list {
    width: 67.7083333333vw;
  }
}
@media (max-width: 1100px) {
  .products .products_list {
    padding: 0 30px;
    width: 100%;
    min-width: auto;
  }
}
@media (max-width: 767.98px) {
  .products .products_list {
    flex-direction: column;
    margin: 9.0666666667vw auto 0;
    padding: 0;
    width: 100%;

    row-gap: 6.6666666667vw;
  }
}
.products .products_list li {
  display: flex;
  background-color: #fff;
}
@media (min-width: 768px) {
  .products .products_list li {
    justify-content: center;
    padding-top: 1.8229166667vw;
    border-radius: 2.6041666667vw;
    width: 499px;
  }
}
@media (min-width: 1536px) {
  .products .products_list li {
    width: 32.4869791667vw;
  }
}
@media (max-width: 1100px) {
  .products .products_list li {
    width: 48%;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li {
    flex-direction: column;
    padding-top: 6.9333333333vw;
    padding-bottom: 12.2666666667vw;
    border-radius: 8vw;
    width: 100%;
  }
}
.products .products_list li .image img {
  width: 100%;
}
@media (min-width: 768px) {
  .products .products_list li .image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 10.9375vw;
    text-align: center;
  }
  .products .products_list li .image.image-pocari img {
    width: 8.2682291667vw;
  }
  .products .products_list li .image.image-jelly img {
    width: 10.9375vw;
  }
  .products .products_list li .image.image-ice img {
    width: 9.4401041667vw;
  }
  .products .products_list li .image.image-ion img {
    width: 8.0729166667vw;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li .image {
    margin: 0 auto;
    width: 66.6666666667vw;
  }
}
.products .products_list li .article {
  position: relative;
}
@media (min-width: 768px) {
  .products .products_list li .article {
    display: flex;
    flex-direction: column;
    left: -18px;
    padding: 1.171875vw 0 3.9713541667vw;
    width: 263px;
  }
}
@media (min-width: 1536px) {
  .products .products_list li .article {
    left: -1.171875vw;
    width: 17.1223958333vw;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li .article {
    margin-top: -2.6666666667vw;
    padding: 0 6.6666666667vw;
    width: 100%;
  }
}
.products .products_list li .article .article__heading {
  color: #2f3133;
  font-weight: bold;
}
@media (min-width: 768px) {
  .products .products_list li .article .article__heading {
    font-size: 22px;
    line-height: 1.3636363636;
  }
}
@media (min-width: 1536px) {
  .products .products_list li .article .article__heading {
    font-size: 1.4322916667vw;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li .article .article__heading {
    font-size: 4.5333333333vw;
    line-height: 1.3823529412;
  }
}
.products .products_list li .article .article__text {
  color: #2f3133;
}
.products .products_list li .article .article__text .en {
  font-family: Arial, Helvetica, sans-serif;
}
@media (min-width: 768px) {
  .products .products_list li .article .article__text {
    margin-top: 0.5208333333vw;
    margin-bottom: 1.0416666667vw;
    letter-spacing: 1.5px;
    font-size: 14px;
    line-height: 1.7857142857;
  }
}
@media (min-width: 1536px) {
  .products .products_list li .article .article__text {
    font-size: 0.9114583333vw;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li .article .article__text {
    margin-top: 2.4vw;
    letter-spacing: -0.5px;
    font-size: 3.7333333333vw;
    line-height: 1.7857142857;
  }
}
.products .products_list li .article .article__button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border: solid 1px #015db2;
  width: 100%;
  transition: background-color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75), color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  background-color: #015db2;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.products .products_list li .article .article__button::after,
.products .products_list li .article .article__button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 1px;
  transition: background-color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  transform-origin: right;
  background-color: #fff;
}
.products .products_list li .article .article__button::before {
  transform: rotate(50deg);
}
.products .products_list li .article .article__button::after {
  transform: rotate(-50deg);
}
@media (min-width: 768px) {
  .products .products_list li .article .article__button {
    margin-top: auto;
    border-radius: 23px;
    height: 46px;
    font-size: 14px;
    line-height: 46px;
  }
  .products .products_list li .article .article__button::after,
  .products .products_list li .article .article__button::before {
    right: 1.3671875vw;
  }
}
@media (min-width: 1536px) {
  .products .products_list li .article .article__button {
    border-radius: 1.4973958333vw;
    height: 2.9947916667vw;
    font-size: 0.9114583333vw;
    line-height: 2.9947916667vw;
  }
}
@media (max-width: 767.98px) {
  .products .products_list li .article .article__button {
    margin: 7.4666666667vw auto 0;
    border-radius: 5.7333333333vw;
    width: 64vw;
    height: 11.4666666667vw;
    font-size: 3.7333333333vw;
    line-height: 11.4666666667vw;
  }
  .products .products_list li .article .article__button::after,
  .products .products_list li .article .article__button::before {
    right: 4.5333333333vw;
  }
}
.products .products_list li .article .article__button:hover {
  background-color: #fff;
  color: #0b5ba4;
}
.products .products_list li .article .article__button:hover::after,
.products .products_list li .article .article__button:hover::before {
  background-color: #0b5ba4;
}
.products .products__button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border: solid 1px #015db2;
  width: 100%;
  transition: background-color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75), color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  color: #015db2;
}
.products .products__button::after,
.products .products__button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 1px;
  transition: background-color 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  transform-origin: right;
  background-color: #015db2;
}
.products .products__button::before {
  transform: rotate(50deg);
}
.products .products__button::after {
  transform: rotate(-50deg);
}
@media (min-width: 768px) {
  .products .products__button {
    margin: 3.90625vw auto 0;
    border-radius: 23px;
    width: 264px;
    height: 46px;
    font-size: 14px;
    line-height: 46px;
  }
  .products .products__button::after,
  .products .products__button::before {
    right: 1.3671875vw;
  }
}
@media (min-width: 1536px) {
  .products .products__button {
    border-radius: 1.4973958333vw;
    width: 17.1875vw;
    height: 2.9947916667vw;
    font-size: 0.9114583333vw;
    line-height: 2.9947916667vw;
  }
}
@media (max-width: 767.98px) {
  .products .products__button {
    margin: 10.6666666667vw auto 0;
    border-radius: 5.7333333333vw;
    width: 64vw;
    height: 11.4666666667vw;
    font-size: 3.7333333333vw;
    line-height: 11.4666666667vw;
  }
  .products .products__button::after,
  .products .products__button::before {
    right: 4.5333333333vw;
  }
}
.products .products__button:hover {
  border: solid 1px #fff;
  background-color: #0b5ba4;
  color: #fff;
}
.products .products__button:hover::after,
.products .products__button:hover::before {
  background-color: #fff;
}
.products .products_bg {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
  transform: scale(1.03);
  transform-origin: top;
}
@media (max-width: 1400px) {
  .products .products_bg {
    right: -50%;
    left: -50%;
    min-width: 1400px;
  }
}
@media (max-width: 1300px) {
  .products .products_bg {
    min-width: 1350px;
  }
}
@media (max-width: 1200px) {
  .products .products_bg {
    min-width: 1300px;
  }
}
@media (max-width: 1100px) {
  .products .products_bg {
    min-width: 1250px;
  }
}
@media (max-width: 1000px) {
  .products .products_bg {
    min-width: 1150px;
  }
}
@media (max-width: 900px) {
  .products .products_bg {
    min-width: 1100px;
  }
}
@media (max-width: 800px) {
  .products .products_bg {
    min-width: 1070px;
  }
}
@media (max-width: 767.98px) {
  .products .products_bg {
    right: 0;
    left: 0;
    min-width: auto;
    transform: scale(1);
  }
}
.products .products_bg img {
  width: 100%;
}

/* --------------------------------
  .un
-------------------------------- */
.un_wrapper {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .un_movie {
    padding-top: 48px;
  }
}
@media (min-width: 1536px) {
  .un_movie {
    padding-top: 1.5625vw;
  }
}
@media (max-width: 767.98px) {
  .un_movie {
    padding-top: 7.7333333333vw;
  }
}

.un_movie_contents {
  display: grid;

  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .un_movie_contents {
    margin: 0 auto;
    margin-top: 3.5807291667vw;
    width: 1280px;

    gap: 0.6510416667vw;
  }
}
@media (min-width: 1536px) {
  .un_movie_contents {
    width: 83.3333333333vw;
  }
}
@media (max-width: 1280px) {
  .un_movie_contents {
    padding: 0 30px;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .un_movie_contents {
    margin-top: 8vw;
    padding: 0 6.6666666667vw;
    width: 100%;

    grid-template-columns: 1fr;
    gap: 6.6666666667vw;
    margin-inline: auto;
  }
}

.bl_sectionTtl {
  text-align: center;
  text-transform: uppercase;
  color: #015db2;
  font-family: "Roboto Condensed", sans-serif;
}
@media (min-width: 768px) {
  .bl_sectionTtl {
    line-height: 1.25;
  }
}
.bl_sectionTtl span {
  display: block;
}
@media (min-width: 768px) {
  .bl_sectionTtl .bl_sectionTtlMain {
    font-size: 4.5572916667vw;
  }
}
@media (max-width: 767.98px) {
  .bl_sectionTtl .bl_sectionTtlMain {
    font-size: 12vw;
  }
}
@media (min-width: 768px) {
  .bl_sectionTtl .bl_sectionTtlSub {
    letter-spacing: 2px;
    font-size: 14px;
  }
}
@media (max-width: 767.98px) {
  .bl_sectionTtl .bl_sectionTtlSub {
    margin-top: -2.6666666667vw;
    font-size: 3.4666666667vw;
  }
}

.un_movieSlider {
  position: relative;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .un_movieSlider {
    margin-top: 3.5807291667vw;
    height: 36.8489583333vw;
  }
}
@media (max-width: 767.98px) {
  .un_movieSlider {
    margin-top: 4vw;
    height: 60.8vw;
  }
}
.un_movieSlider .splide__track {
  height: 100%;
}
.un_movieSlider .splide__list {
  align-items: center;
}
@media (min-width: 768px) {
  .un_movieSlider .splide__slide {
    width: 57.2916666667vw;
  }
}
@media (max-width: 767.98px) {
  .un_movieSlider .splide__slide {
    width: 84vw;
  }
}
@media (min-width: 768px) {
  .un_movieSlider .splide__slide.is-active .el_movieBtn {
    width: 57.2916666667vw;
  }
}
@media (max-width: 767.98px) {
  .un_movieSlider .splide__slide.is-active .el_movieBtn {
    width: 84vw;
  }
}
.un_movieSlider .splide__slide.is-active .el_movieBtn::after {
  opacity: 1;
}

.un_movieArrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 89.3333333333vw;
  transform: translate(-50%, -80%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .un_movieArrows {
    width: 60.6770833333vw;
  }
}
@media (max-width: 767.98px) {
  .un_movieArrows {
    display: none;
  }
}
.un_movieArrows button {
  position: relative;
  z-index: 1;
  border-radius: 100%;
  width: 8vw;
  height: 8vw;
  transition: background-color 0.2s;
  background-color: #fff;
  pointer-events: auto;
  box-shadow: 0 10px 10px 0 rgba(0, 100, 198, 0.3);
}
@media (min-width: 768px) {
  .un_movieArrows button {
    width: 3.3854166667vw;
    height: 3.3854166667vw;
  }
}
.un_movieArrows button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% - 2px);
  border-top: 1px solid #0b5ba4;
  border-right: 1px solid #0b5ba4;
  width: 1.6vw;
  height: 1.6vw;
  transition: border 0.2s;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (min-width: 768px) {
  .un_movieArrows button::after {
    width: 0.78125vw;
    height: 0.78125vw;
  }
}
.un_movieArrows button.splide__arrow--prev::after {
  content: "";
  left: calc(50% + 2px);
  transform: translate(-50%, -50%) rotate(-135deg);
}
.un_movieArrows button:hover {
  background-color: #0b5ba4;
}
.un_movieArrows button:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.un_movieArrows svg {
  display: none;
}

.un_moviePagination {
  display: flex;
}
@media (min-width: 768px) {
  .un_moviePagination {
    margin-top: 2.2135416667vw;

    gap: 0.78125vw;
  }
}
@media (max-width: 767.98px) {
  .un_moviePagination {
    margin-top: 5.0666666667vw;

    gap: 2.4vw;
  }
}
@media (min-width: 768px) {
  .un_moviePagination li {
    width: 0.5208333333vw;
    height: 0.5208333333vw;
  }
}
@media (max-width: 767.98px) {
  .un_moviePagination li {
    width: 1.8666666667vw;
    height: 1.8666666667vw;
  }
}
.un_moviePagination li button {
  display: block;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  min-height: auto;
  background-color: #bfbfbf;
}
.un_moviePagination li button.is-active {
  background-color: #015db2;
}

.el_movieBtn {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  border-radius: 30px;
  transition: width 0.2s, height 0.2s;
}
.el_movieBtn img {
  width: 100%;
}
@media (min-width: 768px) {
  .el_movieBtn {
    border-radius: 60px;
  }
  .el_movieBtn:hover img {
    transform: scale(1.08);
  }
  .el_movieBtn:hover .playIcon img {
    transform: scale(1);
  }
}
.el_movieBtn .playIcon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none;
}
@media (min-width: 768px) {
  .el_movieBtn .playIcon {
    width: 6.3802083333vw;
    height: 6.3802083333vw;
  }
}
@media (max-width: 767.98px) {
  .el_movieBtn .playIcon {
    width: 15.2vw;
    height: 15.2vw;
  }
}
.el_movieBtn img {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.bl_movie_dest {
  text-align: center;
  color: #2f3133;
  font-weight: bold;
  line-height: 1;
}
@media (min-width: 768px) {
  .bl_movie_dest {
    margin-top: 1.3020833333vw;
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .bl_movie_dest {
    margin-top: 3.7333333333vw;
    font-size: 3.4666666667vw;
  }
}

@media (min-width: 768px) {
  .un_banner {
    margin-top: 8.4635416667vw;
    padding-bottom: 9.1145833333vw;
  }
}
@media (max-width: 767.98px) {
  .un_banner {
    margin-top: 18.9333333333vw;
    padding-bottom: 17.3333333333vw;
  }
}

.un_bannerList {
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .un_bannerList {
    display: flex;
    justify-content: center;
    width: auto;

    gap: 2.0833333333vw;
  }
}
@media (max-width: 767.98px) {
  .un_bannerList {
    width: 70.1333333333vw;
  }
}

.bl_bannerItem {
  transition: opacity 0.2s;
}
@media (min-width: 768px) {
  .bl_bannerItem {
    width: 22.7864583333vw;
  }
}
@media (max-width: 767.98px) {
  .bl_bannerItem {
    width: 100%;
  }
}
.bl_bannerItem:hover {
  opacity: 0.7;
}
.bl_bannerItem + .bl_bannerItem {
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .bl_bannerItem + .bl_bannerItem {
    margin-top: 0;
  }
}

.el_banner_link {
  display: block;
}
/*# sourceMappingURL=top.css.map */