@charset "utf-8";
/* CSS Document */

/*フルードイメージ*/
img {
  max-width: 100%;
  height: auto
}

/* 共通 */

#wrapper {
  max-width: 100%;
  margin: 0 auto;
}


body {
  font-family: Outfit, "M PLUS Rounded 1c", serif;
  background-color: #FFEFE7;
  font-weight: 400;
  overflow-x: hidden;
}


a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* 全ページ共有SP用 */
@media only screen and (width<500px) {
  #wrapper {
    max-width: 100%;
    margin: 0 auto;
  }


}

/* ロゴ */
h1 {
  font-family: "Rammetto One", serif;
  font-size: 5vw;
  font-weight: 900;
  color: #ffffff;
}


/* セクション名 */
h2 {
  font-size: 5rem;
  font-family: "Rammetto One", serif;
  letter-spacing: 5px;
  color: #ffffff;
  font-weight: 900;
}

main h2 {
  color: #E87575;
  text-align: center;
  margin-bottom: 1.5%;

}

h3 {
  font-size: 3rem;
  font-weight: 800;
}

/* ブランド名 */
h4 {
  font-size: 2.5vw;
  color: #ffffff;
  font-weight: 900;
}

h5 {
  font-size: 1.8rem;
  font-weight: 800;
}

h6 {
  font-size: 1.1rem;
  font-weight: 800;
}

/* 16px */
p {
  font-size: 1rem;
  font-weight: 800;

}



/* ヘッダー */



/* main */
main {
  padding: 0 5%;
}


/* -----------メインビジュアル(pc用) -------------*/
.main-visual {
  max-width: 100%;
  aspect-ratio: 2/1;
  display: flex;
  border-bottom-right-radius: 10vw;
  margin-bottom: 14.286%;
  
}

