@charset "UTF-8";

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

CSS 2026 Basemake Collection

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

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

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

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

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

}

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

#share {
  z-index: 111 !important;
  transition: all 0.6s 0.3s;
}

@media screen and (max-width: 768px) {
  #share.move:not(.hidden) {
    translate: 0 calc(-70 * 60rem / 750);
  }
}

.share-txt {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.share-txt span {
  margin-top: calc(40 * (100vw / 750));
  margin-bottom: calc(40* (100vw / 750));
}

span.result {
  display: none !important;
}

/* ========================================================
                      * root *
========================================================= */
:root {
  --color_white: #fff;
  --color_black: #000000;
  --color_text: #858585;
  --color_bg01:#fdfbf0;
  --color_bg02:#f1f5f9;
  --color_bg03:#fef7f8;
  --color_pink:#f9bcc6;
  --color_lightpink:#fde4e8;
  --color_blue:#afcce7;
  --color_lightblue:#cfe0f1;
  --font_ja: "helvetica-neue-lt-pro", "hiragino-kaku-gothic-pron", sans-serif;
  --font_en: "Barlow Semi Condensed", sans-serif; 
}

#Wrap {
  width: 100%;
}

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

#lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 2;
  letter-spacing: 0.15em;
  text-align: center;
}

#lp_contents {
  width: 100%;
  max-width: 60rem;
  height: 100%;
  font-family: var(--font_ja);
  font-weight: 400;
  overflow-x: clip;
  color: var(--color_text);
  line-height: 2;
  background-color: var(--color_bg03);
}

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

#lp_contents .pcOnly {
  display: block !important;
}

#lp_contents .spOnly {
  display: none;
}

@media (max-width: 769px) {
#lp_contents .pcOnly {
  display: none !important;
}

#lp_contents .spOnly {
  display: block;
}
}

#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 .lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background-color: var(--color_bg03);
  padding-bottom: calc(140 * 60rem / 750);
}

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

  #lp_contents .fixed_area {
    display: grid;
    grid-template-columns: 1fr 60rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  #lp_contents .fixed_area .fixed_nav {
    position: -webkit-sticky;
    position: sticky;
    display: grid !important;
    justify-content: center;
    align-content: center;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }

  #lp_contents .fixed_right {
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  #lp_contents .fixed_left {
    display: grid !important;
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    align-items: center;
  }

  #lp_contents .logo {
    width: 25.5rem;
    text-align: center;
  }

  #lp_contents .lp_contents_inner {
    grid-column: 2;
    width: 60rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
    background-color: var(--color_bg03);
  }

}

/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */
#lp_contents .fixed_right .menu_list li {
  position: relative;
  width: 26.2rem;
}

#lp_contents .fixed_right .menu_list li:not(:first-of-type) {
  margin-top: 3.6rem;
}

#lp_contents .fixed_right .menu_list li a {
  display: flex;
  align-items: center;
}

#lp_contents .fixed_right .menu_list li:before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1rem;
  mask-image: url("../img/arrow01.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/arrow01.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  content: "";
}

#lp_contents .fixed_right .menu_list li:first-of-type:before {
  background-color: var(--color_pink);
}

#lp_contents .fixed_right .menu_list li:nth-of-type(2):before {
  background-color: var(--color_blue);
}

#lp_contents .fixed_right .menu_list li:nth-of-type(3):before {
  background-color: var(--color_highlighter);
}

#lp_contents .fixed_right .menu_list li a img {
  width: 12rem;
  margin-right: 2.5rem;
}

#lp_contents .fixed_right .menu_list li a p {
  font-family: var(--font_en);
  font-size: 2.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#lp_contents .fixed_right .menu_list li:first-of-type p {
  color: var(--color_pink);
}

#lp_contents .fixed_right .menu_list li:nth-of-type(2) p {
  color: var(--color_blue);
}

