@charset "UTF-8";
:root {
  --vw-sp: 390;
  --primary-color-red: #e60012;
  --primary-color-pink: #f04471;
  --primary-color-orange: #eb6100;
  --sec-padding: 1em 0;
  --sec-margin: 0 auto 1em;
  --con-padding: 1rem 2.1rem;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media (max-width: 500px) {
html {
  font-size: calc(100vw / 37.5);}
}
body {
  color: #000;
  font-size: 1.7rem;
  font-family: 'Noto Sans JP', sans-serif, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, Arial, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  text-align: center;
  padding: 0 !important;
}
section {
  /*変数呼び出し方*/
  margin: var(--sec-margin);
}
section h2 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-color-red);
}
@media (min-width: 500px) {
section h2{
  font-size: 2.5rem;
}
}

.flex {
  display: flex;
}
/*文章注釈*/
.note {
  font-size: .5em;
  padding: var(--con-padding);
  color: #888888;
  line-height: 1.5;
  text-align: start;
}
.noteR{
  text-align: end;
}
/*脚注*/
.footNote {
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0;
}
.center {
  justify-content: center;
}
.boldTxt {
  font-weight: bold;
}
.font10{
  font-size: 1rem;
}
.font15 {
  font-size: 1.5rem;
}
.font20 {
  font-size: 2rem;
}
.font25 {
  font-size: 2.5rem;
}
.font30 {
  font-size: 3rem;
}
.font35 {
  font-size: 3.5rem;
}
.font40 {
  font-size: 4rem;
}
.red {
  color: #e60012;
}
.orange {
  color: #eb6100;
}
.pink {
  color: #f04471;
}
.blue {
  color: #00a0e9;
}
.navy {
  color: #1d2088;
}
/*三角形の矢印*/
.triangleDown {
  clip-path: polygon(0 0, 80% 0, 40% 80%);
  height: calc(tan(60deg)* 15px / 2);
  width: 30px;
  background: var(--primary-color-red);
}
/*棒矢印*/
.stickArrow {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: var(--primary-color-pink);
  clip-path: polygon(0 50%, 15.4% 50%, 15.4% 0, 84.6% 0, 84.6% 50%, 100% 50%, 50% 100%);
  position: relative;
  right: 0;
  left: 0;
  top: 0.7rem;
  margin: 0 1rem;
}
/*下に向かって透過する線の矢印*/
.cpArrows {
  position: relative;
  height: 50px;
  margin-top: 1em;
  margin-bottom: 1em;
}
.cpArrows .cpArrow {
  position: absolute;
  top: 100%;
  left: 45%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  opacity: 0;
}
.cpArrows .cpArrow:before, .cpArrows .cpArrow:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 3px;
  content: '';
  background: #FF0000;
}
.cpArrows .cpArrow:before {
  transform: rotate(30deg) translateX(-39%);
  transform-origin: top left;
}
.cpArrows .cpArrow:after {
  transform: rotate(-30deg) translateX(39%);
  transform-origin: top right;
}
/*一個目の矢印*/
.cpArrows .cpArrowfirst {
  /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s ease-in-out infinite;
}
/*二個目の矢印*/
.cpArrows .cpArrowsecond {
  /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s 1s ease-in-out infinite;
}
@keyframes arrow-move08 {
  /*スタート地点（サンプルは[class:cpArrows]height300pxの35%）*/
  0% {
    top: 40%;
    opacity: 0;
  }
  /*2sの70％（1.7秒）時に不透明になる*/
  70% {
    opacity: 1;
  }
  /*2s（2秒）時に透明になる*/
  100% {
    opacity: 0;
  }
}
/*黄色マーカーライン*/
.underLine {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff00 0%) repeat scroll 0 0;
  display: inline;
}
/*黒色アンダーライン*/
.textUnderLine{
   text-decoration:underline;
}
/*かたまりごと汎用性のあるマージン*/
.wrap{
  margin: 3rem auto;
}
@media (min-width: 500px) {
.wrap{
  margin: 5rem auto;
}
}


