/*------------------------------
header
------------------------------*/
header {
  padding: 1.6% 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  header {
    height: 60px;
    display: flex;
    align-items: center;
  }
}

.header-inner {
  width: 91%;
  margin: 0 auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .header-logo {
    margin: 0;
    width: 188px;
  }
}

.header-btn {
  position: absolute;
  cursor: pointer;
  top: 50%;
  transform: translate(50%, -50%);
}

.header-btn1 {
  aspect-ratio: 177/36;
  right: 31%;
  width: 15%;
}

.header-btn2 {
  aspect-ratio: 240/36;
  right: 12%;
  width: 20%;
}

/*------------------------------
mv
------------------------------*/
#main .maniVis {
  max-width: unset;
  width: 105.6%;
  transform: translateX(-5.3%);
}

/*------------------------------
bigin
------------------------------*/
#bigin {
  padding: 0 0 30px 0;
}
#bigin p.note {
  text-align: center;
  font-size: 20px;
}

/*------------------------------
about
------------------------------*/
.about h2 span {
  display: block;
  width: 74%;
  margin: 0 auto;
}
.about-heading p {
  margin-top: 2.7%;
}

.about-profile {
  margin-top: 2.7%;
}

.about-method {
  padding: 4% 0;
}

.about-method-list {
  margin-top: 4%;
  display: flex;
  flex-wrap: wrap;
}
.about-method-list li {
  width: 47.5%;
}
.about-method-list li:nth-child(2n) {
  margin-left: 5%;
}
.about-method-list li:nth-child(n+3) {
  margin-top: 5%;
}

@media screen and (min-width: 769px) {
  #about .about2 {
    transform: translateX(-24.5%);
    width: min(1215px, 121.5vw);
    margin-left: 50%;
    transform: translateX(-61.5%);
  }
}
/*------------------------------
review
------------------------------*/
.review {
  padding-top: 75px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .review {
    padding-top: 30px;
  }
}

.reviewBg {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.review-heading h3 {
  width: 38%;
  margin: 0 auto;
}
.review-heading p {
  margin-top: 30px;
}

.review-img {
  width: 56%;
  margin: 45px auto;
}

/*------------------------------
access
------------------------------*/
.access-info {
  position: relative;
}
.access-info iframe {
  position: absolute;
  top: 59%;
  left: 0%;
  transform: translate(0%, -50%);
  width: 55%;
  aspect-ratio: 177/114;
  height: auto;
}
@media screen and (max-width: 768px) {
  .access-info iframe {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}

/*------------------------------
voice
------------------------------*/
#voice .voice_cta {
  position: absolute;
  cursor: pointer;
  top: 63%;
  transform: translate(-50%, -50%);
  aspect-ratio: 182/57;
  left: 50%;
  width: 80%;
}

/*------------------------------
tokucho
------------------------------*/
#tokutyou .toku_cta {
  position: absolute;
  cursor: pointer;
  top: 68%;
  transform: translate(-50%, -50%);
}
#tokutyou .toku_cta.toku_cta1 {
  aspect-ratio: 182/57;
  left: 22%;
  width: 46%;
}
#tokutyou .toku_cta.toku_cta2 {
  aspect-ratio: 206/57;
  left: 75%;
  width: 52%;
}

/*------------------------------
price
------------------------------*/
#price .priceBody2 {
  overflow: hidden;
}
#price .price1 {
  transform: translateX(-7%);
  margin-top: -13%;
}
@media screen and (max-width: 768px) {
  #price .price1 {
    margin-top: -26%;
  }
}
@media screen and (min-width: 769px) {
  #price .priceText {
    width: auto;
    height: min(30px, 3.3333333333vw);
  }
}
@media screen and (max-width: 768px) {
  #price .priceText {
    height: 2.7842227378vw;
    width: auto;
  }
}
#price .price_cta {
  position: absolute;
  cursor: pointer;
  top: 68%;
  transform: translate(-50%, -50%);
}
#price .price_cta.price_cta1 {
  aspect-ratio: 182/57;
  left: 22%;
  width: 43%;
}
#price .price_cta.price_cta2 {
  aspect-ratio: 206/57;
  left: 75%;
  width: 50%;
}
@media screen and (min-width: 769px) {
  #price .price7 {
    transform: translateX(-12%);
    width: 106%;
  }
  #price .price10 {
    transform: translateX(7%);
    width: 95%;
  }
}
@media screen and (max-width: 768px) {
  #price {
    padding: 0;
  }
  #price .price11 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  #price .price7,
#price .price11 {
    margin-top: 10%;
  }
}

/*------------------------------
freeex
------------------------------*/
#freeex {
  background: #faeaf2;
}
#freeex .freeex_cta {
  position: absolute;
  cursor: pointer;
  aspect-ratio: 274/37;
  top: 69%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 80%;
}

/*------------------------------
cta_sp
------------------------------*/
#main .cta_sp,
#content .cta_sp {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#main .cta_sp .spCta,
#content .cta_sp .spCta {
  position: absolute;
  cursor: pointer;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 80%;
}
#main .cta_sp .spCta.spCta1,
#content .cta_sp .spCta.spCta1 {
  aspect-ratio: 257/63;
  width: 90%;
  top: 22%;
}
#main .cta_sp .spCta.spCta2,
#content .cta_sp .spCta.spCta2 {
  aspect-ratio: 258/74;
  width: 90%;
  top: 73%;
}

/*------------------------------
common
------------------------------*/
@media (hover: hover) {
  .c_hover:hover {
    opacity: 0.7;
  }
}

@media (hover: hover) {
  .c_hover0:hover {
    filter: unset;
  }
}

.c_relative {
  position: relative;
}

.c_mtb {
  margin: 5% 0;
}

.c_mt {
  margin-top: 5%;
}

.c_mt2 {
  margin-top: 10%;
}

.c_mb {
  margin-bottom: 5%;
}

.c_mb2 {
  margin-bottom: 10%;
}

.c_flex {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  h2.h2__pat1 span {
    width: 100%;
    height: 100%;
    position: relative;
  }
  h2.h2__pat1 span img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70%;
  }
}
/*------------------------------

------------------------------*/
@media screen and (max-width: 768px) {
  #content h2 {
    padding: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#content .more a,
#trainer .in-box .profile h4 {
  background: #ca2f7e;
}

/*------------------------------
xxx
------------------------------*/
/*------------------------------
xxx
------------------------------*/
/*------------------------------
xxx
------------------------------*/
/*------------------------------
xxx
------------------------------*/