@media (max-width: 768px) {

  /* SP時ナビゲーション設定 */
  #lp_contents .fixed_area .fixed_right {
    position: fixed;
    bottom: 0;
    display: block;
    /* translate: 0 100%; */
    /* opacity: 0; */
    transition: all .5s;
    z-index: 99999;
    width: 100%;
  }

  #lp_contents .fixed_area .fixed_right.js-scrollStatus {
    transform: translateY(100%);
    transition: all 0.6s 0.3s;
  }

  #lp_contents .fixed_area .fixed_right.js-scrollStatus.scrolled-up {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
  }

  #lp_contents .fixed_right .menu_list {
    display: flex;
    width: 100%;
    margin-left: 0;
  }

  #lp_contents .fixed_right .menu_list li {
    width: calc(100% / 2);
    height: calc(110 * 60rem / 750);
    padding-top: calc(10 * 60rem / 750);
  }

  #lp_contents .fixed_right .menu_list li:nth-of-type(1) {
    background-color: var(--color_bg01);
  }

  #lp_contents .fixed_right .menu_list li:nth-of-type(2) {
    background-color: var(--color_bg02);
  }

  #lp_contents .fixed_right .menu_list li a {
    gap: calc(30 * 60rem / 750);
    margin-left: calc(34 * 60rem / 750);
  }

  #lp_contents .fixed_right .menu_list li a p {
    font-size: calc(36 * 60rem / 750);
    margin-top: calc(-6 * 60rem / 750);
    line-height: 1;
    letter-spacing: 0.08em;
  }

  #lp_contents .fixed_right .menu_list li:before {
    position: absolute;
    top: auto;
    bottom: 50%;
    right: calc(36 * 60rem / 750);
    transform: translateY(50%);
    width: calc(22 * 60rem / 750);
    height: calc(12 * 60rem / 750);
  }

  #lp_contents .fixed_right .menu_list li a img {
    width: calc(124 * 60rem / 750) !important;
    margin-top: calc(-8 * 60rem / 750);
    margin-right: 0;
  }

  #lp_contents .fixed_right .menu_list li:not(:first-of-type) {
    margin-top: 0;
  }

  #lp_contents .fixed_area .fixed_right.js-scrollStatus {
    translate: 0 100%;
    transition: all 0.6s 0.3s;
  }


  #lp_contents .fixed_area .fixed_right.js-scrollStatus.scrolled-up {
    transition: all 0.6s 0.3s;
    visibility: visible;
    translate: 0 0;
    z-index: 99999;
  }

  #lp_contents .fixed_area .fixed_right.hidden {
    translate: 0 100% !important;
  }
}

/* ========================================================
                      * 共通設定  *
========================================================= */
#lp_contents .sec {
  padding: calc(140 * 60rem / 750) 0;
}

#lp_contents .visual_blk {
  position: relative;
}

#lp_contents .visual_title {
  position: absolute;
  left: calc(-2 * 60rem / 750);
  font-family: var(--font_en);
  font-weight: 400;
  font-size: calc(35 * 60rem / 750);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.08em;
}

#lp_contents .visual_title span:nth-of-type(1) {
  font-size: calc(50 * 60rem / 750);
  letter-spacing: 0.08em;
}

#lp_contents .visual_title span:nth-of-type(2) {
  display: inline-block;
  font-size: calc(35 * 60rem / 750);
  letter-spacing: 0.08em;
  margin-top: calc(13 * 60rem / 750);
}

#lp_contents .visual_slider_container {
  margin: 0 auto;
  width: calc(570 * 60rem / 750);
}

#lp_contents .visual_slider img {
  margin: 0 auto;
  width: calc(570 * 60rem / 750);
}

#lp_contents .slick-dots {
  bottom: calc(-57 * 60rem / 750);
}

#lp_contents .slick-dots li {
  width: calc(100 * 60rem / 750);
  height: calc(4 * 60rem / 750);
  margin: 0 calc(10 * 60rem / 750);
}

