@font-face {
    font-family: 'Adventures Unlimited Script';
    src: url('../font/AdventuresUnlimitedScript.woff') format('woff'), /* Adjust the path and format as needed */
         url('../font/AdventuresUnlimitedScript.woff2') format('woff2'); /* Adjust the path and format as needed */
    font-weight: normal;
    font-style: normal;
  }
.display-hide{
    display: none;
}
.display-block{
    display: block;
}
.text-ele-mob{
    display: none;
}
.text-ele-disk{
    display: block;
}
/* shadow */
.shadow-white{
    box-shadow: 0px 0px 15px rgb(255, 255, 255, 0.8);
}
.shadow-box-nav{
    box-shadow: -4px -3px 8px 0px #fff, #FFB5B5 3px 3px 7px 2px;
    transition: box-shadow 0.3s ease-in-out;
}
.shadow-box-nav:hover{
    box-shadow: #FFA284 4px 4px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    /* background-color: #FCE8EA; */
}

.margint100{
    margin-top: 100px;
}
.marginl100{
    margin-left: 100px;
}
.marginr100{
    margin-right: 100px;
}
.marginl140{
    margin-left: 120px;
}
.marginr140{
    margin-right: 120px;
}
.ml--15{
    margin-left: -15px;
}
.ml--20{
    margin-left: -20px;
}
.mt--56{
    margin-top: -39px !important
}
.break-line-40{
    line-height: 40px;
}
.break-line-50{
    line-height: 50px;
}
.break-line-55{
    line-height: 55px;
}
.letter-space-5{
    letter-spacing: 5px;
}
.letter-space-10{
    letter-spacing: 10px !important;
}
/* navbar */
.navbar{
    margin-bottom: 50px;
    padding-left: 40px;
    padding-right: 40px;
}
.static-btn{
    background: url('../img/btn-upload.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.3s ease-in-out;
    width: 520px;
    height: 90px;
}

  /* Change image on hover */
.static-btn:hover {
    background: url('../img/btn-upload02.webp');
    transition: background 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.shadow-red {
    box-shadow: 0 4px 6px -1px #f46f7b;
  }
/* .main::before {
  background-image: url('../img/bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  position: absolute;
  z-index: 1;
  width: 33%;
  content: '';
  display: block;
} */
.bg img {
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
}
.bg .icon {
  width: 27%;
  height: auto;
  top: 50%;
}
.bg_1 .icon {
  width: 19%;
  height: auto;
  top: 33%;
  right: 140px;
}
.bg_1 img {
  position: fixed;
  top: 0;
  height: 100%;
  right: 0;
  z-index: 1;
}
.wrapper{
  /* background-image: url('../img/bg.webp'); */
  /* background-size: 100% 1139px; */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: justify;
}
.main {
    background-color: #FBD8DC;
    position: relative;
    z-index: 2;
    width: 740px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow:  2px 0px 15px #E57272;
}

.yoga-exercise{
    background-image: url('../img/bg01.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 20px;
    padding-bottom: 100px;
}
.yoga-exercise .logo{
    z-index: 5;
}
/* .experience{
    background: rgba(254,218,219,1);
} */
.first-body {
    width: 550px;
    margin: 0 auto;
}
.yoga-kuruma .num-text{
    position: relative;
}
.yoga-kuruma .left{
    position: relative;
}
.yoga-kuruma .veritcle-text {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    top: -133px;
    left: 15px;
    letter-spacing: 5px;
}
.yoga-kuruma .yoga-big-num{
    margin-left: 15px;
    margin-right: -15px;
}
.yoga-kuruma .yogo-studio-text{
    margin-top: -30px;
    margin-bottom: -20px;
}
.yoga-kuruma .button-fixed{
    position: fixed;
    bottom: 15px; /* Adjust the distance from the bottom */
    left: 50%; /* Move to the center horizontally */
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 4;
}
.yoga-kuruma .num-text .text-header:before{
    content : "(税込)";
    position: absolute;
    font-size: 14px;
    top: -13px;
    left: 4px;
}
.yoga-kuruma .small-text{
    position: relative;
}
.yoga-kuruma .small-text .text-header:before{
    content : "(税込)";
    position: absolute;
    font-size: 15px;
    top: -21px;
    left: 2px;
}
.yoga-kuruma .shadow{
    box-shadow:  5px 5px 15px#E57272 inset
}
.first-body .big-text {
    white-space: nowrap;
    font-family: Zen Kaku Gothic Antique;
    font-style: normal;
    font-size: 40px;
    color: rgba(231, 105, 116, 1);
    letter-spacing: 1px;
}

.jp-text {
    font-family: Noto Sans;
    font-style: normal;
    color: rgba(231, 105, 116, 1);
    letter-spacing: 1px;
}

.big-jp-text {
    font-family: Zen Kaku Gothic Antique;
    font-style: normal;
    color: rgba(231, 105, 116, 1);
    letter-spacing: 1px;
}

.jp-zen {
    font-family: Zen Kaku Gothic Antique;
    color: rgba(231, 105, 116, 1);
    letter-spacing: 1px;
}

.jp-style-text {
    font-family: adventures-unlimited, sans-serif;
    letter-spacing: 1px;
}


.font-40 {
    font-size: 40px;
}
.font-33 {
    font-size: 33px;
}
.font-45 {
    font-size: 45px;
    letter-spacing: 2px;
}

.font-50 {
    font-size: 50px;
}

.font-60 {
    font-size: 60px;
    letter-spacing: 2px;
}

.font-70 {
    font-size: 70px;
    letter-spacing: 2px;
}
.font-72 {
    font-size: 70px;
    letter-spacing: 2px;
}

.font-100 {
    font-size: 100px;
}

.font-80 {
    font-size: 80px;
}
.font-90 {
    font-size: 90px;
    letter-spacing: 2px;
}
.font-120 {
    font-size: 120px;
    letter-spacing: 2px;
}
.font-130 {
    font-size: 130px;
    letter-spacing: 2px;
}
.font-43{
    font-size: 43px;
    letter-spacing: 2px;
}
.font-10{
    font-size: 10px;
    letter-spacing: 2px;
}
.font-25 {
    font-size: 25px;
    letter-spacing: 2px;
}
.font-30 {
    font-size: 30px;
    letter-spacing: 2px;
}
.font-20 {
    font-size: 20px;
    letter-spacing: 2px;
}
.font-27 {
    font-size: 27px;
    letter-spacing: 2px;
}
.font-26 {
    font-size: 26px;
    letter-spacing: 2px;
}
.font-24{
    font-size: 24px;
    letter-spacing: 2px;
}
.font-16 {
    font-size: 16px;
    letter-spacing: 2px;
}

.xl-text {
    font-family: Zen Kaku Gothic Antique;
    font-size: 110px;
    text-align: center;
}

.mt--10 {
    margin-top: -10px;
}
.mt--15{
    margin-top: -15px;
}

.mt--20 {
    margin-top: -20px;
}
.mt--35 {
    margin-top: -35px;
}
.pd-left-80{
    padding-left: 80px;
}
.pyx-40{
    padding-left: 40px;
    padding-right: 40px;
}
.pyx-80{
    padding-left: 80px;
    padding-right: 80px;
}
.pyx-120{
    padding-left: 120px;
    padding-right: 120px;
}
.pyx-150{
    padding-left: 150px;
    padding-right: 150px;
}
/* experience-card */
.experience {
    margin-top: 100px;
    opacity: 0.996;
    fill: rgb(34, 11, 12);
}
.experience .btn-experience{
    box-shadow: #FF8686 0px 5px 36px -13px, #FF8686 0px -5px 35px -13px;
    transition: box-shadow 0.3s ease-in-out;
}
.experience .btn-experience:hover{
    background-color: #FAB0B7;
    box-shadow: #F89696 6px 7px 6px 0px inset, #FF8686 0px 5px 25px -13px;
}
.experience .tracking-wide{
    letter-spacing: 3px;
}

.experience-card {
    background-color: #fedadb;
    max-width: 650px;
    margin: 0 auto;
}

.card-body {
    padding: 40px 60px 40px 60px;
}

.bg-red {
    background-color: #f46f7b;
}
.bg-bold-red{
    background-color: #FC8C98;
}
.bg-red-btn{
    background-color: #FD8792;
}
.border-red{
    border: #f46f7b 0.5px solid !important;
}

.bg-pink {
    background-color: #fcd3d7;
}
.bg-low-pink{
    background-color: #FFF4F4;
}


.cl-pink {
    color: #fcd3d7;
}

.cl-red {
    color: #e76974;
}
.cl-red-200{
    color: #FD8792;
}

/* yoga-body */
.yoga-body {
    padding-bottom: 100px;
}

.yoga-body .body {
    max-width: 550px;
    margin: 0 auto;
    padding-top: 100px;
}


.yoga-body .img {
    padding: 0 10px 10px 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

.yoga-body .left {
    position: relative;
}

.yoga-body .veritcle-text {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    top: 213px;
    left: 520px;
    letter-spacing: 15px;
}

.rotated-30 {
    transform: rotate(-30deg);
}

.rotated-10 {
    transform: rotate(-10deg);
}
.rotated-7 {
    transform: rotate(-7deg);
}
.rotated-5 {
    transform: rotate(-5deg);
}
.rotated-6 {
    transform: rotate(-6deg);
}

/* reason */
.reason {
    margin-top: 100px;
    background-color: #FBD8DC;
    padding-bottom: 74px;
}
.reason .left{
    position: relative;
}

.reason .veritcle-text {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    left: 548px;
    letter-spacing: 20px;
    font-size: 149px;
}
.step{
    background-color: #fedadb;
    max-width: 650px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 70px;
}
.step .step-margin{
    margin-left: 1.5rem;
    padding: 5px;
}

/* lesson */
.lesson{
    background-color: #FFEBEB;
    margin-top: 100px;
    padding-bottom: 40px;
}

/* trail */
.trail{

    background-image: url('../img/trail-bg.webp');
    background-size: 75% 100%; /* 75% of the width, full height */
    background-position: left;
    background-repeat: no-repeat;
    padding-bottom: 110px;
    background-color: #FFE3E6;

}

.trail .card-trail-header{
    position: relative;
}
.trail .card{
    width: 650px;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-top: 113px;
    background: linear-gradient(180deg, #ffe6e9 50%, #fffbf7 100%);
}
.trail .card-step-05{
    margin-top: -47px;
}
.trail img{
    width: 80%;
    margin-left: 70px;
    margin-top: -16px;
}
.trail .card-step-img {
    margin-left: 10px;
    z-index: 1;
}
.trail .card-step-dday{
    position: absolute;
    top: -90px;
}
.trail .card-step-prepartion{
    position: absolute;
    top: -90px;
}
.trail .card-step-trail{
    position: absolute;
    top: -90px;
}
.trail .card-step-reservation{
    position: absolute;
    top: -90px;
}
.trail .card-step-hearing{
    position: absolute;
    top: -71px;
    width: 59%;
    left: 10px;
}
.trail .verticle01{
    border-left: 5px solid #FDBEC6;
    height: 110px;
    margin-left: 16%;
}
.trail .verticle02{
    border-left: 5px solid #FDBEC6;
    height: 125px;
    margin-left: 16%;
    position: relative;
}
.trail .verticle02::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #FDBEC6;
    border-radius: 50%;
    top: -12px;
    left: -9px;
  }
 .trail .verticle02::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #FDBEC6;
    border-radius: 50%;
    bottom: -12px;
    left: -9px;
  }
/*
plan */
.plan{
    background-color: #FFEDED;
    padding-top: 40px;
    padding-bottom: 100px;
    box-shadow: 0px 8px 26px 2px #E57272;
}
.plan .card{
    margin: 0 auto;
    margin-top: 50px;
    margin-left: 30px;
    margin-right: 30px;
    box-shadow: -5px -5px 10px 0px #fff, #F7C1C1 3px 3px 7px 2px;
}
.plan .plan-num-img{
    width: 80%;
    margin: 0 auto;
}
.plan .plan-shadow{
    box-shadow: 3px 3px 10px rgb(255, 255, 255, 0.8) inset, -2px -2px 15px #CE0116 inset
}
.plan .plan-btn{
    box-shadow: 10px 10px 50px -5px #F1B4B4
}
.plan .cicle{
    width: 140px;
    height: 140px;
}

.plan .lesson-icon{
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 80px;
    padding-top: 25px;
    padding-bottom: 25px;
    transition: box-shadow 0.3s ease-in-out;

}
.plan .lesson-icon .text {
    margin-left: 5px;
}
.plan .lesson-icon .icon {
    margin-left: 15px;
}
.plan .lesson-icon:hover{
    box-shadow: #FCB8BB 10px 10px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    background-color: #FFEDED;
}
.plan .button{
    margin-bottom: -15px;
}
/* schedule */
.schedule{
    padding-top: 40px;
    padding-bottom: 100px;
    position: relative;

}
.schedule .veritcle-text {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    top: 718px;
    left: 650px;
    letter-spacing: 10px;
    font-size: 120px;
}
.schedule .schedule-text
{
    margin-top: 60px;
    padding-left: 80px;
}
.schedule .schedule-btn-sha{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.schedule .schedule-btn{
    width: 140px;
    height: 140px;
}
.schedule .icon-w{
    width: 2.5rem;
}

/* studio */
.studio{
    padding-top: 150px;
    padding-bottom: 150px;
    background-image: url('../img/bg03.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.studio .logo{
    padding-bottom: 100px;
}

.point{
    width: 116px;
    height: 117px;
}

/* map */
.map{
    height: 400px;
}

/* social */
.social{
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url('../img/bg02.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
z-index: 3;
}
.social .social-body{
    width: 550px;
    margin: 0 auto;
}
.social .social-media
{
    box-shadow: 10px 10px 50px -5px #F1B4B4;
}
.social .footer{
    margin-top: 150px;
}
.social .social-icon{
    background-color: #FDDCDC;
}
.social .social-icon:hover{
    transition: box-shadow 0.3s ease-in-out;
}
.social .social-icon:hover{
    box-shadow: 5px 5px 10px 1px #FCB8BB inset, -10px -10px 15px #FFEBEB inset;
}

/* Add your custom styles here */


#menuToggle {
    display: block;
    position: relative;
    z-index: 1;
    user-select: none;

}

.bar {
    transition: 0.3s ease;
    background-color: #fff;
    height: 5px;
    width: 35px;
    margin: 6px 0;
    border-radius: 3px;
}

/* Cross Icon */
#menuToggle.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-9px, 6px);
}

#menuToggle.open .bar:nth-child(2) {
    opacity: 0;
}

#menuToggle.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-8px, -8px);
}

/* navcontent */
.navcontent{
    margin: 0 auto;
    width: 650px;
    background-color: #FCE9E3;
    padding-bottom: 40px;
}
.navcontent .upload01{
    background: url('../img/btn-upload.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.3s ease-in-out;
    width: 520px;
    height: 90px;
}
.navcontent .upload01:hover{
    background: url('../img/btn-upload02.webp');
    transition: background 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.navcontent .socialbox{
    width: 250px;
    transition: box-shadow 0.3s ease-in-out;
}
.navcontent .socialbox:hover{
    box-shadow: #FFA284 4px 4px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    /* background-color: #FCE8EA; */
}
.shadow-box{
    box-shadow: 0px 0px 8px 0px #fff, #FFB5B5 3px 3px 7px 2px;
}

.navcontent.show {
    transform: translateY(0px);
    transition: 0.5s all ease;
    display: block;

}


/* menu */
#menuToggle
{
    display: block;
    position: fixed;
    top: 20px;
    background: #FCE9E3;
    z-index: 1;
    width: 56px;
    border-radius: 11px;
    height: 55px;
    padding: 12px;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: -1px -14px 42px -1px #fff, #FFD5C7 8px 6px 9px;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}

#menuToggle input
{
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: -7px;
    left: -3px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}
#menuToggle span
{
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 1px;
  position: relative;
  background: #f46f7b;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(0, 0px);
  background: #E76974;
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(-5px, 7px);
}

#menu
{
  top: 0;
    position: fixed;
    height: 100%;
    margin: 0 auto;
    margin-left: -12px;
    overflow-y: scroll;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(225%, 0px);
    padding: 143px 45px 50px;
    background: rgb(252, 233, 227);
    transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1) 0s;
}
#menuToggle:hover{
    box-shadow: #FFA284 4px 4px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    z-index: 4;
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: translate(-89%, 0px);
}
.nav-social-icon{
    height: 67px;
    width: 67px;
}
/* #menuToggle input[type="checkbox"]:unchecked ~ .icon-click{
    display: none;
}
#menuToggle input[type="checkbox"]:checked #menuToggle .icon-menu{
    display: none;
}
#menuToggle input:checked ~ .icon-click
{
  display: flex;
  background-color: #FCE9E3;
  border-radius: 5px;
  box-shadow: -1px -14px 42px -1px #fff, #FFD5C7 8px 6px 9px;
  position: relative;
  top: -80px;
  left: 2px;
  height: 80px;
  width: 80px;
  transition: width 6s ease-in-out;
  z-index: 4;

} */

/* #menuToggle input:checked ~ .icon-click:hover
{
    box-shadow: #FFA284 4px 4px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
} */


.nav-social-icon{
    height: 67px;
    width: 67px;
}
@media screen and (max-width: 1535px) {
  .bg img {
    height: 70%
  }
  .bg_1 img {
    height: 70%;
  }
}
@media screen and (max-width: 1626px) {
  .bg .icon {
      width: 24%;
  }
  .bg_1 .icon {
      right: 10px;
      top: 42%;
  }
}
@media screen and (max-width: 1376px) {
  .bg .icon {
      width: 20%;
  }
  .bg_1 .icon {
    width: 17%;
  }
}
@media screen and (max-width: 1205px) {
  .bg .icon {
      width: 17%;
      top: 40%;
  }
  .bg_1 .icon {
    width: 15%;
    top: 33%;
  }
}
@media screen and (max-width: 1112px) {
  .bg .icon {
      width: 15%;
  }
  .bg_1 .icon {
    width: 13%;
    top: 35%;
  }
}
@media screen and (max-width: 1060px) {
  .bg .icon {
      width: 13%;
  }
  .bg_1 .icon {
    width: 11%;
  }
}
@media screen and (max-width: 1000px) {
  .bg .icon {
      width: 11%;
  }
  .bg_1 .icon {
    width: 9%;
  }
}
@media screen and (max-width: 965px) {
  .bg .icon {
      width: 9%;
  }
  .bg_1 .icon {
    width: 7%;
  }
  .bg img {
    height: 50%
  }
  .bg_1 img {
    height: 50%;
  }
}
@media screen and (max-width: 900px) {
  .bg .icon {
      width: 7%;
  }
  .bg_1 .icon {
    width: 5%;
  }
}
/* @media screen and (max-width: 1549px) {
  .bg img {
    left: -20px;
  }
  .bg_1 img {
    right: -40px;
  }
} */
@media screen and (max-width: 802px) {
    .display-hide {
        display: block;
    }

    .display-block {
        display: none;
    }
    .nowrap-res{
        white-space: nowrap;
    }
    .main {
        width: 100%;
    }
    .plan .card{
        margin: 0 auto !important;
        margin-top: 50px !important;
    }
    /* .trail .verticle01{
        margin-left: 102px;
    }
    .trail .verticle02{
        margin-left: 102px;
    } */
    .first-body{
        width: 90%;
        margin: 0 auto;
        padding-left: 5px;
        padding-right: 5px;
    }
    .trail .card{
        width: 90%;
        margin: 0 auto;
        padding-left: 10px;
        padding-top: 72px;
        padding-right: 10px;
    }
    .trail .card-step-reservation{
        top: -57px;
        width: 77%;
    }
    .trail .card-step-dday{
        top: -57px;
        width: 77%;
    }
    .trail .card-step-trail{
        top: -57px;
        width: 77%;
    }
    .trail .card-step-hearing{
        top: -57px;
        width: 58%;
    }
    .trail .card-step-prepartion{
        top: -57px;
        width: 77%;
    }
    .plan .card
    {
        width: 90%;
    }
    .social .social-body{
        width: 90%;
    }
    #menuToggle{
        left: 85%;
    }
    .navcontent{
        width: 90%;
        margin-top: 75px;
    }
    #menu {
        margin: -95px 0px 0px -520px;
    }
    #menuToggle input:checked ~ .icon-click{
       left: -16px;
    }
    #menuToggle .icon-menu{
        position: relative;
        left: -16px;
     }
    .navbar{
        padding-left: 20px;
        padding-right: 20px;
    }
    .font-40 {
        font-size: 30px;
    }
    .font-33 {
        font-size: 28px;
    }
    .font-30 {
        font-size: 27px;
    }
    .font-45 {
        font-size: 35px;
    }
    .font-43{
        font-size: 35px;
    }

    .font-50 {
        font-size: 45px;
    }
    .font-26-res{
        font-size: 26px !important;
    }
    .font-24-res {
        font-size: 24px !important;
    }

    .font-60 {
        font-size: 50px;
    }

    .font-70 {
        font-size: 60px;
    }
    .font-72{
        font-size: 60px;
    }

    .font-100 {
        font-size: 90px;
    }

    .font-80 {
        font-size: 70px;
    }
    .font-23 {
        font-size: 23px !important;
    }
    .font-25 {
        font-size: 20px;
    }
    .font-20 {
        font-size: 15px;
    }
    .font-27 {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .font-26 {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .font-130
    {
        font-size: 100px;
    }

    .xl-text {
        font-family: Zen Kaku Gothic Antique;
        font-size: 110px;
        text-align: center;
        overflow: hidden;
    }
    .plan .lesson-icon{
        margin-left: 60px;
        margin-right: 60px;
        margin-top: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .pyx-120{
        padding-left: 80px;
        padding-right: 80px;
    }
    .yoga-kuruma .num-text .text-header:before{
        font-size: 14px;
    }
    .yoga-kuruma .small-text .text-header:before{
        font-size: 13px;
        top: -18px;
        left: -3px;
    }

  }
@media screen and (max-width: 800px) {
  #menuToggle input:checked ~ ul {
    transform: none
  }
}
@media screen and (max-width: 670px){
    .break-line-55
    {
        line-height: 30px;
    }
    .mt--35{
        margin-top: -28px;
    }
    .res-box{
        margin-left: 10px;
        margin-right: 10px;
    }
    .static-btn{
        background-size: contain;
    }
    .static-btn:hover{
        background-size: contain;
    }
    .navcontent .upload01
    {
        background-size: contain;
    }
    .navcontent .upload01:hover
    {
        background-size: contain;
    }
    .yoga-body{
        padding-left: 10px;
        padding-right: 10px;
    }
    .reason{
        padding-left: 10px;
        padding-right: 10px;
    }
    .font-130
    {
        font-size: 90px;
    }
    .font-40 {
        font-size: 30px;
    }
    .font-33 {
        font-size: 28px;
    }

    .font-72{
        font-size: 55px;
    }
    .plan .cicle {
        width: 70px;
        height: 70px;
    }
    .font-25{
        font-size: 15px;
    }
    .card-body{
        padding: 40px 20px 40px 20px;
    }
    .point{
        width: 80px;
        height: 80px;
    }
    .pyx-120{
        padding-left: 40px;
        padding-right: 40px;
    }
    .ml--15{
        margin-left: -15px;
    }
    .trail img {
        width: 100%;
        margin-left: 10px;
    }
    .letter-space-10{
        letter-spacing: 2px !important;
    }
    .break-line-50{
        line-height: 30px;
    }
    .mt--20{
        margin-top: -10px;
    }
    .font-24{
        font-size: 18px;
    }
    /* #menuToggle .icon-menu{
        height: 65px;
        width: 65px;
    }
    #menuToggle .icon-click{
        height: 65px;
        width: 65px;
    } */

    .yoga-body .img {
        padding: 0 0 10px 5px;
    }
}
@media screen and (max-width: 620px){
    .yoga-body .body .right{
        margin-left: 12px;
    }
}
@media screen and (max-width: 550px){
    .navcontent {
        width: 75%;
    }
    #menu{
        margin: -91px 0px 0px -513px;
    }
    .text-ele-mob{
        display: block;
    }
    .text-ele-disk{
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .navbar{
        padding-left: 10px;
        padding-right: 10px;
    }
    #menu{
        margin: -119px 0px 0 -469px;
    }
    #menuToggle{
        left: 80%;
    }
    .first-body .big-text{
        font-size: 30px;
        text-align: center;
    }
    .font-70{
        font-size: 50px;
    }
    .font-80{
        font-size: 60px;
    }
    .pyx-150{
        padding-left: 80px;
        padding-right: 80px;
    }
    .font-60{
        font-size: 40px;
    }
    .font-130
    {
        font-size: 80px;
    }

    .plan .lesson-icon{
        margin-left: 30px;
        margin-right: 16px;
        margin-top: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .plan .lesson-icon .icon
    {
        margin-left: 2px;
    }
    .nav-social-icon{
        height: 47px;
        width: 47px;
    }
    .trail .card-step-05{
        margin-top: -12px;
    }
    .yoga-kuruma .yogo-studio-text {
        width: 300%;
    }
  }
