.bg-cr-brown{
    background-color: #2E2E2E;
}

.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{
    transition: box-shadow 0.1s ease;
}
.shadow-box-nav:hover{
    box-shadow: #343434 3px 3px 8px 0px inset,
            rgb(252, 232, 234, 0.1) -3px -3px 8px 0px inset;
        background-color: transparent;

}
.btn-jp{
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.btn-jp:hover {
    background-color: #fff;
    color: #000;
    border: #FFD228 5px solid !important;
}

.btn-jp:hover {
    background-color: #fff;
    color: #000;
    border: #FFD228 5px solid !important;
}

.btn-jp:hover .img {
    transform: translateX(130%);
}

.btn-jp .img {
    width: 45px;
    margin-left: 20px;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.btn-jp:hover .text {
    animation: flash 0.3s alternate;
}
.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;
}

.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: 31%;
}
.bg_1 .icon {
  width: 19%;
  height: auto;
  top: 55%;
  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: #fff;
    position: relative;
    z-index: 2;
    width: 740px;
    overflow: hidden;
    margin: 0 auto;
}

.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;
    margin-left: 20px;
}
.yoga-exercise .logo-yo{
    z-index: 8;
    margin-left: 20px;
}
/* .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: -20px;
    margin-bottom: -20px;
    width: 125%;
}
.yoga-kuruma .button-fixed{
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2;
}

@keyframes flash {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.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;
}
.first-body .yogo-margin-text{
    /* padding-bottom: 80px; */
}

.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;
    letter-spacing: 1px;
    color: #2E2E2E;
}

.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;
    letter-spacing: 2px;
}
.font-33 {
    font-size: 33px;
    letter-spacing: 2px;
}
.font-43 {
    font-size: 43px;
    letter-spacing: 2px;
}
.font-52 {
    font-size: 52px;
    letter-spacing: 2px;
}
.font-35 {
    letter-spacing: 2px;
    font-size: 35px;
}
.font-30{
    letter-spacing: 2px;
    font-size: 30px;
}
.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-100 {
    padding-left: 100px;
    padding-right: 100px;
}
.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-yellow{
    background-color: #FFD228;
}
.bg-low-white{
    background-color: #F5F5F2;
}

.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;
}
.border-white{
    border: #fff 5px solid !important;
}

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


.cl-pink {
    color: #fcd3d7;
}
.cl-blank{
    color: #C6C4BD;
}
.cl-red {
    color: #e76974;
}
.cl-red-200{
    color: #FD8792;
}
.cl-yellow{
    color: #FFD228;
}

.cl-brown{
    color: #2E2E2E;
}

/* yoga-body */
.yoga-body {
    background-color: #FFD228;
    position: relative;
}
.yoga-body .triangle {
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background-color: #FFD228;
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: -149px;
}
.yoga-body .body {
    max-width: 550px;
    margin: 0 auto;
    padding-top: 150px;
}
.yoga-body .right{
    width: 70%;
}


.yoga-body .img {
    padding: 0 10px 10px 0;
    margin-top: 100px;
    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;
}


/* about-us-body */
.about-us-body{
    padding-bottom: 100px;
    background-color: #fff;
}

.about-us-body .body {
    max-width: 550px;
    margin: 0 auto;
    padding-top: 150px;
}


.about-us-body .img {
    /* padding: 0 10px 10px 0;
    margin-top: 100px;
    margin-bottom: 40px; */
    width: 154%;
        margin-left: -151px;
}

/* waiting */
.waiting {
    padding-bottom: 150px;
    padding-top: 100px;
}
.waiting .img {
    padding-left: 100px;
    position: relative;
}
.waiting .img .earth{
    position: absolute;
    right: -55px;
    top: 73px;
    width: 21%;
}

.waiting .img img{
    width: 68%;
}



.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 {
    padding-top: 100px;
    background-image: url('../img/servicebg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 100px;
}
.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: 10px;
    font-size: 134px;
}
.step{
    background-color: #F5F5F2;
    max-width: 650px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 70px;
    border-radius: 10px;
}
.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/howto-bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 150px;
    padding-top: 50px;
    background-color: #FFE3E6;

}

.trail .card-trail-header{
    position: relative;
}
.trail .card{
    width: 635px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-radius: 42px;
    margin-top: 30px;
    background: #FFFFFF;
}
.trail .step-line img{
    width: 16px;
    margin: 0 auto;
    margin-top: -40px;
}
.trail .step-img{
    position: absolute;
    top: 150px;
    left: 245px;
}
.trail .step-img img {
    width: 67%;
}

.trail .img-title img{
    width: 35%;
    margin: 0 auto;
}
.trail .card-step-05{
    margin-top: -47px;
}
.trail img{
    width: 100%;
    position: relative;
}
.trail .card-footer-text{
    padding: 30px;
    padding-top: 15px;
}
.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: 60px;
}

.studio .logo img{
    width: 65%;
}

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

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