#lp_contents .slick-dots li button {
  width: calc(100 * 60rem / 750);
  height: calc(4 * 60rem / 750);
  padding: 0;
}

#lp_contents .slick-dots li button:before {
  top: calc(0 * 60rem / 750);
  font-size: calc(16 * 60rem / 750);
  line-height: 1;
  width: calc(100 * 60rem / 750);
  height: calc(4 * 60rem / 750);
  opacity: 1;
  color: transparent;
}

#lp_contents .sec_title {
  font-family: var(--font_en);
  font-weight: 400;
  font-size: calc(50 * 60rem / 750);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.08em;
}

#lp_contents .use_item_blk {
  margin-top: calc(150 * 60rem / 750);
}

#lp_contents .use_item_list {
  display: flex;
  justify-content: center;
}

#lp_contents .use_item_img {
  width: calc(224 * 60rem / 750);
  margin: 0 auto;
  justify-content: center;
  margin-top: calc(-35 * 60rem / 750);
}

#lp_contents .use_item_name {
  margin-top: calc(25 * 60rem / 750);
  font-size: calc(20 * 60rem / 750);
  line-height:calc(28/20);
}

#lp_contents .use_item_name_var {
  margin-top: calc(5 * 60rem / 750);
  font-size: calc(20 * 60rem / 750);
  line-height:calc(28/20);
  font-weight: 700;
}

#lp_contents .btn_modal {
  position: relative;
  margin:calc(108 * 60rem / 750) auto 0;
  padding: calc(12 * 60rem / 750) 0 calc(9 * 60rem / 750) ;
  width: calc(400 * 60rem / 750);
  border-radius: calc(22 * 60rem / 750);
  line-height: 0;
}

#lp_contents .btn_modal a {
  font-size: calc(24 * 60rem / 750);
  color: var(--color_white);
  border-radius: calc(22 * 60rem / 750);
  line-height: 1;
}

#lp_contents .btn_modal a span {
  margin-left: calc(-34 * 60rem / 750);
  text-transform: uppercase;
  line-height: 1;
}

#lp_contents .btn_modal:before {
  position: absolute;
  top: 50%;
  right: calc(33 * 60rem / 750);
  transform: translateY(-50%);
  width: calc(20 * 60rem / 750);
  height: calc(20 * 60rem / 750);
  background: url(../img/plus.svg) no-repeat;
  background-size: contain;
  content: "";
} 

#lp_contents .howtouse_blk {
  margin-top: calc(90 * 60rem / 750);
}

#lp_contents .accordion {
  position: relative;
  margin-top: calc(5 * 60rem / 750);
  z-index: 2;
}

#lp_contents .accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s;
  margin-bottom: calc(242 * 60rem / 750);
}

#lp_contents .open > .accordion_wrap {
  grid-template-rows: 1fr;
  margin-bottom: calc(5 * 60rem / 750);
}

#lp_contents .accordion_inner {
  position: relative;
  min-height: calc(457 * 60rem / 750);
  padding-bottom: calc(235 * 60rem / 750);
  overflow: hidden;
}

#lp_contents .accordion_inner::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(166 * 60rem / 750);
  background: linear-gradient(transparent, var(--color_black));
  content: "";
  z-index: 3;
}

#lp_contents .open .accordion_inner::before {
  display: none;
}

#lp_contents .accordion_inner .accordion_title {
  font-family: var(--font_en);
  font-weight: 400;
  font-size: calc(36 * 60rem / 750);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#lp_contents .accordion_inner .accordion_blk:not(:first-of-type) {
  margin-top: calc(65 * 60rem / 750);
}

#lp_contents .accordion_btn {
  position: absolute;
  width: calc(750 * 60rem / 750);
  height: calc(53 * 60rem / 750);
  bottom: calc(-122 * 60rem / 750);
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

#lp_contents .open .accordion_btn {
  bottom: calc(86 * 60rem / 750);
}

