@charset "utf-8";
:root{
  --cl-pink:#EA8E9E;
}

#cosme_project2026 a{
  transition: 0.2s
}

#cosme_project2026 a:hover{
  opacity: 0.6
}

/* common */
/* ======================================== */
#cosme_project2026{
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #000;
  letter-spacing: 0;
}

#cosme_project2026 .inner{
  padding: 0 20px;
}

/*#cosme_project2026 .cl.pk{
  color: var(--cl-pink);
}*/

#cosme_project2026 .montserrat{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

a.not-work{
  pointer-events: none;
}


#cosme_project2026 .montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#cosme_project2026 .zen-old-mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

#cosme_project2026 .bacasime-antique {
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;
}

#cosme_project2026 .style-head{
  font-size: 32px !important;
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 1;
  text-align: center;
}

#cosme_project2026 .style-head:before{
  content: "";
  width: 4px;
  height: 26px;
  background-color: #ECB0BA;
  display: block;
  margin-bottom: 10px
}


/* section kv */
/* ======================================== */
#cosme_project2026 #kv{
  text-align: center;
}

/* section intro (concept & ambassador) */
/* ======================================== */
#cosme_project2026 #intro{
  display: flex;
  flex-direction: column;
  align-items: center;

  background: url(/contents/FeaturePage/cosme_project2026/bg_01_pc.png) center top no-repeat;
  background-size: 2250px 1411px
}

/*#cosme_project2026 #intro:before{
width: 780px;
height: 780px;
background: transparent radial-gradient(closest-side at 53% 56%, #F5CED7 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
mix-blend-mode: multiply;
opacity: 0.4;
position: absolute;
content: "";
display: block;
}

#cosme_project2026 #intro:after{
width: 1012px;
height: 1012px;
background: transparent radial-gradient(closest-side at 53% 56%, #ECB0BA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
mix-blend-mode: multiply;
opacity: 0.3;


position: absolute;
content: "";
display: block;
}*/

#cosme_project2026 #concept{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 180px;
  margin-bottom: 150px
}

#cosme_project2026 #concept .style-head{
  margin-bottom: 54px
}

#cosme_project2026 #concept .txt{
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;

  font-size: 15px;
  line-height: 34px;
  text-align: left;
  max-width: 270px;
  width: 100%;
  margin-bottom: 64px
}

#cosme_project2026 #concept img{
  max-width: 360px;
  width: 100%
}

#cosme_project2026 #ambassador{
  max-width: 1250px;
  width: 100%;
  border-top: 1px solid #EBEBEB;
  padding-top: 124px;
}

#cosme_project2026 #ambassador h3{
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 32px;
  letter-spacing: -0.64px;
  line-height: 1;
  text-align: center;
  margin-top: 36px
}

#cosme_project2026 #ambassador h4{
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 1;
  margin-top: 18px;
}

#cosme_project2026 #ambassador .comment{
  display: flex;
  max-width: 1000px;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 30px auto 0;
  gap: 40px;
}

#cosme_project2026 #ambassador .comment dd{
  max-width: 300px;
  width: 100%;
}

#cosme_project2026 #ambassador .comment dd img{
  width: 100%
}

#cosme_project2026 #ambassador .comment dt{
  width: calc(100% - 340px);
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  line-height: 34px;
  letter-spacing: 0;
}

#cosme_project2026 #ambassador .comment dt p+p:not([class]){
  margin-top: 30px;
}

/* section product */
/* ======================================== */
#cosme_project2026 #product{
  background-color: #F8F7F7;
  margin-top: 124px;
  padding-top: 126px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cosme_project2026 #product .style-head{
  margin-bottom: 30px
}

#cosme_project2026 #product .product-main-img{
  max-width: 1200px;
  width: 100%;
  margin-bottom: 58px
}

#cosme_project2026 #product h3{
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;

  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.6px;
  text-align: center;
  margin-bottom: 24px;
}

#cosme_project2026 #product .txt{
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;

  text-align: center;
  font-size: 15px;
  line-height: 34px;
  letter-spacing: 0;
  margin-bottom: 94px
}

#cosme_project2026 #product ul{
  display: flex;
  flex-direction: column;
  max-width: 930px;
  width: 100%;
  gap: 35px;
}

#cosme_project2026 #product ul li{
  background-color: #fff;
  border-radius: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 50px 80px
}

#cosme_project2026 #product ul li>div{
  width: 370px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#cosme_project2026 #product ul li img{
  width: 340px;
  height: 340px
}

#cosme_project2026 #product ul li>div h4{
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;

  line-height: 1;
  font-size: 32px;
  letter-spacing: -0.32px;
  margin-top: 35px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f4bac8;
  margin-bottom: 16px;
  position: relative;
  display: flex;
}

#cosme_project2026 #product ul li>div h4 img{
  position: absolute;
  z-index: 8;
  width: 74px;
  height: 74px;
  top: -34px;
  left: -34px;
}

