@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap");
/*-------------------------------------------
px→vw
 * ex)
   width: sp(200)
   width: tab(200)
-------------------------------------------*/
.recomend .wrapCol {
  padding: 5% 0 10%;
  width: 100%;
}
.recomend .wrapCol .mainCol {
  width: 100%;
}
.recomend section {
  position: relative;
}
@media screen and (min-width: 768px) {
  .recomend .wrapCol {
    padding: 60px 0 100px;
    width: 100%;
  }
  .recomend .wrapCol .mainCol {
    width: 100%;
  }
  .recomend .morebtnCol {
    position: absolute;
    right: 0px;
    top: -32px;
  }
  .recomend .morebtnCol li {
    margin-left: 10px;
  }
  .recomend .morebtnCol li .btnL {
    padding: 9px 0;
    min-width: 220px;
  }
}

.mainCol img {
  margin-left: auto;
  margin-right: auto;
  display: inherit;
}
.mainCol .btnVertCol li a.btnCBbrack {
  background: #000;
}
.mainCol .btnVertCol li a.btnCBbrounBrack {
  background: #411c0c;
}
.mainCol .btnVertCol li a.btnCBbrown {
  background: #683015;
}
@media screen and (min-width: 768px) {
  .mainCol .btnVertCol {
    display: flex;
    justify-content: space-between;
    max-width: 750px;
    margin: 0 auto;
  }
  .mainCol .btnVertCol li {
    width: 32%;
    margin-top: 20px;
  }
}

/* 簡易表示切替 */
.sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

.tab {
  display: none;
}
@media screen and (min-width: 768px) {
  .tab {
    display: block;
  }
}

/* 大枠 */
.creerCol {
  text-align: center;
}
.creerCol h2 {
  padding-top: 8%;
  margin: 0 auto;
  width: 92%;
}
@media screen and (min-width: 768px) {
  .creerCol h2 {
    padding-top: 0;
    width: 100%;
  }
}
.creerCol .creerColInner {
  position: relative;
  margin: 10% auto 0;
  padding: 0 0 5%;
}
.creerCol .creerColInner h3 {
  padding-top: 10%;
}
.creerCol .creerColInner ul.creerBnrList {
  padding-top: 5%;
  margin: 0 auto;
  width: 92%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.creerCol .creerColInner ul.creerBnrList li {
  margin: 3% 1%;
  width: 48%;
  background: #fff;
}
.creerCol .creerColInner ul.creerBnrList li a {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .creerCol .creerColInner {
    margin: 70px auto 0;
    padding: 0 0 40px;
  }
  .creerCol .creerColInner h3 {
    padding-top: 40px;
  }
  .creerCol .creerColInner ul.creerBnrList {
    padding-top: 30px;
    width: 1100px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
  }
  .creerCol .creerColInner ul.creerBnrList li {
    margin: 10px 10px;
    width: 320px;
    background: #fff;
  }
  .creerCol .creerColInner ul.creerBnrList li a {
    margin: 0;
  }
}

/* 各ブランド下層 */
.creerDetailCol {
  padding: 5% 5% 0;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .creerDetailCol {
    padding: 0;
    width: 1100px;
  }
}

.topCol h2 + p {
  padding-top: 10%;
  margin: 0 auto;
  width: 92%;
  font-size: 120%;
}
@media screen and (min-width: 768px) {
  .topCol h2 + p {
    padding-top: 70px;
    width: 100%;
    font-size: 120%;
  }
}
.topCol .creerColInner {
  background: #9c9b98;
}
.topCol .creerColInner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 1000px;
  background: url(../../images/recommend/creerbeaute/bg_lt.png) top 5px left no-repeat, url(../../images/recommend/creerbeaute/bg_rb.png) bottom 5px right no-repeat;
  background-size: 25% auto, 25% auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .topCol .creerColInner::before {
    background-size: auto, auto;
  }
}
@media screen and (min-width: 768px) {
  .topCol .creerColInner {
    margin: 70px auto 0;
    padding: 0 0 40px;
  }
  .topCol .creerColInner h3 {
    padding-top: 40px;
  }
  .topCol .creerColInner ul.creerBnrList {
    padding-top: 30px;
    width: 1100px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
  }
  .topCol .creerColInner ul.creerBnrList li {
    margin: 10px 10px;
    width: 320px;
    background: #fff;
  }
  .topCol .creerColInner ul.creerBnrList li a {
    margin: 0;
  }
}