#lp_contents .accordion_btn span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font_en);
  font-size: calc(30 * 60rem / 750);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#lp_contents .accordion_btn span:before {
  position: absolute;
  left: 50%;
  display: block;
  width: calc(34 * 60rem / 750);
  height: calc(18 * 60rem / 750);
  content: "";
  -webkit-mask-image: url(../img/arrow02.svg);
  mask-image: url(../img/arrow02.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;  
  translate: -50% 0;
  rotate: 0deg;
  transition: rotate 0.3s;
}

#lp_contents .accordion_btn span.to_open:before {
  bottom: calc(-15 * 60rem / 750);
}

#lp_contents .open .accordion_btn .to_close:before {
  bottom: calc(55 * 60rem / 750);
  rotate: 180deg;
}

#lp_contents .accordion_btn .to_open,
#lp_contents .open .accordion_btn .to_close {
  display: block;
}

#lp_contents .accordion_btn .to_close,
#lp_contents .open .accordion_btn .to_open {
  display: none;
}

#lp_contents .look_step {
  margin-top: calc(5 * 60rem / 750);
}

#lp_contents .look_step li {
  font-size: calc(24 * 60rem / 750);
  text-align: center;
}

#lp_contents .look_step li a {
  display: inline;
  text-decoration: underline;
  color: var(--color_text);
}

#lp_contents .look_step li span {
  display: inline;
}

#lp_contents .btn_check { 
  position: relative;
  margin: 0 auto;
  width: calc(430 * 60rem / 750);
  border-radius: calc(32 * 60rem / 750);
  line-height: 1;
  z-index: 2;
}

#lp_contents .btn_check a {
  padding: calc(8 * 60rem / 750) 0 calc(12 * 60rem / 750);
  font-family: var(--font_en);
  font-size: calc(40 * 60rem / 750);
  text-transform: uppercase;
  color: var(--color_white);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ========================================================
                      * sec_mv  *
========================================================= */

#lp_contents .sec_mv {
  width: calc(750 * 60rem / 750);
  background-color: var(--color_bg01);
}

#lp_contents .sec_mv .lead {
  padding: calc(130 * 60rem / 750) 0 0 0;
  font-size: calc(26 * 60rem / 750);
  letter-spacing: 0.2em;
  color: var(--color_pink);
}



/* ========================================================
                      * look01  *
========================================================= */
#lp_contents .sec_look01 {
  background-color: var(--color_bg01);
  padding-top:calc(120 * 60rem / 750);
}

#lp_contents .sec_look01 .visual_title {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .visual_title {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .slick-dots li button {
  background-color: var(--color_lightpink);
}

#lp_contents .sec_look01 .slick-dots li.slick-active button:before {
  background-color: var(--color_pink);
}

#lp_contents .sec_look01 .sec_title {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .use_item_name_var {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .btn_modal {
  background-color: var(--color_pink);
}

#lp_contents .sec_look01 .accordion_inner::before {
  background: linear-gradient(transparent, var(--color_bg01));
}

#lp_contents .sec_look01 .accordion_inner .accordion_title {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .accordion_btn span {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .accordion_btn span:before {
  background-color: var(--color_pink);
}

#lp_contents .sec_look01 .look_step li span {
  color: var(--color_pink);
}

#lp_contents .sec_look01 .btn_check { 
  background-color: var(--color_pink);
}

/* ========================================================
                      * look02  *
========================================================= */
#lp_contents .sec_look02 {
  background-color: var(--color_bg02);
}

#lp_contents .sec_look02 .visual_title {
  left: auto;
  right: calc(-2 * 60rem / 750);
  color: var(--color_blue);
}

#lp_contents .sec_look02 .visual_title {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .slick-dots li button {
  background-color: var(--color_lightblue);
}

#lp_contents .sec_look02 .slick-dots li.slick-active button:before {
  background-color: var(--color_blue);
}

