@charset "UTF-8";

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

  Rouge O | Celvoke Website

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

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

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

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

@media screen and (max-width: 768px) {
  #header {
    overflow-x: hidden;
  }
}

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

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

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

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

  --color-lp_font: #000000;
  --color-lp_bg: #fff;
  --color-lp_color01: #ff3200;
  --color-lp_color02: #b54c43;
  --color-lp_color02: #fafafa;
  --color-lp_white: #fff;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "liebling", sans-serif;
}


#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: .05em;
  font-weight: 400;
}

.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 .pcOnly {
  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 {
  /* font-family: var(--font-jp);
  font-size: 1.6rem;
  line-height: 1.75; */
}

.lp_contents_inner {
  position: relative;
  /* z-index: 1; */
  overflow: clip;
  padding-bottom: calc(200 * (var(--rate)));
  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 46.6rem 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;
    background: #FAFAFA;
  }

  .lp_contents .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    /* align-items: center;
    justify-content: flex-end; */
  }

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

  .fixed_right .menu_list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: .6rem;
  }

  .fixed_right .menu_list_item {}

  .fixed_right .menu_list_item span {
    display: none;
  }

  .fixed_right .menu_list_item a {
    font-size: 1.8rem;
    font-family: var(--font-en);
    letter-spacing: .1em;
    padding-right: 3.6rem;
    position: relative;
  }

  .fixed_right .menu_list_item a::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    bottom: -.5rem;
    left: 0;
  }

  .fixed_right .menu_list_item a::after {
    content: "";
    width: 1.1rem;
    height: .6rem;
    background: url(../img/aroow_bottom.svg) no-repeat center / 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-56%);
    right: -.2rem;
  }

  .fixed_left_inner {}

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


}

/* ========================================================
                      * 共通  *
========================================================= */
.lp_contents .inner {
  padding-inline: calc(50 * (var(--rate)));
}

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

.lp_contents .btn_accordion,
.lp_contents .btn_modal {
  cursor: pointer;
  position: relative;
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font-en);
  letter-spacing: .1em;
  text-align: center;
  margin-top: calc(47 * (var(--rate)));
  padding-right: calc(40 * (var(--rate)));
}

.lp_contents .btn_modal {
  margin-top: calc(35 * (var(--rate)));
  padding-right: calc(36 * (var(--rate)));
}

.lp_contents .btn_accordion.is-open {
  margin-top: calc(31 * (var(--rate)));
}

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

.lp_contents .btn_accordion.is-open::before {
  background: url(../img/icon_minus.svg) no-repeat center;
  width: calc(24 * (var(--rate)));
  height: calc(4 * (var(--rate)));
  margin-left: calc(46 * (var(--rate)));
  top: calc(13 * (var(--rate)));
}

.lp_contents .btn_modal::before {
  content: "";
  position: absolute;
  background: url(../img/icon_modal.svg) no-repeat center;
  background-size: 100%;
  width: calc(17 * (var(--rate)));
  height: calc(17 * (var(--rate)));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: calc(78 * (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);
  }
}

.lp_contents .blur-text {
  filter: blur(20px);
  opacity: 0;
  transition: filter 1.8s ease, opacity 1.8s ease;
}

.lp_contents .blur-text.is-active {
  filter: blur(0);
  opacity: 1;
}

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

.sec_mv {
  padding-bottom: calc(130 * (var(--rate)));
}

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