/* social */
.social{
    padding-top: 50px;
    padding-bottom: 100px;
}
.social .social-body{
    width: 550px;
    margin: 0 auto;
}

.social .footer{
    margin-top: 150px;
}
.social .social-icon{
    background-color: #2E2E2E;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-left: 30px;
}
.social .social-icon:hover {

    box-shadow: rgba(241, 180, 180, 0.78) 3px 3px 8px 0px inset,
        rgba(255, 255, 255, 0.78) -3px -3px 8px 0px inset;
    background-color: #FFD228;
    transition: box-shadow 0.2s ease;
}
.social .social-icon img{
    width: 70%;
}
/* footer */
.footer {
    padding-top: 50px;
    padding-bottom: 150px;
    background-image: url('../img/bg-footer.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.footer .logo {
    padding-bottom: 60px;
}

.footer .logo img {
    width: 45%;
}


/* 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;
}
#menuToggle:hover{
    background-color: #CCCCCC;
    transition: transform 0.3s ease;
}
/* 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: 590px;
    background-color: #514F4E;
    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-upshadow-box-navload02.webp');
    transition: background 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.navcontent .socialbox{
    width: 270px;
    margin-top: 65px;
    margin-bottom: 20px;
}

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

/* menu */
#menuToggle
{
    display: block;
    position: fixed;
    top: 20px;
    background: #000000;
    z-index: 1;
    width: 56px;
    border-radius: 11px;
    height: 55px;
    padding: 12px;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #FFD228;
  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: #fff;
  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: #000;
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(-5px, 7px);
}
#menuToggle input:checked ~ ul::before {
  -webkit-transition: background-color 500ms ease-in; /* Safari */
          transition: background-color 500ms ease-in;
  -webkit-transition-delay: 500ms; /* Safari */
          transition-delay: 500ms;
  display: block;
  content: '';
  background: #FFD228;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 20px;
  right: 31px;
  border-radius: 11px;
}
#menuToggle input:checked:hover ~ ul::before {
  -webkit-transition: background-color 300ms ease-in; /* Safari */
        transition: background-color 300ms ease-in;
-webkit-transition-delay: 300ms; /* Safari */
        transition-delay: 300ms;
    box-shadow: #CCCCCC 2px 2px 6px 0px inset, rgba(255, 255, 255, 0.15) -1px -1px 6px 0px inset;
    background: transparent;
}
#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: 110px 90px 50px;
    background: #514F4E;
    transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1) 0s;
}
.menu .btn-jp {
    margin-top: 10px
}

#menuToggle:hover{
    box-shadow: #CCCCCC 2px 2px 6px 0px inset, rgba(255, 255, 255, 0.15) -1px -1px 6px 0px inset;
    background-color: transparent;
    z-index: 4;
}

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

