@media  (max-width: 767px){	
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body, html {
    overflow-x: hidden;
}
body {
    font-family: "Yu Gothic", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  }
    #main {
        margin-top: 115px;
        padding-top: 0;
    }
    .container{
        max-width: 95%;
        padding-left: 0;
        padding-right: 0;
    }
    .container-w{
        align-items: flex-start!important;
    }
    .navbar-mobile ul{
        padding: 120px 0 0;
        -webkit-backdrop-filter: blur(20px);
    }
    .navbar-mobile ul li a {
        font-size: 22px;
        justify-content: center;
    }
    /* Header Section */
    .navbar .getstarted{
        display: none;
    }
    #header .logo img {
        max-height: 23px;
    }
    /* Hero Section */
    #hero,  #hero .carousel-item {
        height: 100vh;
    }
    
    #hero .carousel-container {
          height: 100vh;
    }
    #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
        background-image: none;
    }
    #hero .carousel-indicators {
        display: none;
    }
    #hero .carousel-content {
        margin: 0px 55px;
    }
    #hero .slider-sp-img-1 {
        background-image: url(/img/mv_sp_01.webp);
    }
    #hero .slider-sp-img-2 {
        background-image: url(/img/mv_sp_02.jpg);
    }
    #hero .slider-sp-img-3 {
        background-image: url(/img/mv_sp_03.jpg);
    }
    #hero h1{
        font-size:22px;
        line-height: 37px;        
    }
    #hero .hero-font{
        font-size: 21px;
      }
    #hero p{
        padding-right: 13px;
        font-size: 16px;
    }
    #hero .para-break{
        display: none;
    }
    .section-title .title-line-break{
        display: block;
      }
    .section-title h2{
        color: #e0e0e0;
        font-size: 15px;
        font-style: normal;
        letter-spacing: 1.5px;
        line-height: 25px;
    }
    .section-title span{
        color: #000000;
        font-size: 20px;
        line-height: 32px;
    }
    .display-center{
        text-align: center;
    }
    .visible-first{
        display: none;
    }
     .visible-second{
        display: block;
      }
   
    /* Komatta Section */
    
    .komatta .visible-second{
        display:flex;

    }
    .line-br{
        display: block;
    }    

      /* Outstrength Section */
     .outstrength-visible{
         display: none;
     }
     .outstrength-sp-visible{
        display: flex;
        padding-top: 0px;
      }
      .outstrength{
          background-color: #eee;
          box-shadow: none;
      }
      .out1{
          padding-bottom: 0!important;
      }
      .out2{
        padding-top: 0!important;
      }
      .outstrength h4 {
        line-height: 17px;
        margin-bottom: 1.25rem;
    }
      .middle{
          text-align: center;
          padding-left: 1.5rem;
          padding-right: 1.5rem;
      }
      .border-bottom{
          border-bottom: 1px solid gray;
          padding-bottom: 2rem;
      }
      .middle .one{
        color: #1d82c2;
        font-size: 21px;
        font-weight: 700;
        line-height: 40px;
        font-family: Lato;
      }
      .middle .head{
        color: #000000;
        font-size: 20px;
        font-weight: 700;
        font-style: normal;
        letter-spacing: normal;
        line-height: 30px;
        text-align: center;
      }
      .middle .para{
        color: #000000;
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        line-height: normal;
        text-align: left;
      }
      
      /* Last Container */
      .visible-block{
          display: none;
      }
      .last-con-visible{
          display: none;
      }

   
    /* Komatta section */
    .komatta{
        padding-bottom: 30px;
    }
    .komatta-slider .card , .komatta-slider .card-header, .komatta-slider .card-body{
        border: none!important;
      }
      .komatta .box h4 {
        font-size: 18px;
        line-height: 26px;
    }
     .komatta .box p {
        font-size: 16px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .komatta-slider .card-img-top{
        width: 68%;
        padding-left: 6rem;
    }
       /* slider for Komatta Section*/
       .komatta-slider button {
        display: contents!important;
      }
      
      .komatta-slider button img{
        width: 55px;
        height: 55px;
      }
      .komatta-slider .card-body{
          padding-top: 0.5rem;
      }
      .komatta-slider button.right img{
        position: absolute;
        right: 2%;
        top: 40%;
        transform: rotateZ(180deg);
      }
      .komatta-slider button.left img{
        position: absolute;
        left: 2%;
        top: 40%;
        z-index: 3;
      }


      /* Help section */
    .help-slider .card , .help-slider .card-header, .help-slider .card-body{
        border: none!important;
      }
      .btn-p{
        font-size: 14px;
        line-height: 15px;
        margin-bottom: 0;
    }
    .big-btn{
        font-size: 16px;
        max-width: 318px;
        line-height: 54px;
        height: 51px;
    }
    .contact-space1 {
        padding: 3rem 0.5rem!important ;
    }
    .contact-space {
        padding: 3rem 0.5rem 0;
    }
    .help .box h4 {
        font-size: 16px;
        line-height: 28px;
    }
    .help .box p {
        font-size: 15px;
        line-height: normal;
    }
       /* slider for Help Section*/
       .help-slider button {
        display: contents!important;
      }
      
      .help-slider button img{
        width: 55px;
        height: 55px;
      }
      .help-slider .card-body{
          padding-top: 0.5rem;
      }
      .help-slider button.right img{
        position: absolute;
        right: 0%;
        top: 47%;
        transform: rotateZ(180deg);
      }
      .help-slider button.left img{
        position: absolute;
        left: 0%;
        top: 47%;
        z-index: 3;
      }
    /* Result section */
    .blurb-outer .col-4 {
        padding: 0 6px;
    }
    .blurb-outer img {
        width: 100%;
    }
    .para-style1{
        font-size: 18px;
        line-height: 32px;
        text-align: left;
    }
    .para-style1 br{
        display: none;
    }
    
      /* Bg-Blue Section */
      .blue-container{
          max-width: 100%;
          padding-left: 0;
          padding-right: 0;
      }
      .bg-blue-space, .bg-blue-space1 {
        padding: 0;
    }
    .bg-blue .inner-space {
        padding: 5rem 0 1.5rem;
        display: block;
      }
      .bg-blue h3{
        font-size: 27px;
        line-height: 37px;
        text-align: center;
        margin-bottom: 1rem;
      }
      .bg-blue .text1 {
        font-size: 16px;
        line-height: 38px;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .bg-blue .text2 {
        font-size: 14px;
        line-height: 15px;
    }
    /* .bg-blue .man-image-bottom {
        padding: 1.4rem 0 0 2rem;
    } */
    .bg-blue .visible-second{
        padding: 1.4rem 2rem 0 5rem;
    }
    .bg-blue .button-man-text {
        font-size: 16px;
        letter-spacing: normal;
        line-height: 65px;
        padding: 18px 110px;
    }
    .bg-blue .line-break-blue{
        display: block;
    }

    /* Testimonials Section */
    .testimonials-img-1 .banner-img {
        padding-left: 0%;
    }
    .testimonials-img-1 .bottom {
        top: 100%;
        left: 37%;
    }
    .testimonials-img-1, .testimonials-img-2{
        padding-left: 0px;
        padding-right: 0px;
    }
    .testimonials .img-space-left {
        padding-right: 0;
    }
    .testimonials .img-space-right {
        padding-left: 0;
    }
    .testimonials .img-space{
        padding-left: 0px;
        padding-right: 0px;
    }
    .bottom img {
        width: 55%;
    }
    .bottom h3 {
        font-size: 24px;
        line-height: 35px;
    }
    .bottom span {
        font-size: 18px;
    }
    .testimonials-img-2 img {
        padding-right: 0%;
    }
    .testimonials .image-shadow2 {
        height: 83%;
    }
    .testimonials-img-2 .bottom2 {
        top: 99%;
        left: 39%;
    }
    .bottom2 img {
        width: 60%;
        padding-bottom: .5rem;
    }
    .bottom2 .living-text2 {
        font-size: 17px;
        line-height: 30px;
    }
    .bottom2 .living-text3 {
        font-size: 16px;
        line-height: 34px;
    }
   
    .testimonials .left-text1 h4 {
        font-size: 20px;
        line-height: 28px;
    }
    .testimonials .left-text1 p {
        font-size: 16px;
        line-height: 28px;
    }
  
    .testimonials .small-img-1 img {
        margin-top: 75px;
    }
    .testimonials .small-img-2 img {
        margin-top: 21px;
    }
    .testimonials .top-space{
        padding: 2rem 1.25rem 0;
    }

    /* Flows Section */
    .flows .visible-second{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .flows .centered {
        top: 20%;
    }
    .flows .centered p {
        font-size: 22px;
    }
    .flows .centered span {
        font-size: 21px;
    }
    .flows .card-title {
        font-size: 17px;
    }
    .flows .card-text {
        font-size: 18px;
        line-height: 32px;
        padding-bottom: 50px!important;
    }
    .flows .card-header {
        border-bottom: 1px solid gray;
    }
    /* slider for Flows Section*/
    .flows-slider button {
        display: contents!important;
      }
      
      .flows-slider button img{
        width: 55px;
        height: 55px;
      }
      .flows-slider .card-body{
          padding-top: 0.5rem;
      }
      .flows-slider button.right img{
        position: absolute;
        right: -6%;
        top: 50%;
        transform: rotateZ(180deg);
      }
      .flows-slider button.left img{
        position: absolute;
        left: -6%;
        top: 50%;
        z-index: 3;
      }

    /* Company Section */
    .company .row{
        flex-direction: column-reverse;
    }
    .company .display-head-first{
        display: block;
    }
    .company .display-head-second{
        display: none;
    }
    .company h3{
        padding-bottom: 1rem;
        font-size: 18px;
        line-height: 62px;
    }
    .h-500 {
        height: 310px;
    }
    .company iframe {
        height: 278px;
    }
    .company .space-map{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 2rem;
    }
    .company .sub-heading {
        font-size: 18px;
        display: block;
    }
    .company .sub-text {
        font-size: 16px;
        display: block;
    }
    .company .table td{
        padding-bottom: 1rem;
    }
    .company .display-line{
        display: block;
    }
    /* Contact Section */
    .form-outer {
        max-width: 500px;
        margin: 50px auto;
    }
    /* Footer Section */
    .footer p{
        font-size: 10px;
        letter-spacing: 1px;
        line-height: 41px;
    }
    .footer{
        padding-bottom: 5rem;
    }
    .footer {
        padding: 0% 0 4% 0;
    }
    /* chat */

    .man-chat{
        display: none;
    }

  

}

/* add css to adjust breaking layout */
@media  (max-width: 414px){
    /* Testimonials Section */
    .bottom2 .living-text2 {
        font-size: 16px;
    }
    .bottom2 .living-text3 {
        font-size: 14px;
    }
}

@media  (max-width: 393px){
    /* Hero Section */
    #hero h1{
        font-size:20px;       
    }
    #hero .hero-font{
        font-size: 19px;
      }
      #hero .carousel-content {
        margin: 0px 43px;
    }
   
     /* .bg-blue .man-image-bottom {
        padding: 1.4rem 0 0 1rem;
    } */
    .bg-blue .visible-second{
        padding: 1.4rem 2rem 0 3rem;
    }
     /* Testimonials Section */
     .bottom2 .living-text2 {
        font-size: 15px;
    }
    .bottom2 .living-text3 {
        font-size: 13px;
    }
}

