@charset "UTF-8";

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

  CV_2026SSCollection | Celvoke Website

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

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

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

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

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


/* ========================================================
             * CV限定 header footer　設定 *
========================================================= */

#FooterWrap {
  position: relative;
  background-color: #ffffff;
  z-index: 0;
}

@media (min-width: 769px) {

  .header_inner {
    width: 100vw;
    max-width: 110rem;
  }

  #HeaderWrap {
    overflow-x: clip;
  }

  .nav-global,
  .header_utiliry {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    width: 71%;
  }

  #header_img_slider {
    margin: 0;
  }

  #FooterWrap {
    position: relative;
    z-index: 1;
  }

  .wrapTop,
  .wrapBottom {
    width: 100%;
  }

  #footer {
    background-color: #ffffff;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  header {
    width: 100%;
    min-width: 100%;
  }

  .header_inner {
    margin: 0;
    padding-left: 2rem;
    max-width: 100vw;
  }

  #header_img_slider li img {
    width: 100%;
  }

  footer {
    min-width: 100%;
  }

  .footer_inner {
    flex-wrap: wrap;
    width: 100%;
  }
}

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

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

  /* PCデザインの横幅 */
  --pcWidth: 100vw * 0.3 / 750;

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

  --color-lp_font: #000000;
  --color-lp_bg: #fff;
  --color-lp_ttl_color: rgba(236, 112, 131, .5);
  --color-lp_white: #fff;
  --font-jp: "europa", "Noto Sans JP", sans-serif;
  --font-en: "liebling", sans-serif;
}

@media (min-width: 769px) {
  :root {
    --rate: var(--pcWidth);
  }
}

#Wrap {
  width: 100%;
}

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

@media screen and (max-width: 768px) {
  #share.move {
    translate: 0 calc(-186 * (var(--rate)));
  }
}


/* ========================================================
                      * lp_contents *
========================================================= */
.lp_contents * {
  box-sizing: border-box;
  /* font-feature-settings: "palt"; */
  line-height: 1.5;
  letter-spacing: .08em;
  font-weight: 400;
  text-align: center;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font-jp);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color-lp_font);
}

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

.lp_contents .pc_only {
  display: none;
}

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

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

.lp_contents a:hover {
  opacity: 1;
}

.lp_contents p {}

.lp_contents_inner {
  position: relative;
  overflow: clip;
  background: var(--color-lp_white);
}


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

/* ========================================================
                      * PC *
========================================================= */

@media (min-width: 769px) {
  .lp_contents .grid_area {
    display: grid;
    grid-template-columns: 1fr calc(100vw * 0.3) 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

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

  .lp_contents .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

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

  .fixed_left_inner .logo {
    width: 38rem;
    text-align: center;
  }

  .fixed_left_inner .ttl_date {
    font-size: 1.2rem;
    margin-top: 1rem;
  }

  .fixed_right .ankerlink_wrap {}

  .fixed_right .ankerlink_wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.9rem 3rem;
    width: 31.8rem;
  }

  .fixed_right .ankerlink_wrap li {
    width: 8.6rem;
    height: 12.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }

  .fixed_right .ankerlink_wrap li:last-of-type a {
    white-space: nowrap;
    padding-top: 4.4rem;
  }

  .fixed_right .ankerlink_wrap li a {}

  .fixed_right .ankerlink_wrap li a::after {
    content: "";
    background: url(../img/icon_arrow_bottom.svg) no-repeat center;
    width: 1.2rem;
    height: .6rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }


  .fixed_right .ankerlink_wrap li .img {
    width: 8.6rem;
  }

  .fixed_right .ankerlink_wrap li .category {
    margin-top: .7rem;
    font-size: 1.4rem;
    font-family: var(--font-en);
    font-weight: 300;
    text-align: center;
  }
}

/* 固定背景 */
.bgSetting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

.bgSetting .for_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_pc.png) center center / cover no-repeat;
}

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

