@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --color_bg:#fbebee;
  --color_pink01: #d66c82;
  --color_lightpink: #fdf3f5;
  --color_black:#1f1f1f;
  --color_gray:#666666;
  --color_lightgray:#dddddd;
  --color_white: #ffffff;
  --font_eng_serif: "orpheuspro", serif;
  --font_jp_serif:"source-han-serif-jp-subset", sans-serif;
  --fomt_mix:'Lato', 'ryo-gothic-plusn', sans-serif;;
}
/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}

#FooterWrap,
.archive_area{
  position: relative;
  z-index: 0;
  background-color: var(--color_white);
  z-index: 999;
}

#footer {
  margin-top: 0;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}
#lp_contents *{
  box-sizing: border-box;
}
#lp_contents{
  font-family: var(--fomt_mix);
  font-feature-settings: "palt";
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--color_bg);
}
.lp_inner {
  background-color: var(--color_bg);
}
#lp_contents .sp_only { 
  display: none;
}
#lp_contents img {
  width: 100%;
  display: block;
  height: auto;
  image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;
}
#lp_contents a { 
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.5s;
  color: inherit;
}
#lp_contents a:hover {
  opacity: .8
}
#lp_contents ul li,
#lp_contents ol li {
  list-style: none;
}
#lp_contents section {
  position: relative;
}
#lp_contents .link_none {
  pointer-events: none;
  display: inline-block;
  display: -webkit-inline-box;
}

/*------------ Text ------------*/
#lp_contents h1,
#lp_contents h2,
#lp_contents h3,
#lp_contents h4 {
  padding: 0;
  float: none;
  font-weight: normal; 
}

#lp_contents p {
  display: block;
  margin: 0;
  font-family: var(--fomt_mix);
  font-feature-settings: "palt";
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--color_black);
}
#lp_contents sup{
  font-size: 70%;
  margin-top: -0.6rem;
}
#lp_contents a {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

/*============================
MV
============================*/
#lp_contents .sec_mv {
  position: relative;
  background-color: var(--color_bg);
}

#lp_contents .slick-track {
  /* 親要素の幅が計算ミスで狭くなっている場合、強制的に広げるか解除 */
  width: 100% !important;
  transform: none !important;
}

#lp_contents .slick-slide {
  /* Slickが計算する left を無視して、すべて左端 (0) に固定して重ねる */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

/* カレント（表示中）のスライドだけ手前に持ってくる */
#lp_contents .slick-current {
  position: relative !important; /* 高さを確保するためカレントだけ relative */
  z-index: 1000 !important;
}

#lp_contents .mv_slide {
  width: calc(780 * (var(--rate))) !important;
  overflow: hidden;
}

#lp_contents .mv_slide .slick-slide {
  width: 100%;
  transition: opacity 0.8s ease;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.15); /* 最初は少し大きく */
  }
  100% {
    transform: scale(1); /* 最後に元のサイズへ */
  }
}

#lp_contents .mv_slide .slick-current {
  animation: zoomOut 6s ease-out forwards; /* スライド時間に合わせて長めに設定 */
}

#lp_contents .item_slide {
  position: absolute;
  bottom: calc(186 * (var(--rate)));
  right: calc(38 * (var(--rate)));
  width: calc(262.5 * (var(--rate))) !important;
  height: calc(210 * (var(--rate)))
}

#lp_contents .item_slide img {
  width: calc(262.5 * (var(--rate))) !important;
  height: auto;
}


#lp_contents .page_title_group {
  position: absolute;
  bottom: calc(26 * (var(--rate)));
  right: 50%;
  transform: translateX(50%);
}

#lp_contents .page_title_en {
  font-family: var(--font_eng_serif);
  font-size: calc(72 * (var(--rate)));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color_white);
  white-space: nowrap;
  line-height: 1;
}

#lp_contents .page_title_jp {
  margin-top: calc(20 * (var(--rate)));
  font-size: calc(30 * (var(--rate)));
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color_white);
}

#lp_contents .lead_area {
  padding-top: calc(100 * (var(--rate)));
  margin-bottom: calc(20 * (var(--rate)));
}

#lp_contents .lead {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(28 * (var(--rate)));
}

#lp_contents .lead_area .lead:first-of-type {
  margin-top: 0;
}

#lp_contents .lead_area .lead:nth-of-type(2) span {
  font-weight: 500;
  margin-top: calc(0 * (var(--rate)));
  font-size: calc(36 * (var(--rate)));
  line-height: 1;
  color: var(--color_pink01);
}


#lp_contents .release_date {
  position: relative;
  width: calc(500 * (var(--rate)));
  margin: calc(40 * (var(--rate))) auto 0;
  padding: calc(25 * (var(--rate))) 0;
  font-size: calc(28 * (var(--rate)));
}

#lp_contents .release_date:before,
#lp_contents .release_date:after {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: calc(500 * (var(--rate)));
  height: calc(4 * (var(--rate)));
  background-size: contain;
  background: url(../img/decor01.svg) no-repeat;
  content: "";
}

#lp_contents .release_date:before {
  top: 0;
}

#lp_contents .release_date:after {
  bottom: 0;
  transform: scaleX(-1);
}