#cosme_project2026 #product ul li>div h4 span{
  position: relative;
  z-index: 9
}

#cosme_project2026 #product ul li>div p{
  font-size: 14px;
  letter-spacing: 0;
  line-height: 26px;
}

#cosme_project2026 #product ul li>div a{
  display: flex;
  width: 300px;
  height: 58px;
  background: transparent linear-gradient(103deg, #F5CED7 0%, #F4BAC8 100%) 0% 0% no-repeat padding-box;
  border-radius: 29px;
  color: #fff;
    justify-content: center;
    align-items: center;
    letter-spacing: -1px;
    font-weight: 500
}

/* section other (action & topics) */
/* ======================================== */
#cosme_project2026 #other{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 340px;

  background: url(/contents/FeaturePage/cosme_project2026/bg_02_pc.png) no-repeat;
  background-size: 2250px 665px;
  /*background-position: center 745px;*/
  background-position: center 120%;
  margin-bottom: -6rem
}

#cosme_project2026 #action .style-head{
  margin-top: 128px;
  margin-bottom: 30px
}

#cosme_project2026 #action .action-main-img{
  max-width: 1200px;
  width: 100%;
  margin-bottom: 28px
}

#cosme_project2026 #action .txt{
  font-size: 14px;
  letter-spacing: 0;
  line-height: 26px;
  text-align: center;
  margin-bottom: 52px;
}

#cosme_project2026 #action .more{
  display: flex;
  width: 313px;
  height: 58px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #F4BAC8;
  border-radius: 43px;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: #F4BAC8;

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;

  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding-top: 2px;
}

#cosme_project2026 #topics{
  max-width: 1250px;
  width: 100%;
  border-top: 1px solid #EBEBEB;
  margin-top: 124px;
  padding-top: 154px;
  display: none;
}

#cosme_project2026 #topics .style-head{
  margin-bottom: 30px
}

#cosme_project2026 #topics .thumbnail-slider .swiper-wrapper{
  display: flex;
  gap: 13px;
  justify-content: center;
}

#cosme_project2026 #topics .thumbnail-slider div.swiper-slide{
  width: 290px
}

#cosme_project2026 #topics .thumbnail-slider div.swiper-slide img{
  margin-bottom: 18px
}

/* ===========================================
 * sp
 * ======================================== */
@media(max-width: 768px){

  /* common */
  /* ======================================== */
  #cosme_project2026 .style-head{
    line-height: 30px
  }

  /* section intro (concept & ambassador) */
  /* ======================================== */
  #cosme_project2026 #intro{
    background: url(/contents/FeaturePage/cosme_project2026/bg_01_sp.png) center top no-repeat;
    background-size: 100%
  }

  #cosme_project2026 #concept{
    margin-top: 100px;
    margin-bottom: 100px
  }

  #cosme_project2026 #concept .style-head{
    margin-bottom: 64px
  }

  #cosme_project2026 #concept img{
    max-width: 284px;
  }

  #cosme_project2026 #ambassador{
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
    padding-top: 100px
  }

  #cosme_project2026 #ambassador .comment{
    flex-direction: column;
  }

  #cosme_project2026 #ambassador .comment dd{
    max-width: 260px
  }

  #cosme_project2026 #ambassador .comment dt{
    width: 100%;
    padding: 0 5px;
    letter-spacing: -0.7px;
  }

  #cosme_project2026 #ambassador .comment dt p+p{
    margin-top: 40px
  }

  /* section product */
  /* ======================================== */
  #cosme_project2026 #product{
    background-color: unset;
    margin-top: 100px;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px
  }

  #cosme_project2026 #product .txt{
    margin-bottom: 130px
  }

  #cosme_project2026 #product ul{
    padding-left: 15px;
    padding-right: 15px;
    gap: 130px;
  }

  #cosme_project2026 #product ul li{
    padding: 0;
    flex-direction: column-reverse;
    align-items: center;
  }

  #cosme_project2026 #product ul li img{
    width: 100%;
    height: auto;
  }

  #cosme_project2026 #product ul li>div{
    width: 100%;
    align-items: center;
    text-align: center;
  }

  #cosme_project2026 #product ul li>div h4{
    justify-content: center;
  }

  #cosme_project2026 #product ul li>div h4 img{
    left: unset;
  }

  #cosme_project2026 #product ul li>div .top br{
    display: none;
  }

  #cosme_project2026 #product ul li>div .top{
    margin-bottom: 50px
  }

  /* section other (action & topics) */
  /* ======================================== */
  #cosme_project2026 #other{
    padding-left: 10px;
    padding-right: 10px;
    background: url(/contents/FeaturePage/cosme_project2026/bg_02_sp.png) no-repeat;
    background-size: 100%;
    background-position: center 120%;
    padding-bottom: 180px;
    margin-bottom: -4rem;
  }

  #cosme_project2026 #action .txt{
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: -0.2px
  }


}