@charset "UTF-8";

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

  2026 BASEMAKE NEW PRODUCTS | Celvoke Website

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

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

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

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


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

#FooterWrap {
  position: relative;
  background-color: #fbfbfb;
  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: #fbfbfb;
  }
}

@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: 46.2rem;

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

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

  --color-lp_font: #000000;
  --color-lp_bg: #fff;
  --color-lp_accent: #f2ead6;
  --color-lp_white: #fff;
  --font-jp: "europa", "Noto Sans JP", sans-serif;
  --font-en: "adobe-garamond-pro", 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: .07em;
  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_inner {
  position: relative;
  overflow: clip;
  background: var(--color-lp_white);
  padding-bottom: calc(200 * (var(--rate)));
}

@media (max-width: 768px) {
  .lp_contents_inner {}
}

.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 46.2rem 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: 34rem;
    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;
    justify-content: center;
  }

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

  .fixed_right .ankerlink_wrap li:not(:last-of-type) {
    border-right: solid 1px var(--color-lp_white);
  }

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

  .fixed_right .ankerlink_wrap li a {
    padding-bottom: 2.7rem;
  }

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


  .fixed_right .ankerlink_wrap li .img {
    width: 8rem;
    margin: 0 auto;
  }

  .fixed_right .ankerlink_wrap li .category {
    margin-top: 1.7rem;
    font-size: 1.4rem;
    text-align: center;
  }

  .fixed_right .ankerlink_wrap li:last-of-type .category {
    margin-top: 1.1rem;
  }
}

