.l-content {
  --headingFont: "Zen Maru Gothic", sans-serif;
  --bodyFont: "Noto Sans JP", sans-serif;
  --primeColor: #e60012;
  --transitionDuration: .3s;
  font-family: var(--bodyFont);
  background-image: url("../images/sp/202603/bg-main.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .l-content {
    background-image: url("../images/pc/202603/bg-main.png");
    background-size: 1900px auto;
  }
}
.l-content__inner {
  --paddingHorizon: 20px;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--paddingHorizon);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .l-content__inner {
    --paddingHorizon: 120px;
  }
}
.l-content sup {
  font-size: 0.75em;
  vertical-align: super;
}

.l-column {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.l-column__item {
  width: 100%;
}

.c-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1010;
  display: none;
}
.c-overlay__inner {
  --width: 90%;
  width: var(--width);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (min-width: 768px) {
  .c-overlay__inner {
    --width: 70%;
  }
}
.c-overlay__inner iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}
.c-overlay__close {
  position: absolute;
  top: 0;
  right: 0;
  translate: 0 -100%;
  display: block;
  width: 30px;
  aspect-ratio: 1/1;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .c-overlay__close {
    width: 60px;
  }
}
.c-overlay__close::before, .c-overlay__close::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
}
.c-overlay__close::before {
  rotate: 30deg;
}
.c-overlay__close::after {
  rotate: -30deg;
}
.c-overlay__close span {
  display: none;
}

.c-heading {
  --fontSize: 2.4rem;
  --marginBottom: 10px;
  text-align: center;
  font-family: var(--headingFont);
  font-size: var(--fontSize);
  color: var(--primeColor);
}
@media screen and (min-width: 768px) {
  .c-heading {
    --fontSize: 2.6rem;
    --marginBottom: 5px;
  }
}
.c-heading::before {
  content: attr(data-sub);
  display: block;
  width: 4em;
  margin: 0 auto;
  padding: 0.15em 0;
  font-size: 0.625em;
  color: #fff;
  line-height: 1;
  background-color: var(--primeColor);
  border-radius: 5px;
  margin-bottom: var(--marginBottom);
}

