@font-face {
    font-family: 'sms';
    src: url('./font/sms.woff') format("woff2-variations");
    font-weight: 100 900;
}


* {
    box-sizing: border-box;
  }

  a:link {
    color:#ff7275;
    text-decoration: none;
}

a:visited {
    color:#ff7275;
    text-decoration: none;
  }
  
a:hover {
    text-decoration: underline;
    cursor:grab;
}
  
a:active {
    text-decoration: underline;
}


html, body {
    width: 100vw;
    margin: 0;
    background-color: #3e6e5f ;
    font-family: 'sms' ;
    color: #ff7275;    
}


/* a [href^="tel"]{
  color:inherit;
  text-decoration:none;
} */

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  
.box{
  flex: 25%;
  max-width: 25%;
  max-height: 50%;
  padding: 1vw;
  /* aspect-ratio: 1/ 1.3; */
  }

.img {
  display: block;
  margin: auto;
  width: 150px;
}

.imgfleur {
  width: 112.5%;

}

.imgvase {
  display: block;

  margin: 0.9vw 0 0.9vw 0;
}


.box.box1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url("./img/box1.svg");
  background-repeat: no-repeat;
  background-position: center 1vw;
  background-size: 90%;
  aspect-ratio: 1/ 1.3;
}


/*타이포 span 데코*/
.titre{
  margin-top: 0.5vw;
  font-size: 4.5vw;
  letter-spacing: -0.25vw;
}

.moyon{
  margin: 1VW 0 0 0 ;
  font-size: 4.5vw;
  letter-spacing: -0.50vw;
}

.box1 .sous-titre {
  display: block;
  margin: 0.5vw;
}

.sous-titre, .sous-titre2{
  font-size: 1.5vw;
  letter-spacing: -0.08vw;
  line-height: 2.5vw;
  font-variation-settings: "wght" 2;

}

.txt1 {
  display: block;
  font-size: 1vw;
  line-height: 1.75vw;
  /*font-size référent 16px*/
  margin-bottom: 1vw;

  font-variation-settings: "wght" 2;
}

.txt1.mail {
  overflow-wrap: normal;
  font-variation-settings: "wght" 2;
}

.txt2 {
  font-size: 0.8vw;

  line-height: 1.5vw;
  font-variation-settings: "wght" 2;
}

#txtbox7 {
  letter-spacing: -0.04vw;

}

#txtbox8 {
  letter-spacing: 0vw;
}



/*responsive*/

@media screen and (min-width:768px) and (max-width:1023px) {
/*tablette*/
  .box {
    flex: 50%;
    max-width: 50%;

    padding: 1vw;
  }




  .img {
    display: block;
    margin: auto;
    width: 150px;
  }
  
  .imgfleur {
    width: 112.5%;
  }



  .box.box1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-image: url("../img/box1.svg");
    background-repeat: no-repeat;
    background-position: center 1vw;
    background-size: 90%;
    aspect-ratio: 1/ 1.3;
  }

  .box.box7, .box.box5 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box.box5, .box.box6, .box.box7, .box.box8 {
    margin-top: 5vw;
  }


  .titre{
    font-size: 9.5vw;
    letter-spacing: -0.4vw;
    margin: 1vw 0 1.5vw 0;
  }
  
  .moyon{
    font-size: 9.5vw;
    letter-spacing: -1.4vw;
    margin: 4vw 0 3vw 0;
  }
  
  #studio {
    margin: 3vw 0 0 0;
  }
  .sous-titre{
    font-size: 3.1vw;
    letter-spacing: -0.08vw;
    font-variation-settings: "wght" 2;
    margin-bottom: 4vw;
  }


  .box1 .sous-titre {
    margin: 0px;
  }
  
  .txt1 {
    display: block;
    padding : 20px 0 0 0 ;
    font-size: 2.1vw;
    line-height: 3.6vw;
    font-variation-settings: "wght" 2;
  }
  
  .txt1.mail {
    overflow-wrap: normal;
    font-variation-settings: "wght" 2;
  }
  
  .sous-titre2{
    display: block;
    font-size: 3.1vw;
    /* letter-spacing: -0.05vw; */
    line-height: normal;
    font-variation-settings: "wght" 2;
  }

  .txt2 {
    font-size: 1.8vw;
    line-height: 3vw;
    font-variation-settings: "wght" 2;
  }
  
  #txtbox7 {
    letter-spacing: -0.04vw;
  
  }
  
  #txtbox8 {
    letter-spacing: 0vw;
  }

}




@media screen and (max-width: 767px) {
/*mobile*/
  .box {
    flex: 100%;
    max-width: 100%;
    max-height: 100%;
    /* aspect-ratio: 1/ 1.3; */
    padding: 5vw;
  }

  .img {
    display: block;
    margin: 10vw 0;
    /* width: 150px; */
  }
  .imgfleur {
    width: 110%;
  }

  .imgpalmier, .imgvase{
    width: 100%;

    margin: 10vw 0 ;
  }


  .box.box1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1/ 1.3; 
    background-image: url("../img/box1.svg");
    background-repeat: no-repeat;
    background-position: center 15%;
    background-size: 90%;
  }

  .box.box4, .box.box5, .box.box7 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }




  .titre{
    display: block;
    font-size: 18vw;
    letter-spacing: -0.4vw;
    margin: 10px 0 0 0;
  }
  
  .moyon{
    display: block;
    font-size: 18vw;
    letter-spacing: -3vw;
    margin: 5px 0 5px 0;
  }
  
  .sous-titre{
    display: block;
    font-size: 5.58vw;
    letter-spacing: -0.08vw;
    font-variation-settings: "wght" 2;
  }

  
  .txt1 {
    display: block;
    padding : 0 ;
    font-size: 4vw;
    line-height: 7vw;
    font-variation-settings: "wght" 2;
  }
  
  .txt1.mail {
    overflow-wrap: normal;
    font-variation-settings: "wght" 2;
  }
  
  .sous-titre2{
    display: block;
    font-size: 5.58vw;
    letter-spacing: -0.08vw;
    line-height: normal;
    font-variation-settings: "wght" 2;
  }

  .txt2 {
    font-size: 3.24vw;
    line-height: 5vw;
    font-variation-settings: "wght" 2;
  }
  
  /* #txtbox7 {
    letter-spacing: -0.04vw;
  
  }
  
  #txtbox8 {
    letter-spacing: 0vw;
  } */

}