#menuToggle input:checked ~ ul
{
  transform: translate(-89%, 0px) ;
}
.nav-social-icon{
    height: 60px;
    width: 60px;
}
/* #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%;
  }
  .btn-jp {
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 15px;
      padding-bottom: 15px;
  }
}
@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) {
        .ham-menu {
                margin-left: 83% !important;
            }
    .yoga-exercise .logo{
        margin-left: 0px;

    }
    .yoga-exercise .logo-yo {
        margin-left: 0px;

    }
    .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;
    }
    .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){
    .btn-jp {
         padding-left: 25px;
         padding-right: 25px;
         padding-top: 10px;
         padding-bottom: 10px;
    }
    .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-50 {
        font-size: 35px;
    }
    .font-33 {
        font-size: 28px;
    }
    .font-35{
        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%;
    }
    .letter-space-10{
        letter-spacing: 2px !important;
    }
    .break-line-50{
        line-height: 30px;
    }
    .mt--20{
        margin-top: -10px;
    }
    .font-24{
        font-size: 18px;
    }

    .yoga-body .img {
        padding: 0 0 10px 0px;
    }
}
@media screen and (max-width: 620px){
    .yoga-body .body .right{
        margin-left: 12px;
    }
        .ham-menu {
            margin-left: 78% !important;
        }
}
@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;
    }
        .ham-menu {
            margin-left: 77% !important;
        }
    .socialbox {
        width: 160px;
    }
}

@media screen and (max-width: 530px){
    .btn-jp {
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    .btn-jp .img{
        width: 25px;
        margin-left: 10px;
    }
    .font-30 {
        font-size: 18px;
    }
}

@media screen and (max-width: 500px) {
    .yoga-exercise .logo-yo {
            margin-top: 8px;
            width: 80%;
            /* margin-left: -25px; */
        }
    .point {
        width: 70px;
        height: 70px;
    }
    .btn-jp:hover .img {
        transform: translateX(55%);
    }
    .yoga-exercise{
       padding-bottom: 50px;
       margin-top: -10px;
    }
    .yoga-body .body {
        max-width: 550px;
        margin: 0 auto;
        padding-top: 50px;
        margin-top: -5px;
    }
    .yoga-body .triangle{
        height: 130px;
        left: 0px;
        position: absolute;
        bottom: -129px;
    }
    .about-us-body {
        padding-bottom: 50px;
        padding-top: 110px;
        background-color: #fff;
    }
    .about-us-body .body{
        padding-top: 10px;
    }
    .about-us-body .img {
        width: 120%;
        margin-left: -30px;
    }
    .waiting {
        padding-bottom: 70px;
        padding-top: 30px;
    }
    .waiting .img{
        padding-left: 15px;
    }
    .waiting .img img{
        width: 95%;
    }
    .waiting .img .earth{
       right: -12px;
       top: 39px;
       width: 16%;
    }
    .reason{
        padding-top: 80px;
        padding-bottom: 30px;
    }
    .break-line-55{
        line-height: 30px;
    }
    .font-60 {
        font-size: 40px;
    }
    .font-40 {
        font-size: 20px;
    }
    .font-50 {
        font-size: 26px;
    }
    .font-26-res {
        font-size: 20px !important;
    }
    .font-25 {
        font-size: 12px;
    }
    .font-33 {
        font-size: 20px;
    }
    .font-35 {
        font-size: 19px;
    }
    .yoga-body .img {
        margin-top: 50px;
        margin-bottom: 40px;
    }
    .trail{
        padding-bottom: 70px;
        padding-top: 20px;
    }
    .trail .step-img{
        position: absolute;
        top: 75px;
        left: 40%;
    }
    .trail .step-img img {
        width: 34%;
    }
    .trail .card-footer-text {
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .first-body .yogo-margin-text {
            padding-bottom: 0px;
    }
    .trail .step-line img {
        width: 11px;
        margin: 0 auto;
        margin-top: -32px;
    }
    .studio{
        padding-top: 65px;
        padding-bottom: 70px;
    }
    .studio .logo img{
            width: 91%;
    }
    .studio .logo{
        padding-bottom: 30px;
    }
    .social {
        padding-top: 22px;
        padding-bottom: 68px;
    }
    .social .social-icon{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .social .social-icon img {
        width: 60%;
    }
    .footer .logo{
        padding-bottom: 35px;
    }
    .footer{
        padding-top: 66px;
        padding-bottom: 100px;
    }
    .navbar{
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 10px;
    }
    .navcontent .socialbox{
        margin-top: 30px;
    }
    #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;
    }
    .social .icon {
        margin-right: -22px;
    }
    #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) {
        .socialbox {
                width: 130px;
            }
    .social .icon {
            margin-right: -30px;
        }
    .yoga-exercise .logo-yo {
        margin-top: 8px;
        width: 80%;
        /* margin-left: -25px; */
    }
    .off-screen-menu{
        padding-top: 100px;
    }
    .ham-menu {
        top: 15px !important;
        margin-left: 75% !important;
    }

    .button-fixed{
        width: 205px;
    }
    .navbar{
        padding-left: 0px;
        padding-right: 0px;
    }
    .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: 10px !important;
        padding-right: 10px !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;
    }
    .off-screen-menu {
        padding-top: 540px !important;
    }

}
@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;
    }
    .social .icon {
        margin-right: -52px;
    }


}
/* 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 21s 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(-100%);
    }
}
@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 */
    }
}


.off-screen-menu {
    background-color: #514F4E;
    height: 100vh;
    width: 100%;
    max-width: 740px;
    position: fixed;
    overflow-y: scroll;
    top: 0px;
    padding-top: 620px;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3rem;
    transition: opacity .4s;
    z-index: 3;
    padding-bottom: 150px;
}

.off-screen-menu.active {
    opacity: 1;
    visibility: visible;
}



/* nav */
nav {
    padding: 1rem;
    display: flex;
}
/* navbar */
.navbar {
    margin-bottom: 50px;
}


/* ham menu */
.ham-menu {
    height: 53px;
    width: 53px;
    position: fixed;
    border-radius: 10px;
    z-index:4;
    cursor: pointer;
    margin-left: 650px;
    top: 25px;
}
.on-menu-bg:hover{
    box-shadow: rgb(163, 163, 163, 0.2) 3px 3px 4px 0px inset,
        rgb(163, 163, 163, 0.6) -3px -3px 4px 0px inset;
    background-color: transparent;
    transition: .3s ease;
}
.on-menu-bg{
    background-color: #000;
}
.off-menu-bg{
    background-color: #FFD228;
}
.off-menu-bg:hover{
    box-shadow: rgb(163, 163, 163, 0.2) 3px 3px 5px 0px inset,
                rgb(163, 163, 163, 0.8) -3px -3px 5px 0px inset;
    background-color: transparent;
    transition: .3s ease;
}
.ham-menu span {
    height: 2px;
    width: 60%;
    background-color: #fff;
    border-radius: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}

.ham-menu span:nth-child(1) {
    top: 35%;
}

.ham-menu span:nth-child(2) {
    top: 65%;
}

.ham-menu.active span {
    background-color: #000;
}

.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* .ham-menu.active span:nth-child(2) {
    opacity: 0;
} */

.ham-menu.active span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}