#lp_contents .item_area01 {
  position: relative;
  padding-top: calc(120 * (var(--rate)));
  z-index: 0;
}

#lp_contents .item_area01:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(1013 * (var(--rate)));
  background: url(../img/bg01.png) no-repeat;
  background-size: contain;
  content: "";
  z-index: -1;
}

#lp_contents .item_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(590 * (var(--rate)));
  margin: 0 auto;
  gap: calc(40 * (var(--rate))) calc(25 * (var(--rate)));
}

#lp_contents .item_list li img {
  width: calc(180 * (var(--rate)));
}

#lp_contents .item_name_en {
  margin-top: calc(70 * (var(--rate)));
  font-family: var(--font_eng_serif);
  font-size: calc(60 * (var(--rate)));
  line-height: 1;
  text-transform: uppercase;
  color: var(--color_pink01);
  letter-spacing: 0.05em;
}

#lp_contents .item_name_jp {
  margin-top: calc(12 * (var(--rate)));
  font-size: calc(30 * (var(--rate)));
}

#lp_contents .item_price {
  margin-top: calc(5 * (var(--rate)));
  font-size: calc(36 * (var(--rate)));
}

#lp_contents .item_price span {
  font-size: calc(20 * (var(--rate)));
}

#lp_contents .btn_check {
  margin: calc(30 * (var(--rate))) auto 0;
  display: block;
  width: calc(340 * (var(--rate)));
  height: calc(94 * (var(--rate)));
  border-radius: calc(47 * (var(--rate)));
  background: url(../img/btn_check.png) no-repeat;
  background-size: contain;
  content: "";
}

#lp_contents .btn_check a {
  position: relative;
  height: -webkit-fill-available;
}

#lp_contents .btn_check a .text {
  position: absolute;
  top: calc(3 * (var(--rate)));
  left: calc(58 * (var(--rate)));
  font-family: var(--font_eng_serif);
  font-size: calc(36 * (var(--rate)));
  color: var(--color_white);
  text-transform: uppercase;
}

#lp_contents .btn_check a .arrow {
  position: absolute;
  left: calc(40 * (var(--rate)));
  bottom: calc(24 * (var(--rate)));
  width:calc(252 * (var(--rate)));
  height:calc(18 * (var(--rate)));
}

#lp_contents .btn_check a .arrow:before {
  position: absolute;
  bottom: calc(3 * (var(--rate)));
  right: 0;
  width: calc(2 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  margin-bottom: calc(1 * (var(--rate)));
  border-radius: calc(10 * (var(--rate)));
  background-color: var(--color_white);
  transform-origin: bottom center;
  rotate: 315deg;
  content: "";
}

#lp_contents .btn_check a .arrow:after {
  position: absolute;
  bottom: calc(3 * (var(--rate)));
  left: calc(0 * (var(--rate)));
  width: 100%;
  height: calc(2 * (var(--rate)));
  border-radius: calc(10 * (var(--rate)));
  background-color: var(--color_white);
  animation: arrow 3s infinite;
  transform-origin: center right;
  content: "";
}

@keyframes arrow {
  0% {
    scale: 1 1;
    transform-origin: center right;
  }
  49% {
    scale: 0 1;
    transform-origin: center right;
  }
  51% {
    scale: 0 1;
    transform-origin: center left;
  }
  100% {
    scale: 1 1;
    transform-origin: center left;
  }

}

#lp_contents .item_var_blk01 {
  display: flex;
  justify-content: flex-end;
  gap: calc(35 * (var(--rate)));
  margin-top: calc(160 * (var(--rate)));
  padding-bottom: calc(80 * (var(--rate)));
}

#lp_contents .item_var_list {
  margin-top: calc(25 * (var(--rate)));
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: calc(35 * (var(--rate)));
}

#lp_contents .item_var_list a {
  text-align: left;
}

#lp_contents .item_var_name {
  font-family: var(--font_eng_serif);
  font-size: calc(42 * (var(--rate)));
  line-height: 1;
  color: var(--color_pink01);
  letter-spacing: 0.05em;
}

#lp_contents .item_var_text {
  margin-top: calc(15 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  line-height: calc(43.2/24);
  text-align: left;
  text-decoration: none;
}

#lp_contents .item_var_texture_list {
  position: relative;
  width: calc(340 * (var(--rate)));
  overflow: hidden;
}

#lp_contents .item_var_texture_list li {
  position: absolute;
}

