@charset "UTF-8";

/*//////////////////////////////////////////////////

ビープルとばら　強く、美しく、咲き誇れ。ローズの恵みで、心とからだを整える。

//////////////////////////////////////////////////*/

/* ========================================================
                      * Layout style *
========================================================= */

/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

html {
  font-size: calc(10 * (100vw/482));
}

@media (min-width: 751px) {
  html {
    font-size: calc(10 * (100vw/1400));
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 62.5%
  }
}


.group-detail-area {
  width: 100% !important;
}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

#FooterWrap {
  position: relative;
  background: #fff;
  z-index: 10;
}

#header_txt_slider {
  z-index: 10;
  position: relative;
}

@media (min-width: 751px) {

  .product_list_head.search-default,
  .sort_area,
  .product-list-area,
  .product-history.js_remove_section,
  .product_list_head,
  .product_tag_wrap {
    position: relative;
    background: #fff;
    z-index: 10;
  }

  .product-ranking {
    position: relative;
    z-index: 10;
  }

  .sort_area {
    margin-top: 0;
    padding-top: 6rem;
  }

  .product-list-area .inner {
    margin-bottom: 0;
    padding-bottom: 8rem;
  }

  #product-list {
    padding-bottom: 0;
  }

  [class^="cateID_CAT"] .product_list_head {
    background: #f9f8ef;
    z-index: 11;
  }
}


/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 48.2rem;

  /* PCデザインの横幅 */
  --pcWidth: 1400;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color-lp_txt_font: #565656;
  --color-lp_bg: #f7e3e9;
  --color-lp_border: #231815;
  --font-regular: "游ゴシック体", "yu-gothic-pr6n", sans-serif;
  --font-num: "biz-udpgothic", sans-serif;
}

@media (min-width: 751px) {
  :root {}
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: 0;
  font-weight: 500;
  text-align: justify;
}

.lp_contents {
  width: 100%;
  height: 100%;
  overflow-x: clip;
  background: var(--color-lp_bg);
  font-family: var(--font-regular);
}

@media (min-width: 751px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 300;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
}

.lp_contents a,
.lp_contents button,
.lp_contents .slick-dots li,
.lp_contents .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

.lp_contents .fixed_area .fixed_right figure {
  position: relative;
  background-color: var(--color-lp_bg);
  isolation: isolate;
}

.lp_contents .fixed_area .fixed_right figure img {
  position: relative;
  z-index: 2;
}

.only_pc {
  display: none;
}

.only_sp {
  display: block;
}

@media (min-width: 751px) {
  .only_pc {
    display: block;
  }

  .only_sp {
    display: none;
  }
}

/* ========================================================
                         * SP  *
========================================================= */

.lp_contents .lp_contents_inner {}

.lp_contents .block {
  background: var(--color-lp_bg);
}

.lp_contents .block * {}

.lp_contents .sec_inner {
  position: relative;
}

.lp_contents .block::before,
.lp_contents .block::after {
  content: "";
  width: 1px;
  height: 100%;
  background: var(--color-lp_border);
  position: absolute;
  top: 0;
  z-index: 0;
}

.lp_contents .block::before {
  left: calc(20 * (var(--rate)));
}

.lp_contents .block::after {
  right: calc(20 * (var(--rate)));
}

.lp_contents .inner {
  width: calc(707 * (var(--rate)));
  margin: 0 auto;
}

.lp_contents .sec_mv {
  position: relative;
  z-index: 1;
}

.lp_contents .sec_mv .sec_inner {
  padding-bottom: calc(85 * (var(--rate)));
}

.lp_contents .sec_mv .ttl_main {
  position: relative;
  z-index: 10;
}

.lp_contents .sec_item {
  z-index: 1;
  padding-top: calc(20 * (var(--rate)));
}

.lp_contents .sec_item_2 {}

.lp_contents .sec_item .inner {
  padding-bottom: calc(609 * (var(--rate)));
}

.lp_contents .sec_item .contents {
  position: relative;
  top: 0;
}

.lp_contents .sec_item .inner::after {
  content: "";
  width: calc(706 * (var(--rate)));
  height: calc(649 * (var(--rate)));
  position: absolute;
  bottom: 0;
  z-index: 10;
}

.lp_contents .sec_item_1 .inner::after {
  left: calc(20 * (var(--rate)));
  background: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/character_1.png) no-repeat center / 100%;
}

.lp_contents .sec_item_2 .inner::after {
  right: calc(20 * (var(--rate)));
  background: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/character_2.png?260427) no-repeat center / 100%;
  height: calc(638 * (var(--rate)));
}

.lp_contents .sec_item_3 .inner::after {
  right: calc(20 * (var(--rate)));
  background: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/character_3.png) no-repeat center / 100%;
  width: calc(660 * (var(--rate)));
  height: calc(646 * (var(--rate)));
}