@media (max-width: 768px) {
  .nav_wrap {
    position: fixed;
    bottom: 0;
    display: block;
    /* translate: 0 100%; */
    transition: translate .5s;
    z-index: 100;
    width: 100%;
  }

  .nav_wrap.js-scrollStatus {
    transform: translateY(100%);
    transition: all 0.6s 0.3s;
  }

  .nav_wrap.js-scrollStatus.scrolled-up.scrolled-up {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
    z-index: 100;
  }

  .fixed_right .ankerlink_wrap ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: var(--color-lp_white);
    border-top: 1px solid #DDDDDD;
  }

  .fixed_right .ankerlink_wrap li {
    width: calc(100% /5);
    position: relative;
  }

  .fixed_right .ankerlink_wrap li .img {
    width: calc(112 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li .category {
    font-size: calc(20 * (var(--rate)));
    font-family: var(--font-en);
    font-weight: 300;
    margin-top: calc(15 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li:last-of-type .category {
    margin-top: calc(40 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li:not(:first-of-type) {
    border-left: 1px solid #DDDDDD;
  }

  .fixed_right .ankerlink_wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: calc(7 * (var(--rate))) 0 calc(47 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li a::after {
    content: "";
    width: calc(23 * (var(--rate)));
    height: calc(12 * (var(--rate)));
    background: url(../img/icon_arrow_gray.svg) no-repeat center;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: calc(172 * (var(--rate)));
    transform: translateX(-50%);
  }

}


/* ========================================================
                      * 共通  *
========================================================= */

.lp_contents .accordion {
  transition: height 0.5s;
  overflow: hidden;
  height: 0;
}

.lp_contents .btn_accordion {
  cursor: pointer;
  position: relative;
  font-size: calc(32 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  margin-top: calc(2 * (var(--rate)));
  padding-bottom: calc(50 * (var(--rate)));
}

.lp_contents .btn_accordion.is-open {
  margin-top: calc(66 * (var(--rate)));
  padding-bottom: calc(37 * (var(--rate)));
}

.lp_contents .btn_accordion::before {
  content: "";
  position: absolute;
  background: url(../img/icon_plus.svg) no-repeat center;
  background-size: 100%;
  width: calc(30 * (var(--rate)));
  height: calc(30 * (var(--rate)));
  top: calc(66 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .btn_accordion.is-open::before {
  background: url(../img/icon_minus.svg) no-repeat center;
}


.lp_contents .js-fade {
  opacity: 0;
}

.lp_contents .js-fade.is-active {
  -webkit-animation: opa1 1.4s cubic-bezier(0.51, 0.21, 0.41, 1) 0.3s 1 forwards;
  animation: opa 1.4s cubic-bezier(0.51, 0.21, 0.41, 1) 0.3s 1 forwards;
}

@-webkit-keyframes opa {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}




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

.sec_mv {
  position: relative;
}

.sec_mv .mv_img {
  width: calc(750 * (var(--rate)));
  height: calc(1000 * (var(--rate)));
  overflow: hidden;
}

.sec_mv .mv_img.is-active img {
  transform-origin: top 2% center;
  -webkit-animation: zoomUp 2s ease-in-out 0s normal both;
  animation: zoomUp 2s ease-in-out 0s normal both;
}

.sec_mv .ttl_main {
  width: calc(650 * (var(--rate)));
  position: absolute;
  top: calc(656 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.sec_mv .ttl_date {
  position: absolute;
  top: calc(944 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: calc(20 * (var(--rate)));
  color: var(--color-lp_white);
  z-index: 1;
}

.sec_mv .ankerlink_wrap {
  margin-top: calc(80 * (var(--rate)));
}

.sec_mv .ankerlink_wrap ul {
  display: flex;
  justify-content: center;
  gap: calc(22 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li {
  position: relative;
}

.sec_mv .ankerlink_wrap li a {}

.sec_mv .ankerlink_wrap li a::after {
  content: "";
  background: url(../img/icon_arrow_bottom.svg) no-repeat center;
  width: calc(23 * (var(--rate)));
  height: calc(12 * (var(--rate)));
  display: block;
  margin: calc(30 * (var(--rate))) auto 0;
}


.sec_mv .ankerlink_wrap li .img {
  width: calc(160 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li .category {
  margin-top: calc(24 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  text-align: center;
}


/* ========================================================
                      * sec_products  *
========================================================= */

.sec_products {
  margin-top: calc(197 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_products .products_wrap {
  position: relative;
}

.sec_products .products02 {
  margin-top: calc(159 * (var(--rate)));
}

.sec_products .products03 {
  margin-top: calc(193 * (var(--rate)));
}

.sec_products .products04 {
  margin-top: calc(190 * (var(--rate)));
}

.sec_products .slide_wrap {
  position: relative;
  width: calc(750 * (var(--rate)));
  height: calc(937 * (var(--rate)));
  overflow: hidden;
}

.sec_products .slide_wrap ul {}

.sec_products .slide_wrap li {}

.sec_products .ttl {
  font-size: calc(62 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  color: var(--color-lp_ttl_color);
  position: absolute;
  top: calc(888 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.sec_products .main_img {
  width: calc(560 * (var(--rate)));
  margin: calc(67 * (var(--rate))) auto 0;
}

.sec_products .labels {
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  margin: calc(24 * (var(--rate))) auto 0;
  position: relative;
  width: fit-content;
}

.sec_products .labels::before,
.sec_products .labels::after {
  content: "";
  background: var(--color-lp_font);
  width: calc(14 * (var(--rate)));
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sec_products .labels::before {
  left: calc(-33 * (var(--rate)));
}

.sec_products .labels::after {
  right: calc(-33 * (var(--rate)));
}

.sec_products .products_info {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(49/28);
  margin-top: calc(15 * (var(--rate)));
}

.sec_products .products_info a {
  letter-spacing: .04em;
}

.sec_products .btn_buy {
  margin: calc(62 * (var(--rate))) auto 0;
  width: fit-content;
}

.sec_products .btn_buy a {
  font-size: calc(32 * (var(--rate)));
  padding-right: calc(62 * (var(--rate)));
  position: relative;
  padding-bottom: calc(12 * (var(--rate)));
}

.sec_products .btn_buy a::before {
  content: "";
  background: var(--color-lp_font);
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.sec_products .btn_buy a::after {
  content: "";
  background: url(../img/icon_bag.svg)no-repeat center / 100%;
  width: calc(34 * (var(--rate)));
  height: calc(35 * (var(--rate)));
  position: absolute;
  top: calc(6 * (var(--rate)));
  right: calc(2 * (var(--rate)));
}


.sec_products .products_description {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(42/24);
  margin-top: calc(73 * (var(--rate)));
  padding-left: calc(12 * (var(--rate)));
}

.sec_products .products03 .products_description {
  margin-top: calc(70 * (var(--rate)));
}

.sec_products .color_variations {
  width: calc(650 * (var(--rate)));
  margin: calc(72 * (var(--rate))) auto 0;
}

.sec_products .color_variations ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * (var(--rate))) calc(30 * (var(--rate)));
}

.sec_products .color_variations li {}

.sec_products .color_variations li .color_img {
  width: calc(156 * (var(--rate)));
  margin: 0 auto;
}

.sec_products .products02 .color_variations li .color_img {
  width: calc(310 * (var(--rate)));
}

.sec_products .color_variations li .color_name {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  margin-top: calc(25 * (var(--rate)));
}

.sec_products .color_variations li .color_name a {
  line-height: calc(35/20);
}

.sec_products .products02 .color_variations li .color_name {
  margin-top: calc(20 * (var(--rate)));
}

.sec_products .color_variations li .color_info {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  margin-top: calc(15 * (var(--rate)));
}

.sec_products .products02 .color_variations li .color_info {
  margin-top: calc(15 * (var(--rate)));
}

.sec_products .color_details {
  margin-top: calc(105 * (var(--rate)));
}

.sec_products .color_details .color_details_ttl {
  font-size: calc(42 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
}

.sec_products .color_details .color_details_slide_wrap {
  margin: calc(18 * (var(--rate))) auto 0;
  width: calc(650 * (var(--rate)));
}

.sec_products .color_details .color_details_slide_wrap ul {}

.sec_products .color_details .color_details_slide_wrap li {
  width: calc(650 * (var(--rate)));
}

.sec_products .color_details .color_details_slide_wrap li .img {
  width: calc(560 * (var(--rate)));
  border: 1px solid #DDDDDD;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.sec_products .color_details .color_details_slide_wrap li .btn_grass {
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  background: url(../img/icon_grass_plus.svg);
  background-repeat: no-repeat;
  background-size: calc(36 * (var(--rate))) calc(36 * (var(--rate)));
  background-position: center right;
  position: absolute;
  bottom: calc(-15 * (var(--rate)));
  right: calc(15 * (var(--rate)));
  z-index: 2;
  cursor: pointer;
}

.sec_products .color_details .color_details_slide_wrap li .btn_grass.change {
  background: url(../img/icon_grass_minus.svg);
  background-repeat: no-repeat;
  background-size: calc(36 * (var(--rate))) calc(36 * (var(--rate)));
  background-position: center right;
}


.sec_products .color_details .color_details_slide_wrap li .color_name {
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .color_details .color_details_slide_wrap li .color_info {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(42/24);
  margin-top: calc(17 * (var(--rate)));
}

.sec_products .eyebrow_wrap {
  margin-top: calc(67 * (var(--rate)));
}

.sec_products .eyebrow02 {
  margin-top: calc(85 * (var(--rate)));
}

.sec_products .item_wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: calc(45 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
  position: relative;
}

.sec_products .eyebrow02 .item_wrap {
  padding-top: calc(89 * (var(--rate)));
  margin-left: 0;
  gap: calc(24 * (var(--rate)));
}

.sec_products .item_wrap .img {
  width: calc(310 * (var(--rate)));
}

.sec_products .item_wrap .txt_wrap {
  margin-top: calc(69 * (var(--rate)));
}

.sec_products .eyebrow02 .item_wrap .txt_wrap {
  margin-top: calc(69 * (var(--rate)));
  margin-left: calc(77 * (var(--rate)));
}

.sec_products .item_wrap .name {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(49/28);
  letter-spacing: .04em;
}

.sec_products .item_wrap .name a {
  line-height: calc(49/28);
  letter-spacing: .04em;
}

.sec_products .item_wrap .price {
  font-size: calc(28 * (var(--rate)));
  margin-top: calc(13 * (var(--rate)));
}

.sec_products .item_wrap .btn_buy {
  margin-top: calc(45 * (var(--rate)));
}

.sec_products .eyebrow_wrap .color_name {
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(27 * (var(--rate)));
  margin-left: calc(-14 * (var(--rate)));
}

.sec_products .eyebrow_wrap .products_description {
  margin-top: calc(16 * (var(--rate)));
}

.sec_products .eyebrow02 .products_description {
  margin-top: calc(17 * (var(--rate)));
}

.sec_products .eyebrow_wrap .labels {
  width: calc(650 * (var(--rate)));
  padding: calc(4 * (var(--rate))) 0;
  position: absolute;
  top: 0;
  background: #DDDDDD;
  left: 50%;
  transform: translateX(-50%);
}

.sec_products .eyebrow_wrap .labels::before,
.sec_products .eyebrow_wrap .labels::after {
  display: none;
}


/* ========================================================
                      * sec_look  *
========================================================= */

.sec_look {
  padding-top: calc(100 * (var(--rate)));
  padding-bottom: calc(200 * (var(--rate)));
}

.sec_look .ttl {
  font-size: calc(62 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
}

.sec_look .lool_wrap {
  margin-top: calc(43 * (var(--rate)));
}

.sec_look .look02 {
  margin-top: calc(117 * (var(--rate)));
}

.sec_look .ttl_sub {
  font-size: calc(42 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  color: var(--color-lp_ttl_color);
  margin-top: calc(10 * (var(--rate)));
}

.sec_look .slide_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(48 * (var(--rate)));
}

.sec_look .look02 .slide_tab {
  gap: calc(36 * (var(--rate)));
}

.sec_look .slide_tab ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10 * (var(--rate)));
}

.sec_look .slide_tab li {
  width: calc(114 * (var(--rate)));
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.sec_look .slide_tab li::after {
  content: "";
  width: calc(114 * (var(--rate)));
  height: calc(114 * (var(--rate)));
  box-shadow: inset 0 0 0 2px #EC7083;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.sec_look .slide_tab li.active::after {
  opacity: .3;
}

.sec_look .slide_wrap {
  margin-top: calc(22 * (var(--rate)));
}

.sec_look .look02 .slide_wrap {
  margin-top: calc(21 * (var(--rate)));
}

.sec_look .slide_wrap ul {}

.sec_look .slide_wrap li {}

.sec_look .howtouse_ttl {
  font-size: calc(42 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  margin-top: calc(72 * (var(--rate)));
}

.sec_look .look02 .howtouse_ttl {
  margin-top: calc(68 * (var(--rate)));
}

.sec_look .accordion {
  height: calc(572 * (var(--rate)));
}

.sec_look .btn_accordion {
  z-index: 0;
}

.sec_look .btn_accordion::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(0 * (var(--rate)));
  transform: translateX(-50%);
  width: calc(750 * (var(--rate)));
  height: calc(618 * (var(--rate)));
  background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 100%) 90%);
  display: block;
  z-index: -1;
}

.sec_look .btn_accordion.is-open::after {
  display: none;
}

.sec_look .item_list {
  margin-top: calc(50 * (var(--rate)));
}

.sec_look .item_list ul {
  display: grid;
  gap: calc(20 * (var(--rate))) calc(50 * (var(--rate)));
  grid-template-columns: repeat(3, auto);
  justify-content: center;
}

.sec_look .item_list ul li {
  width: calc(184 * (var(--rate)));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sec_look .item_list .item_list_img {}

.sec_look .item_list .item_name {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  margin-top: calc(16 * (var(--rate)));
}

.sec_look ol {
  margin-top: calc(63 * (var(--rate)));
  padding-inline: calc(49 * (var(--rate)));
  display: flex;
  flex-direction: column;
  gap: calc(6 * (var(--rate)));
}

.sec_look ol li {
  text-align: left;
  font-size: calc(24 * (var(--rate)));
}


/* ========================================================
                      * sec_release  *
========================================================= */

.sec_release {
  padding-top: calc(186 * (var(--rate)));
  padding-bottom: calc(193 * (var(--rate)));
  background: rgba(221, 221, 221, .2);
}

.sec_release .ttl {
  font-size: calc(62 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
}

.sec_release .release_table {
  width: calc(650 * (var(--rate)));
  margin: calc(39 * (var(--rate))) auto 0;
  text-align: center;
}

.release_table dt,
.release_table dd {
  position: relative;
  font-size: calc(26 * (var(--rate)));
  padding: calc(46 * (var(--rate))) 0 calc(32 * (var(--rate)));
  border: 2px solid rgba(221, 221, 221, .2);
  background: var(--color-lp_white);
}

.sec_release dl {
  display: flex;
}

.sec_release dt {
  width: 50%;
}

.sec_release dd {
  width: 50%;
}

.sec_release .release_table dl:nth-of-type(2) dt,
.sec_release .release_table dl:nth-of-type(2) dd {
  border-top: none;
}

.sec_release .release_table dt {
  border-right: none;
}

.sec_release .note {
  text-align: center;
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  color: #757575;
  margin-top: calc(25 * (var(--rate)));
}


/* ========================================================
                      * sec_message  *
========================================================= */

.sec_message {
  padding-top: calc(191 * (var(--rate)));
  padding-bottom: calc(193 * (var(--rate)));
  background: url(../img/bg_massage.png) no-repeat center / 100%;
}

.sec_message .ttl {
  font-size: calc(42 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
}

.sec_message .txt_wrap {
  margin-top: calc(62 * (var(--rate)));
}

.sec_message .txt {
  padding-left: calc(18 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  line-height: calc(42/24);
}

.sec_message .txt:not(:first-of-type) {
  margin-top: calc(42 * (var(--rate)));
}

.lp_contents .btn_all_wrap {
  padding: calc(189 * (var(--rate))) 0 calc(200 * (var(--rate)));
}

.lp_contents .btn_all {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.lp_contents .btn_all a {
  font-size: calc(32 * (var(--rate)));
  font-family: var(--font-en);
  font-weight: 300;
  padding-right: calc(35 * (var(--rate)));
  padding-bottom: calc(13 * (var(--rate)));
}


.lp_contents .btn_all a::before {
  content: "";
  background: var(--color-lp_font);
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .btn_all a::after {
  content: "";
  background: url(../img/icon_arrow_bottom.svg)no-repeat center / 100%;
  width: calc(23 * (var(--rate)));
  height: calc(12 * (var(--rate)));
  position: absolute;
  top: calc(15 * (var(--rate)));
  right: calc(-10 * (var(--rate)));
  transform: rotate(-90deg);
}


/* ========================================================
                      * スライダー設定 *
========================================================= */


.lp_contents .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.lp_contents .swiper-pagination {
  width: auto;
  position: absolute;
  top: calc(20 * (var(--rate)));
  right: calc(20 * (var(--rate)));
}

.lp_contents .slick-dots {
  width: 100%;
  height: calc(4 * var(--rate));
  font-size: 0;
  position: relative;
  display: flex;
  bottom: 0;
  gap: calc(10 * var(--rate));
}

@media (min-width: 769px) {
  .lp_contents .slick-dots {
    height: 1px;
  }
}

.lp_contents .slick-dots li {
  width: calc(60 * var(--rate)) !important;
  height: calc(4 * var(--rate));
  margin: 0;
}

.lp_contents .slick-dot {
  cursor: pointer;
  width: 100%;
  height: calc(4 * var(--rate));
  position: relative;
  display: inline-block;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 1;
}

@media (min-width: 769px) {
  .lp_contents .slick-dot {
    height: calc(4 * var(--rate));
  }
}

.lp_contents .slick-dot .bulletInner {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--color-lp_white);
}

.lp_contents .slick-active .slick-dot .bulletInner {
  animation: progressAnimation 3s linear forwards;
}



@-webkit-keyframes progressAnimation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes progressAnimation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

.lp_contents .slick-prev:before,
.lp_contents .slick-next:before {
  display: none !important;
}

.lp_contents .custom-prev {
  position: absolute;
  top: calc(284 * var(--rate));
  left: calc(0 * var(--rate));
  width: calc(22 * var(--rate));
  height: calc(71 * var(--rate));
  z-index: 2;
  cursor: pointer;
  background: url(../img/slide_arrow_left.svg) no-repeat center / contain;
  border: none;
}

.lp_contents .custom-next {
  position: absolute;
  top: calc(284 * var(--rate));
  right: calc(0 * var(--rate));
  width: calc(22 * var(--rate));
  height: calc(71 * var(--rate));
  z-index: 2;
  cursor: pointer;
  background: url(../img/slide_arrow_right.svg) no-repeat center / contain;
  border: none;
}

.lp_contents .sec_products .slide_wrap .slick-slide.slick-active img {
  transform-origin: top 2% center;
  animation: zoomUp 2s ease-in-out 0s normal both;
}

@-webkit-keyframes zoomUp {
  0% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}