@charset "UTF-8";
/*
    フォントサイズツール
*/
@media screen and (min-width: 768px) {
  .font-sizes-test {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  .font-sizes-test {
    font-size: 20px;
  }
}

/*
    inline-blockを左右中央配置
    外にflex-centerを使いたくない場合
*/
.pageContents .kv {
  padding: 10.6666666667cqw 0 20.5333333333cqw;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.pageContents .kv > * {
  position: relative;
  z-index: 1;
}
.pageContents .kv__strings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1/1.08;
  pointer-events: none;
  z-index: 0;
}
.pageContents .kv__string {
  position: absolute;
  width: 16cqw;
  height: auto;
  opacity: 0;
  transform: translateX(15px);
  animation: kvStringLoop 3.2s linear infinite;
}
.pageContents .kv__string--1 {
  left: 10.13%;
  top: 13.4%;
}
.pageContents .kv__string--2 {
  left: -5.5%;
  top: 43.2%;
}
.pageContents .kv__string--3 {
  left: 83.2%;
  top: 32.4%;
}
.pageContents .kv__string--4 {
  left: 90.2%;
  top: 54.6%;
}
.pageContents .kv__string--5 {
  left: 3.12%;
  top: 77%;
}
.pageContents .kv__string--6 {
  left: 76.4%;
  top: 78.6%;
}
.pageContents .kv__string--7 {
  left: 22.8%;
  top: 89.7%;
}
.pageContents .kv__hero {
  margin-top: 6.5333333333cqw;
  text-align: center;
}
.pageContents .kv__title {
  width: 100%;
  max-width: 76cqw;
  opacity: 0;
  transform: scale(1.1);
  filter: blur(4px);
  animation: kvTitleReveal 3.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
.pageContents .kv__charaArea {
  margin-top: 10px;
  position: relative;
  pointer-events: none;
}
.pageContents .kv__balloon {
  width: 40.5333333333cqw;
  margin: 0 12% 0 auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 1;
  position: relative;
}
.pageContents .kv__balloon.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pageContents .kv__charaSlider {
  margin-top: -4cqw;
}
.pageContents .kv__charaSlider .slick-track {
  display: flex;
  align-items: flex-end;
}
.pageContents .kv__charaSlider .slick-list {
  overflow: visible;
}
.pageContents .kv__charaItem {
  padding: 0 8cqw;
}
.pageContents .kv__charaItem img {
  display: block;
  width: auto;
  max-width: initial;
  height: 49.7333333333cqw;
}
.pageContents .kv__charaItem img[src*=angel] {
  height: 43.7333333333cqw;
}
.pageContents .kv__charaItem img[src*=queen] {
  height: 49.7333333333cqw;
}
.pageContents .kv__charaItem img[src*=senshi] {
  height: 47.3333333333cqw;
}
.pageContents .kv__charaItem img[src*=lovers] {
  height: 34.9333333333cqw;
}
.pageContents .kv__charaItem img[src*=kamen] {
  height: 33.8666666667cqw;
}
.pageContents .kv__lead {
  margin: 36px 0 0;
  font-size: 3.8666666667cqw;
  font-weight: 700;
  line-height: 1.763;
  text-align: center;
  letter-spacing: -0.02em;
}
.pageContents .kv__meta {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 9.3333333333cqw;
}
.pageContents .kv__metaItem {
  width: 23cqw;
}
.pageContents .kv__cta {
  margin: 8.9333333333cqw 9.7333333333cqw;
  display: grid;
  gap: 5.7333333333cqw;
}
.pageContents .kv__topics {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  gap: 5.4666666667cqw;
}
.pageContents .kv__topic {
  width: 32.3466666667cqw;
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.pageContents .kv__topic--confucius {
  background-image: url("/madoi/img/top/kv-btn-confucius.avif");
}
.pageContents .kv__topic--madoi {
  background-image: url("/madoi/img/top/kv-btn-madoi.avif");
}
.pageContents .madoi-section {
  padding: 0 0 20cqw;
}
.pageContents .madoi-section__inner {
  width: 80.5333333333cqw;
  margin: 0 auto;
}
.pageContents .madoi-section--confucius {
  background: #f6f3f2;
  padding-top: 20cqw;
  padding-bottom: 12.6666666667cqw;
}
.pageContents .madoi-section--confucius .madoi-confucius__visual {
  position: relative;
}
.pageContents .madoi-section--confucius .madoi-confucius__visual img {
  display: block;
}
.pageContents .madoi-section--confucius .madoi-confucius__main {
  width: 28.36cqw;
  margin: 0 auto auto 13.6cqw;
}
.pageContents .madoi-section--confucius .madoi-confucius__word {
  position: absolute;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pageContents .madoi-section--confucius .madoi-confucius__word img {
  width: 100%;
}
.pageContents .madoi-section--confucius .madoi-confucius__word.inview {
  clip-path: inset(0 0 0 0);
}
.pageContents .madoi-section--confucius .madoi-confucius__word--01 {
  top: 1.0666666667cqw;
  left: 70.2666666667cqw;
  width: 13.3cqw;
}
.pageContents .madoi-section--confucius .madoi-confucius__word--02 {
  top: 1.7333333333cqw;
  left: 52.3466666667cqw;
  width: 13.592cqw;
  transition-delay: 0.3s;
}
.pageContents .madoi-section--confucius .madoi-confucius__text {
  margin-top: 6.4cqw;
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  letter-spacing: -0.02em;
}
.pageContents .madoi-section--confucius .madoi-confucius__cta {
  margin-top: 8.2666666667cqw;
}
.pageContents .madoi-section--note {
  background-color: white;
  padding-top: 17.6cqw;
  padding-bottom: 16.8cqw;
  position: relative;
  overflow: hidden;
}
.pageContents .madoi-section--note .madoi-note__strings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.pageContents .madoi-section--note .madoi-note__string {
  position: absolute;
  width: 16cqw;
  height: auto;
  opacity: 0;
  transform: translateX(15px);
  animation: kvStringLoop 3.2s linear infinite;
}
.pageContents .madoi-section--note .madoi-note__string--1 {
  width: 12.4cqw;
  left: 12%;
  top: 3%;
}
.pageContents .madoi-section--note .madoi-note__string--2 {
  width: 19.8666666667cqw;
  left: -6%;
  top: 16%;
}
.pageContents .madoi-section--note .madoi-note__string--3 {
  left: 62%;
  top: 2%;
}
.pageContents .madoi-section--note .madoi-note__string--4 {
  width: 12.4cqw;
  left: 86%;
  top: 8%;
}
.pageContents .madoi-section--note .madoi-note__string--5 {
  width: 12.4cqw;
  left: -8%;
  top: 41%;
}
.pageContents .madoi-section--note .madoi-note__string--6 {
  left: 90%;
  top: 39%;
}
.pageContents .madoi-section--note .madoi-note__string--7 {
  left: 16%;
  top: 73%;
}
.pageContents .madoi-section--note .madoi-note__string--8 {
  left: 84%;
  top: 74%;
}
.pageContents .madoi-section--note .madoi-note__string--9 {
  left: -5%;
  top: 90%;
}
.pageContents .madoi-section--note .madoi-note__string--10 {
  width: 12.4cqw;
  left: 91%;
  top: 90%;
}
.pageContents .madoi-section--note .madoi-section__inner {
  position: relative;
  z-index: 1;
}
.pageContents .madoi-section--note .madoi-note__title {
  margin: 0;
  font-size: 7.8666666667cqw;
  font-weight: 700;
  line-height: 1.35;
  color: #1a3f7d;
  text-align: center;
  letter-spacing: -0.02em;
}
.pageContents .madoi-section--note .madoi-note__lead,
.pageContents .madoi-section--note .madoi-note__body {
  margin: 10cqw 0 0;
  font-size: 3.8666666667cqw;
  font-weight: 400;
  line-height: 1.8;
  color: #1a3f7d;
  text-align: center;
  letter-spacing: -0.01em;
}
.pageContents .madoi-section--note .madoi-note__lead strong,
.pageContents .madoi-section--note .madoi-note__body strong {
  font-weight: 700;
}
.pageContents .madoi-section--benefit {
  background: #f6f3f2;
  padding-top: 12cqw;
  padding-bottom: 12.6666666667cqw;
}
.pageContents .madoi-section--benefit .madoi-benefit__title {
  margin: 0;
  font-size: 8cqw;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.02em;
}
.pageContents .madoi-section--benefit .madoi-benefit__list {
  margin: 9.0666666667cqw 0 0;
  padding: 0;
  list-style: none;
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}
.pageContents .madoi-section--benefit .madoi-benefit__balloon {
  width: 45.3333333333cqw;
  margin: 5.8666666667cqw auto 0;
  animation: madoiBalloonFloat 3.2s ease-in-out infinite;
}
.pageContents .madoi-section--benefit .madoi-benefit__cta {
  margin-top: 7.4666666667cqw;
}
.pageContents .madoi-section--characters {
  background-color: white;
  padding-top: 12.6666666667cqw;
  padding-bottom: 13.3333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__title {
  margin: 0;
  font-size: 8.2666666667cqw;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.02em;
}
.pageContents .madoi-section--characters .madoi-characters__thumbs {
  margin: 8.2666666667cqw 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2.1333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__thumbs li {
  width: 14.9333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__thumbs li:nth-child(3) {
  width: 18.9333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__thumbs li:nth-child(4) {
  width: 10.9333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__thumbs img {
  display: block;
  width: 100%;
  height: auto;
}
.pageContents .madoi-section--characters .madoi-characters__cards {
  margin-top: 11.4666666667cqw;
  display: grid;
  gap: 6.9333333333cqw;
}
.pageContents .madoi-section--characters .madoi-character-card {
  aspect-ratio: 604/880;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: #f6f3f2;
  border-radius: 6.9333333333cqw;
  padding: 6.4cqw 5.8666666667cqw 13.7333333333cqw;
  text-align: center;
}
.pageContents .madoi-section--characters .madoi-character-card__image {
  display: block;
  width: 52cqw;
  height: auto;
  margin: 0 auto;
}
.pageContents .madoi-section--characters .madoi-character-card__image.chara-angel {
  width: 45.3333333333cqw;
}
.pageContents .madoi-section--characters .madoi-character-card__image.chara-senshi {
  width: 52.5333333333cqw;
  transform: translateX(4cqw);
}
.pageContents .madoi-section--characters .madoi-character-card__image.chara-lovers {
  width: 70.4cqw;
}
.pageContents .madoi-section--characters .madoi-character-card__image.chara-queen {
  width: 41.0666666667cqw;
  transform: translateX(4cqw);
}
.pageContents .madoi-section--characters .madoi-character-card__image.chara-kamen {
  width: 61.8666666667cqw;
}
.pageContents .madoi-section--characters .madoi-character-card__name {
  margin: 4cqw 0 0;
  font-size: 6.36cqw;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.pageContents .madoi-section--characters .madoi-character-card__lead {
  margin: 2.1333333333cqw 0 0;
  font-size: 3.8666666667cqw;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.pageContents .madoi-section--characters .madoi-character-card__more {
  position: relative;
  display: block;
  width: 10.4cqw;
  height: 10.4cqw;
  margin: 6cqw auto 0;
  border-radius: 50%;
  background: #1a3f7d;
}
.pageContents .madoi-section--characters .madoi-character-card__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 1.3333333333cqw 0 1.3333333333cqw 1.8666666667cqw;
  border-color: transparent transparent transparent #fff;
}
.pageContents .madoi-section--characters .madoi-characters__ctaBlock {
  margin-top: 10.9333333333cqw;
}
.pageContents .madoi-section--characters .madoi-characters__advisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
}
.pageContents .madoi-section--characters .madoi-characters__advisorImage {
  display: block;
  width: 63.4666666667cqw;
  height: auto;
}
.pageContents .madoi-section--characters .madoi-characters__cta {
  margin-top: 6.4cqw;
}

@keyframes kvTitleReveal {
  from {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@keyframes kvStringLoop {
  0% {
    opacity: 0;
    transform: translate3d(15px, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -5px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-15px, 0, 0);
  }
}
@keyframes madoiBalloonFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}/*# sourceMappingURL=index.css.map */