@media screen and (max-width: 470px){
    .navcontent {
        width: 55%;
        padding-left: 10px;
        padding-right: 10px;
    }
    #menu {
        width: 645px;
        padding: 10px;
        padding-top: 150px;
        padding-bottom: 50px;
    }
    .pd-menu{
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
    .font-72{
        font-size: 48px;
    }
    .font-27 {
        font-size: 15px;
    }
    .font-26 {
        font-size: 15px;
    }
    .font-100 {
        font-size: 60px;
    }

    .mt--56{
        margin-top: -26px !important;
    }

  }

@media screen and (max-width: 400px) {
    .navbar{
        padding-left: 10px;
        padding-right: 10px;
    }
    .pd-menu {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    #menu{
        margin: -115px 0 0 -453px;
    }
    #menuToggle{
        left: 80%;
    }
    .first-body .big-text{
        font-size: 30px;
        text-align: center;
    }
    .pyx-150{
        padding-left: 30px;
        padding-right: 30px;
    }

    .font-70{
        font-size: 40px;
    }
    .social-footer{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .plan .lesson-icon{
        margin-left: 20px;

    }
    .navcontent {
        width: 50%;
        margin-top: 50px;
    }
    .trail .card-step-reservation{
        top: -45px;
        width: 77%;
    }
    .trail .card-step-dday{
        top: -45px;
        width: 77%;
    }
    .trail .card-step-trail{
        top: -45px;
        width: 77%;
    }
    .trail .card-step-hearing{
        top: -45px;
        width: 58%;
    }
    .trail .card-step-prepartion{
        top: -45px;
        width: 77%;
    }

}
@media screen and (max-width: 390px){
    #menu{
        margin: -99px 0 0 -451px;
        overflow-y: scroll;
    }

}
@media screen and (max-width: 380px){
    #menu{
        margin: -99px 0 0 -441px;
    }
}
@media screen and (max-width: 350px){
    .font-72{
        font-size: 44px;
    }
    #menu{
        margin: -99px 0 0 -27rem;
    }


}
/* Animate */
.fade-in-text {
    position: relative;
    opacity: 0;
    animation: fadeInAndMove 1.5s forwards infinite;
}