/* 固定背景 */
.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 {}

  .fixed_right .ankerlink_wrap ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: url(../img/ankerlink_bg.png) no-repeat center / 100% 100%;
  }

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

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

  .fixed_right .ankerlink_wrap li .category {
    font-size: calc(22 * (var(--rate)));
    margin-top: calc(14 * (var(--rate)));
  }

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

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

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

  .fixed_right .ankerlink_wrap li:nth-of-type(1) a {
    padding-left: calc(16 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li:nth-of-type(4) a {
    padding-right: calc(16 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li a::after {
    content: "";
    width: calc(23 * (var(--rate)));
    height: calc(13 * (var(--rate)));
    background: url(../img/icon_arrow_bottom.svg) no-repeat center;
    background-size: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin-bottom: calc(18 * (var(--rate)));
  }

  .fixed_right .ankerlink_wrap li:nth-of-type(1) a::after {
    transform: translateX(calc(-50% - calc(-8 * (var(--rate)))));
  }

  .fixed_right .ankerlink_wrap li:nth-of-type(4) a::after {
    transform: translateX(calc(-50% - calc(8 * (var(--rate)))));
  }


}


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


.lp_contents .btn_buy {
  width: calc(630 * (var(--rate)));
  height: calc(120 * (var(--rate)));
  margin: 0 auto;
  border: solid 1px var(--color-lp_font);
}

.lp_contents .btn_buy a {
  font-size: calc(30 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-right: calc(62 * (var(--rate)));
  z-index: 6;
  line-height: 1;
}

.lp_contents .btn_buy a::before {
  content: "";
  width: calc(34 * (var(--rate)));
  height: calc(36 * (var(--rate)));
  background: url(../img/icon_bag.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: calc(78 * (var(--rate)));
  margin-top: calc(-4 * (var(--rate)));
}


.lp_contents .js-fade-blur {
  opacity: 0.4;
  filter: blur(10px);
  will-change: opacity, filter;
}

.lp_contents .js-fade-blur.is-active {
  animation: fade-blur .8s ease-out forwards;
}

/* -- keyframes -- */
@keyframes fade-blur {
  0% {
    opacity: 0.4;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}


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

.sec_mv {
  position: relative;
  background: #efe1d5;
}

.sec_mv .ttl_main {
  width: calc(750 * (var(--rate)));
}

.sec_mv .ttl_date {
  position: absolute;
  top: calc(858 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.sec_mv .ttl_date span {
  display: block;
  color: var(--color-lp_white);
  white-space: nowrap;
}

.sec_mv .ttl_date span:nth-of-type(1) {
  font-size: calc(30 * (var(--rate)));
}

.sec_mv .ttl_date span:nth-of-type(2) {
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(20 * (var(--rate)));
  font-feature-settings: "palt";
}

.sec_mv .txt_wrap {
  padding-top: calc(188 * (var(--rate)));
  padding-bottom: calc(188 * (var(--rate)));
  position: relative;
  z-index: 1;
}

.sec_mv .txt_wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(890 * (var(--rate)));
  height: calc(890 * (var(--rate)));
  background: url(../img/mv_txt_bg.png) no-repeat center / 100%;
  z-index: -1;
}

.sec_mv .txt_wrap .txt_lg {
  font-size: calc(34 * (var(--rate)));
  line-height: calc(59.5/34);
  padding-left: calc(21 * (var(--rate)));
}

.sec_mv .txt_wrap .txt_md {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  margin-top: calc(56 * (var(--rate)));
  padding-left: calc(13 * (var(--rate)));
}

.sec_mv .ankerlink_wrap {}

.sec_mv .ankerlink_wrap ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: url(../img/ankerlink_bg.png) no-repeat center / 100% 100%;
}

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

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

.sec_mv .ankerlink_wrap li .category {
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(14 * (var(--rate)));
}

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

.sec_mv .ankerlink_wrap li:not(:first-of-type) {
  border-left: 1px solid var(--color-lp_white);
}

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

.sec_mv .ankerlink_wrap li:nth-of-type(1) a {
  padding-left: calc(16 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li:nth-of-type(4) a {
  padding-right: calc(16 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li a::after {
  content: "";
  width: calc(23 * (var(--rate)));
  height: calc(13 * (var(--rate)));
  background: url(../img/icon_arrow_bottom.svg) no-repeat center;
  background-size: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin-bottom: calc(18 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li:nth-of-type(1) a::after {
  transform: translateX(calc(-50% - calc(-8 * (var(--rate)))));
}

.sec_mv .ankerlink_wrap li:nth-of-type(4) a::after {
  transform: translateX(calc(-50% - calc(8 * (var(--rate)))));
}


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

.sec_products {}

.sec_products .products_wrap {
  padding-top: calc(186 * (var(--rate)));
}

.sec_products .products_lead {
  font-size: calc(42 * (var(--rate)));
  line-height: calc(73.5/42);
}

.sec_products .slide_wrap {
  position: relative;
  width: calc(750 * (var(--rate)));
  margin-top: calc(44 * (var(--rate)));
}

.sec_products .labels {
  font-size: calc(26 * (var(--rate)));
  font-family: var(--font-en);
  margin-top: calc(144 * (var(--rate)));
  padding-top: calc(11 * (var(--rate)));
  padding-bottom: calc(9 * (var(--rate)));
  background: url(../img/labels_bg.png) no-repeat center / 100%;
}

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

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

.sec_products .ttl {
  font-size: calc(34 * (var(--rate)));
  line-height: calc(59.5/34);
  margin-top: calc(43 * (var(--rate)));
}

.sec_products .ttl a {
  line-height: calc(59.5/34);
}

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

.sec_products .products_info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(35 * (var(--rate)));
  margin-top: calc(28 * (var(--rate)));
  margin-left: calc(122 * (var(--rate)));
}

.sec_products .products02 .products_info {
  justify-content: center;
  margin-left: calc(0 * (var(--rate)));
  margin-top: calc(19 * (var(--rate)));
  padding-left: calc(18 * (var(--rate)));
}

.sec_products .products03 .products_info {
  justify-content: center;
  margin-left: calc(0 * (var(--rate)));
  margin-top: calc(17 * (var(--rate)));
  padding-right: calc(2 * (var(--rate)));
}

.sec_products .products_info .products_price {
  font-size: calc(26 * (var(--rate)));
}

.sec_products .products_info .products_sun_protection {
  font-size: calc(26 * (var(--rate)));
  position: relative;
}

.sec_products .products_info .products_sun_protection::before {
  content: "";
  border: solid 1px var(--color-lp_accent);
  width: calc(198 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec_products .products_description {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  margin-top: calc(58 * (var(--rate)));
}

.sec_products .products02 .products_description {
  margin-top: calc(50 * (var(--rate)));
  padding-left: calc(13 * (var(--rate)));
}

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

.sec_products .color_variations {
  margin-top: calc(110 * (var(--rate)));
}

.sec_products .color_variations ul {
  display: flex;
  flex-direction: column;
  gap: calc(60 * (var(--rate)));
}

.sec_products .color_variations li {
  position: relative;
  z-index: 1;
}

.sec_products .color_variations li::before {
  content: "";
  position: absolute;
  top: calc(0 * (var(--rate)));
  left: calc(60 * (var(--rate)));
  z-index: -1;
  width: calc(410 * (var(--rate)));
  height: calc(330 * (var(--rate)));
}

.sec_products .color_variations li:nth-of-type(1)::before {
  background: url(../img/products01_color_bg_01.jpg) no-repeat center / 100%;
}

.sec_products .color_variations li:nth-of-type(2)::before {
  background: url(../img/products01_color_bg_02.jpg) no-repeat center / 100%;
}


.sec_products .color_variations li a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: calc(120 * (var(--rate)));
  padding-right: calc(58 * (var(--rate)));
}

.sec_products .color_variations .color_txt {}

.sec_products .color_variations .color_name {
  font-size: calc(30 * (var(--rate)));
  text-align: left;
}

.sec_products .color_variations .color_info {
  font-size: calc(26 * (var(--rate)));
  text-align: left;
  line-height: calc(45.5/26);
  margin-top: calc(32 * (var(--rate)));
  margin-bottom: calc(14 * (var(--rate)));
}

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

.sec_products .color_variations .color_tag {
  font-size: calc(26 * (var(--rate)));
  font-family: var(--font-en);
  text-align: left;
  margin-bottom: calc(13 * (var(--rate)));
}

.sec_products .products_comparison {
  width: calc(750 * (var(--rate)));
  margin-top: calc(118 * (var(--rate)));
}

.sec_products .products_comparison .note {
  color: #757575;
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(44 * (var(--rate)));
}

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

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

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

.sec_products .products_effect {
  margin-top: calc(56 * (var(--rate)));
}

.sec_products .products_effect ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * (var(--rate)));
}

.sec_products .products_effect li {
  width: calc(142 * (var(--rate)));
  height: calc(142 * (var(--rate)));
  background: url(../img/products_effect_bg.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec_products .products_effect li p {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  padding-top: calc(6 * (var(--rate)));
}

.sec_products .products_img {
  width: calc(750 * (var(--rate)));
}

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

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


/* ========================================================
                      * sec_step  *
========================================================= */

.sec_step {
  padding-top: calc(185 * (var(--rate)));
}

.sec_step .step_lead {
  font-size: calc(42 * (var(--rate)));
  line-height: calc(73.5 / 42);
}

.sec_step .scroll_wrap {
  background: url(../img/sec_step_bg.png) no-repeat center / 100%;
  margin-top: calc(41 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
}

.sec_step .scroll_wrap ul {
  display: flex;
}

.sec_step .scroll_wrap li {
  width: calc(510 * (var(--rate)));
  position: relative;
}

.sec_step .scroll_wrap li:not(:last-of-type)::before {
  content: "";
  width: calc(32 * (var(--rate)));
  height: calc(81 * (var(--rate)));
  background: url(../img/icon_scroll_wrap_arrow.svg) no-repeat center / 100%;
  position: absolute;
  top: calc(116 * (var(--rate)));
  right: calc(-74 * (var(--rate)));
}

.sec_step .scroll_wrap li:not(:last-of-type) {
  margin-right: calc(119 * (var(--rate)));
  position: relative;
}

.sec_step .scroll_wrap li:last-of-type {
  margin-right: calc(62 * (var(--rate)));
}

.sec_step .scroll_wrap li a {
  display: inline;
}

.sec_step .scroll_wrap li::after {
  content: "";
  position: absolute;
  top: calc(-24 * (var(--rate)));
  right: calc(0 * (var(--rate)));
  width: calc(300 * (var(--rate)));
  height: calc(360 * (var(--rate)));
  pointer-events: none;
}

.sec_step .scroll_wrap li:nth-of-type(1)::after {
  background: url(../img/step01_item.png) no-repeat center / 100%;
}

.sec_step .scroll_wrap li:nth-of-type(2)::after {
  background: url(../img/step02_item.png) no-repeat center / 100%;
}

.sec_step .scroll_wrap li:nth-of-type(3)::after {
  background: url(../img/step03_item.png) no-repeat center / 100%;
}

.sec_step .ste_num {
  width: calc(159 * (var(--rate)));
}

.sec_step .step_ttl {
  font-size: calc(34 * (var(--rate)));
  line-height: calc(59.5/34);
  text-align: left;
  margin-top: calc(46 * (var(--rate)));
}

.sec_step ul li:nth-of-type(2) .step_ttl {
  margin-top: calc(53 * (var(--rate)));
}

.sec_step .step_product {
  font-size: calc(30 * (var(--rate)));
  line-height: calc(52.5/30);
  text-align: left;
  margin-top: calc(130 * (var(--rate)));
}

.sec_step ul li:nth-of-type(2) .step_product {
  margin-top: calc(186 * (var(--rate)));
}

.sec_step ul li:nth-of-type(3) .step_product {
  margin-top: calc(186 * (var(--rate)));
}

.sec_step .step_price {
  font-size: calc(26 * (var(--rate)));
  text-align: left;
  margin-top: calc(20 * (var(--rate)));
}

.sec_step .step_txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  text-align: justify;
  margin-top: calc(50 * (var(--rate)));
}

.sec_step ul li:nth-of-type(2) .step_txt {
  white-space: nowrap;
}


/* ========================================================
                      * sec_novelty  *
========================================================= */

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

.sec_novelty .ttl {
  font-size: calc(52 * (var(--rate)));
  font-family: var(--font-en);
}

.sec_novelty .ttl_sub {
  font-size: calc(26 * (var(--rate)));
  margin-top: calc(16 * (var(--rate)));
}

.sec_novelty .novelty_img_wrap {
  margin-top: calc(51 * (var(--rate)));
}

.sec_novelty .novelty_img {
  width: calc(630 * (var(--rate)));
  border: solid 1px #e8e8e8;
  margin: 0 auto;
}

.sec_novelty .novelty_date {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  margin-top: calc(50 * (var(--rate)));
}

.sec_novelty .novelty_txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  margin-top: calc(42 * (var(--rate)));
}

.sec_novelty .novelty_note {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(35/20);
  color: #757575;
  margin-top: calc(40 * (var(--rate)));
  padding-left: calc(10 * (var(--rate)));
}


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

.sec_release {
  padding-top: calc(180 * (var(--rate)));
  padding-bottom: calc(200 * (var(--rate)));
  background: url(../img/sec_release_bg.png) no-repeat center top / 100%;
}

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

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

.sec_release .release_table:nth-of-type(2) {
  margin: calc(76 * (var(--rate))) auto 0;
}

.sec_release .release_shop {
  border: 1px solid var(--color-lp_accent);
  border-bottom: none;
  font-size: calc(26 * (var(--rate)));
  line-height: calc(45.5/26);
  letter-spacing: .09em;
  padding: calc(33 * (var(--rate))) 0 calc(25 * (var(--rate)));
}

.release_table dt,
.release_table dd {
  position: relative;
  font-size: calc(26 * (var(--rate)));
  padding: calc(31 * (var(--rate))) 0 calc(39 * (var(--rate)));
  border: 1px solid var(--color-lp_accent);
}

.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);
  letter-spacing: .04em;
  color: #757575;
  margin-top: calc(28 * (var(--rate)));
}

.sec_release .release_table:nth-of-type(2) .note {
  margin-top: calc(24 * (var(--rate)));
  letter-spacing: .07em;
}

.sec_release .note a {
  display: inline;
  text-decoration: underline;
}

.btn_all_wrap {
  margin-top: calc(192 * (var(--rate)));
}

.btn_all_wrap .btn_all {}

.btn_all_wrap .btn_all a {
  padding-right: 0;
}

.btn_all_wrap .btn_all a::before {
  display: none;
}

/* ========================================================
                      * contents_wrap *
========================================================= */

.contents_wrap {
  padding-top: calc(158 * (var(--rate)));
  padding-bottom: calc(150 * (var(--rate)));
  background: var(--color-lp_white);
  position: relative;
  z-index: 2;
}

.contents_wrap .ttl {
  font-size: 2rem;
  font-family: var(--font-jp);
  font-weight: 400;
  color: #000;
  text-align: center;
  letter-spacing: .07em;
}

.contents_wrap .slide_wrap {
  margin: 0 auto;
  margin-top: calc(53 * (var(--rate)));
  width: 92rem;
}

.contents_wrap .slide_wrap ul {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
}

.contents_wrap .slide_wrap li {
  width: 28rem;
}

.contents_wrap .slide_wrap .slick-slide {
  margin: 0 2rem;
}

.contents_wrap .slide_wrap .slide_img,
.contents_wrap .slide_wrap .slide_img img {
  width: 28rem;
  height: 28rem;
}

.contents_wrap .slide_wrap .slide_txt {
  font-size: 1.3rem;
  line-height: calc(22.75/13);
  margin-top: calc(30 * (var(--rate)));
  color: #000;
  font-family: var(--font-jp);
  letter-spacing: .07em;
  font-weight: 400;
}

.contents_wrap .slide_wrap .slick-arrow {
  content: "";
  position: absolute;
  top: 17.8rem;
  width: calc(22 * (var(--rate)));
  height: calc(41 * (var(--rate)));
  background: url(../img/contents_slide_arrow.svg) no-repeat center / 100%;
  z-index: 1;
  cursor: pointer;
  transform-origin: center;
}

.contents_wrap .slide_wrap .slick-arrow:before {
  display: none;
  font-size: 0;
}

.contents_wrap .slide_wrap .slick-prev {
  left: -9rem;
}

.contents_wrap .slide_wrap .slick-next {
  transform: scale(-1, 1);
  right: -9rem;
  top: 16.5rem;
}

.contents_wrap button.slick-next.slick-arrow,
.contents_wrap button.slick-prev.slick-arrow {
  /* border: 0;
  background: unset;
  font-size: 0;
  line-height: 0;
  display: block; */
}


@media (max-width: 768px) {

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

  .contents_wrap .ttl {
    font-size: calc(34 * (var(--rate)));
  }

  .contents_wrap .slide_wrap {
    margin-top: calc(53 * (var(--rate)));
    width: calc(510 * (var(--rate)));
  }

  .contents_wrap .slide_wrap ul {}

  .contents_wrap .slide_wrap li {
    margin-right: calc(50 * (var(--rate)));
    width: calc(510 * (var(--rate)));
  }

  .contents_wrap .slide_wrap .slide_img,
  .contents_wrap .slide_wrap .slide_img img {
    width: calc(510 * (var(--rate)));
    height: calc(510 * (var(--rate)));
  }

  .contents_wrap .slide_wrap .slide_txt {
    font-size: calc(24 * (var(--rate)));
    line-height: calc(42/24);
    margin-top: calc(30 * (var(--rate)));
    text-align: center;
  }

  .contents_wrap .slide_wrap .slick-arrow {
    content: "";
    position: absolute;
    top: calc(254 * (var(--rate)));
    width: calc(22 * (var(--rate)));
    height: calc(41 * (var(--rate)));
    background: url(../img/contents_slide_arrow.svg) no-repeat center / 100%;
    z-index: 1;
    cursor: pointer;
    transform-origin: center;
  }

  .contents_wrap .slide_wrap .slick-prev {
    left: calc(-82 * (var(--rate)));
  }

  .contents_wrap .slide_wrap .slick-next {
    transform: scale(-1, 1);
    right: calc(-82 * (var(--rate)));
    top: calc(234 * (var(--rate)));
  }


}

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


.lp_contents .slide_wrap .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: calc(12 * (var(--rate)));
  left: 50%;
  bottom: calc(-25 * (var(--rate)));
  transform: translateX(-50%);
  width: fit-content;

}

.lp_contents .slide_wrap .slick-dots li {
  width: calc(100 * (var(--rate)));
  height: calc(4 * (var(--rate)));
  background: #e8e8e8;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.lp_contents .slide_wrap .slick-dots li button {
  display: none;
}

.lp_contents .slide_wrap .slick-dots li .progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--color-lp_accent);
}

/* ========================================================
                      * 　simplebar設定 *
========================================================= */

.lp_contents .simplebar_content_wrap {
  padding-top: calc(144 * (var(--rate)));
  padding-left: calc(62 * (var(--rate)));
  padding-bottom: calc(62 * (var(--rate)));
  user-select: none;
}

.lp_contents .simplebar_content_wrap.is-dragging {
  cursor: grabbing;
}

.lp_contents .simplebar_content_wrap .simplebar-content {
  display: flex;
}

.lp_contents .simplebar_content_wrap .simplebar_content {
  padding-right: var(--inline-pos);
}

.lp_contents .simplebar_content_wrap .simplebar-track.simplebar-horizontal {
  left: calc(58 * (var(--rate)));
  right: calc(58 * (var(--rate)));
  height: calc(8 * (var(--rate)));
  background-color: var(--color-lp_white);
  border-radius: 7px;
}

.lp_contents .simplebar_content_wrap .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: 0;
  left: 3px;
  height: calc(8 * (var(--rate)));
}

.lp_contents .simplebar_content_wrap .simplebar-scrollbar::before {
  background: var(--color-lp_accent);
}

.lp_contents .simplebar_content_wrap .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

/* ========================================================
              * スライドでビフォアフ画像切り替え *
========================================================= */

/*スライダーB/A*/
.lp_contents .image_slider {
  position: relative;
  display: inline-block;
  z-index: 3;
  width: calc(750 * (var(--rate)));
}

.lp_contents .image_slider .on_image {
  z-index: 5;
}

.lp_contents .image_slider .on_image img {
  height: 100%;
  width: unset;
}

.lp_contents .image_slider>div.on_image {
  /* border-right: solid 2px var(--color-lp_white); */
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}

.lp_contents .image_slider>div.on_image::before {
  content: "";
  background: var(--color-lp_white);
  width: 1px;
  height: calc(550 * (var(--rate)));
  position: absolute;
  top: 0;
  right: 0;
}

.lp_contents .image_slider img {
  display: block;
  user-select: none;
  max-width: none !important;
  width: 100%;
}

.lp_contents .image_slider .after,
.lp_contents .image_slider .before {
  position: absolute;
  top: 0;
  width: fit-content !important;
  font-size: calc(26 * (var(--rate)));
  font-family: var(--font-en);
  color: var(--color-lp_white);
  margin-top: calc(15 * (var(--rate)));

  display: none;
}

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

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

.lp_contents input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: unset !important;
  border: none !important;
  outline: none;
  position: absolute;
  left: calc(2 * (var(--rate)));
  top: 0;
  height: 200%;
  width: calc(100% + calc(100 * (var(--rate))) - calc(10 * (var(--rate))));
  margin: 0;
  z-index: 5;
  transform: translate(calc(-50 * (var(--rate))), 0px);
}

.lp_contents input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  border-radius: 50%;
  box-shadow: none !important;
  background-image: url(../img/slider_arrow.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border: none !important;
}

.lp_contents input[type="range"]::-moz-range-thumb {
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  border-radius: 50%;
  box-shadow: none !important;
  border: none;
  background-image: url(../img/slider_arrow.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border: none !important;
}

.lp_contents input[type="range"]::-moz-focus-outer {
  border: 0;
}

.lp_contents input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: none !important;
}