#lp_contents .item_var_texture_list li:nth-of-type(1) {
  width: calc(353.33 * (var(--rate)));
  top: calc(0 * (var(--rate)));
  right: calc(-10 * (var(--rate)));
}
#lp_contents .item_var_texture_list li:nth-of-type(2) {
  width: calc(365 * (var(--rate)));
  top: calc(160 * (var(--rate)));
  right: calc(-23 * (var(--rate)));
}
#lp_contents .item_var_texture_list li:nth-of-type(3) {
  width: calc(355 * (var(--rate)));
  top: calc(343 * (var(--rate)));
  right: calc(-12 * (var(--rate)));
}
#lp_contents .item_var_texture_list li:nth-of-type(4) {
  width: calc(400 * (var(--rate)));
  bottom: calc(350 * (var(--rate)));
  right: calc(-57 * (var(--rate)));
}
#lp_contents .item_var_texture_list li:nth-of-type(5) {
  width: calc(380 * (var(--rate)));
  bottom: calc(174 * (var(--rate)));
  right: calc(-37 * (var(--rate)));
}
#lp_contents .item_var_texture_list li:nth-of-type(6) {
  width: calc(370 * (var(--rate)));
  bottom: calc(10 * (var(--rate)));
  right: calc(-33 * (var(--rate)));
}
/*============================
Common
============================*/
#lp_contents .sec_title {
  position: relative;
  width: calc(780* (var(--rate)));
  margin: 0 auto;
  z-index: 5;
}

#lp_contents .sec_subtitle {
  position: relative;
  margin-top: calc(20 * (var(--rate)));
  font-size: calc(28 * (var(--rate)));
  z-index: 5;
}

/*============================
FEATURES
============================*/
#lp_contents .sec_features {
  position: relative;
  padding-top: calc(190 * (var(--rate)));
}

#lp_contents .sec_features:before,
#lp_contents .sec_features:after {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: calc(400 * (var(--rate)));
  background: url(../img/bg02.png) no-repeat;
  background-size: contain;
  content: "";
  z-index: 0;
}

#lp_contents .sec_features:before {
  top: calc(52 * (var(--rate)));
  background: url(../img/bg02.png) no-repeat;
  background-size: contain;
  content: "";
}

#lp_contents .sec_features:after {
  bottom: calc(-270 * (var(--rate)));
  background: url(../img/bg03.png) no-repeat;
  background-size: contain;
  content: "";
}

#lp_contents .point_list {
  display: flex;
  flex-direction: column;
  margin-top: calc(75 * (var(--rate)));
  gap: calc(140 * (var(--rate)));
  padding-top: calc(25 * (var(--rate)));
  background-color: var(--color_white);
}

#lp_contents .point_list li:first-of-type {
  margin-top: 0;
}

#lp_contents .point_list li {
  position: relative;
}

#lp_contents .point_title_blk {
  position: relative;
  width: calc(680 * (var(--rate)));
  margin: 0 auto;
  padding: calc(50 * (var(--rate))) 0 calc(35 * (var(--rate)));
  border-top: var(--color_pink01) solid calc(2 * (var(--rate)));
}

/* 

#lp_contents .point_title_blk:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  display: block;
  width: calc(680 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color_pink01);
  background-size: contain;
  content: "";
} */

#lp_contents .point_title_num {
  position: absolute;
  top: calc(-24 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  padding: calc(10 * (var(--rate))) calc(40 * (var(--rate)));
  font-family: var(--font_eng_serif);
  font-size: calc(28 * (var(--rate)));
  text-transform: uppercase;
  border: var(--color_pink01) solid calc(2 * (var(--rate)));
  border-radius: calc(25 * (var(--rate)));
  background-color: var(--color_white);
  width: fit-content;
  margin: 0 auto;
  line-height: 1;
}

#lp_contents .point_title_text {
  font-family: var(--font_jp_serif);
  font-size: calc(43 * (var(--rate)));
  line-height: calc(77.4/43);
  color: var(--color_pink01);
  letter-spacing: 0.075em;
  font-weight: 600;
}

#lp_contents .point_title_text span {
  font-weight: 800;
}

#lp_contents .compare_img {
  width: calc(570 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

#lp_contents .point_content {
  width: calc(570 * (var(--rate)));
  margin: 0 auto calc(30 * (var(--rate)));
  padding-top: calc(50 * (var(--rate)));
  font-size: calc(28 * (var(--rate)));
  text-align: justify;
}

#lp_contents .point_list:nth-of-type(2) .point_content {
  margin: 0 auto calc(10 * (var(--rate)));
}

#lp_contents .graph01 {
  width: calc(710 * (var(--rate)));
  margin: calc(-20 * (var(--rate))) 0 calc(40 * (var(--rate))) calc(-10 * (var(--rate)));
}

#lp_contents .graph02 {
  width: calc(600 * (var(--rate)));
  margin: calc(28 * (var(--rate))) auto calc(35 * (var(--rate)));
}


/* --- 親アコーディオン (Point全体) --- */

#lp_contents .accordion_outer_inner {
  position: relative;
  transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#lp_contents .accordion_outer_inner:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  z-index: 3;
  pointer-events: none;
}

#lp_contents .accordion_outer.open .accordion_outer_inner:before {
  display: none;
}

#lp_contents .accordion_outer_btn_text {
  font-size: calc(30 * (var(--rate)));
  line-height: 1;
}

#lp_contents .accordion_outer_btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  cursor: pointer;
}

#lp_contents .accordion_outer_btn_icon {
  display: block;
  width: calc(302 * (var(--rate)));
  height: calc(72 * (var(--rate)));
  background: url(../img/icon_accordion_arrow01.svg) no-repeat;
  background-size: contain;
  content: "";
  transition: transform 0.5s;
}