.sec_mv .ttl_main {
  font-family: var(--font-en);
  font-size: calc(66 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(125/100);
  margin-top: calc(131 * (var(--rate)));
  white-space: nowrap;
}

.sec_mv .visual_wrap {
  display: flex;
  justify-content: space-between;
  margin-top: calc(50 * (var(--rate)));

}

.sec_mv .visual_wrap .movie_wrap,
.sec_mv .visual_wrap .img {
  width: calc(310 * (var(--rate)));
  height: calc(174 * (var(--rate)));
}

.sec_mv .visual_wrap .movie_wrap {
  position: relative;
  overflow: hidden;
}

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

.sec_mv .visual_wrap .movie_wrap .movie_sound {
  position: absolute;
  bottom: calc(25 * (var(--rate)));
  right: calc(21 * (var(--rate)));
  width: calc(30 * (var(--rate)));
  height: calc(27 * (var(--rate)));
  z-index: 10;
  cursor: pointer;
}

.sec_mv .visual_wrap .movie_wrap .movie_sound .btn_sound {
  display: none;
  width: calc(30 * (var(--rate)));
  height: calc(27 * (var(--rate)));
}

.sec_mv .visual_wrap .movie_wrap .movie_sound .btn_sound img{
  vertical-align: baseline;
}

.sec_mv .visual_wrap .movie_wrap .movie_sound .btn_sound.is-active {
  display: block;
}


.sec_mv .visual_wrap .img {}

.sec_mv .ttl_sub {
  font-size: calc(42 * (var(--rate)));
  margin-top: calc(46 * (var(--rate)));
}

/* ========================================================
                      * sec_products  *
========================================================= */
.sec_products {
  padding-bottom: calc(142 * (var(--rate)));
}

.sec_products .item_new {
  background: #fafafa;
  padding-top: calc(52 * (var(--rate)));
  padding-bottom: calc(52 * (var(--rate)));
}

.sec_products .item_new.new_02 .inner {
  padding-inline: calc(50 * (var(--rate)));
}

.sec_products .item_new .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.sec_products .item_new.new_02 .flex {
  padding-inline: calc(30 * (var(--rate)));
}

.sec_products .item_new .flex_left {}

.sec_products .item_new .head {
  font-family: var(--font-en);
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_products .item_new .name {
  font-size: calc(36 * (var(--rate)));
  line-height: calc(54/36);
  margin-top: calc(26 * (var(--rate)));
}

.sec_products .item_new .price {
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(23 * (var(--rate)));
}

.sec_products .item_new .btn_buy {
  width: calc(230 * (var(--rate)));
  border: solid #000 calc(2 * (var(--rate)));
  border-radius: calc(28 * (var(--rate)));
  margin-top: calc(36 * (var(--rate)));
}

.sec_products .item_new .btn_buy a {
  font-family: var(--font-en);
  font-size: calc(28 * (var(--rate)));
  letter-spacing: .1em;
  padding: calc(7 * (var(--rate))) 0 calc(4 * (var(--rate))) calc(26 * (var(--rate)));
  position: relative;
}

.sec_products .item_new .btn_buy a::before {
  content: "";
  background: url(../img/icon_bag.svg) no-repeat center / 100%;
  width: calc(25 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  position: absolute;
  top: 50%;
  right: calc(27 * (var(--rate)));
  transform: translateY(-50%);
}

.sec_products .item_new .flex_right {
  width: calc(265 * (var(--rate)));
}

.sec_products .item_new.new_02 .flex_right {
  width: calc(163 * (var(--rate)));
}

.sec_products .item_new.new_01 .flex_right {
  display: flex;
  justify-content: space-between;
}

.sec_products .item_new.new_01 .flex_right .item_colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(0 * (var(--rate))) calc(16 * (var(--rate)));
  align-items: flex-end;
  margin-bottom: calc(-14 * (var(--rate)));
}

.sec_products .item_new.new_01 .flex_right .item_colors .img {
  width: calc(36 * (var(--rate)));
  height: calc(36 * (var(--rate)));
}

.sec_products .item_new.new_01 .flex_right .item_detail {
  width: calc(147 * (var(--rate)));
}

.sec_products .item_new .accordion_wrap {}

.sec_products .item_new.new_02 .accordion_wrap {}

.sec_products .item_new .accordion_wrap .txt {
  font-size: calc(28 * (var(--rate)));
  text-align: justify;
  padding-top: calc(51 * (var(--rate)));
}

.sec_products .item_new .accordion_wrap .txt span {
  font-size: calc(36 * (var(--rate)));
  line-height: calc(54/36);
  display: block;
  text-align: center;
  margin-top: calc(-4 * (var(--rate)));
  margin-bottom: calc(45 * (var(--rate)));
}

.sec_products .item_new .accordion_wrap .note {
  font-size: calc(20 * (var(--rate)));
  color: #757575;
  padding-top: calc(31 * (var(--rate)));
}

.sec_products .item_new .btn_accordion {}

.sec_products .item_new.new_01 .btn_accordion.is-open {
  margin-top: calc(60 * (var(--rate)));
}

.sec_products .item_new.new_02 .btn_accordion {
  margin-top: calc(34 * (var(--rate)));
}

.sec_products .item_new.new_02 .btn_accordion.is-open {
  margin-top: calc(26 * (var(--rate)));
}

.sec_products .anchor_link {
  display: flex;
  justify-content: space-between;
  margin-top: calc(137 * (var(--rate)));
}

.sec_products .anchor_link li {}

.sec_products .anchor_link li a {
  font-size: calc(32 * (var(--rate)));
  font-family: var(--font-en);
  letter-spacing: .1em;
  position: relative;
  padding-bottom: calc(5 * (var(--rate)));
  padding-right: calc(67 * (var(--rate)));
}

.sec_products .anchor_link li a::before {
  content: "";
  width: 100%;
  height: calc(2 * (var(--rate)));
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sec_products .anchor_link li a::after {
  content: "";
  width: calc(21 * (var(--rate)));
  height: calc(13 * (var(--rate)));
  background: url(../img/aroow_bottom.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-56%);
  right: calc(-1 * (var(--rate)));
}

.sec_products .visual_wrap02 {
  margin-top: calc(140 * (var(--rate)));
}

.sec_products .visual_wrap02 .img {
  width: 100%;
}

.sec_products .visual_wrap03 {
  margin-top: calc(134 * (var(--rate)));
}

.sec_products .visual_wrap03 .img {
  position: relative;
}

.sec_products .visual_wrap03 .img:nth-of-type(1) {
  width: calc(300 * (var(--rate)));
  z-index: 3;
  margin-left: calc(30 * (var(--rate)));
}

.sec_products .visual_wrap03 .img:nth-of-type(2) {
  width: calc(450 * (var(--rate)));
  z-index: 2;
  margin-top: calc(-225 * (var(--rate)));
  margin-right: 0;
  margin-left: auto;
}

.sec_products .visual_wrap03 .img:nth-of-type(3) {
  width: calc(370 * (var(--rate)));
  z-index: 1;
  margin-top: calc(-72 * (var(--rate)));
  margin-left: calc(70 * (var(--rate)));
  margin-right: auto;
}

.sec_products .visual_wrap04 {
  width: calc(750 * (var(--rate)));
  display: flex;
  margin-top: calc(135 * (var(--rate)));
}

.sec_products .visual_wrap04 .img {
  width: calc(100% / 3);
}

.sec_products .visual_wrap04 .img:nth-of-type(2) {
  animation-delay: .8s;
}

.sec_products .visual_wrap04 .img:nth-of-type(3) {
  animation-delay: 1.6s;
}

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

.sec_products .item_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: calc(71 * (var(--rate)));

}

.sec_products .item_wrap li {
  width: calc(300 * (var(--rate)));

}

.sec_products .item_wrap li a {}

.sec_products .item_wrap li .img {
  width: calc(300 * (var(--rate)));
  position: relative;
}

.sec_products .item_wrap li .img::before {
  content: "";
  background: url(../img/icon_bag_circle.svg) no-repeat center / 100%;
  width: calc(48 * (var(--rate)));
  height: calc(48 * (var(--rate)));
  position: absolute;
  bottom: calc(2 * (var(--rate)));
  right: calc(-20 * (var(--rate)));
}

.sec_products .item_wrap li:nth-of-type(7) .img::before,
.sec_products .item_wrap li:nth-of-type(8) .img::before {
  display: none;
}

.sec_products .item_wrap li .name {
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font-en);
  text-align: center;
  margin-top: calc(33 * (var(--rate)));
}

.sec_products .item_wrap li:nth-of-type(1) .name {
  color: #9E4E39;
}

.sec_products .item_wrap li:nth-of-type(2) .name {
  color: #AB5D57;
}

.sec_products .item_wrap li:nth-of-type(3) .name {
  color: #B0411D;
}

.sec_products .item_wrap li:nth-of-type(4) .name {
  color: #702B2A;
}

.sec_products .item_wrap li:nth-of-type(5) .name {
  color: #9B4B23;
}

.sec_products .item_wrap li:nth-of-type(6) .name {
  color: #C67A3A;
}

.sec_products .item_wrap li:nth-of-type(7) .name {
  color: #9F533D;
}

.sec_products .item_wrap li:nth-of-type(8) .name {
  color: #B54C43;
}

.sec_products .item_wrap li .lead {
  font-size: calc(36 * (var(--rate)));
  text-align: center;
  margin-top: calc(22 * (var(--rate)));
}

.sec_products .item_wrap li .lead_sub {
  font-size: calc(20 * (var(--rate)));
  text-align: center;
  margin: calc(6 * (var(--rate))) auto 0;
  position: relative;
  width: fit-content;
}

.sec_products .item_wrap li .lead_sub::before,
.sec_products .item_wrap li .lead_sub::after {
  content: "";
  width: calc(10 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sec_products .item_wrap li .lead_sub::before {
  left: calc(-20 * (var(--rate)));
}

.sec_products .item_wrap li .lead_sub::after {
  right: calc(-20 * (var(--rate)));
}

.sec_products .item_wrap li .accordion_wrap {}

.sec_products .item_wrap li .accordion_wrap .txt {
  font-size: calc(24 * (var(--rate)));
  text-align: justify;
  padding-top: calc(20 * (var(--rate)));
}

.sec_products .item_wrap li .btn_accordion {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .item_wrap li .btn_accordion.is-open {
  margin-top: calc(26 * (var(--rate)));
}


.sec_products .point_wrap {
  margin-top: calc(141 * (var(--rate)));
}

.sec_products .point_wrap ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px 2px;
  background: #EFEFEF;
  border-top: solid #EFEFEF 2px;
  border-bottom: solid #EFEFEF 2px;
}

.sec_products .point_wrap li {
  background: var(--color-lp_white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(46 * (var(--rate))) 0 calc(42 * (var(--rate)));
}

.point_wrap li .num {
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font-en);
  letter-spacing: .1em;
  text-align: center;
  align-items: center;
}

.point_wrap li .lead {
  font-size: calc(36 * (var(--rate)));
  line-height: calc(54/36);
  text-align: center;
  margin-top: calc(18 * (var(--rate)));
  flex: 1;
  display: flex;
  align-items: center;
}


.sec_products .mapping_wrap {
  margin-top: calc(130 * (var(--rate)));
  padding-bottom: calc(140 * (var(--rate)));
}

.sec_products .mapping_wrap .head {
  font-size: calc(46 * (var(--rate)));
  font-family: var(--font-en);
  letter-spacing: .1em;
  text-align: center;
}

.sec_products .mapping_wrap .mapping_area {
  width: calc(690 * (var(--rate)));
  height: calc(690 * (var(--rate)));
  margin: calc(70 * (var(--rate))) auto 0;
  background: url(../img/mapping_area_bg.png) no-repeat center / 100%;
  position: relative;
}

.sec_products .mapping_wrap .mapping_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(1) {
  top: calc(38 * (var(--rate)));
  right: calc(29 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(2) {
  top: calc(99 * (var(--rate)));
  right: calc(137 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(3) {
  top: calc(290 * (var(--rate)));
  right: calc(185 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(4) {
  top: calc(194 * (var(--rate)));
  left: calc(193 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(5) {
  left: calc(75 * (var(--rate)));
  bottom: calc(105 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item .img {
  width: calc(33 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(3) .img {
  width: calc(35 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(4) .img {
  width: calc(32 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item .name {
  margin-top: calc(8 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item:nth-of-type(2) .name {
  margin-top: calc(-7 * (var(--rate)));
}

.sec_products .mapping_wrap .mapping_item .name a {
  font-size: calc(16 * (var(--rate)));
  text-align: center;
}

.sec_products .message_wrap {
  margin-top: calc(111 * (var(--rate)));

}

.sec_products .message_wrap p {
  position: relative;
  z-index: 3;
}

.sec_products .message_wrap span {
  font-size: calc(28 * (var(--rate)));
  display: block;
  line-height: calc(84/28);
}

.sec_products .message_wrap span:nth-of-type(2) {
  transition-delay: 0.3s;
}

.sec_products .message_wrap span:nth-of-type(3) {
  transition-delay: 0.6s;
}

.sec_products .slide_wrap {
  margin-top: calc(132 * (var(--rate)));
  /* padding-left: calc(120 * (var(--rate))); */
}

.sec_products .slide_wrap ul {
  /* 後で消す */
  /* overflow-x: scroll;
  display: flex; */
  transition-timing-function: linear;
}

.sec_products .slide_wrap ul .slick-list {
  overflow: visible !important;
}

.sec_products .slide_wrap li {
  position: relative;
  display: flex;
  flex-shrink: 0;
  margin-left: calc(50 * (var(--rate)));
}

.sec_products .slide_wrap li.slide01 {
  width: calc(1250 * (var(--rate)));
}

.sec_products .slide_wrap li.slide02 {
  width: calc(1490 * (var(--rate)));
}

.sec_products .slide_wrap li.slide03 {
  width: calc(1403 * (var(--rate)));
}

.sec_products .slide_wrap li .img {
  flex-shrink: 0;
}

.sec_products .slide_wrap li.slide01 .img:nth-of-type(1) {
  width: calc(520 * (var(--rate)));
  height: calc(693 * (var(--rate)));
}

.sec_products .slide_wrap li.slide01 .img:nth-of-type(2) {
  width: calc(400 * (var(--rate)));
  height: calc(300 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
  margin-top: calc(-190 * (var(--rate)));
}

.sec_products .slide_wrap li.slide01 .img:nth-of-type(3) {
  width: calc(400 * (var(--rate)));
  height: calc(533 * (var(--rate)));
  margin-left: calc(-120 * (var(--rate)));
  margin-top: calc(160 * (var(--rate)));
}

.sec_products .slide_wrap li.slide02 .img:nth-of-type(1) {
  width: calc(750 * (var(--rate)));
  height: calc(1000 * (var(--rate)));
  margin-top: calc(-309 * (var(--rate)));
}

.sec_products .slide_wrap li.slide02 .img:nth-of-type(2) {
  width: calc(430 * (var(--rate)));
  height: calc(322 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
  margin-top: calc(222 * (var(--rate)));
}

.sec_products .slide_wrap li.slide02 .img:nth-of-type(3) {
  width: calc(360 * (var(--rate)));
  height: calc(480 * (var(--rate)));
  margin-left: calc(-99 * (var(--rate)));
  margin-top: calc(-309 * (var(--rate)));
}

.sec_products .slide_wrap li.slide03 .img:nth-of-type(1) {
  width: calc(600 * (var(--rate)));
  height: calc(800 * (var(--rate)));
  margin-top: calc(-108 * (var(--rate)));
}

.sec_products .slide_wrap li.slide03 .img:nth-of-type(2) {
  width: calc(430 * (var(--rate)));
  height: calc(322 * (var(--rate)));
  margin-left: calc(50 * (var(--rate)));
  margin-top: calc(-321 * (var(--rate)));
  position: relative;
  z-index: 2;
}

.sec_products .slide_wrap li.slide03 .img:nth-of-type(3) {
  width: calc(420 * (var(--rate)));
  height: calc(560 * (var(--rate)));
  margin-left: calc(-96 * (var(--rate)));
  margin-top: calc(-65 * (var(--rate)));
}

.sec_products .slide_wrap li .txt {
  position: absolute;
  font-size: calc(20 * (var(--rate)));
  line-height: calc(30/20);
}

.sec_products .slide_wrap li .txt.slide01 {
  left: calc(571 * (var(--rate)));
  bottom: calc(0 * (var(--rate)));
}

.sec_products .slide_wrap li .txt.slide02 {
  left: calc(851 * (var(--rate)));
  bottom: calc(0 * (var(--rate)));
}

.sec_products .slide_wrap li .txt.slide03 {
  left: calc(713 * (var(--rate)));
  bottom: calc(0 * (var(--rate)));
}


/* ========================================================
                      * sec_campaign  *
========================================================= */

.sec_campaign {
  background: #fafafa;
  padding-top: calc(140 * (var(--rate)));
  padding-bottom: calc(139 * (var(--rate)));
}

.sec_campaign .campaign_wrap {
  border: solid #000 calc(2 * (var(--rate)));
  width: calc(690 * (var(--rate)));
  margin: 0 auto;
  padding-bottom: calc(73 * (var(--rate)));
  background: var(--color-lp_white);
}

.sec_campaign .ttl {
  font-family: var(--font-en);
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .1em;
  text-align: center;
  margin-top: calc(70 * (var(--rate)));
}

.sec_campaign .ttl_sub {
  font-size: calc(24 * (var(--rate)));
  text-align: center;
  margin-top: calc(12 * (var(--rate)));
}

.sec_campaign .img {
  width: calc(500 * (var(--rate)));
  margin: calc(47 * (var(--rate))) auto 0;
}

.sec_campaign .date {
  font-size: calc(28 * (var(--rate)));
  text-align: center;
}

.sec_campaign .txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(42/28);
  text-align: center;
  margin-top: calc(21 * (var(--rate)));
}

.sec_campaign .note {
  font-size: calc(19 * (var(--rate)));
  line-height: calc(30/20);
  text-align: center;
  margin-top: calc(28 * (var(--rate)));
  color: #757575;
  padding-inline: calc(15 * (var(--rate)));
}


/* ========================================================
                      * sec_message  *
========================================================= */
.sec_message {
  padding-top: calc(130 * (var(--rate)));
  padding-bottom: calc(135 * (var(--rate)));
  position: relative;
}

.sec_message::before {
  content: "";
  background: url(../img/sec_message_bg.jpg) no-repeat center / 100%;
  width: calc(440 * (var(--rate)));
  height: calc(660 * (var(--rate)));
  position: absolute;
  top: 0;
  right: calc(-137 * (var(--rate)));
  z-index: -1;
}

.sec_message .ttl {
  color: var(--color-lp_color01);
  font-family: var(--font-en);
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .1em;
  text-align: center;
}

.sec_message .ttl_sub {
  font-size: calc(20 * (var(--rate)));
  text-align: center;
  margin-top: calc(12 * (var(--rate)));
}

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

.sec_message .txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(42/28);
  text-align: center;
}

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

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

.sec_release {
  background: #fafafa;
  padding-top: calc(130 * (var(--rate)));
  padding-bottom: calc(136 * (var(--rate)));
}

.sec_release .ttl {
  font-family: var(--font-en);
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .1em;
  text-align: center;
}

.sec_release .release_table {
  width: calc(690 * (var(--rate)));
  margin: calc(32 * (var(--rate))) auto 0;
  border-collapse: collapse;
  text-align: center;
}

.release_table th,
.release_table td {
  font-size: calc(28 * (var(--rate)));
  font-family: var(--font-europa);
  border: #000 solid calc(2 * (var(--rate)));
  padding: calc(28 * (var(--rate))) 0;
}

.sec_release tr {}

.sec_release th {
  width: 50%;
}

.sec_release td {
  width: 50%;
}

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

.lp_contents .btn_all {
  width: fit-content;
  margin: calc(132 * (var(--rate))) auto 0;
}

.lp_contents .btn_all a {
  font-size: calc(32 * (var(--rate)));
  letter-spacing: .1em;
  position: relative;
  padding-bottom: calc(19 * (var(--rate)));
  padding-right: calc(26 * (var(--rate)));
}


.lp_contents .btn_all a::before {
  content: "";
  width: 100%;
  height: calc(2 * (var(--rate)));
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}

.lp_contents .btn_all a::after {
  content: "";
  width: calc(13 * (var(--rate)));
  height: calc(22 * (var(--rate)));
  background: url(../img/aroow_right.svg) no-repeat center / 100%;
  position: absolute;
  top: calc(18 * (var(--rate)));
  right: calc(-5 * (var(--rate)));
}


/* ========================================================
                      * modal  *
========================================================= */

.lp_contents .modal_toggle {
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.lp_contents .modal_toggle:hover {
  opacity: 0.8;
}

body.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_button {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

.lp_contents .modal_button.btn_modalClose {
  width: calc(50 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  background: url(../img/btn_close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  float: right;
  position: sticky;
  top: calc(50 * (var(--rate)));
  right: calc(70 * (var(--rate)));
}

.lp_contents .modal_outside.hide {
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
}

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lp_contents .modal_outside::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_outside::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .2;
  content: "";
}

.lp_contents .modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lp_contents .modal_wrap {
  width: calc(690 * ((var(--rate))));
  margin: 0 auto;
  overflow-y: hidden;
  background: var(--color-lp_white);
  will-change: transform;
}

@media screen and (max-width: 768px) {
  .lp_contents .modal_wrap {
    /* margin-top: var(--header-height); */
  }
}

.lp_contents .modal_wrap::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_inner {
  position: relative;
  background: var(--color1);
  margin-top: calc(136 * (var(--rate)));
  height: 77vh;
  /* max-height: calc(100% - calc(200 * ((var(--rate))))); */
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lp_contents .modal_content {
  padding: 0 0 calc(132 * (var(--rate)));
}

.lp_contents .modal_content .point_wrap {
  padding-inline: calc(50 * ((var(--rate))));

}

.lp_contents .modal_content .li {}

.lp_contents .modal_content li:not(:first-of-type) {
  margin-top: calc(87 * ((var(--rate))));
}

.lp_contents .modal_content .num {}

.lp_contents .modal_content .lead {
  text-align: center;
  display: block;
}

.lp_contents .modal_content .txt {
  font-size: calc(28 * ((var(--rate))));
  line-height: calc(42/28);
  text-align: justify;
  margin-top: calc(46 * ((var(--rate))));
}

.lp_contents .modal_content .note {
  font-size: calc(20 * ((var(--rate))));
  color: #757575;
  margin-top: calc(27 * ((var(--rate))));
}