/* 左 */
.main-visual .left-image {
  background-image: url(../img/main-visual-left.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 40%;
  position: relative;
}

.main-visual .left-image h6 {
  font-size: 1.8vw;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top:80%;
  left:36%;
}

.main-visual .left-image h4 {
  color: #ffffff;
  font-weight: 900;
  text-align: center;
  position: absolute;
  top: 40%;
  left:31%;
  
}

/* 右 */
.main-visual .right-image {
  background-image: url(../img/main-visual-right.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 60%;
  position: relative;
}

/* OhanaTint */
.main-visual .right-image h1 {
  text-align: center;
  position: absolute;
  top:45%;
  left:25%;


}

/* Blomcosme */
.main-visual .right-image h4 {
  text-align: center;
  position: absolute;
  top:60%;
  left:40%;
}

.main-visual .right-image .insta-campaign {
  width: 25%;
  position: absolute;
  bottom:5%;
  right: 10%;

}


/* -----------メインビジュアル(タブレット用)-------------*/

@media only screen and (width<1200px) {

  .main-visual {
    display: block;
    margin-bottom: 40%;
    aspect-ratio: 1/2;
    
  }

  /* 左 */
  .main-visual .left-image {
    width: 100%;    
    aspect-ratio: 1/1.2   
  }

  .main-visual .left-image h4 {
    font-size: 5.5vw;


  }

  .main-visual .left-image h6 {
    font-size: 4vw;
   
  }

  /* 右 */
  .main-visual .right-image {
    width: 100%;
    aspect-ratio: 2/1.5;
    background-size: cover;
  }

  .main-visual .right-image h1 {
    font-size: 8vw;
    
  }

  .main-visual .right-image h4 {
    font-size: 4vw;
  }

  .main-visual .right-image .insta-campaign {
    width: 20%;
    
  }

}


/* ------------コンセプト(pc用)-------------- */


.concept .box01 {
  background-color: #76AB9F;
  border-bottom-right-radius: 10vw;
  border-top-left-radius: 10vw;
  padding: 5% 10%;
  aspect-ratio: 2/1;
  margin-bottom: 14.286%;
}

.concept .box02 {
  display: flex;
  justify-content: center;
}

/* 左 */
.concept .text-box {
  width: 45%;
  aspect-ratio: 1/1.2;
  border: 5px solid #AACEC4;
  background-color: #ffffff;
  border-radius: 15vw;
  padding: 10% 8%;
  margin-right: 10%;
}

.concept .text-box h5 {
  font-weight: 900;
  margin-top: 10%;
  text-align: center;
  color: #76AB9F;
}

.concept .text-box h6 {
  text-align: center;
  color: #76AB9F;
  margin-top: 20%;
  line-height: 2.5rem;
}


/* 右 */

.concept .img-box {
  width: 55%;
  aspect-ratio: 1/1.2;
  background-image: url(../img/concept-right-img02.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.concept .img-box h3 {
  font-size: 3vw;
  color: #ffffff;
  font-family: "Rammetto One", serif;
  text-align: center;
  margin-top: 50%;
}


/* -------------コンセプト(タブレット用)---------- */

@media only screen and (max-width:1200px) {

  main {
    padding: 0;
  }

  main h2 {
    font-size: 9vw;
  }

  .concept .box01 {
    padding: 10% 15%
  }

  .concept .box02 {
    display: block;
  }

  .concept .text-box {
    width: 100%;
    padding: 10% 20%;
    border-radius: 40vw;
    margin-bottom: 10%;
  }

  .concept .img-box {
    width: 100%;
    padding: 20%;
    margin: 0;
    background-size: contain;
    aspect-ratio: 1/1.2;
  }

  .concept .img-box h3 {
    font-size: 6vw;
    margin-top: 60%;
  }


}

/* -------------コンセプト(sp用)---------- */

@media only screen and (max-width:500px) {


  .concept .box01 {
    padding: 10%
  }
  .concept .text-box{
    padding: 10%;
  }

  .concept .text-box h5{
    font-size: 1.5rem;
  }

  .concept .text-box h6{
    margin-top: 5%;
    font-size: 1rem;

  }

}

/*-----------ラインナップ(pc用)------------- */

.lineup {
  margin-bottom: 14.286%;
}

/* 赤 */

.lineup .box01 {
  background-color: #DB656E;
  border-top-right-radius: 10vw;
  border-top-left-radius: 10vw;
  padding: 5% 10%;
  aspect-ratio: 2/1;
}

.lineup .tint-name {
  display: flex;
  align-items: center;
}

.lineup .tint-name h3 {
  font-size: 4rem;
  margin-left: 1%;
}


.lineup .box-01 {
  display: flex;
}

.lineup .box01 h3 {
  margin-top: 0.5% 0;
  color: #AE253C;
  font-weight: 900;
}

/* 赤左 */

.lineup .img-box {
  width: 40%;
  height: auto;
  margin-top: 1%;
  position: relative;
}

.lineup .img-box .img01 img {
  width: 100%;
}

.lineup .img-box .img02 {

  position: absolute;
  bottom: -10%;
  left: -20%;
}


/* 赤右 */

.lineup .text-box {
  width: 60%;
  background-color: #ffffff;
  border: 5px solid #AE253C;
  border-radius: 4vw;
  margin-left: 10%;
  padding: 5%;
}

.lineup .text-box h5 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #AE253C;
  margin-bottom: 4%;
  text-align: center;
}

.lineup .text-box h6 {
  color: #AE253C;
}


.lineup .text-image {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 6.5%;
}

.lineup .text-image .image {
  width: 100%;

}

.lineup .text-box .btn {
  width: 40%;
  margin-left: 30%;
  padding: 5% 10%;
  background-color: #AE253C;
  border-radius: 3vw;
  margin-top: 5%;
}

.lineup .text-box .btn p {
  color: #ffffff;
  text-align: center;
}

/* ---------ラインナップ(タブレット用)--------- */

@media only screen and (max-width:1200px) {

 


  .lineup .tint-name {
    margin-bottom: 5%;
  }

  .lineup .box-01 {
    display: block;
  }

  .lineup .img-box {
    width: 100%;
  }

  .lineup .text-box {
    width: 100%;
    margin-left: 0;
    margin-top: 10%;
  }

  .lineup .img-box .img02 {
    left: -10%;
  }

  .lineup .text-box .btn {
    border-radius: 6vw;
  }

  
}

/* -------------ラインナップ(sp用)---------- */

@media only screen and (max-width:500px) {

  .lineup .box01{
    padding: 10%;

  }

  .lineup .box02{
    padding:10%;
  }

  .lineup .tint-name img{
    width: 20%;
  }

  .lineup .tint-name h3{
    font-size:2rem;
  }

  .lineup .box-01 .img-box .img02{
    width: 50%;
  }

  .lineup .box-01 .text-image img{
    width: 90%;
  }


  .lineup .text-box{
    padding:10%;
    border-radius: 6vw;
  }

  .lineup .box-01 .text-box h5{
    font-size: 1.25rem;
  }

  .lineup .box-01 .text-box h6{
    font-size: 1rem;
  }


}




/* オレンジ */
.lineup .box02 {
  background-color: #E5D7AA;
  border-top-right-radius: 0vw;
  border-top-left-radius: 0vw;
  padding: 5% 10%;
  aspect-ratio: 2/1;
}

.lineup .box02 h3 {
  color: #D87A55
}

.lineup .box02 .text-box {
  border: 5px solid #D87A55;
}

.lineup .box02 .text-box h5 {
  color: #D87A55;
}

.lineup .box02 .text-box h6 {
  color: #D87A55;
}

.lineup .box02 .text-box .btn {
  background-color: #D87A55;
}

.lineup .box02 .text-box .btn p {
  color: #ffffff;
}


/* ピンク */

.lineup .box03 {
  background-color: #E5B6BF;
  border-top-right-radius: 0vw;
  border-top-left-radius: 0vw;
  border-bottom-left-radius: 10vw;
  border-bottom-right-radius: 10vw;
  padding: 5% 10%;
  aspect-ratio: 2/1;
}

.lineup .box03 h3 {
  color: #D37176
}

.lineup .box03 .text-box {
  border: 5px solid #D37176;
}

.lineup .box03 .text-box h5 {
  color: #D37176;
}

.lineup .box03 .text-box h6 {
  color: #D37176;
}

.lineup .box03 .text-box .btn {
  background-color: #D37176;
}

.lineup .box03 .text-box .btn p {
  color: #ffffff;
}

/* ---------チェックポイント(pc用)----------- */

.checkpoint {
  margin-bottom: 14.286%;
}

.checkpoint .box {
  display: flex;
  justify-content: space-between;
}

.checkpoint .box-01 {
  color: #E87575;
  width: calc((100% - 4.762%)/3);
  border: 5px solid #E87575;
  background-color: #ffffff;
  border-top-right-radius: 20vw;
  border-top-left-radius: 20vw;
  padding: 4% 5%;
}

.checkpoint .box-01 .icon {
  text-align: center;
}

.checkpoint .box-01 h3 {
  text-align: center;
  margin-top: 4%;
}

.checkpoint .box-01 h6 {
  text-align: center;
  margin-top: 10%;

}

/* ---------チェックポイント(タブレット用)----------- */


@media only screen and (max-width:1200px) {

  .checkpoint .box {
    display: block;
    margin: 5% 15%;
  }

  .checkpoint .box-01 {
    width: 100%;
    margin-bottom: 10%;
    border-top-right-radius: 40vw;
    border-top-left-radius: 40vw;
    padding: 15%;
  }

}

/* -------------ラインナップ(sp用)---------- */

@media only screen and (max-width:500px) {
.checkpoint .box-01 .icon {
    width: 40%;
    margin-left: 30%;
  }

.checkpoint .box-01  h3{
    font-size: 2rem;
  }

  .checkpoint .box-01  h6{
    font-size: 1rem;
  }

}



/* ------------キャンペーン(sp用)------------ */
.campaign .box01 {
  color: #4D679E;
  background-color: #4D679E;
  border-bottom-left-radius: 10vw;
  border-top-right-radius: 10vw;
  padding: 5% 10%;
  margin-bottom: 14.286%;
  display: flex;
  justify-content: space-between;
}

.campaign h5 {
  font-size: 1.5rem;
  text-align: center;
}

.campaign h6 {
  text-align: center;
}

/* 左 */

.campaign .left-box {
  width: calc((100% - 4.762%)/2);
  border: 5px solid #A1B4DC;
  background-color: #ffffff;
  border-radius: 5vw;
  padding: 5% 5%;

}

.campaign .left-box02 {
  width: 100%;
  text-align: center;
  margin: 8% 0;
}

.campaign .left-box03 {
  display: flex;
  align-items: center
}

.campaign .left-box03 .text {
  margin-left: 4%;
}


/* 右 */

.campaign .right-box {
  width: calc((100% - 4.762%)/2);
  border: 5px solid #A1B4DC;
  background-color: #ffffff;
  border-radius: 5vw;
  padding: 5% 5%;
}

.campaign .right-box h5 {
  margin-bottom: 8%;
}

.campaign .right-box .icon {
  text-align: center;
  margin-bottom: 4%;
}

.campaign .right-box h6 {
  text-align: start;
}

.campaign .right-box .right-box01 {
  margin-bottom: 8%;
}

.campaign .right-box .btn {
  width: 250px;
  display: flex;
  align-items: center;
  padding: 5% 10%;
  background-color: #4D679E;
  border-radius: 3vw;
  margin: 8% 0 0 25%;
}

.campaign .right-box .btn p {
  margin-right: 10%;
  text-align: center;
}


.campaign .right-box .btn img {
  width: 20%;
}

.campaign .right-box .btn {
  color: #ffffff;
  text-align: center;
}

/* ------------キャンペーン(タブレット用)-------- */

@media only screen and (max-width:1200px) {
  .campaign .box01 {
    padding: 10% 15%;
  }

  .campaign .left-box {
    padding: 10%;
    border-radius: 10vw;
  }

  .campaign .right-box {
    padding: 10%;
    border-radius: 10vw;
  }

  .campaign .right-box .btn {
    border-radius: 6vw;
    width: 50%;
  }

  .campaign .right-box .btn img {
    width: 10%;
  }

}

/* -------------キャンペーン(sp用)---------- */

@media only screen and (max-width:500px) {
  .campaign .box01 {
    padding: 10%;
  }

  .campaign h5{
    font-size: 1.25rem;
  }

  .campaign .left-box03 {
    display: block;
  }
  .campaign .left-box03 img{
    margin-left: 30%;
    margin-bottom: 5%;
  }

  .campaign .right-box .btn{
    width: 70%;
    margin:5% 0;
    margin-left: 15%;
  }


}


/* ------------フッター(pc用)------------ */
footer {
  margin-bottom: 2%;
}

footer h3 {
  color: #E87575;
  text-align: center;
}

footer p {
  color: #E87575;
  text-align: center;
  margin: 8%;
}

@media only screen and (max-width:1200px) {
  .campaign .box01 {
    display: block;
  }

  .campaign .left-box {
    width: 100%;
    margin-bottom: 10%;
  }

  .campaign .right-box {
    width: 100%;

  }
}