.moving-lr-text {

    animation: moveLeftToRight 15s linear infinite;
}
.moving-right-text {
    animation: moveRightToLeft 15s linear infinite;
}

.moving-and-back {
    animation: moveRightAndBack 2s ease-in-out infinite; /* Adjust the duration and timing function as needed */
}

.moving-up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveUp 0.5s ease-in-out forwards; /* Animation duration and easing */
    opacity: 0; /* Initially set opacity to 0 */
}
.floating-element {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease-in-out;
}


.animated-image-left {
    position: relative;
    animation: slideFromLeft 4s ease-in-out infinite; /* Adjust the duration and timing function as needed */
}

.animated-image-up {
    animation: moveUpDown 2s ease-in-out infinite; /* Adjust the duration and timing function as needed */
}



@keyframes moveLeftToRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
@keyframes fadeInAndMove {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes moveRightToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes moveRightAndBack {
    0%, 100% {
        transform: translateX(0); /* Start and end at the initial position */
    }
    50% {
        transform: translateX(20px); /* Move 20 pixels to the right at 50% of the animation */
    }
}


@keyframes slideFromLeft {
    from {
        transform: translateX(-100%); /* Start off-screen to the left */
    }
    to {
        transform: translateX(0); /* Move to the original position */
    }
}


@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0); /* Start and end at the original position */
    }
    50% {
        transform: translateY(-20px); /* Move up by 20 pixels at 50% of the animation */
    }
}