.p-mv {
  --paddingTop: 15px;
  --paddingBottom: 30px;
  --paddingHorizon: 10px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--paddingTop) var(--paddingHorizon) var(--paddingBottom);
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-mv {
    --paddingTop: 30px;
    --paddingBottom: 25px;
    --paddingHorizon: 55px;
  }
}
.p-mv__heading {
  --fontSize: 3.6rem;
  font-family: var(--headingFont);
  font-size: var(--fontSize);
  color: var(--primeColor);
}
@media screen and (max-width: 767px) {
  .p-mv__heading {
    width: fit-content;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .p-mv__heading {
    --fontSize: 7.2rem;
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 960px) {
  .p-mv__heading {
    --fontSize: clamp(6rem, calc(72 / 960 * 100vw), 7.2rem);
  }
}
.p-mv__heading span {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-mv__heading span {
    translate: 0.25em 0;
  }
}
.p-mv__heading img {
  --width: 152px;
  --marginTop: 25px;
  width: var(--width);
  margin-top: var(--marginTop);
  margin-left: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .p-mv__heading img {
    margin-right: 20px;
  }
}
@media screen and (min-width: 768px) {
  .p-mv__heading img {
    --width: 304px;
    --marginTop: 40px;
    margin-right: auto;
  }
}
.p-mv__picture, .p-mv__mark {
  position: absolute;
}
.p-mv__picture {
  --width: 182px;
  --top: 61px;
  --left: 10px;
  display: block;
  width: var(--width);
  aspect-ratio: 384/647;
  top: var(--top);
  left: var(--left);
}
@media screen and (min-width: 768px) {
  .p-mv__picture {
    --width: 196px;
    --top: 65px;
    --left: 50px;
  }
}
@media (min-width: 768px) and (max-width: 960px) {
  .p-mv__picture {
    --width: calc(196 / 960 * 100%);
  }
}
.p-mv__mark {
  --width: 105px;
  --bottom: calc(350 / 750 * 100vw);
  --right: 20px;
  width: var(--width);
  aspect-ratio: 1/1;
  bottom: var(--bottom);
  right: var(--right);
}
@media screen and (min-width: 768px) {
  .p-mv__mark {
    --width: 160px;
    --bottom: 120px;
    --right: 75px;
  }
}
@media (min-width: 768px) and (max-width: 960px) {
  .p-mv__mark {
    --width: calc(160 / 960 * 100%);
  }
}
.p-mv__text {
  --marginTop: calc(540 / 750 * 100vw);
  font-family: var(--headingFont);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px #fff;
  margin-top: var(--marginTop);
}
@media screen and (min-width: 768px) {
  .p-mv__text {
    --marginTop: 140px;
  }
}

.p-efficacy {
  --paddingVertical: 15px;
  --paddingHorizon: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  box-shadow: 0px 0px 14.4px 1.6px rgba(0, 0, 0, 0.2);
  padding: 0 var(--paddingHorizon);
}
@media screen and (min-width: 768px) {
  .p-efficacy {
    --paddingVertical: 35px;
    --paddingHorizon: 35px;
  }
}
.p-efficacy__heading {
  --fontSize: 1.8rem;
  font-family: var(--headingFont);
  text-align: center;
  font-size: var(--fontSize);
  position: relative;
  padding: var(--paddingVertical) 0;
}
@media screen and (min-width: 768px) {
  .p-efficacy__heading {
    --fontSize: 2rem;
  }
}
.p-efficacy__heading::after {
  content: "";
  display: block;
  width: 15px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  rotate: 180deg;
  transition: rotate var(--transitionDuration);
  background-image: url("../images/common/202603/icon-arrow_01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.p-efficacy__heading--pencil {
  padding-bottom: 0;
}
.p-efficacy__heading--pencil::after {
  translate: 0 calc(-50% + var(--paddingVertical) / 2);
}
.p-efficacy__heading.is-open {
  padding: var(--paddingVertical) 0 0;
}
.p-efficacy__heading.is-open::after {
  rotate: 0deg;
  translate: 0 calc(-50% + var(--paddingVertical) / 2);
}
.p-efficacy__heading[tabindex] {
  cursor: pointer;
  transition: opacity var(--transitionDuration);
}
@media (hover: hover) and (pointer: fine) {
  .p-efficacy__heading[tabindex] {
    opacity: 1;
  }
  .p-efficacy__heading[tabindex]:hover {
    opacity: 0.7;
  }
}
.p-efficacy__heading span {
  position: relative;
}
.p-efficacy__heading span::before {
  content: "";
  width: 35px;
  aspect-ratio: 138/132;
  position: absolute;
  top: 50%;
  left: 0;
  translate: calc(-100% - 0.5em) -50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .p-efficacy__heading span::before {
    width: 32px;
  }
}
.p-efficacy__heading.p-efficacy__heading--pencil span::before {
  background-image: url("../images/common/202603/icon-pencil.png");
}
.p-efficacy__heading.p-efficacy__heading--intestines_01 span::before {
  background-image: url("../images/common/202603/icon-intestines_01.png");
}
.p-efficacy__heading.p-efficacy__heading--capsule span::before {
  background-image: url("../images/common/202603/icon-capsule.png");
}
.p-efficacy__heading.p-efficacy__heading--fungus span::before {
  background-image: url("../images/common/202603/icon-fungus.png");
}
.p-efficacy__heading.p-efficacy__heading--stomach span::before {
  background-image: url("../images/common/202603/icon-stomach.png");
}
.p-efficacy__heading.p-efficacy__heading--intestines_02 span::before {
  background-image: url("../images/common/202603/icon-intestines_02.png");
}
.p-efficacy__accordion {
  max-height: var(--accordion-height, 0);
  overflow: hidden;
  transition: max-height var(--transitionDuration) ease-out;
}
.p-efficacy__content {
  padding-bottom: var(--paddingVertical);
}
.p-efficacy__inner {
  border-top: 2px solid var(--primeColor);
  margin-top: 15px;
  padding-top: 15px;
}
@media screen and (min-width: 768px) {
  .p-efficacy__inner {
    padding-top: 20px;
  }
}
.p-efficacy__text {
  font-size: 1.4rem;
}
.p-efficacy__text + .p-efficacy__text {
  margin-top: 0.5em;
}
.p-efficacy__text--label {
  font-family: var(--headingFont);
  font-size: 1.6rem;
}
.p-efficacy__text--large {
  font-size: 1.6rem;
}
.p-efficacy__label {
  font-size: 1.7rem;
  text-align: center;
  color: var(--primeColor);
}
@media screen and (min-width: 768px) {
  .p-efficacy__label {
    font-size: 1.6rem;
  }
}
.p-efficacy__image-list, .p-efficacy__image--stomach {
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .p-efficacy__image-list, .p-efficacy__image--stomach {
    margin-top: 35px;
  }
  .p-efficacy__image-list + p, .p-efficacy__image--stomach + p {
    margin-top: 25px;
  }
}
.p-efficacy__image-list {
  --size: calc(335 / 920 * 100%);
}
@media screen and (min-width: 768px) {
  .p-efficacy__image-list {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 100px;
    margin-top: 35px;
  }
}
.p-efficacy__image {
  margin: 0 auto;
  width: 128px;
}
@media screen and (min-width: 768px) {
  .p-efficacy__image {
    margin: 0;
    width: var(--size);
    text-align: center;
  }
  .p-efficacy__image img {
    width: 62.6865671642%;
  }
}
.p-efficacy__graph {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-efficacy__graph {
    width: var(--size);
  }
}
.p-efficacy__graph::before, .p-efficacy__graph::after {
  content: "";
  display: block;
  position: absolute;
  left: 25.8%;
  height: 11.5%;
}
.p-efficacy__graph::before {
  top: 39.8%;
  background-color: #aeaeae;
}
.p-efficacy__graph::after {
  background-color: var(--primeColor);
  top: 62%;
  height: 11.5%;
}
.p-efficacy__graph + .p-efficacy__text {
  margin-top: 15px;
}
.p-efficacy .p-efficacy__graph--intestines_01::before {
  content: none;
}
.p-efficacy .p-efficacy__graph--intestines_01::after {
  width: 61%;
  opacity: 0;
}
.p-efficacy .p-efficacy__graph--capsule::before {
  width: 20%;
}
.p-efficacy .p-efficacy__graph--capsule::after {
  width: 20%;
}
.p-efficacy .p-efficacy__graph--fungus::before {
  width: 56.8%;
}
.p-efficacy .p-efficacy__graph--fungus::after {
  width: 56.8%;
}
.p-efficacy .p-efficacy__graph--intestines_02::before {
  width: 56.8%;
}
.p-efficacy .p-efficacy__graph--intestines_02::after {
  width: 56.5%;
}
.p-efficacy__accordion.is-start .p-efficacy__graph--intestines_01::after {
  opacity: 1;
  transition: opacity 8s ease 0.2s;
}
.p-efficacy__accordion.is-start .p-efficacy__graph--capsule::after {
  width: 59.2%;
  transition: width 6s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}
.p-efficacy__accordion.is-start .p-efficacy__graph--fungus::after {
  width: 10.8%;
  transition: width 6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.p-efficacy__accordion.is-start .p-efficacy__graph--intestines_02::after {
  width: 38.1%;
  transition: width 6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.p-yakult-detail {
  --negative: -80px;
  --paddingTop: 35px;
  margin-top: var(--negative);
  padding-top: calc(var(--negative) * -1 + var(--paddingTop));
  background-image: url("../images/sp/202603/bg-wave_01.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .p-yakult-detail {
    --negative: -120px;
    --paddingTop: 50px;
    background-image: url("../images/pc/202603/bg-wave_01.png");
    background-size: cover;
  }
}
.p-yakult-detail__heading {
  --fontSize: 2.4rem;
  font-family: var(--headingFont);
  font-size: var(--fontSize);
  color: var(--primeColor);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-yakult-detail__heading {
    --fontSize: 2.6rem;
  }
}
.p-yakult-detail__heading > span {
  font-size: 0.75em;
  display: block;
}
.p-yakult-detail__inner {
  --paddingHorizon: 10px;
  --marginTop: 50px;
  --columnGap: 20px;
  width: 100%;
  max-width: 960px;
  margin: var(--marginTop) auto 0;
  padding: 0 var(--paddingHorizon);
  display: flex;
  justify-content: space-between;
  column-gap: var(--columnGap);
}
@media screen and (min-width: 768px) {
  .p-yakult-detail__inner {
    --paddingHorizon: 40px;
    --marginTop: 65px;
    --columnGap: 40px;
    justify-content: center;
  }
}
.p-yakult-detail__image {
  --width: 167px;
  position: relative;
  width: var(--width);
  padding-top: 15px;
}
@media screen and (min-width: 768px) {
  .p-yakult-detail__image {
    --width: 184px;
  }
}
.p-yakult-detail__image img {
  position: relative;
  z-index: 1;
}
.p-yakult-detail__image figcaption {
  --width: 75px;
  --fontSize: 1.4rem;
  --translate: 15% -50%;
  position: absolute;
  top: 0;
  right: 0;
  translate: var(--translate);
  width: var(--width);
  aspect-ratio: 1/1;
  background-color: var(--primeColor);
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--headingFont);
  font-size: var(--fontSize);
  font-weight: 500;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-yakult-detail__image figcaption {
    --width: 94px;
    --fontSize: 1.8rem;
    --translate: 30% -50%;
  }
}
.p-yakult-detail__image figcaption span {
  translate: 0 -0.2em;
}
.p-yakult-detail__image figcaption strong {
  font-weight: bold;
  font-size: 2.5714285714em;
}
.p-yakult-detail__component {
  --fontSize: 1.4rem;
  --paddingLeft: 7px;
  font-size: var(--fontSize);
  width: 50%;
  padding-left: var(--paddingLeft);
}
@media screen and (min-width: 768px) {
  .p-yakult-detail__component {
    --fontSize: 1.6rem;
    --paddingLeft: 40px;
  }
}
.p-yakult-detail__component > dt {
  font-weight: bold;
}
.p-yakult-detail__component > dd + dt {
  margin-top: 0.5em;
}

.p-store {
  --marginTop: 60px;
  margin-top: var(--marginTop);
}
@media screen and (min-width: 768px) {
  .p-store {
    --marginTop: 80px;
  }
}
.p-store__heading {
  --fontSize: 2rem;
  font-family: var(--headingFont);
  font-size: var(--fontSize);
  font-weight: bold;
  color: var(--primeColor);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-store__heading {
    --fontSize: 2.6rem;
  }
}
.p-store__image {
  --paddingHorizon: 20px;
  width: 100%;
  max-width: 1240px;
  padding: 0 var(--paddingHorizon);
  margin: 0 auto;
}

.p-cm {
  --paddingTop: 30px;
  --paddingBottom: 45px;
  margin-top: 45px;
  padding-top: var(--paddingTop);
  padding-bottom: var(--paddingBottom);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-cm {
    --paddingTop: 75px;
    --paddingBottom: 95px;
  }
}
.p-cm::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 100%;
  translate: -50% 0;
  background-image: url("../images/sp/202603/bg-wave_02.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .p-cm::after {
    background-image: url("../images/pc/202603/bg-wave_02.png");
  }
}
.p-cm__inner {
  position: relative;
  z-index: 1;
}
.p-cm__play {
  --marginTop: 15px;
  display: block;
  width: 100%;
  max-width: 480px;
  margin: var(--marginTop) auto 0;
  padding: 0 20px;
  cursor: pointer;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-cm__play {
    --marginTop: 30px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-cm__play .p-cm__title::before {
    transform: rotateZ(0deg);
    transition: transform var(--transitionDuration);
  }
  .p-cm__play:hover .p-cm__title::before {
    transform: rotateZ(360deg);
  }
}
.p-cm__title {
  --fontSize: 1.4rem;
  position: absolute;
  bottom: 11.9402985075%;
  left: 11.9402985075%;
  display: flex;
  align-items: center;
  column-gap: 10px;
  color: #fff;
  font-size: var(--fontSize);
  font-weight: bold;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-cm__title {
    --fontSize: 1.8rem;
  }
}
.p-cm__title::before {
  content: "";
  height: 2lh;
  aspect-ratio: 1/1;
  background-image: url("../images/common/202603/icon-movie_play.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.p-faq__list {
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
  margin: 30px auto 0;
}
.p-faq__item {
  --paddingVertical: 15px;
}
@media screen and (min-width: 768px) {
  .p-faq__item {
    --paddingVertical: 20px;
  }
}
.p-faq__item > dd {
  max-height: var(--accordion-height, 0);
  overflow: hidden;
  transition: max-height var(--transitionDuration) ease-out;
}
.p-faq__question {
  cursor: pointer;
  padding: var(--paddingVertical) 0;
  font-family: var(--headingFont);
  font-size: 1.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  column-gap: 1em;
  padding-right: 1em;
  position: relative;
  border-bottom: 2px solid var(--primeColor);
}
.p-faq__question::before {
  content: "Q";
  color: var(--primeColor);
  font-size: 1.6666666667em;
}
.p-faq__question::after {
  content: "";
  display: block;
  width: 15px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  rotate: 180deg;
  transition: rotate var(--transitionDuration);
  background-image: url("../images/common/202603/icon-arrow_01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.p-faq__question.is-open::after {
  rotate: 0deg;
  translate: 0 calc(-50% + var(--paddingVertical) / 2);
}
.p-faq__answer {
  padding: var(--paddingVertical) 0;
  font-size: 1.8rem;
}
.p-faq__answer > :first-child {
  margin-top: 0;
}
.p-faq__answer p {
  margin: 1em 0;
}
.p-faq__answer ol {
  counter-reset: num;
  margin: 1em 0;
}
.p-faq__answer ol > li {
  counter-increment: num;
  display: flex;
}
.p-faq__answer ol > li::before {
  content: counter(num) ".";
}

.p-other {
  --marginTop: 35px;
  --paddingTop: 25px;
  margin-top: var(--marginTop);
  padding-top: var(--paddingTop);
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-other {
    --marginTop: 90px;
    --paddingTop: 65px;
  }
}
.p-other::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 100%;
  translate: -50% 0;
  background-image: url("../images/sp/202603/bg-wave_02.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .p-other::after {
    background-image: url("../images/pc/202603/bg-wave_02.png");
  }
}
.p-other__inner {
  position: relative;
  z-index: 1;
}
.p-other__list {
  --marginTop: 20px;
  --paddingBottom: 35px;
  max-width: 1250px;
  width: 100%;
  margin: var(--marginTop) auto 0;
  padding: 0 25px var(--paddingBottom);
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
  column-gap: 100px;
}
@media screen and (min-width: 768px) {
  .p-other__list {
    --marginTop: 55px;
    --paddingBottom: 196px;
  }
}
.p-other__list > li {
  --width: 100%;
  width: var(--width);
}
@media screen and (min-width: 768px) {
  .p-other__list > li {
    --width: 330px;
  }
}

.footer {
  --marginTop: 60px;
  margin-top: var(--marginTop);
}
@media screen and (min-width: 768px) {
  .footer {
    --marginTop: 170px;
  }
}

@media screen and (max-width: 767px) {
  .c-slide-anime {
    opacity: 0;
    translate: 0 100px;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s, translate 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  .c-slide-anime.is-start {
    translate: 0 0;
    opacity: 1;
    pointer-events: all;
  }
}