#lp_contents .sec_look02 .sec_title {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .use_item_list {
  width: calc(500 * 60rem / 750);
  margin: 0 auto;
  flex-wrap: wrap;
  row-gap: calc(60 * 60rem / 750);
}

#lp_contents .sec_look02 .use_item_name_var {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .btn_modal {
  background-color: var(--color_blue);
}

#lp_contents .sec_look02 .accordion_inner::before {
  background: linear-gradient(transparent, var(--color_bg02));
}

#lp_contents .sec_look02 .accordion_inner .accordion_title {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .accordion_btn span {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .accordion_btn span:before {
  background-color: var(--color_blue);
}

#lp_contents .sec_look02 .look_step li span {
  color: var(--color_blue);
}

#lp_contents .sec_look02 .btn_check { 
  background-color: var(--color_blue);
}


/* ========================================================
                      * visual_area  *
========================================================= */
#lp_contents .visual_area {
  position: relative;
  width: calc(600 * 60rem / 750);
  margin: 0 auto;
  padding: calc(140 * 60rem / 750) 0;
  background-color: var(--color_bg03);
}

#lp_contents .visual_area:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(640 * 60rem / 750);
  height: calc(2 * 60rem / 750);
  background-color: var(--color_pink);
  content: "";
}

#lp_contents .lineup_group {
  width: calc(600 * 60rem / 750);
  margin: calc(50 * 60rem / 750) auto 0;
  position: relative;
}

#lp_contents .lineup_group .lineup_title {
  font-family: var(--font_en);
  font-size: calc(45 * 60rem / 750);
  text-transform: uppercase;
  color: var(--color_pink);
  letter-spacing: 0.08em;
  text-align: left;
  line-height: calc(54/45);
}

#lp_contents .lineup_arrow {
  position: absolute;
  right: 0;
  top: 0;
}

#lp_contents .lineup_arrow span {
  display: block;
  width: calc(315 * 60rem / 750);
  height: calc(21 * 60rem / 750);
  margin-top: calc(10 * 60rem / 750);
  overflow: hidden;
  position: relative; /* 子要素の基準 */

  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    /* 背景色 = 線の色 */
    background-color: var(--color_pink); 
    
    /* SVGをマスクとして使用 */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317 21"><polyline points="1.5 19.5 315.5 19.5 284.5 1.5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317 21"><polyline points="1.5 19.5 315.5 19.5 284.5 1.5" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></svg>') no-repeat center / contain;

    animation: moveArrow 2s infinite;
  }
}

@-moz-document url-prefix() {
  #lp_contents .lineup_arrow span {
    margin-top: calc(30 * 60rem / 750);
  }
}


@keyframes moveArrow {
  0% { translate: -100% 0; }
  50% { translate: 0 0; }
  100% { translate: 0 0; }
}

#lp_contents .btn_lineup {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(421 * 60rem / 750);
  background-color: var(--color_pink);
  line-height: 1;
  border-radius: calc(22 * 60rem / 750);
}

#lp_contents .btn_lineup a {
  padding: calc(11 * 60rem / 750) 0 calc(10 * 60rem / 750);
  font-size: calc(22 * 60rem / 750);
  color: var(--color_white);
  line-height: 1;
}


/* ========================================================
                * sec_releaseinformation  *
========================================================= */

#lp_contents .sec_releaseinformation {
  position: relative;
  padding: calc(120 * 60rem / 750) 0 calc(125 * 60rem / 750);
  background-color: var(--color_bg03);
}

#lp_contents .sec_releaseinformation:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(640 * 60rem / 750);
  height: calc(2 * 60rem / 750);
  background-color: var(--color_pink);
  content: "";
}

#lp_contents .sec_releaseinformation .sec_title {
  font-family: var(--font_ja);
  font-size: calc(36 * 60rem / 750);
  font-weight: 700;
  color: var(--color_pink);
  text-align: center;
}