#lp_contents .accordion_outer.open .accordion_outer_btn {
  flex-direction: column-reverse;
  margin-top: calc(120 * (var(--rate)));
}

#lp_contents .sec_mkup .accordion_outer.open .accordion_outer_btn {
margin-top: calc(80 * (var(--rate)));
}

#lp_contents .accordion_outer.open .accordion_outer_btn_icon {
  background: url(../img/icon_accordion_arrow01-1.svg) no-repeat;
}

#lp_contents .sec_features .accordion_outer_wrap {
  background-color: var(--color_white);
}

/* --- Features セクション --- */
#lp_contents .sec_features .accordion_outer_inner {
  max-height: calc(2910 * (var(--rate)));
}

#lp_contents .sec_features .accordion_outer.open .accordion_outer_inner {
  max-height: 10000px; 
}

#lp_contents .sec_features .accordion_outer_inner:before {
  height: calc(400 * (var(--rate)));
  background: linear-gradient(transparent, var(--color_white));
}

#lp_contents .sec_features .accordion_outer_btn {
  margin-top: calc(30 * (var(--rate)));
}


/* --- Makeup セクション --- */
#lp_contents .sec_mkup .accordion_outer_inner {
  max-height: calc(1880 * (var(--rate)));
}

#lp_contents .sec_mkup .accordion_outer.open .accordion_outer_inner {
  max-height: 10000px;
}

#lp_contents .sec_mkup .accordion_outer_inner:before {
  height: calc(600 * (var(--rate)));
  background: linear-gradient(transparent, var(--color_bg));
}

/* --- 子アコーディオン (各Point詳細) --- */
#lp_contents .accordion {
  width: 100%;
  margin: 0 auto;
}
/* 開閉するコンテナ */
#lp_contents .accordion_wrap {
  display: grid;
  grid-template-rows: 0fr; /* 閉じている時は高さの比率が0 */
  transition: grid-template-rows 0.5s ease-in-out;
  overflow: hidden;

}

/* 開いた時の状態 */
#lp_contents .accordion.open .accordion_wrap {
  grid-template-rows: 1fr; /* 開いている時は比率が1（コンテンツ分広がる） */
}

/* 中身の要素 */
#lp_contents .accordion_inner {
  min-height: 0; /* これがないと grid 内で 0fr になりません */
  visibility: hidden;
  transition: visibility 0.5s ease-in-out;
}

#lp_contents .accordion.open .accordion_inner {
  visibility: visible;
}

#lp_contents .accordion_btn {
  position: relative;
  width: fit-content;
  height: calc(60 * (var(--rate)));
  margin: 0 auto;
  line-height: 1;
  cursor: pointer;
}

#lp_contents .accordion_btn:before {
  position: absolute;
  bottom: calc(0 * (var(--rate)));
  left: 50%;
  width: calc(30 * (var(--rate)));
  height: calc(16 * (var(--rate)));
  transform: translateX(-50%);
  display: block;
  background: url(../img/icon_accordion_arrow02.svg) no-repeat;
  background-size: contain;
  content: "";
}

/* #lp_contents .accordion.open .accordion_btn:before {
  position: absolute;
  bottom: calc(20 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  display: block;
  width: 100%;
  height: calc(2 * (var(--rate)));
  background-color: #666666;
  background-size: contain;
  content: "";
} */

#lp_contents .accordion.open .accordion_btn:before {
  display: none;
}

#lp_contents .accordion.open .accordion_btn{
  height: calc(40 * (var(--rate)));
  border-bottom: #666666 solid calc(2 * (var(--rate)));
}


#lp_contents .accordion.open .accordion_btn {
  margin-top: calc(5 * (var(--rate)));
}

#lp_contents .accordion_btn_text {
  font-size: calc(28 * (var(--rate)));
}

.sec_features .accordion_inner {
  position: relative;
  border-top: var(--color_pink01) solid calc(2 * (var(--rate)));
  width: calc(680 * (var(--rate)));
  margin: 0 auto 0;
}


/* .sec_features .accordion_inner:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  display: block;
  width: calc(680 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color_pink01);
  background-size: contain;
  content: "";
  opacity: 0;
} */

.accordion.open .accordion_inner:before {
  opacity: 1;
}

/*============================
Movie
============================*/
#lp_contents .movie_wrap {
  width: calc(675 * (var(--rate)));
  height: calc(1200 * (var(--rate)));
  padding-top: calc(40 * (var(--rate)));
  margin: calc(300 * (var(--rate))) auto 0;
  overflow: hidden;
  position: relative;
}

#lp_contents .movie_wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  pointer-events: none;
  border: none;
}

/*============================
Variation
============================*/
#lp_contents .sec_variation {
  padding-top: calc(220 * (var(--rate)));
}

#lp_contents .item_var_blk02 {
  display: flex;
  flex-direction: column;
  gap: calc(10 * (var(--rate)));
  margin-top: calc(50 * (var(--rate)));
}

#lp_contents .item_var_blk02 li {
  position: relative;
  width: 100%;
  height: calc(190 * (var(--rate)));
}

#lp_contents .item_var_blk02 li a {
  width: calc(780 * (var(--rate)));
  height: calc(190 * (var(--rate)));
}