.lp_contents .sec_item .item_wrap {
  border-top: 1px solid var(--color-lp_border);
}

.lp_contents .sec_item .item_wrap:last-of-type {
  border-bottom: 1px solid var(--color-lp_border);
}

.lp_contents .sec_item .item_1 {
  padding-bottom: calc(61 * (var(--rate)));
}

.lp_contents .sec_item .item_2 {
  padding-top: calc(45 * (var(--rate)));
  padding-bottom: calc(58 * (var(--rate)));
}

.lp_contents .sec_item .item_img {
  position: relative;
  z-index: 10;
}

.lp_contents .sec_item .item_1 .item_img {
  width: calc(667 * (var(--rate)));
  margin-inline: auto calc(-21 * (var(--rate)));
  margin-top: calc(-37 * (var(--rate)));
}

.lp_contents .sec_item .item_1 .item_img {
  width: calc(708 * (var(--rate)));
}

.lp_contents .sec_item .item_2 .item_img {
  width: calc(586 * (var(--rate)));
  margin: 0 auto;
}

.lp_contents .sec_item .item_description {
  padding-inline: calc(60 * (var(--rate)));
}

.lp_contents .sec_item .item_name {
  font-size: calc(28 * (var(--rate)));
  font-weight: 700;
  margin-top: calc(49 * (var(--rate)));
  position: relative;
  z-index: 10;
  line-height: calc(41.46/28);
}

.lp_contents .sec_item .item_txt {
  font-size: calc(24 * (var(--rate)));
  font-weight: 500;
  margin-top: calc(10 * (var(--rate)));
  line-height: calc(32/24);
  position: relative;
  z-index: 10;
}

.lp_contents .sec_item .item_note {
  font-size: calc(18 * (var(--rate)));
  margin-top: calc(10 * (var(--rate)));
}

.lp_contents .sec_item .item_txt sup {
  font-size: .8em;
  vertical-align: text-top;
}

.lp_contents .sec_item .item_price_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(50 * (var(--rate)));
  position: relative;
  z-index: 10;
}

.lp_contents .sec_item .item_price {
  font-size: calc(33 * (var(--rate)));
  font-weight: 700;
  font-family: var(--font-num);
}

.lp_contents .sec_item .item_price span {
  font-size: calc(20 * (var(--rate)));
  font-weight: 700;
  margin-left: calc(11 * (var(--rate)));
}

.lp_contents .sec_item .item_btn {
  width: calc(271 * (var(--rate)));
}


.js-sticky-section {
  position: sticky;
  top: 0;
}


/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 751px) {

  .lp_contents .fixed_area {
    position: fixed;
    top: 0;
    left: 0;
    translate: 0 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 0;
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - var(--pcMainContentWidth)) / 2);
    height: 100vh;
    position: relative;
  }

  .lp_contents .fixed_area .fixed_right {
    position: relative;
  }

  .lp_contents .fixed_area .fixed_right .menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
  }

  .lp_contents .fixed_area .fixed_right .menu ul {
    display: flex;
    gap: 4.5rem;
  }

  .lp_contents .fixed_area .fixed_right .menu li {
    position: relative;
    z-index: 2;
    width: 4.4rem;
  }

  .lp_contents .fixed_area .fixed_right .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42.4rem;
    height: 48.2rem;
    background-color: var(--color-lp_bg);
    isolation: isolate;
  }

  .lp_contents .fixed_area .fixed_right .bg img {
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 9;
    margin: 0 auto;
    overflow: clip;
    background: #f9e5eb;
  }

  .lp_contents .fixed_area .fixed_left {
    position: relative;
    z-index: 30;
  }

  /* 固定背景 */
  .bgSetting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    z-index: 1;
  }

  .bgSetting .for_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 45.8rem 100rem;
  }

  .bgSetting .for_bg:nth-of-type(1) {
    background-image: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/pc_left_1.png);
    background-repeat: no-repeat;
  }

  .bgSetting .for_bg:nth-of-type(2) {
    background-image: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/pc_left_2.png);
    background-repeat: no-repeat;
  }

  .bgSetting .for_bg:nth-of-type(3) {
    background-image: url(https://www.cosmekitchen-webstore.jp/Contents/ImagesPkg/product/list/bp_rosefair/pc_left_3.png);
    background-repeat: no-repeat;
  }

  .bgSetting .for_bg.selected {
    opacity: 1;
  }

  .lp_contents .inner {
    width: 100%;
  }

  .lp_contents .block::before,
  .lp_contents .block::after {
    z-index: 11;
  }

  .lp_contents .block::before {
    left: 0;
  }

  .lp_contents .block::after {
    right: 0;
  }

  .lp_contents .sec_item .item_1 .item_img {
    margin-inline: auto 0;
  }

  .lp_contents_inner .fall-animation {
    display: none;
  }
}