/*=== section_アンケート ===*/
/*質問ボックス*/
.formItem{
  color: var(--primary-color-orange);
}
.formItem input + label {
  display: block;
  border: solid 3px #eb6100;
  padding: 1rem 2rem;
  line-height: 2;
  border-radius: 100px;
  text-align: start;
  font-weight: 600;
  cursor: pointer;
  animation: pressOff .1s;
}
.formItem span {
  font-size: 1.4rem;
}
@media (min-width: 500px) {
.formItem span {
  font-size: 20px;}
}
.formItem input + label {
  padding: 25px;
  line-height: 1;
    display: grid;
    }
.formItem .ask {
  font-size: 0.8rem;
}
@media (min-width: 500px) {
.formItem .ask {
  font-size: 12px;}
}
.formItem input {
    display: none;
}
.formItem.active {
  display: block;
}
.formItem input:checked+label {
    background: var(--primary-color-orange);
    color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    animation: press 0.3s;
}
.itemContent {
  padding: var(--con-padding);
}
.itemContent .formItem {
  margin-bottom: 1rem;
}
.arrowImg {
  margin: 2rem auto;
  width: 12rem;
}
.resultTxt {
  color: var(--primary-color-red);
  padding-top: 2rem;
}
.lineh{
  line-height: 1.5;
}

/*=== section_体験0円訴求 ===*/
.trialCta .em {
  color: var(--primary-color-orange);
}
.trialPrice {
  font-size: 3rem;
}
.trialPrice .strong {
  font-size: 7rem;
}
.trialPrice .strong span {
  font-size: 4rem;
}
.textWrap {
  color: var(--primary-color-pink);
  margin: 3rem auto;
}
.textWrap p {
  line-height: 1.2;
}

/*=== section_ホットヨガの効果とは？ ===*/
.effect .strong {
  font-size: 2.4rem;
  color: var(--primary-color-pink);
}
.lavaName{
  color: var(--primary-color-orange);
}
.lavaName .emoji{
  font-size: 3rem;
}
.stickArrows{
  margin: 2rem auto;
  display: block;
}
.stickArrows .stickArrow{
  background: var(--primary-color-red);
}
.dot{
  margin: 3rem auto;
  width: .5rem;
}

/*=== section_LAVAに潜入 ===*/
.lava .noteR{
  text-align: end;
}
.ctaTxt {
  width: 80%;
  margin: 3rem auto 0;
}
.reviewImg{
  padding: var(--con-padding);
}
.reviewImg img:first-child{
  padding: 0 0 2rem;
}
.spMock{
width: 60%;
  margin: 3rem auto 0;
}
.prohibition{
background: var(--primary-color-red);
}
.blinking{
	-webkit-animation:blink .8s ease-in-out infinite alternate;
    -moz-animation:blink .8s ease-in-out infinite alternate;
    animation:blink .8s ease-in-out infinite alternate;
    color: #fff100;
    font-size: 5rem;
    font-weight: bold;
    
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/*=== キャンペーン ===*/
.cp_special_text_wrap {
  position: relative;
}
.cp_plan_note_wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 2.8rem;
  font-size: 0.9rem;
  width: 100%;
  bottom: calc((100vw / var(--vw-sp))* 85);
  text-align: left;
  line-height: 1.5;
}
@media (min-width: 500px){
.cp_plan_note_wrap {
  font-size: 1.25rem;
  padding: 10px 30px;
  bottom: 85px;
  left: 50%;
  }
}
.cp_plan_note_wrap dd {
  padding-left: 1em;
  text-indent: -1em;
}

/*フッター*/
footer{
  background:white;
}
footer nav ul li{
  color: #000000;
}
/*フローティングCTAボタン*/
.cta_follow {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* トランジション設定 */
  opacity: 1;
  transform: translateY(0%);
}
.cta_follow .btn_inner{
  box-sizing: border-box;
}
@media (min-width: 500px) {
.cta_follow{
  width: 500px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  }
}
.cta_follow.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.cta_followw .btn_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 500px) {
.textWrap p{
  font-size: 24px;
}
.effect .strong{
  font-size: 30px;
}
}
@media (min-width: 500px) {
.pcfont15 {
  font-size: 15px;}
.pcfont20 {
  font-size: 20px;}
.pcfont25 {
  font-size: 25px;}
.pcfont30 {
  font-size: 30px;}
.pcfont35 {
  font-size: 35px;}
  .pcfont40 {
  font-size: 40px;} 
  .pcfont45 {
  font-size: 45px;}
}