#lp_contents .item_var_blk02 li:first-of-type {
  background: url(../img/sample_var01.jpg) no-repeat;
  background-size: contain;
  content: "";
}
#lp_contents .item_var_blk02 li:nth-of-type(2) {
  background: url(../img/sample_var02.jpg) no-repeat;
  background-size: contain;
  content: "";
}
#lp_contents .item_var_blk02 li:nth-of-type(3) {
  background: url(../img/sample_var03.jpg) no-repeat;
  background-size: contain;
  content: "";
}
#lp_contents .item_var_blk02 li:nth-of-type(4) {
  background: url(../img/sample_var04.jpg) no-repeat;
  background-size: contain;
  content: "";
}
#lp_contents .item_var_blk02 li:nth-of-type(5) {
  background: url(../img/sample_var05.jpg) no-repeat;
  background-size: contain;
  content: "";
}
#lp_contents .item_var_blk02 li:nth-of-type(6) {
  background: url(../img/sample_var06.jpg) no-repeat;
  background-size: contain;
  content: "";
}

#lp_contents .item_var_blk02 .item_var_name {
  position: absolute;
  top: calc(80 * (var(--rate)));
  left: calc(5 * (var(--rate)));
  font-family: var(--fomt_mix);
  font-size: calc(34 * (var(--rate)));
  color: var(--color_white);
  letter-spacing: 0.1em;
  width: calc(390 * (var(--rate)));
  text-align: center;
}

/*============================
MAKEUP LOOK
============================*/
#lp_contents .sec_mkup {
  padding-top: calc(220 * (var(--rate)));
}

#lp_contents .model_area {
  margin-top: calc(50 * (var(--rate)));
}

#lp_contents .model_blk {
  position: relative;
}

#lp_contents .model_texture_blk {
  position: absolute;
}

#lp_contents .model_text_blk {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#lp_contents .model_text_num {
  width: fit-content;
  font-family: var(--font_eng_serif);
  font-size: calc(100 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--color_pink01);
}

#lp_contents .model_text_name {
  width: fit-content;
  margin-top: calc(5 * (var(--rate)));
  font-family: var(--font_eng_serif);
  font-size: calc(40 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: calc(48/40);
  color: var(--color_pink01);
}

#lp_contents .model_area .model_blk:nth-of-type(2) .model_text_num,
#lp_contents .model_area .model_blk:nth-of-type(2) .model_text_name,
#lp_contents .model_area .model_blk:nth-of-type(5) .model_text_num,
#lp_contents .model_area .model_blk:nth-of-type(5) .model_text_name{
  color: var(--color_white);
}