.versailles .mv {
  box-sizing: border-box;
  position: relative;
  padding: 5% 0;
  margin: 10% auto 0;
  width: 96%;
  font-size: 120%;
}
.versailles .mv::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 1000px;
  background: url(../../images/recommend/creerbeaute/versailles/bg_lt.png) top left no-repeat, url(../../images/recommend/creerbeaute/versailles/bg_rb.png) bottom right no-repeat, url(../../images/recommend/creerbeaute/versailles/bg_mv.jpg) center no-repeat;
  background-size: 25% auto, 25% auto, 25% auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .versailles .mv::before {
    background-size: auto, auto, auto;
  }
}
.versailles .mv + p {
  box-sizing: border-box;
  margin: 10% auto 0;
  padding: 3% 1.5%;
  width: 92%;
  border: 1px solid #bd862c;
  font-size: 120%;
}
@media screen and (min-width: 768px) {
  .versailles .mv {
    padding: 0;
    margin-top: 70px;
    width: 100%;
    max-width: 1000px;
  }
  .versailles .mv + p {
    margin-top: 70px;
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    border: 1px solid #bd862c;
    font-size: 120%;
  }
}
.versailles .creerColInner {
  background: transparent;
}
.versailles .creerColInner ul.creerBnrList {
  padding-top: 5%;
  margin: 0 auto;
  width: 92%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.versailles .creerColInner ul.creerBnrList li {
  margin: 3% 1%;
  width: 48%;
  background: #fff;
}
.versailles .creerColInner ul.creerBnrList li a img {
  border: 1px solid #bd862c;
}
@media screen and (min-width: 768px) {
  .versailles .creerColInner {
    margin: 70px auto 0;
    padding: 0 0 40px;
  }
  .versailles .creerColInner h3 {
    padding-top: 40px;
  }
  .versailles .creerColInner ul.creerBnrList {
    padding-top: 30px;
    width: 1100px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
  }
  .versailles .creerColInner ul.creerBnrList li {
    margin: 10px 10px;
    width: 320px;
  }
  .versailles .creerColInner ul.creerBnrList li a {
    margin: 0;
  }
  .versailles .creerColInner ul.creerBnrList li a img {
    border: 1px solid #bd862c;
  }
}

.sailormoon .mv {
  box-sizing: border-box;
  position: relative;
  padding: 5% 0;
  margin: 10% auto 0;
  width: 96%;
  font-size: 120%;
}
.sailormoon .mv::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 1526px;
  background: url(../../images/recommend/creerbeaute/sailormoon/bg_mv.png) top center no-repeat;
  background-size: 25% auto, 25% auto, 25% auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .sailormoon .mv::before {
    background-size: auto, auto, auto;
  }
}
.sailormoon .mv + p {
  box-sizing: border-box;
  margin: 10% auto 0;
  padding: 3% 1.5%;
  width: 92%;
  border: 1px solid #f5c2e4;
  border-image: linear-gradient(90deg, #ffb04e, #72c4ec 25%, #ffbede 50%, #f66477 75%, #5acb79);
  border-image-slice: 1;
  font-size: 120%;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .sailormoon .mv {
    padding: 0;
    margin-top: 70px;
    width: 100%;
  }
  .sailormoon .mv + p {
    margin-top: 70px;
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    font-size: 120%;
  }
}
.sailormoon .creerColInner {
  background: transparent;
}
.sailormoon .creerColInner ul.creerBnrList {
  padding-top: 5%;
  margin: 0 auto;
  width: 92%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.sailormoon .creerColInner ul.creerBnrList li {
  margin: 3% 1%;
  width: 48%;
  background: #fff;
}
.sailormoon .creerColInner ul.creerBnrList li a img {
  border: 1px solid #f5c2e4;
}
@media screen and (min-width: 768px) {
  .sailormoon .creerColInner {
    margin: 70px auto 0;
    padding: 0 0 40px;
  }
  .sailormoon .creerColInner h3 {
    padding-top: 40px;
  }
  .sailormoon .creerColInner ul.creerBnrList {
    padding-top: 30px;
    width: 1100px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
  }
  .sailormoon .creerColInner ul.creerBnrList li {
    margin: 10px 10px;
    width: 320px;
  }
  .sailormoon .creerColInner ul.creerBnrList li a {
    margin: 0;
  }
  .sailormoon .creerColInner ul.creerBnrList li a img {
    border: 1px solid #f5c2e4;
  }
}

.pondecouleur .creerColInner {
  margin: 0 auto;
  width: 92%;
}
@media screen and (min-width: 768px) {
  .pondecouleur .creerColInner {
    width: 100%;
    max-width: 1000px;
  }
}
.pondecouleur .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/bg_products.jpg) no-repeat top center/100% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: stretch;
}
.pondecouleur .productsList li {
  width: 50%;
}
.pondecouleur .movie {
  position: relative;
  z-index: 0;
}
.pondecouleur .movie .inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 66.555%;
  height: auto;
  transform: translate(-50%, 0);
  aspect-ratio: 409 / 727;
}
.pondecouleur .movie .inner iframe,
.pondecouleur .movie .inner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pondecouleur.sanriocharacters h3 {
  padding-top: 0;
}
.pondecouleur.sanriocharacters .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanriocharacters/bg_movie.jpg) no-repeat top center/100% auto;
  padding-top: 123.3%;
}
.pondecouleur.sanriocharacters .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanriocharacters/bg_store.jpg) no-repeat top center/100% auto;
  padding-top: 30%;
}
.pondecouleur.sanriocharacters .storeList li {
  position: absolute;
  width: 31.4%;
}
.pondecouleur.sanriocharacters .storeList li:nth-child(1) {
  top: 16%;
  left: 17.6%;
}
.pondecouleur.sanriocharacters .storeList li:nth-child(2) {
  top: 16%;
  left: 54%;
}
.pondecouleur.sanriocharacters .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanriocharacters/bg_products.jpg) no-repeat top center/100% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: stretch;
}
.pondecouleur.sanriocharacters .productsList li {
  width: 50%;
}
.pondecouleur.doremi h3 {
  padding-top: 0;
}
.pondecouleur.doremi .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/doremi/bg_movie.jpg) no-repeat top center/100% auto;
  padding-top: 119.5%;
}
.pondecouleur.doremi .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/doremi/bg_store.jpg) no-repeat top center/100% auto;
  padding-top: 30%;
}
.pondecouleur.doremi .storeList li {
  position: absolute;
  width: 31.4%;
}
.pondecouleur.doremi .storeList li:nth-child(1) {
  top: 16%;
  left: 17.6%;
}
.pondecouleur.doremi .storeList li:nth-child(2) {
  top: 16%;
  left: 54%;
}
.pondecouleur.doremi .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/doremi/bg_products.jpg) no-repeat top center/100% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: stretch;
}
.pondecouleur.doremi .productsList li {
  width: 50%;
}
.pondecouleur.mofusand h3 {
  padding-top: 0;
}
.pondecouleur.mofusand .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/mofusand/bg_movie.jpg?v2) no-repeat top center/100% auto;
  padding-top: 119.5%;
}
.pondecouleur.mofusand .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/mofusand/bg_store.jpg) no-repeat top center/100% auto;
  padding-top: 30%;
}
.pondecouleur.mofusand .storeList li {
  position: absolute;
  width: 31.4%;
}
.pondecouleur.mofusand .storeList li:nth-child(1) {
  top: 16%;
  left: 17.6%;
}
.pondecouleur.mofusand .storeList li:nth-child(2) {
  top: 16%;
  left: 54%;
}
.pondecouleur.mofusand .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/mofusand/bg_products.jpg) no-repeat top center/100% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: stretch;
}
.pondecouleur.mofusand .productsList li {
  width: 50%;
}
.pondecouleur.kirby h3 {
  padding-top: 0;
}
.pondecouleur.kirby .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/kirby/bg_movie.jpg?v2) no-repeat top center/100% auto;
  padding-top: 119.5%;
}
.pondecouleur.kirby .movie .inner {
  top: 1.5%;
}
.pondecouleur.kirby .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/kirby/bg_store.jpg) no-repeat top center/100% auto;
  padding-top: 30%;
}
.pondecouleur.kirby .storeList li {
  position: absolute;
  width: 31.4%;
}
.pondecouleur.kirby .storeList li:nth-child(1) {
  top: 16%;
  left: 17.6%;
}
.pondecouleur.kirby .storeList li:nth-child(2) {
  top: 16%;
  left: 54%;
}
.pondecouleur.kirby .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/kirby/bg_products.jpg) no-repeat top center/100% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: stretch;
}
.pondecouleur.kirby .productsList li {
  width: 50%;
}
.pondecouleur.tamagotchi h3 {
  padding-top: 0;
}
.pondecouleur.tamagotchi .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/tamagotchi/img_movie_02.jpg) no-repeat top center/100% auto;
  padding-top: 119.5%;
}
.pondecouleur.tamagotchi .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/tamagotchi/bg_store.jpg) no-repeat bottom center/100% auto;
  padding-top: 51.6%;
}
.pondecouleur.tamagotchi .storeList li {
  position: absolute;
}
.pondecouleur.tamagotchi .storeList li:nth-child(1) {
  width: 27.825%;
  top: 3.33333%;
  left: 7%;
}
.pondecouleur.tamagotchi .storeList li:nth-child(2) {
  width: 46.64%;
  top: 3.33333%;
  right: 7%;
}
.pondecouleur.tamagotchi .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/tamagotchi/bg_products.jpg) no-repeat bottom center/100% auto;
}
.pondecouleur.tamagotchi li {
  width: 100%;
}
.pondecouleur.tamagotchi a.pondeTop {
  width: 80%;
  margin: 4em auto 1em;
}
.pondecouleur.shinchan h3 {
  padding-top: 0;
}
.pondecouleur.shinchan .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/shinchan/img_movie_02.jpg) no-repeat top center/100% auto;
  padding-top: 126.6%;
}
.pondecouleur.shinchan .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/shinchan/bg_store.jpg) no-repeat bottom center/100% auto;
  padding-top: 51.6%;
}
.pondecouleur.shinchan .storeList li {
  position: absolute;
}
.pondecouleur.shinchan .storeList li:nth-child(1) {
  width: 27.825%;
  top: 3.33333%;
  left: 7%;
}
.pondecouleur.shinchan .storeList li:nth-child(2) {
  width: 46.64%;
  top: 3.33333%;
  right: 7%;
}
.pondecouleur.shinchan .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/shinchan/bg_products.jpg?v2) no-repeat bottom center/100% auto;
}
.pondecouleur.shinchan li {
  width: 100%;
}
.pondecouleur.shinchan a.pondeTop {
  width: 80%;
  margin: 4em auto 5.5em;
}
.pondecouleur.sanrioangel h3 {
  padding-top: 0;
}
.pondecouleur.sanrioangel .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanrioangel/img_movie_02.jpg) no-repeat top center/100% auto;
  padding-top: 126.6%;
}
.pondecouleur.sanrioangel .storeList {
  position: relative;
  z-index: 0;
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanrioangel/bg_store.jpg) no-repeat bottom center/100% auto;
  padding-top: 51.6%;
}
.pondecouleur.sanrioangel .storeList li {
  position: absolute;
}
.pondecouleur.sanrioangel .storeList li:nth-child(1) {
  width: 30%;
  top: 3.33333%;
  left: 7%;
}
.pondecouleur.sanrioangel .storeList li:nth-child(2) {
  width: 46.64%;
  top: 10%;
  right: 7%;
}
.pondecouleur.sanrioangel .productsList {
  background: url(../../images/recommend/creerbeaute/pondecouleur/sanrioangel/bg_products.jpg?v2) no-repeat bottom center/100% auto;
}
.pondecouleur.sanrioangel li {
  width: 100%;
}
.pondecouleur.sanrioangel a.pondeTop {
  width: 80%;
  margin: 3.6% auto 0;
}
.pondecouleur.toukenranbu h3 {
  padding-top: 0;
}
.pondecouleur.toukenranbu .movie {
  background: url(../../images/recommend/creerbeaute/pondecouleur/toukenranbu/img_movie_02.jpg) no-repeat top center/100% auto;
  padding-top: 126.6%;
}
.pondecouleur.toukenranbu .creerColInner h2 {
  width: 100%;
  padding-top: 0;
}
.pondecouleur.toukenranbu .storeList {
  position: relative;
  z-index: 0;
  background-color: #f6f7f9;
  padding-top: 50.5%;
}
.pondecouleur.toukenranbu .storeList li {
  position: absolute;
}
.pondecouleur.toukenranbu .storeList li:nth-child(1) {
  width: 32.08333%;
  bottom: 9.33333%;
  left: 9.33333%;
}
.pondecouleur.toukenranbu .storeList li:nth-child(2) {
  width: 46.16667%;
  bottom: 12.66667%;
  right: 7.08333%;
}
.pondecouleur.toukenranbu .productsList {
  background-color: #f6f7f9;
}
.pondecouleur.toukenranbu li {
  width: 100%;
}
.pondecouleur.toukenranbu a.pondeTop {
  width: 80%;
  margin: 4em auto 2.5em;
}

