@font-face {

    font-family: NunitoSans-Regular; 

    src: url(/assets/css/fonts/NunitoSans-Regular.ttf);

}



@font-face {

    font-family: NunitoSans-Light;

    src: url(/assets/css/fonts/NunitoSans-Light.ttf);

}



@font-face {

    font-family: NunitoSans-Black; 

    src: url(/assets/css/fonts/NunitoSans-Black.ttf);

}



@font-face {

    font-family: NunitoSans-Bold;

    src: url(/assets/css/fonts/NunitoSans-ExtraBold.ttf);

}



html, body {

   

    height: 100%;

    scroll-behavior: smooth;

}



#page {

    overflow-x: hidden;

    position: relative;

  

    

  }

  

  .page-content {

    position: relative;

    transition: all 300ms ease;

    z-index: 90;

    height: 100%;

    background-attachment: fixed;

    background-size: cover;

    background-repeat: no-repeat;

    background-color: black;

    /*padding-bottom: 80px;

    padding-bottom: calc(80px + (constant(safe-area-inset-bottom))*1.1);

    padding-bottom: calc(80px + (env(safe-area-inset-bottom))*1.1);*/

  }



  .desc-bg

  {

    background-image: url(/assets/images/Water\ Sunlight\ Reflection-01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  }



  .container-frame {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding-top: 56.25%; /* 16:9 Aspect Ratio */

  }

  

  .responsive-iframe {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    border: none;

  }



.bg{



position: relative;

padding: 0;

margin: 0;

max-width: 100vw;

background-size: contain;

background-position: top;

background-repeat: no-repeat;

background-image: url(/assets/images/Key-Visual.jpg);



}



.form-mt

{

    margin-top: 1.5rem;

}



.form-padding

{

    padding-bottom: 40px;

}



.text-mt-3

{

    margin-top: .6rem;

}



.text-mb-5

{

    margin-bottom: 1rem;

}



.container.bg

{

    max-width: 100%;

    

}



.container.spec-flex

{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 0 0;
    padding: 0 0;
    max-width: 1200px;

}

.container.flex

{

    display: flex; 

    padding: 0; 

    margin: 0; 

    max-width: 100%;

}

.spec-item .spec .right-half
{
    margin-left: -5%;
}

.spec-item {

    flex: 0 33.3%;
    
    margin-bottom: 2%; /* (100-32*3)/2 */
  }

  div.nu-font.spec
  {
      line-height: 20px;
  }

.nu-font

{

    font-family:  NunitoSans-Regular; 

    color: white;



}

.thank-nu-font

{

    font-family:  NunitoSans-Regular; 

    color: white;

    letter-spacing: 2px;

    



}




.nu-font-bold

{

    font-family:  NunitoSans-Bold;

    color:white;



}



.nu-font-bold-white

{

    font-family:  NunitoSans-Bold;

    color:white;



}



.left-half

{

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex: 1;

}



.right-half

{

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex: 1;

}



.carousel-indicators [data-bs-target] {

    height: 10px;

    width: 10px;

    border-radius: 50%;

  }



  .carousel-indicators  {

    margin-bottom: 0.5rem;

  }

  .carousel-indicators.desc
  {
    margin-bottom: 0rem;
  }


  .visual-img

  {

      margin-top: 0rem;

  }



  div.nu-font.spec

  {

    padding-left: 0;

    

  }



  .container.spec

  {

      

      max-width: 800px;

      display: flex; 

      padding:25px 0; 

      margin: auto; 

      min-height: 180px;

      

  }



  .spec-border

  {

    border-bottom: 1px solid white;

  }





  .button-style

  {

    clear: both;

    background-color: #aaa;

    border: 0 none;

    border-radius: 4px;

    letter-spacing: .03em;

    color: #FFFFFF;

    cursor: pointer;

    display: inline-block;

    padding: 0;

    text-align: center;

    text-decoration: none;

    vertical-align: top;

    white-space: nowrap;

    width: auto;

    transition: all 0.23s ease-in-out 0s;

  }



@media (min-width: 320px) {

    .thank-nu-font

    {
    
        font-size: 0.6em;

        padding: 0 4%;
    
    
    }

    div.nu-font

    {

        font-size: 0.6em;

        padding: 0 4%;

        text-align-last: center;

        text-align: justify;



    

    }


    div.box-word {
        padding: 0 9%;
        }
   



    input.nu-font, .nu-font-bold

    {

        font-size: 0.6em;

        

    

    }



    h5.nu-font-bold-white

    {

        font-size: 1em;

        



    }



    h4.nu-font, h4.nu-font-bold{



        font-size: 1em;

        text-align-last: center;

        text-align: justify;



    }



    div.nu-font.spec, h4.nu-font.spec

    {

        text-align-last: left;

      text-align: left;

    }



    h1.nu-font{



        font-size: 1em;





    }

  

}



@media (min-width: 576px) {



    div.nu-font

    {

        font-size: 1.2em;

        padding: 0 5%;

    

    }



    div.nu-font.spec

    {

     

      font-size: 1em;

    }



    input.nu-font, .nu-font-bold

    {

        font-size: 1.2em;

        

    

    }



    h5.nu-font-bold-white

    {

        font-size: 1.5em;



    }



    h4.nu-font, h4.nu-font-bold{



        font-size: 1.5em;



    }



    h1.nu-font{



        font-size: 1.5em;



    }



    .container.spec

  {

      min-height: 200px;

     padding: 15px 0;;

  }

    

  }



@media (min-width: 768px) {



.form-mt

{

    margin-top: 2rem;

}



.form-padding

{

    padding-bottom: 80px;

}



.text-mt-3

{

    margin-top: 1rem;

}



.text-mb-5

{

    margin-bottom: 2rem;

}

.thank-nu-font

{

    font-size: 1em;



}

    div.nu-font

    {
        letter-spacing: 2px;
        font-size: 0.9em;

        padding: 0 5%;

    

    }



    .carousel-indicators  {

        margin-bottom: -0.5rem;

      }



      .visual-img

      {

          margin-top: 1.5rem;

      }



    input.nu-font, .nu-font-bold

    {
        letter-spacing: 3px;
        font-size: 1.3em;

    }



    h5.nu-font-bold-white

    {

        font-size: 1.5em;



    }



    h4.nu-font, h4.nu-font-bold{



        font-size: 1.6em;



    }



    h1.nu-font{



        font-size: 1.5em;



    }



   

    .carousel-indicators [data-bs-target] {

        height: 15px;

        width: 15px;

        border-radius: 50%;

      }

  

  .container.spec

  {

      min-height: 210px;

     padding: 20px 0;;

  }

   



   

}





  

  @media (min-width: 992px) {

h4.nu-font.spec
{
    font-size: 1.2em;
}

div.nu-font.spec
{
    font-size: 0.6em;
}



    input.nu-font

    {

        font-size: 1.5em;


    }



    div.nu-font.desc

    {

        font-size: 1.5em;

    

    }



    

  }

  @media (min-width: 1200px) {



    .text-mt-3

    {

        margin-top: 1rem;

    }

    

    .text-mb-5

    {

        margin-bottom: 4rem;

    }

       

    

   

  }



  @media (min-width: 1400px) {



    .text-mt-3

    {

        margin-top: 1.5rem;

    }

    .thank-nu-font

    {

        font-size: 1.2em;



    }



  }