/* #1 */
#lp_contents .model_area .model_blk:first-of-type .model_img {
  width: calc(675 * (var(--rate)));
}
#lp_contents .model_area .model_blk:first-of-type .model_texture_blk {
  width: calc(360 * (var(--rate)));
  left: calc(400 * (var(--rate)));
  bottom: calc(75 * (var(--rate)));
}
#lp_contents .model_area .model_blk:first-of-type .model_text_blk {
  bottom: calc(105 * (var(--rate)));
  left: calc(105 * (var(--rate)));
}
/* #2 */
#lp_contents .model_area .model_blk:nth-of-type(2) {
  margin-top: calc(60 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(2) .model_img {
  width: calc(750 * (var(--rate)));
  margin-left: calc(30 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(2) .model_texture_blk {
  width: calc(350 * (var(--rate)));
  left: calc(360 * (var(--rate)));
  bottom: calc(100 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(2) .model_text_blk {
  right: calc(54 * (var(--rate)));
  bottom: calc(398 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(2) .model_text_blk .model_text_name {
  text-align: left;
}
/* #3 */
#lp_contents .model_area .model_blk:nth-of-type(3) {
  margin-top: calc(40 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(3) .model_img {
  width: calc(680 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(3) .model_texture_blk {
  width: calc(360 * (var(--rate)));
  left: calc(403 * (var(--rate)));
  bottom: calc(60 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(3) .model_text_blk {
  left: calc(102 * (var(--rate)));
  bottom: calc(105 * (var(--rate)));
}
/* #4 */
#lp_contents .model_area .model_blk:nth-of-type(4) {
  margin-top: calc(80 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(4) .model_img {
  width: calc(645 * (var(--rate)));
  margin-left: calc(140 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(4) .model_texture_blk {
  width: calc(400 * (var(--rate)));
  left: calc(20 * (var(--rate)));
  bottom: calc(120 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(4) .model_text_blk {
  right: calc(133 * (var(--rate)));
  bottom: calc(80 * (var(--rate)));
  align-items: flex-end;
}
/* #5 */
#lp_contents .model_area .model_blk:nth-of-type(5) {
  margin-top: calc(64 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(5) .model_img {
  width: calc(680 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(5) .model_texture_blk {
  width: calc(350 * (var(--rate)));
  left: calc(180 * (var(--rate)));
  bottom: calc(80 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(5) .model_text_blk {
  left: calc(113 * (var(--rate)));
  bottom: calc(360 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(5) .model_text_blk .model_text_name {
  text-align: left;
}
/* #6 */
#lp_contents .model_area .model_blk:nth-of-type(6) {
  margin-top: calc(55 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(6) .model_img {
  width: calc(730 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(6) .model_texture_blk {
  width: calc(430 * (var(--rate)));
  left: calc(349 * (var(--rate)));
  bottom: calc(60 * (var(--rate)));
}
#lp_contents .model_area .model_blk:nth-of-type(6) .model_text_blk {
  left: calc(53 * (var(--rate)));
  bottom: calc(76 * (var(--rate)));
}
          
/*============================
COLORMAP
============================*/
#lp_contents .colormap {
  position: relative;
  margin-top: calc(140 * (var(--rate)));
  padding: calc(140 * (var(--rate))) 0 calc(140 * (var(--rate)));
}

#lp_contents .colormap:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(1202 * (var(--rate)));
  background: url(../img/bg04.png) no-repeat;
  background-size: contain;
  content: "";
  z-index: 0;
}

#lp_contents .colormap .title {
  position: relative;
  font-family: var(--font_eng_serif);
  font-size: calc(60 * (var(--rate)));
  line-height: 1;
  color: var(--color_pink01);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

#lp_contents .colormap_blk {
  position: relative;
}

#lp_contents .colormap_img {
  width: calc(737 * (var(--rate)));
  margin: calc(40 * (var(--rate))) auto 0;
}

#lp_contents .colormap_item {
  position: absolute;
  width: calc(125 * (var(--rate)));
}

#lp_contents .colormap_item:first-of-type {
  top: calc(283 * (var(--rate)));
  right: calc(103 * (var(--rate)));
}

#lp_contents .colormap_item:nth-of-type(2) {
  bottom: calc(245 * (var(--rate)));
  right: calc(237 * (var(--rate)));
}

#lp_contents .colormap_item:nth-of-type(3) {
  top: calc(95 * (var(--rate)));
  right: calc(237 * (var(--rate)));
}

#lp_contents .colormap_item:nth-of-type(4) {
  top: calc(541 * (var(--rate)));
  left: calc(248 * (var(--rate)));
}

#lp_contents .colormap_item:nth-of-type(5) {
  bottom: calc(157 * (var(--rate)));
  left: calc(98 * (var(--rate)));
}

#lp_contents .colormap_item:nth-of-type(6) {
  top: calc(227 * (var(--rate)));
  left: calc(97 * (var(--rate)));
}

/*============================
ItemArea02
============================*/
#lp_contents .item_area02 {
  padding: calc(180 * (var(--rate))) calc(40 * (var(--rate))) calc(100 * (var(--rate)));
}

#lp_contents .item_area02 .item_img {
  width: calc(605 * (var(--rate)));
  margin: calc(0 * (var(--rate))) auto 0;
}

#lp_contents .item_area02 .item_name_en {
  margin-top: calc(60 * (var(--rate)));
}

#lp_contents .item_area02 .note {
  display: inline-block;
  font-size: calc(20 * (var(--rate)));
  line-height: calc(36 / 20);
  margin-top: calc(194 * (var(--rate)));
  color: var(--color_gray);
  text-align: justify;
}


/*============================
CART - Modal
============================*/
/* Modal共通 */
#lp_contents .modal{
  display: none;
  visibility: visible;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
  z-index: 1005;
}

#lp_contents .modal__bg{
  background-image: url(../img/modal_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  position: absolute;
  width: 100%;
}

#lp_contents .modal__content{
  background: var(--color_white);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(730*(var(--rate)));
}

#lp_contents .js-modal-close{
  position: absolute;
  width: calc(52 * (var(--rate)));
  height: calc(52 * (var(--rate)));
  top: calc(30 * (var(--rate)));
  right: calc(40 * (var(--rate)));
  float: right;
  cursor: pointer;
  overflow: hidden;
  z-index: 999;
}

#lp_contents .js-modal-close:before,
#lp_contents .js-modal-close:after{
  content: '';
  display: block;
  width: calc(62*(var(--rate)));
  height: calc(2*(var(--rate)));
  transform: rotate(45deg);
  background-color: var(--color_pink01);
  position: absolute;
  top: 50%;
  right: calc(-5 * (var(--rate)));
}

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

#lp_contents .modal_inner{
  padding:calc(80*(var(--rate))) 0 calc(100*(var(--rate)));
  overflow-y: scroll;
  height: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
} 
#lp_contents .modal_inner::-webkit-scrollbar {
  display: none;
}

#lp_contents .cart_area_title {
  font-size: calc(32*(var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .option_list {
  display: flex;
  flex-direction: column;
  margin-top: calc(35*(var(--rate)));
  gap:calc(25*(var(--rate)));
}

#lp_contents .option_list li {
  display: flex;
  align-items: center;
  width: calc(502*(var(--rate)));
  margin: 0 auto;
  padding: calc(10*(var(--rate))) calc(10*(var(--rate))) calc(10*(var(--rate))) calc(60*(var(--rate)));
  border: var(--color_lightgray) solid calc(2*(var(--rate)));
  cursor: pointer;
}

#lp_contents .option_list li.is-active {
  border: var(--color_pink01) solid calc(2*(var(--rate)));
  background-color: var(--color_lightpink);
}

#lp_contents .option_list li .option_var_img {
  width: calc(90*(var(--rate))) !important;
}

#lp_contents .option_list li .option_var_name {
  font-family: var(--font_eng_serif);
  font-size: calc(30*(var(--rate)));
  width: calc(330*(var(--rate)));
  letter-spacing: 0.05em;
}

/*============================
CART BTN
============================*/
#lp_contents .btn_cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

#lp_contents .btn_cart .text {
  color: var(--color_white);
  display: block;
  letter-spacing: 0.1em;
}

#lp_contents .btn_cart .icon {
  background-image: url(../img/icon_cart.svg);
  background-size: contain;
  background-repeat: no-repeat;
}


#lp_contents .modal .btn_cart {
  gap: calc(30*(var(--rate)));
  margin: calc(80*(var(--rate))) auto 0;
  width: calc(620*(var(--rate)));
  height: calc(110*(var(--rate)));
  background-image: url(../img/btn_cart_modal.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#lp_contents .modal .btn_cart .text {
  font-size: calc(34 * (var(--rate)));
}

#lp_contents .modal .btn_cart .icon {
  width: calc(50 * (var(--rate)));
  height: calc(50 * (var(--rate)));
}