#lp_contents .sec_releaseinformation .txt_wrap {
  margin-top: calc(30 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .txt_wrap:nth-of-type(2) {
  margin-top: calc(65 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .date {
  display: flex;
  justify-content: center;

}
#lp_contents .sec_releaseinformation .date span {
  display: block;
  font-size: calc(28 * 60rem / 750);
  font-weight: 700;
  letter-spacing: 0.15em;
}

#lp_contents .sec_releaseinformation .date span:first-of-type {
  margin-top: calc(0 * 60rem / 750);
  margin-left: calc(5 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .date span:nth-of-type(2) {
  margin-top: calc(-2 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .webstore {
  margin-top: calc(4 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .store {
  margin-top: calc(22 * 60rem / 750);
}

#lp_contents .sec_releaseinformation .webstore,
#lp_contents .sec_releaseinformation .store {
  font-family: var(--font_en);
  font-size: calc(28 * 60rem / 750);
  letter-spacing: .15em;
  line-height: 2;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color_pink);
}

#lp_contents .sec_releaseinformation .webstore span,
#lp_contents .sec_releaseinformation .store span {
  font-family: var(--font_ja);
  font-size: calc(22 * 60rem / 750);
  letter-spacing: .1em;
  line-height: 2;
  display: block;
  font-weight: 400;
  text-transform: none;
  margin-top: calc(-2 * 60rem / 750);
  color: var(--color_text);
}

#lp_contents .sec_releaseinformation .webstore span.txt_ja,
#lp_contents .sec_releaseinformation .store span.txt_ja {
  font-size: calc(20 * 60rem / 750);
  letter-spacing: .1em;
  line-height: 2;
  display: inline;
}

#lp_contents .btn_all {
  width: calc(600 * 60rem / 750);
  margin: calc(140 * 60rem / 750) auto 0;
  background: var(--color_pink);
  border-radius: calc(60 * 60rem / 750);
}

#lp_contents .btn_all a {
  padding: calc(2 * 60rem / 750) 0 calc(18 * 60rem / 750);
  font-family: var(--font_en);
  font-size: calc(28 * 60rem / 750);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 2.2;
  color: var(--color_white);
}

#lp_contents .btn_all a span {
  display: block;
  margin-top: calc(-10 * 60rem / 750);
  font-family: var(--font_en);
  font-size: calc(40 * 60rem / 750);
  letter-spacing: .08em;
  line-height: 1;
}

/* ========================================================
                        * modal  *
========================================================= */
#lp_contents .modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  width: 100%;
  z-index: 100;
}

#lp_contents .modal__bg {
  height: 100vh;
  position: absolute;
  width: 100%;
}

#lp_contents #modal01 .modal__bg {
  background: rgba(253,521,240,0.8);
}

#lp_contents #modal02 .modal__bg {
  background: rgba(241,245,249,0.8);
}

#lp_contents .modal__content{
  background: var(--color_white);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(640 * 60rem / 750);
  max-height: 90vh;
  /* overflow-y: scroll; */
  overflow: hidden;
}
@media (max-width: 768px) {
  #lp_contents .modal__content{
  transform: translate(-50%,-50%);
  }
}

#lp_contents .modal_inner{
  padding: calc(120 * 60rem / 750) 0;
} 

#lp_contents .modal__content .js-modal-close{
  position: sticky;
  width: calc(62 * 60rem / 750);
  height: calc(62 * 60rem / 750);
  top: calc(30 * 60rem / 750);
  right: calc(30 * 60rem / 750);
  float: right;
  cursor: pointer;
  overflow: hidden;
  z-index: 999;
}

#lp_contents .modal__content .js-modal-close:before,
#lp_contents .modal__content .js-modal-close:after{
  content: '';
  display: block;
  width: calc(80 * 60rem / 750);
  height: calc(2 * 60rem / 750);
  transform: rotate(45deg);
  position: absolute;
  top: calc(30 * 60rem / 750);
  right: calc(-10 * 60rem / 750);
}