.facemask .creerColInner {
  background: url(../../images/recommend/creerbeaute/facemask/bg_content.jpg) repeat-y top center/100% auto;
  margin: 0 auto;
  width: 92%;
}
@media screen and (min-width: 768px) {
  .facemask .creerColInner {
    width: 100%;
    max-width: 1000px;
  }
}
.facemask .lineupCol {
  padding: 8vw 0;
}
@media screen and (min-width: 768px) {
  .facemask .lineupCol {
    padding: 50px 0;
  }
}
.facemask .lineupCol .lineup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6vw;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .facemask .lineupCol .lineup {
    gap: 50px;
  }
}
.facemask .lineupCol .lineup li {
  width: 37.9%;
}
.facemask .lineupCol .lineup li.w100 {
  width: 100%;
}
.facemask .lineupCol .lineup li.w100 .lineupInner {
  width: 37.9%;
  margin: auto;
}
.facemask .lineupCol .lineup li .lineupIco {
  width: 60%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .facemask .lineupCol .lineup li .lineupIco {
    width: auto;
  }
}
.facemask .lineupCol .lineup li a {
  display: block;
  margin: 3vw auto;
}
@media screen and (min-width: 768px) {
  .facemask .lineupCol .lineup li a {
    margin: 20px auto;
  }
}
.facemask h3 {
  margin: 0;
  padding: 0 !important;
}
.facemask .movie {
  position: relative;
  z-index: 0;
  padding-top: 119.5%;
}
.facemask .movie .inner {
  position: absolute;
  top: -0.5%;
  left: 50%;
  width: 66.555%;
  height: auto;
  transform: translate(-50%, 0);
  aspect-ratio: 409 / 727;
}
.facemask .movie .inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}