#lp_contents .addtocart_fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: calc(25*(var(--rate))) 0;
  gap: calc(30*(var(--rate)));
  background-color: var(--color_white);
  z-index: 100;
}

#lp_contents .cart_price {
  display: flex;
  align-items: center;
}

#lp_contents .addtocart_fixed .price {
  font-size: calc(48*(var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .addtocart_fixed .price .price_num {
  margin-left: calc(-10 * (var(--rate)));
}

#lp_contents .addtocart_fixed .tax {
  font-size: calc(24*(var(--rate)));
  margin-top: calc(6 * (var(--rate)));
  line-height: 1;
}

#lp_contents .addtocart_fixed .btn_cart {
  gap: calc(20*(var(--rate)));
  margin: 0;
  width: calc(400*(var(--rate)));
  height: calc(92*(var(--rate)));
  background-image: url(../img/btn_cart_fixed_sp.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#lp_contents .addtocart_fixed .btn_cart .text {
  font-size: calc(30 * (var(--rate)));
}

#lp_contents .addtocart_fixed .btn_cart .icon {
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
}

@media screen and (min-width: 768px){
#lp_contents .addtocart_fixed {
  display: flex;
  bottom: 2rem;
  right: 0;
  flex-direction: column;
  width: 26rem;
  padding: 0.6rem 2rem 1.5rem;
  border-radius: 1.5rem 0 0 1.5rem;
  gap: 1rem;
}

#lp_contents .addtocart_fixed .cart_price {
  align-items: center;
  margin-left: 0.6rem;
}

#lp_contents .addtocart_fixed .price {
  font-size: 1.8rem;
}

#lp_contents .addtocart_fixed .tax {
  font-size: 0.9rem;
}

#lp_contents .addtocart_fixed .btn_cart {
  gap: 1rem;
  margin: -0.9rem auto 0;
  width:22rem;
  height: 4rem;
  background-image: url(../img/btn_cart_fixed_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#lp_contents .addtocart_fixed .btn_cart .text {
  font-size: 1.4rem;
}

#lp_contents .addtocart_fixed .btn_cart .icon {
  width: 2rem;
  height: 2rem;
  margin-left: 0.6rem;
}
}

/*============================
MENU
============================*/
#lp_contents .menu {
  position: fixed;
  top: 4%;
  right: 4%;
  display: block;
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 999; 
}

#lp_contents .menu_icon {
  position: fixed;
  top: 4%;
  right: 4%;
  width: calc(120 * (var(--rate)));
  height: calc(120 * (var(--rate)));
  display: block;
  background: url(../img/icon_menu.png) no-repeat;
  background-size: contain;
  content: "";
  z-index: 2;
  transition: all 0.4s ease;
}

#lp_contents .menu.active .menu_icon{
  background: url(../img/icon_menu_close.png) no-repeat;
  background-size: contain;
}

#lp_contents .menu .menu_bg {
  opacity: 0;
  visibility: hidden;
  background-image: url(../img/modal_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: -1000;
}

#lp_contents .menu.active .menu_bg {
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

#lp_contents .menu_list {
  position: absolute;
  top: calc(-15 * (var(--rate)));
  right: calc(-15 * (var(--rate)));
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  flex-direction: column;
  gap: calc(70 * (var(--rate)));
  padding: calc(200 * (var(--rate))) 0 calc(100 * (var(--rate)));
  background-color: var(--color_white);
  transition: all 0.4s ease;
}

#lp_contents .menu.active .menu_list {
  opacity: 1;           /* 不透明度を1に */
  visibility: visible;  /* 表示状態に */
  pointer-events: auto; /* クリックできるように */
}

#lp_contents .menu .menu_list ul {
  display: flex;
  flex-direction: column;
  gap: calc(63 * (var(--rate)));
}