#lp_contents #modal01 .modal__content .js-modal-close:before,
#lp_contents #modal01 .modal__content .js-modal-close:after{
  background: var(--color_pink);
}

#lp_contents #modal02 .modal__content .js-modal-close:before,
#lp_contents #modal02 .modal__content .js-modal-close:after{
  background: var(--color_blue);
}

#lp_contents .modal__content .js-modal-close:after{
  transform: rotate(-45deg);
}

#lp_contents .modal_item_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(20 * 60rem / 750);
  justify-content: center;
}

#lp_contents .modal_item_list li:first-of-type {
  width: calc(448 * 60rem / 750);
  margin: 0 auto;
}

#lp_contents .modal_item_list .modal_item_img {
  width: calc(224 * 60rem / 750);
  margin: 0 auto;
}

#lp_contents .modal_item_list .modal_item_name {
  width: calc(224 * 60rem / 750);
  margin: calc(25 * 60rem / 750) auto 0;
  font-size: calc(20 * 60rem / 750);
  color: var(--color_text);
  letter-spacing: 0.15em;
  line-height: 1.4;
}

#lp_contents .modal .btn_check {
  margin: calc(85 * 60rem / 750) auto 0;
}

#lp_contents .modal .btn_check a {
  padding: calc(8 * 60rem / 750) 0 calc(13 * 60rem / 750);
}

#lp_contents #modal01 .btn_check {
  background-color: var(--color_pink);
}
#lp_contents #modal02 .btn_check {
  background-color: var(--color_blue);
}

/* ========================================================
                      * flower decoration  *
========================================================= */
#lp_contents .lp_contents_inner,
#lp_contents .sec_mv,
#lp_contents .visual_blk, 
#lp_contents .use_item_blk,
#lp_contents .howtouse_blk, 
#lp_contents .accordion_blk, 
#lp_contents .sec_releaseinformation,
#lp_contents .btn_all {
  position: relative;
}

#lp_contents .for_decoration {
  position: absolute;
}

#lp_contents .for_decoration:before {
  display: block;
}

#lp_contents .decoration_01 {
  bottom: calc(-80 * 60rem / 750);
  left: calc(-150 * 60rem / 750);
}

#lp_contents .decoration_01:before {
  display: block;
  width: calc(320 * 60rem / 750);
  height: calc(417 * 60rem / 750);
  background: url(../img/decor01.png?260227) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_02 {
  top: calc(-143 * 60rem / 750);
  right: calc(-146 * 60rem / 750);
}