/***** アニメーション ******/
/*文字縦揺れ */
.moveText {
  -webkit-animation-name: btnAnime02;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: btnAnime02;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
}
@-webkit-keyframes btnAnime02 {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -8px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes btnAnime02 {
  0% {
    -moz-transform: translate(0, 0);
  }
  50% {
    -moz-transform: translate(0, -8px);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}
/*動きの速さをかえたいときは、.swing内の5s(=5秒)の時間を変更 */
.swing {
  /*画像の外側の余白*/
  margin: 8px;
  margin-bottom: 0px;
  /*アニメーション名、動き具合、動きの速さ5s（=5秒）、動きの回数infinite(=無限　3=3回など)
  動きの速さと回数を変更する場合は、2箇所ずつ変更してください*/
  -ms-animation: swing linear 0.4s infinite;
  animation: swing linear 0.4s infinite;
  /*変形の起点、1番目の値はX軸、2番目の値はY軸、3番目の値はZ軸
  起点を変更する場合は2箇所ずつ変更してください。*/
  -ms-transform-origin: center px 0;
  transform-origin: center px 0;
}
/*揺らすアニメーションの設定
設定箇所が2箇所ありますので、変更する場合は両方とも変更してください*/
@-webkit-keyframes swing {
  /*アニメーションの最初の動き*/
  0% {
    /*回転させる（0deg = 0度）*/
    -webkit-transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  90% {
    -webkit-transform: rotate(-5deg);
  }
  /*アニメーションの最後の動き*/
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes swing {
  /*アニメーションの最初の動き*/
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  /*アニメーションの最後の動き*/
  100% {
    transform: rotate(0deg);
  }
}

/*文字の点滅アニメーション*/
/*動きの速さをかえたいときは、 animationの1s(=1秒)の時間を変更 */
.flash {
    animation: flash 1.2s ease infinite alternate;
    display: inline-block;
    justify-content: center;
}
/*設定した時間（初期：1秒）の半分の時に透明になる*/
@keyframes flash {
  50% {
    opacity: 0;
  }
}

/*CTAボタンのアニメーション */
.animate73 {
  -webkit-animation-name: animate73;
  -moz-animation-name: animate73;
  -o-animation-name: animate73;
  animation-name: animate73;
}
.animate73, .a-btnsub73, .a-option73 {
  animation-duration: 1.3s !important;
  -webkit-animation-duration: 1.3s;
  -ms-animation-duration: 1.3s;
  -moz-animation-duration: 1.3s !important;
}
.animate73, .a-option73, .a-btnsub73 {
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  -o-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-moz-keyframes animate73 {
  0% {
    -moz-transform: scale(0.92);
  }
  40% {
    -moz-transform: scale(0.97);
  }
  60% {
    -moz-transform: scale(0.86);
  }
  80% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(0.92);
  }
}
@-o-keyframes animate73 {
  0% {
    -o-transform: scale(0.92);
  }
  40% {
    -o-transform: scale(0.97);
  }
  60% {
    -o-transform: scale(0.86);
  }
  80% {
    -o-transform: scale(1);
  }
  100% {
    -o-transform: scale(0.92);
  }
}
@-webkit-keyframes animate73 {
  0% {
    -webkit-transform: scale(0.92);
  }
  40% {
    -webkit-transform: scale(0.97);
  }
  60% {
    -webkit-transform: scale(0.86);
  }
  80% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.92);
  }
}
@keyframes animate73 {
  0% {
    transform: scale(0.92);
  }
  40% {
    transform: scale(0.97);
  }
  60% {
    transform: scale(0.86);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.92);
  }
}