#lp_contents .menu_name_en img {
  margin: 0 auto;
  width: calc(480 * (var(--rate)));
}

#lp_contents .menu_name_jp {
  margin-top: calc(5 * (var(--rate)));
  font-size:calc(26 * (var(--rate)));
}


/*--------------------------------
            Layout  PC
--------------------------------*/
@media screen and (min-width: 768px){

  #lp_contents .sp_only {
    display: none;
  }

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

  #lp_contents .grid_area .full_area {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }

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

  #lp_contents .left_area a {
    width: 34.5rem;
    margin: 0 auto;
  }

  #lp_contents .lp_inner {
    grid-column: 2;
    width: 46.8rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }

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

  #lp_contents .right_area .menu_list {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    gap: 0;
    padding: 0;
    background-color: transparent;
    transition: none;
  }

  #lp_contents .right_area .menu_list ul {
    display: flex;
    flex-direction: column;
    gap:2.5rem;
  }
  
  #lp_contents .right_area .menu_name_en img {
    margin: 0 auto;
    width: 25rem;
  }
  
  #lp_contents .menu_name_jp {
    margin-top: 0.5rem;
    font-size:1.3rem;
  }
  

}


/*--------------------------------
            Responsive
 --------------------------------*/

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



/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

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

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
    bottom: calc(200 * (100vw / 780)) !important;
  }

  #FooterWrap {
    margin-top: -7rem;
  }

  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}
  #lp_contents a:hover{opacity: 1}


  #lp_contents .sp_nav {
    display: flex;
    position: fixed;
    transform: translateX(-50%) translateY(100%);
    visibility: hidden;
    bottom: 0;
    left:50%;
    width: 100%;
    z-index: -2;
    background-color: var(--color_white);
  }
  #lp_contents .sp_nav.hidden {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    z-index: 100;
  }
  #lp_contents .sp_nav.visible {
    transition: all 0.6s 0.2s ease;
    transform: translateX(-50%) translateY(100%);
    z-index: -2;
  }

  #lp_contents .sp_nav ul {
    display: flex;
    width: 100%;
    height: calc(180 * (var(--rate)));
  }

  #lp_contents .sp_nav ul li {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .sp_nav ul li:before {
    width: calc(2 * (var(--rate)));
    height: 100%;
    top: 0;
    right: 0;
    background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, var(--color_pink01) 50%, transparent 50%);
    background-size: calc(2 * var(--rate)) calc(8 * var(--rate));
    background-repeat: repeat-y;
  }

  #lp_contents .sp_nav ul li:last-of-type:before {
    width: 0;
  }

  #lp_contents .sp_nav a {
    text-decoration: none;
  }

  #lp_contents .sp_nav .nav_img {
    width: calc(84 * (var(--rate)));
    margin: calc(20 * (var(--rate))) auto;
  }

  #lp_contents .sp_nav .nav_name {
    font-size: calc(24 * (var(--rate)));
    text-decoration: none;
    color: var(--color_black);
    line-height: calc(31.2/24);

  }

}

/*--------------------------------
        Animation
--------------------------------*/

.ef1,
.ef1 .delay {
  opacity: 0;
  filter: blur(5px);
  transition: 2s;
}

.ef1.active,
.ef1.active .delay{
  opacity: 1;
  filter: blur(0);
}

.ef1.active .delay { 
  transition-delay: 1s;
}

.ef2,
.ef2 li {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease !important;
}

.ef2.active,
.ef2.active li {
  opacity: 1;
  translate: 0 0 !important;
}

.ef2.active li:nth-child(1) { transition-delay: 0s !important; }
.ef2.active li:nth-child(2) { transition-delay: 0.2s !important; }
.ef2.active li:nth-child(3) { transition-delay: 0.4s !important; }
.ef2.active li:nth-child(4) { transition-delay: 0.6s !important; }
.ef2.active li:nth-child(5) { transition-delay: 0.8s !important; }
.ef2.active li:nth-child(6) { transition-delay: 1.0s !important; }
.ef2.active li:nth-child(7) { transition-delay: 1.2s !important; }

#lp_contents .ef3 {
  position: relative;
  overflow: hidden;
}

#lp_contents .ef3 img.model_texture {
  display: block;
  width: 100%;
  height: auto;

  /* 初期状態 */
  clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
  transform: translate(-10%, 10%);
  opacity: 0;

  /* --- 修正箇所：delay（遅延）を追加 --- */
  /* 0.5s（0.5秒）遅れてから 1.2s かけてアニメーションする設定 */
  transition: 
    clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s, 
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
    opacity 0.8s ease 0.5s; 
  
  will-change: clip-path, transform;
}

/* --- activeクラスがついた時の動き --- */
#lp_contents .ef3.active img.model_texture {
  /* 右上に向かってクリップ領域を広げる */
  /* polygon(左下, 左上, 右上, 右下) で全表示 */
  clip-path: polygon(-20% 120%, -20% -20%, 120% -20%, 120% 120%);
  
  transform: translate(0, 0); /* 元の位置に戻る */
  opacity: 1;
}


@media (max-width: 767px) {

#lp_contents .fixedbtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease;
}

#lp_contents .fixedbtn.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

}