@charset "UTF-8";
/******************************************************
// その他の変数定義
*******************************************************/
/******************************************************
// mixin定義
*******************************************************/
.p-top {
  width: 95%;
  max-width: 108rem;
  margin-inline: auto;
  max-width: 80.9rem;
  margin-inline: auto;
}
@media screen and (max-width: 1271px) {
  .p-top {
    max-width: 95rem;
    width: 89.5%;
  }
}
@media screen and (max-width: 767px) {
  .p-top {
    max-width: none;
    width: 100%;
  }
}
.p-top__toggle {
  width: fit-content;
  margin-left: auto;
  margin-bottom: 1.3rem;
}
@media screen and (max-width: 767px) {
  .p-top__toggle {
    width: 95%;
    max-width: 108rem;
    margin-inline: auto;
    display: flex;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) and (max-width: 1271px) {
  .p-top__toggle {
    max-width: 95rem;
    width: 89.5%;
  }
}
.p-top__img-wrap {
  overflow: hidden;
  width: 100%;
}
.p-top__img {
  aspect-ratio: 809/463;
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.p-top__description {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-top__description {
    width: 95%;
    max-width: 108rem;
    margin-inline: auto;
  }
}
@media screen and (max-width: 767px) and (max-width: 1271px) {
  .p-top__description {
    max-width: 95rem;
    width: 89.5%;
  }
}

.p-sns-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3rem;
  margin-bottom: 4.3rem;
  margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-sns-share {
    width: 95%;
    max-width: 108rem;
    margin-inline: auto;
    gap: 5.7rem;
    margin-top: 2rem;
    margin-bottom: 7rem;
  }
}
@media screen and (max-width: 767px) and (max-width: 1271px) {
  .p-sns-share {
    max-width: 95rem;
    width: 89.5%;
  }
}
.p-sns-share__text {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0em;
  line-height: 1;
  margin-right: 0.7rem;
}
@media screen and (max-width: 767px) {
  .p-sns-share__text {
    font-size: 2.4rem;
    margin-right: 0;
  }
}
.p-sns-share__icon {
  width: 3.7rem;
  height: 3.7rem;
}
@media screen and (max-width: 767px) {
  .p-sns-share__icon {
    width: 6.9rem;
    height: 6.9rem;
  }
}
.p-sns-share__icon img {
  width: 100%;
  object-fit: contain;
}

.p-youtube {
  background-color: #f3f3f3;
  padding-block: 4rem;
  position: relative;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .p-youtube {
    padding-block: 8rem 7rem;
  }
}
.p-youtube__list-wrap {
  display: none;
}
.p-youtube__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem 2.9rem;
}
@media screen and (max-width: 767px) {
  .p-youtube__list {
    grid-template-columns: 1fr;
    gap: 7rem;
  }
}
.p-youtube__list.p-youtube__list--accordion {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-youtube__list.p-youtube__list--accordion {
    margin-top: 7rem;
  }
}
.p-youtube__thumb {
  position: relative;
}
.p-youtube__item {
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .p-youtube__item:hover {
    opacity: 0.6;
  }
}
@media (hover: hover), (hover: none) {
  .p-youtube__item:active {
    opacity: 0.6;
  }
}
.p-youtube__item img {
  aspect-ratio: 348/199;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.p-youtube__text {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 1.625;
  margin-top: 1rem;
  display: none;
}
@media screen and (max-width: 767px) {
  .p-youtube__text {
    font-size: 2.8rem;
  }
}
.p-youtube.is-active .p-youtube__text {
  display: block;
}
.p-youtube__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6rem;
  height: 6rem;
  background-image: url(../images/common/icon_youtube.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-youtube__icon {
    width: 8rem;
    height: 8rem;
  }
}
.p-youtube__btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 24rem;
  padding-block: 0.5rem;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .p-youtube__btn {
    width: 42rem;
  }
}
.p-youtube__btn .c-link:nth-of-type(2) {
  display: none;
}
.p-youtube__btn.is-active .c-link {
  display: none;
}
.p-youtube__btn.is-active .c-link:nth-of-type(2) {
  display: flex;
}