#lp_contents .decoration_02:before {
  display: block;
  width: calc(319 * 60rem / 750);
  height: calc(341 * 60rem / 750);
  background: url(../img/decor02.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_03 {
  top: calc(-116 * 60rem / 750);
  left: calc(-516 * 60rem / 750);
}

#lp_contents .decoration_03:before {
  display: block;
  width: calc(690 * 60rem / 750);
  height: calc(634 * 60rem / 750);
  background: url(../img/decor03.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_04 {
  top: calc(-79 * 60rem / 750);
  right: calc(-75 * 60rem / 750);
}

#lp_contents .decoration_04:before {
  display: block;
  width: calc(259 * 60rem / 750);
  height: calc(225.5 * 60rem / 750);
  background: url(../img/decor04.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_05 {
  top: calc(-324 * 60rem / 750);
  left: calc(-346 * 60rem / 750);
}

#lp_contents .decoration_05:before {
  display: block;
  width: calc(599 * 60rem / 750);
  height: calc(590 * 60rem / 750);
  background: url(../img/decor05.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_06 {
  top: calc(-284 * 60rem / 750);
  right: calc(-96 * 60rem / 750);
}

#lp_contents .decoration_06:before {
  display: block;
  width: calc(276 * 60rem / 750);
  height: calc(230 * 60rem / 750);
  background: url(../img/decor06.png?260306) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_07 {
  top: calc(-160 * 60rem / 750);
  left: calc(-196 * 60rem / 750);
}

#lp_contents .decoration_07:before {
  display: block;
  width: calc(394 * 60rem / 750);
  height: calc(544 * 60rem / 750);
  background: url(../img/decor07.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_08 {
  top: calc(-266 * 60rem / 750);
  right: calc(-366 * 60rem / 750);
}

#lp_contents .decoration_08:before {
  display: block;
  width: calc(624 * 60rem / 750);
  height: calc(624 * 60rem / 750);
  background: url(../img/decor08.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_09 {
  top: calc(-120 * 60rem / 750);
  left: calc(-156 * 60rem / 750);
}

#lp_contents .decoration_09:before {
  display: block;
  width: calc(439 * 60rem / 750);
  height: calc(265 * 60rem / 750);
  background: url(../img/decor09.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_10 {
  bottom: calc(-80 * 60rem / 750);
  right: calc(82 * 60rem / 750);
}

#lp_contents .decoration_10:before {
  display: block;
  width: calc(234 * 60rem / 750);
  height: calc(191 * 60rem / 750);
  background: url(../img/decor10.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_11 {
  top: calc(-69 * 60rem / 750);
  left: calc(1 * 60rem / 750);
}

#lp_contents .decoration_11:before {
  display: block;
  width: calc(164 * 60rem / 750);
  height: calc(108.5 * 60rem / 750);
  background: url(../img/decor11.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_12 {
  bottom: calc(-40 * 60rem / 750);
  left: calc(14 * 60rem / 750);
}

#lp_contents .decoration_12:before {
  display: block;
  width: calc(227 * 60rem / 750);
  height: calc(150 * 60rem / 750);
  background: url(../img/decor12.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_13 {
  top: calc(-50 * 60rem / 750);
  left: calc(-39 * 60rem / 750);
}

#lp_contents .decoration_13:before {
  display: block;
  width: calc(210 * 60rem / 750);
  height: calc(162 * 60rem / 750);
  background: url(../img/decor13.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_14 {
  top: calc(220 * 60rem / 750);
  right: calc(-107 * 60rem / 750);
}

#lp_contents .decoration_14:before {
  display: block;
  width: calc(268 * 60rem / 750);
  height: calc(177 * 60rem / 750);
  background: url(../img/decor14.png) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_15 {
  top: calc(-93 * 60rem / 750);
  right: calc(-61 * 60rem / 750);
}

#lp_contents .decoration_15:before {
  display: block;
  width: calc(230 * 60rem / 750);
  height: calc(167 * 60rem / 750);
  background: url(../img/decor15.png?260306) center center / cover no-repeat;
  content: "";
}

#lp_contents .decoration_16 {
  top: calc(-120 * 60rem / 750);
  right: calc(617 * 60rem / 750);
}

#lp_contents .decoration_16:before {
  display: block;
  width: calc(205 * 60rem / 750);
  height: calc(220 * 60rem / 750);
  background: url(../img/decor16.png) center center / cover no-repeat;
  content: "";
}

/* #lp_contents .accordion_title02:before {
  position: absolute;
  top: calc(-50 * 60rem / 750);
  left: calc(-39 * 60rem / 750);
  width: calc(210 * 60rem / 750);
  height: calc(162 * 60rem / 750);
  background: url(../img/decor13.png) center center / cover no-repeat;
  content: "";
} */



/* ========================================================
                      * JS 設定  *
========================================================= */

.ef1 {
  opacity: 0;
  transition: opacity 2s;
}

.ef1.js-active {
  opacity: 1;
}

.ef2 {
  transform: translateY(2rem);
  transition: translate 2s, opacity 1s, transform 1s;
  opacity: 0;
  pointer-events: none;
}

.ef2.js-active {
  opacity: 1;
  transform: translateY(0);
}