@media  (max-width: 375px){
    
   /* Hero Section */
   #hero .carousel-content {
    margin: 0px 45px;
    }
   #hero h1 {
    font-size: 19px;
   }
   #hero .hero-font {
    font-size: 18px;
   }
   #hero p{
       font-size: 14px;
   }
   .btn-p {
    font-size: 12px;
   }
  
    /* bg-blue */
    
    .bg-blue h3 {
        font-size: 25px;
    }
    .bg-blue .button-man-text {
        padding: 10px 72px;
    }
   
    .bg-blue .text2 {
        font-size: 12px;
    }

    /* Testimonials Section */
   
    .bottom h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .bottom span {
        font-size: 16px;
    }
    .bottom2 .living-text2 {
        font-size: 13px;
    }
    .bottom2 .living-text3 {
        font-size: 11px;
    }

}

@media  (max-width: 320px){
    /* Hero Section */
    #hero .carousel-content {
        margin: 0px 46px;
    }
    #hero h1 {
        font-size: 16px;
        line-height: 30px;
    }
    #hero .hero-font {
        font-size: 15px;
    }
    #hero p {
        padding-right: 21px;
        font-size: 11px;
    }
    /* Komatta Section */
    .komatta .man-left img {
        padding-top: 110%;
        width: 74%;
    }
    .komatta .visible-second .title {
        font-size: 12px;
    }
   
   
    /* Company Section */
    .h-500 {
        width: 320px;
    }
   /* Flows Section */
   .flows .centered {
    top: 16%;
    }
    /* Bg-blue Section */
    .bg-blue h3 {
        font-size: 19px;
    }
    .bg-blue .text1 {
        font-size: 16px;
    }
    .bg-blue .text2 {
        font-size: 12px;
    }
    .bg-blue .button-man-text {
        padding: 7px 45px;
    }
    /* Testimonials Section */
    .testimonials .left-text1 h4 {
        font-size: 18px;
    }
    .testimonials .left-text1 p {
        font-size: 16px;
    }
    .testimonials .image-shadow2 {
        height: 79%;
    }
   
    .bottom2 .living-text2 {
        font-size: 13px;
        line-height: 0px;
    }
    .bottom2 .living-text3 {
        font-size: 11px;
        line-height: 0px;
    }
    .bottom2 img {
        padding-bottom: 0;
    }
    .bottom span {
        font-size: 14px;
    }
    .bottom h3 {
        font-size: 18px;
        line-height: 24px;
    }
}