.p-point {
  border: 1.2rem solid #ebf9a1;
  padding: 2.4rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-point {
    padding: 5.8rem 4.2rem;
    padding-bottom: 2.4rem;
  }
}
.p-point__text {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-point__text {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: 2.8rem;
    letter-spacing: 0em;
    line-height: 1.3571428571;
    text-align: center;
  }
}
.p-point__head {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0em;
  line-height: 1;
  margin-top: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-point__head {
    margin-top: 3.5rem;
    font-size: 4.2rem;
  }
}
.p-point__point {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0em;
  line-height: 1;
  margin-top: 1.6rem;
  color: #9bcf41;
}
@media screen and (max-width: 767px) {
  .p-point__point {
    margin-top: 3rem;
    font-size: 4.2rem;
    text-align: center;
  }
}
.p-point__point span {
  font-family: sans-serif;
  font-size: 3.6rem;
  padding-right: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-point__point span {
    font-size: 6.3rem;
    margin-bottom: 1rem;
  }
}
.p-point__bar {
  background-color: #d6d6d6;
  border-radius: 100vh;
  height: 2rem;
  max-width: 40rem;
  width: 100%;
  margin-block: 1.6rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-point__bar {
    height: 3.5rem;
    max-width: none;
    margin-block: 2.5rem;
  }
}
.p-point__bar-on {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 1;
  line-height: 2rem;
  color: #9bcf41;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ebf9a1;
  border-radius: 100vh;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-point__bar-on {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}
.p-point__goal-point {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-point__goal-point {
    font-size: 2.8rem;
  }
}
.p-point__link {
  margin-top: 2.6rem;
  width: fit-content;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .p-point__link {
    margin-top: 3.4rem;
  }
}

.p-article {
  margin-top: 6.2rem;
}
@media screen and (max-width: 767px) {
  .p-article {
    margin-top: 9rem;
  }
}
.p-article .c-card-contents:nth-of-type(n + 2) {
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .p-article .c-card-contents:nth-of-type(n + 2) {
    margin-top: 11.1rem;
  }
}

.p-sns-head {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 2.625;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-sns-head {
    font-size: 2.4rem;
  }
}

.p-sns {
  margin: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .p-sns {
    gap: 6rem;
    margin-top: 6rem;
  }
}
.p-sns__site {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 1;
  padding: 1.3rem;
  border: 0.1rem solid #222222;
  cursor: pointer;
  transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .p-sns__site:hover {
    color: #9bcf41;
  }
}
@media (hover: hover), (hover: none) {
  .p-sns__site:active {
    color: #9bcf41;
  }
}
@media screen and (max-width: 767px) {
  .p-sns__site {
    font-size: 2.8rem;
    padding: 2rem 3rem;
  }
}
.p-sns__icon img {
  width: 3.7rem;
  min-height: 3.1rem;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .p-sns__icon img {
    width: 6.9rem;
    min-height: 6.1rem;
  }
}

.p-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100%;
  z-index: 9999;
}
.p-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
.p-modal__close {
  position: absolute;
  right: 0;
  top: -1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
  .p-modal__close {
    width: 6rem;
    height: 6rem;
    right: 1rem;
  }
}
.p-modal__close::before, .p-modal__close::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.2rem;
  background-color: #222222;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 767px) {
  .p-modal__close::before, .p-modal__close::after {
    width: 6rem;
    height: 0.3rem;
  }
}
.p-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.p-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.p-modal__contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 79.5rem;
  width: 90%;
}
@media screen and (max-width: 767px) {
  .p-modal__contents {
    width: 100%;
    max-width: none;
  }
}
.p-modal__inner {
  position: relative;
  aspect-ratio: 560/315;
  background-color: #222222;
  width: 100%;
  max-width: calc((100dvh - 12rem) * 1.7777777778);
  max-height: calc(100dvh - 12rem);
  margin-inline: auto;
}
.p-modal__mv {
  width: 100%;
  height: 100%;
}
.p-modal__mv iframe {
  width: 100% !important;
  height: 100% !important;
}

/*# sourceMappingURL=index-ainis-box.css.map */