@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --color_bg:#ffffff;
  --color_green:#78c7b9;
  --color_pink01: #d66c82;
  --color_lightgreen: #f4f9f8;
  --color_black:#464947;
  --color_gray:#999999;
  --color_lightgray:#dddddd;
  --color_white: #ffffff;
  --font_eng_serif: "than", sans-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;
}
.lp_inner {
  position: relative;
  background-image: url(../img/bg_01_sp.png);
  background-repeat: no-repeat;
  background-size: 100% calc(4093 * (var(--rate)));
}
#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用 */
}

#lp_contents .grid_area {
  width: 100%;
}

/*============================
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 .mv_pic {
    display: block;
    position: absolute;
    width: calc(250 * (var(--rate)));
    top: calc(30 * (var(--rate)));
    left: auto;
    right: calc(36 * (var(--rate)));
    z-index: 1;
}
#lp_contents .page_title_group {
  display: block;
  position: absolute;
  bottom: calc(51 * (var(--rate)));
  left: calc(45 * (var(--rate)));
  color: var(--color_white);
}

#lp_contents .page_title_group .page_title-fukidashi {
  display: block;
  width: calc(333 * (var(--rate)));
}

#lp_contents .page_title_group .page_title_sub {
  margin: calc(20 * (var(--rate))) 0 0 calc(8 * (var(--rate)));
  color: var(--color_white);
  font-size: calc(30 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: left;
}

#lp_contents .page_title_group .page_title_main {
  margin: calc(25 * (var(--rate))) 0 0 calc(8 * (var(--rate)));
  color: var(--color_white);
  font-size: calc(42 * (var(--rate)));
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: left;
}
#lp_contents .page_title_group .page_title_main sup {
  font-size: 60%;
  margin-top: -0.5rem;
}

#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(86 * (var(--rate)));
  margin-bottom: calc(20 * (var(--rate)));
}

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

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

#lp_contents .lead_area .lead.lead--main {
  margin-top: calc(25 * (var(--rate)));
  font-family: var(--font_jp_serif);
  font-size: calc(40 * (var(--rate)));
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
#lp_contents .lead_area .lead.lead--main.lead--main-02 {
  margin-top: calc(45 * (var(--rate)));
}
#lp_contents .lead_area .lead.lead--main.lead--main-02 sup {
  font-size: 60%;
}
#lp_contents .lead_area .lead.lead--main ._under {
  display: inline-block;
  position: relative;
}

#lp_contents .lead_area .lead.lead--main ._under::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(660 * (var(--rate)));
  height: calc(12 * (var(--rate)));
  background-color: rgba(120, 199, 185, 0.6);
  bottom: calc(-6 * (var(--rate)));
  left: calc(2 * (var(--rate)));
  z-index: -1;
}

#lp_contents .lead_area .lead.lead--main ._small {
  display: inline-block;
  position: relative;
  font-weight: 500;
  top: calc(-6 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
}

#lp_contents .lead_area .lead.lead--sub {
  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 .campaign {
  position: relative;
  padding-top: calc(120 * (var(--rate)));
  z-index: 0;
}

#lp_contents .Campaign: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: 100%;
  margin: 0 auto;
  z-index: 5;
  color: var(--color_green);
  font-family: var(--font_eng_serif);
  font-size: calc(70 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 1;
}

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

/*============================
Example
============================*/
#lp_contents .item__example {
  display: flex;
}
#lp_contents .example {
  place-content: center;
  background-size: 100%;
  background-repeat: no-repeat;
  color: var(--color_white);
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.1em;
  position: relative;
}
#lp_contents .example sup {
  font-size: 60%;
  margin-top: -0.6rem;
}
#lp_contents .item__example--green {
  margin: calc(23 * (var(--rate))) auto 0;
  width: 100%;
  justify-content: center;;
}
#lp_contents .item__example--green .example--01 {
  background-image: url(../img/exmple_bg_green_01.png);
  height: calc(160 * (var(--rate)));
  width: calc(240 * (var(--rate)));
  left: calc(8 * (var(--rate)));
  animation: floatY 13s infinite, floatX2 15s infinite reverse;
  animation-delay: 2.2s;
}
#lp_contents .item__example--green .example--02 {
  background-image: url(../img/exmple_bg_green_02.png);
  height: calc(140 * (var(--rate)));
  width: calc(210 * (var(--rate)));
  padding: calc(6 * (var(--rate))) 0 0 calc(10 * (var(--rate)));
  top: calc(74 * (var(--rate)));
  left: calc(6 * (var(--rate)));
  animation: floatY2 11s infinite, floatX 16s infinite reverse;
  animation-delay: 2.4s;
}
#lp_contents .item__example--green .example--03 {
  background-image: url(../img/exmple_bg_green_03.png);
  height: calc(148 * (var(--rate)));
  width: calc(222 * (var(--rate)));
  top: calc(-7 * (var(--rate)));
  left: calc(-16 * (var(--rate)));
  animation: floatY 13s infinite, floatX2 14s infinite reverse;
  animation-delay: 2.1s;
}
#lp_contents .item__example--orange {
  margin: calc(68 * (var(--rate))) 0 0 calc(70 * (var(--rate)));
  width: calc(650 * (var(--rate)));
}
#lp_contents .item__example--orange .example--01 {
  background-image: url(../img/exmple_bg_orange_01.png);
  height: calc(156 * (var(--rate)));
  width: calc(194 * (var(--rate)));
  top: calc(96 * (var(--rate)));
  animation: floatY 13s infinite, floatX2 15s infinite reverse;
  animation-delay: 2.2s;
}
#lp_contents .item__example--orange .example--02 {
  background-image: url(../img/exmple_bg_orange_02.png);
  height: calc(146 * (var(--rate)));
  width: calc(226 * (var(--rate)));
  top: 0;
  left: calc(-15 * (var(--rate)));
  animation: floatY2 11s infinite, floatX 16s infinite reverse;
  animation-delay: 2.4s;
}
#lp_contents .item__example--orange .example--03 {
  background-image: url(../img/exmple_bg_orange_03.png);
  height: calc(143 * (var(--rate)));
  width: calc(222 * (var(--rate)));
  top: calc(110 * (var(--rate)));
  left: calc(-35 * (var(--rate)));
  animation: floatY 13s infinite, floatX2 14s infinite reverse;
  animation-delay: 2.1s;
}

/*============================
CAMPAIGN
============================*/
#lp_contents .sec_campaign {
  width: calc(720 * (var(--rate)));
  margin: calc(135 * (var(--rate))) auto 0;
  padding: 0 0 calc(85 * (var(--rate))) 0;
  position: relative;
  background-color: var(--color_white);
}
#lp_contents .sec_campaign::after {
  display: block;
  content: "";
  position: absolute;
  width: calc(700 * (var(--rate)));
  height: calc(100% - calc(16 * (var(--rate))));
  border: calc(2 * (var(--rate))) solid var(--color_green);
  top: calc(9 * (var(--rate)));
  left: calc(9 * (var(--rate)));
  pointer-events: none;
  z-index: 2;
}
#lp_contents .sec_campaign.sec_campaign--02 {
  margin: calc(250 * (var(--rate))) auto 0;
}
#lp_contents .sec_title.sec_title--campaign {
  padding: calc(64 * (var(--rate))) 0 0 0;
  color: var(--color_green);
  font-family: var(--font_eng_serif);
  font-size: calc(64 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 1;
  z-index: 0;
}
#lp_contents .sec_campaign .campaign__num {
  display: block;
  margin: calc(33 * (var(--rate))) 0 0 0;
  position: relative;
  color: #30b299;
  font-size: calc(40 * (var(--rate)));
  line-height: 1;
}
#lp_contents .sec_campaign .campaign__num.campaign__num--02 {
  margin: calc(45 * (var(--rate))) 0 0 0;
}
#lp_contents .sec_campaign .campaign__num::after {
  display: block;
  content: "";
  position: absolute;
  width: calc(700 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-size: 100%;
  background-image: url(../img/bg__line.png);
  background-repeat: no-repeat;
  top: calc(20 * (var(--rate)));
  left: calc(9 * (var(--rate)));
}
#lp_contents .sec_campaign .campaign__limited {
  width: calc(360 * (var(--rate)));
  height: calc(36 * (var(--rate)));
  margin: calc(40 * (var(--rate))) 0 0 0;
  border-radius: calc(36 * (var(--rate)));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color_green);
  color: var(--color_white);
  letter-spacing: 0.1em;
}
#lp_contents .sec_campaign .campaign__date {
  margin: calc(30 * (var(--rate))) 0 0 0;
  display: block;
  letter-spacing: 0.1em;
  line-height: 1;
  font-size: calc(28 * (var(--rate)));
  position: relative;
}
#lp_contents .sec_campaign .campaign__date::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(406 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color_black);
  bottom: calc(-10 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}
#lp_contents .sec_campaign .campaign__sub-lead {
  margin: calc(26 * (var(--rate))) 0 0 0;
  font-size: calc(28 * (var(--rate)));
}
#lp_contents .sec_campaign .campaign__sub-lead.campaign__sub-lead--02 {
  margin: calc(28 * (var(--rate))) 0 0 0;
  font-size: calc(28 * (var(--rate)));
  line-height: calc(56 / 28);
}
#lp_contents .sec_campaign .campaign__main-lead {
  display: block;
  letter-spacing: 0.1em;
  color: #30b299;
  font-size: calc(38 * (var(--rate)));
  position: relative;
  z-index: 0;
}
#lp_contents .sec_campaign .campaign__main-lead.campaign__main-lead--01 {
  margin: calc(12 * (var(--rate))) 0 0 0;
  line-height: 1.2;
}
#lp_contents .sec_campaign .campaign__main-lead.campaign__main-lead--02 {
  margin: calc(7 * (var(--rate))) 0 0 0;
  display: block;
  letter-spacing: 0.1em;
  font-size: calc(38 * (var(--rate)));
  position: relative;
  line-height: calc(66.5 / 38);
}
#lp_contents .sec_campaign .campaign__note {
  font-size: calc(20 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
  margin: calc(0 * (var(--rate))) auto 0;
  color: var(--color_gray);
}
#lp_contents .sec_campaign .campaign__main-lead ._small {
  display: block;
  font-size: calc(24 * (var(--rate)));
  margin: 0;
  position: absolute;
  line-height: 1;
  top: calc(54 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}
#lp_contents .sec_campaign .campaign__pic {
  display: block;
  width: calc(180 * (var(--rate)));
  position: absolute;
  bottom: calc(20 * (var(--rate)));
  right: calc(67 * (var(--rate)));
  left: auto;
}
#lp_contents .sec_campaign.sec_campaign--03 {
  background-color: transparent;
}
#lp_contents .sec_campaign.sec_campaign--03::after {
  display: none;
}


/*============================
point
============================*/
#lp_contents .sec_point {
  padding: calc(162 * (var(--rate))) 0 0 0;
  background-color: #fff;
}
#lp_contents .sec_point .sec_title-img {
  display: block;
  position: absolute;
}
#lp_contents .sec_point .sec_title-img.sec_title-img--01 {
  width: calc(200 * (var(--rate)));
  top: calc(-105 * (var(--rate)));
  left: calc(70 * (var(--rate)));
}
#lp_contents .sec_point .sec_title-img.sec_title-img--02 {
  width: calc(221 * (var(--rate)));
  top: calc(-133 * (var(--rate)));
  left: calc(510 * (var(--rate)));
}
#lp_contents .sec_point .sec_title-img.sec_title-img--03 {
  width: calc(210 * (var(--rate)));
  top: calc(-105 * (var(--rate)));
  left: calc(70 * (var(--rate)));
}
#lp_contents .sec_point .sec_subtitle {
  margin-top: calc(34 * (var(--rate)));
  font-family: var(--font_jp_serif);
  font-size: calc(42 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
}
#lp_contents .sec_point .sec_subtitle sup {
  display: inline-block;
  font-size: 50%;
  margin-top: 0;
  position: relative;
  top: calc(-15 * (var(--rate)));
  left: calc(2 * (var(--rate)));
  vertical-align: baseline;
}

#lp_contents .sec_point .p_point--02 {
  margin: calc(148 * (var(--rate))) auto 0;
}

#lp_contents .sec_point .p_point--02 .sec_lead {
  margin: calc(45 * (var(--rate))) 0 0 0;
  color: #30b299;
  font-family: 'ryo-gothic-plusn', sans-serif;
  font-size: calc(28 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: calc(61.6 / 28);
  position: relative;
}
#lp_contents .sec_point .p_point--02 .sec_lead::after {
  display: block;
  content: "";
  position: absolute;
  width: calc(780 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-size: 100%;
  background-image: url(../img/bg__line_wide.png);
  background-repeat: no-repeat;
  top: calc(60 * (var(--rate)));
  left: calc(9 * (var(--rate)));
}

#lp_contents .sec_point .p_point--03 {
  margin: calc(161 * (var(--rate))) auto 0;
}

#lp_contents .sec_point .cray__list {
  display: grid;
  gap: calc(30 * (var(--rate)));
  grid-template-columns: repeat(4, calc(150 * (var(--rate))));
  width: calc(690 * (var(--rate)));
  margin: calc(42 * (var(--rate))) auto 0;
}
#lp_contents .sec_point .cray__list li {
}
#lp_contents .sec_point .cray__list .cray__detail {
  margin: calc(6 * (var(--rate))) auto 0;
  font-size: calc(20 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1.5;
}

#lp_contents .sec_point .point_img {
  margin: calc(82 * (var(--rate))) auto 0;
}

#lp_contents .sec_point .scroll__container {

}
/* 1. ドラッグスワイパーのコンテナ */
#lp_contents .sec_point .scroll__wrapper {
  overflow: visible;
  max-width: calc(700 * (var(--rate)));
  margin: calc(80 * (var(--rate))) 0 0 calc(60 * (var(--rate)));
  padding: 0 0 calc(60 * (var(--rate))) 0;
}

/* 要素のスタイル*/
#lp_contents .sec_point .scroll__item {
  width: calc(500 * (var(--rate)));
  height: calc(860 * (var(--rate)));
  border-top: 1px solid #D8EEEB;
  border-left: 1px solid #D8EEEB;
  border-bottom: 1px solid #D8EEEB;
  position: relative;
}
/* 色違い用 */
#lp_contents .sec_point .scroll__item:nth-child(2) {
}
#lp_contents .sec_point .scroll__item:nth-child(3) {
}
#lp_contents .sec_point .scroll__item:last-of-type {
  border-right: 1px solid #D8EEEB;
}
#lp_contents .sec_point .scroll__item .item__text {
  background-image: url(../img/point2_bg_02a.png);
  background-size: cover;
}
#lp_contents .sec_point .scroll__item:nth-child(2) .item__text {
  background-image: url(../img/point2_bg_02b.png);
}
#lp_contents .sec_point .scroll__item:nth-child(3) .item__text {
  background-image: url(../img/point2_bg_02c.png);
}
#lp_contents .sec_point .scroll__item ._num {
  display: grid;
  place-items: center;
  width: calc(120 * (var(--rate)));
  height: calc(120 * (var(--rate)));
  padding: calc(8 * (var(--rate))) 0 0 0;
  color: #79C7B9;
  background-color: #D8EEEB;
  position: absolute;
  top: calc(-60 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  font-family: var(--font_eng_serif);
  font-size: calc(78 * (var(--rate)));
  line-height: 1;
}
#lp_contents .sec_point .scroll__item .item__img {
  height: calc(450 * (var(--rate)));
}
#lp_contents .sec_point .scroll__item .item__detail {
  height: 50%;
}
#lp_contents .sec_point .scroll__item .item__text {
  display: grid;
  place-items: center;
  height: calc(410 * (var(--rate)));
  padding: 0 calc(40 * (var(--rate)));
  border-top: 1px solid #D8EEEB;
}
#lp_contents .sec_point .scroll__item .item__text-inner {
  display: inline-block;
  color: var(--color_black);
  font-size: calc(28 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: justify;
}

/* スクロールバーのカスタマイズと常時表示 */
#lp_contents .sec_point .swiper-scrollbar {
  left: 0 !important;
  bottom: 0 !important;
  background: #EDEDED !important;
  opacity: 1 !important;
  height: calc(6 * (var(--rate))) !important;
}

#lp_contents .sec_point .swiper-scrollbar-drag {
  background: #78C7B9 !important;
  cursor: grab;
}

#lp_contents .sec_point .swiper-scrollbar-drag:active {
  cursor: grabbing;
}
/*============================
Review
============================*/
#lp_contents .sec_review {
  padding: calc(164 * (var(--rate))) 0 0 0;
  position: relative;
}
#lp_contents .sec_review::before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: calc(3181 * (var(--rate)));
  background-image: url(../img/bg_02_sp.png);
  background-repeat: no-repeat;
  background-size: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
#lp_contents .sec_review .sec_subtitle.sec_subtitle--review {
  margin-top: calc(8 * (var(--rate)));
  font-weight: 400;
}
#lp_contents .sec_review .swiper-horizontal {
  margin: calc(64 * (var(--rate))) 0 0 0;
}
#lp_contents .sec_review .swiper-slide {
  width: calc(100% - calc(180 * (var(--rate))));
  height: calc(730 * (var(--rate)));
  display: block;
}
#lp_contents .sec_review .swiper-slide .review__tag {
  display: block;
  margin: calc(40 * (var(--rate))) 0 0 0;
  color: #464947;
  font-size: calc(30 * (var(--rate)));
  font-weight: 400;
  line-height: 1;
  text-align: left;
}
/* 3. ページャーのスタイルカスタマイズ
*/
#lp_contents .sec_review .swiper-pagination {
  bottom: 0 !important;
  display: flex;
  justify-content: center;
  gap: calc(10 * (var(--rate))); /* ページャー間の隙間 */
}
#lp_contents .sec_review .swiper-pagination-bullet {
  width: calc(80 * (var(--rate))) !important;
  height: calc(8 * (var(--rate))) !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  background-color: var(--color_white);
}
#lp_contents .sec_review .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color_green);
}

/*============================
Item Area
============================*/
#lp_contents .sec_item-area.sec_item-area--01 {
  margin: calc(140 * (var(--rate))) auto 0;
  padding: 0 0 calc(140 * (var(--rate))) 0;
}
#lp_contents .sec_item-area.sec_item-area--01 .sec_title--item {
  margin: calc(140 * (var(--rate))) auto 0;
  display: block;
  /* margin-top: calc(25 * (var(--rate))); */
  color: #30b299;
  font-family: var(--font_jp_serif);
}
#lp_contents .sec_item-area.sec_item-area--01 .sec_title--item-sub {
  display: block;
  margin-top: calc(25 * (var(--rate)));
  color: #30b299;
  font-family: var(--font_jp_serif);
  font-size: calc(38 * (var(--rate)));
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
#lp_contents .sec_item-area.sec_item-area--01 .sec_title--item-main {
  display: block;
  margin-top: calc(40 * (var(--rate)));
  font-size: calc(42 * (var(--rate)));
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
}
#lp_contents .sec_item-area.sec_item-area--01 .sec_title--item-main sup {
  font-size: 55%;
}
#lp_contents .sec_item-area.sec_item-area--02 {
  width: calc(720 * (var(--rate)));
  margin: calc(140 * (var(--rate))) auto 0;
  padding: calc(60 * (var(--rate))) 0 calc(158 * (var(--rate)));
  background-color: var(--color_white);
  border-radius: calc(20 * (var(--rate)));
}
#lp_contents .sec_item-area .item__detail.item__detail--01 {
  margin: calc(35 * (var(--rate))) 0 0 0;
}
#lp_contents .sec_item-area .item__detail .btn_cart {
  gap: calc(30 * (var(--rate)));
}
#lp_contents .sec_item-area .item__detail .btn_cart.btn_cart--orange {
  margin: calc(40 * (var(--rate))) auto 0;
}
#lp_contents .sec_item-area .item__detail .btn_cart .text {
  font-size: calc(36 * (var(--rate)));
}

#lp_contents .sec_item-area .item__name {
  color: #30b299;
  font-size: calc(38 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1.5;
}
#lp_contents .sec_item-area .item__credit {
  margin: calc(15 * (var(--rate))) 0 0 0;
  font-feature-settings: "palt";
  font-size: calc(28 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color_black);
}

#lp_contents .sec_item-area .item__img.item__img--01 {
  margin: calc(50 * (var(--rate))) 0 0 0;
}
#lp_contents .sec_item-area.sec_item-area--02 .sec_title--lead.sec_title--lead-recommend {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(28 * (var(--rate)));
  font-weight: 400;
}
#lp_contents .sec_item-area.sec_item-area--02 .item__img {
  margin-top: calc(50 * (var(--rate)));
  font-size: calc(28 * (var(--rate)));
  font-weight: 400;
}
#lp_contents .sec_item-area.sec_item-area--02 .item__detail {
  margin: calc(30 * (var(--rate))) auto 0;
}
#lp_contents .sec_item-area.sec_item-area--02 .item__name {
  color: #dda562;
  font-size: calc(38 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1.5;
}
#lp_contents .sec_item-area .sec_sub-lead {
  margin-top: calc(42 * (var(--rate)));
  color: #dda562;
}
#lp_contents .sec_item-area .sec_sub-lead ._sub {
  display: block;
  position: relative;
}
#lp_contents .sec_item-area .sec_sub-lead ._sub01 {
  color: #dda562;
  font-family: var(--font_jp_serif);
  font-size: calc(36 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1;
}
#lp_contents .sec_item-area .sec_sub-lead ._sub02 {
  margin: calc(26 * (var(--rate))) 0 0 0;
  color: #dda562;
  font-family: var(--font_jp_serif);
  font-size: calc(42 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1.75;
  position: relative;
}
#lp_contents .sec_item-area .sec_sub-lead ._sub02::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(36 * (var(--rate)));
  height: calc(36 * (var(--rate)));
  background-image: url(../img/w_quotation_01.png);
  background-repeat: no-repeat;
  background-size: 100%;
  top: calc(12 * (var(--rate)));
  left: calc(92 * (var(--rate)));
  z-index: 1;
}
#lp_contents .sec_item-area .sec_sub-lead ._sub02::after {
  display: block;
  content: "";
  position: absolute;
  width: calc(36 * (var(--rate)));
  height: calc(36 * (var(--rate)));
  background-image: url(../img/w_quotation_02.png);
  background-repeat: no-repeat;
  background-size: 100%;
  top: calc(116 * (var(--rate)));
  left: auto;
  right: calc(73 * (var(--rate)));
  z-index: 1;
}

#lp_contents .sec_item-area.sec_item-area--03 .item__img {
  width: calc(624 * (var(--rate)));
  margin: calc(93 * (var(--rate))) auto 0;
}

#lp_contents .sec_item-area.sec_item-area--03 .item__detail  {
  margin: calc(30 * (var(--rate))) auto 0;
}

#lp_contents .sec_item-area .item__note {
  display: block;
  width: calc(620 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
  margin: calc(50 * (var(--rate))) auto 0;
  color: var(--color_gray);
  text-align: justify;
}

#lp_contents .sec_item-area .sec_title .sec_title--item-sub {
  opacity: 1;
}


/*============================
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(40 * (var(--rate)));
  right: calc(38 * (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(72 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  transform: rotate(45deg);
  background-color: var(--color_green);
  position: absolute;
  top: 50%;
  right: calc(-8 * (var(--rate)));
}

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

#lp_contents .modal_inner{
  padding:calc(100*(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 {
  color: #1f1f1f;
  font-size: calc(32*(var(--rate)));
  letter-spacing: 0.1em;
  line-height: 1;
}

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

#lp_contents .option_list li {
  display: flex;
  gap: calc(22 * (var(--rate)));
  align-items: center;
  width: calc(600 * (var(--rate)));
  margin: 0 auto;
  padding: calc(40 * (var(--rate))) calc(25 * (var(--rate))) calc(35 * (var(--rate))) calc(45 * (var(--rate)));
  border: var(--color_lightgray) solid calc(2 * (var(--rate)));
  cursor: pointer;
}

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

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

#lp_contents .option_list li .option_var_name {
  color: #686d6a;
  font-family: var(--font_eng_serif);
  font-size: calc(24*(var(--rate)));
  width: calc(330*(var(--rate)));
  letter-spacing: 0.1em;
  line-height: calc(48 / 24);
  text-align: left;
  white-space: nowrap;
}

#lp_contents .option_list li.model_blk:nth-of-type(2) .option_var_name {
  padding: calc(28 * (var(--rate))) 0 0 0;
}

#lp_contents .option_list li .option_var_copy {
  display: block;
  margin: calc(24 * (var(--rate))) 0 0 0;
  width: calc(282 * (var(--rate)));
}

/*============================
CART BTN
============================*/
#lp_contents .btn_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(40 * (var(--rate))) auto 0;
  width: calc(350 * (var(--rate)));
  height: calc(80 * (var(--rate)));
  background-image: url(../img/btn_buy_bg.png);
  background-size: 100%;
}
#lp_contents .btn_cart.btn_cart--orange {
  background-image: url(../img/btn_buy_orange_bg.png);
}

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

#lp_contents .btn_cart .icon {
  width: calc(36 * (var(--rate)));
  background-image: url(../img/btn_cart_icon.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?v2);
  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 .cart_price p {
  display: flex;
  align-items: center;
  color: #1f1f1f;
}

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

#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;
  justify-content: center;
  margin-left: 0;
}

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

#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_buy_green_fixed_bg.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;
}
}


/*--------------------------------
            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 .left_fukidashi {
    width: 16.5rem;
    margin: 0 auto;
  }

  #lp_contents .left_area .left_title ._sub {
    display: block;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--color_green);
  }

  #lp_contents .left_area .left_title ._sub._sub01 {
    margin: 2.5rem auto 0;
    font-size: 1.6rem;
  }

  #lp_contents .left_area .left_title ._sub._sub02 {
    margin: 2rem auto 0;
    font-size: 2.2rem;
  }

  #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;
    background-color: var(--color_white);
  }

  #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 .bg_pc {
    position: fixed;
    display: block;
    width: 100%;
    height: 100vh;
    background-image: url(../img/bg_pc.png);
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #lp_contents .sec_campaign.sec_campaign--03 {
    margin: 0;
    padding: 1rem 0 0 0;
    background-color: transparent;
    width: 28.4rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .sec_title.sec_title--campaign {
    padding: 0;
    font-size: 1.8rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__num {
    margin: 1.8rem 0 0 0;
    font-size: 1.2rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__num::after {
    width: 28rem;
    top: 0.6rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__num.campaign__num--02 {
    margin: 2.3rem 0 0 0;
  }

  #lp_contents .sec_campaign .campaign__limited {
    width: 14rem;
    height: 1.4rem;
    margin: 1.5rem 0 0 0;
    font-size: 1rem;
  }

  #lp_contents .sec_campaign.sec_campaign--03 .campaign__date {
    margin: 0.8rem 0 0 0;
    font-size: 1.2rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__date::before {
    width: 17.6rem;
    height: 0.1rem;
    bottom: -0.3rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__sub-lead {
    margin: 1.2rem 0 0 0;
    font-size: 1.2rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__main-lead.campaign__main-lead--01 {
    margin: 0.4rem 0 0 0;
    font-size: 1.6rem;
    line-height: 1.2;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__main-lead.campaign__main-lead--01 ._small {
    top: 2.2rem;
    font-size: 1.2rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__sub-lead.campaign__sub-lead--02 {
    margin: 1rem 0 0 0;
    font-size: 1.2rem;
    line-height: calc(56 / 28);
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__main-lead.campaign__main-lead--02 {
    margin: 0rem 0 0 0;
    font-size: 1.6rem;
    position: relative;
    line-height: 2;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__note {
    font-size: 1rem;
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__pic {
    width: 6.6rem;
    bottom: -2rem;
    right: 2rem;
  }
  #lp_contents section.sec_item-area--03 {
    padding-bottom: 12rem;
  }

  #lp_contents .modal__bg {
    background-image: url(../img/modal_bg_pc.png);
  }
}


/*--------------------------------
            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;
    position: relative;
    z-index: 1;
  }

  #share{
    z-index: 100 !important;
    bottom: calc(180 * (100vw / 780)) !important;
    left: 5% !important;
    right: auto !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);

  }

  /*============================
  SP right Campaign
  ============================*/
  #lp_contents .right_area {
    width: calc(640 * (var(--rate)));
    height: 100vh;
    position: fixed;
    top: 0;
    left: auto;
    right: calc(-640 * (var(--rate)));
    background-image: url(../img/bg_fixed_right.jpg);
    z-index: 10;
    transition: right 0.5s;
  }
  #lp_contents .right_area.js-tab-active {
    right: 0;
  }

  #lp_contents .sec_campaign.sec_campaign--03 {
    width: 100%;
    box-sizing: border-box;
    margin: calc(135 * (var(--rate))) auto 0;
    padding: 0 calc(70 * (var(--rate))) calc(85 * (var(--rate)));
  }
  #lp_contents .right_area .campaign__tab {
    position: absolute;
    /*top: calc(992 * (var(--rate)));*/
    bottom: calc(182 * (var(--rate)));
    left: calc(-78 * (var(--rate)));
    width: calc(78 * (var(--rate)));
    height: calc(246 * (var(--rate)));
    background-image: url(../img/campaign_tab_sp.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  #lp_contents .right_area .campaign__tab .__tab-icon {
    display: block;
    height: calc(22 * (var(--rate)));
    width: calc(22 * (var(--rate)));
    position: relative;
    border-radius: 50%;
    top: calc(208 * (var(--rate)));
    left: calc(28 * (var(--rate)));
    background-image: url(../img/icon_plus.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: background-image 0.5s;
  }
  #lp_contents .right_area.js-tab-active .campaign__tab .__tab-icon {
    background-image: url(../img/icon_minus.png);
  }
  /*#lp_contents .right_area .campaign__tab .__tab-icon::before {
    display: block;
    content: "";
    position: absolute;
    width: calc(12 * (var(--rate)));
    height: calc(2 * (var(--rate)));
    background-color: var(--color_white);
    top: calc(8 * (var(--rate)));
    left: calc(4 * (var(--rate)));
  }
  #lp_contents .right_area .campaign__tab .__tab-icon::after {
    display: block;
    content: "";
    position: absolute;
    width: calc(12 * (var(--rate)));
    height: calc(2 * (var(--rate)));
    background-color: var(--color_white);
    top: calc(8 * (var(--rate)));
    left: calc(4 * (var(--rate)));
    transform: rotate(90deg);
    transition: transform 0.5s;
  }*/
  /*#lp_contents .right_area.js-tab-active .campaign__tab .__tab-icon::after {
    transform: rotate(0deg);
  }*/

  #lp_contents .sec_campaign.sec_campaign--03 .campaign__num {
    font-size: calc(36 * (var(--rate)));
  }
  #lp_contents .sec_campaign.sec_campaign--03 .campaign__num::after {
    display: block;
    content: "";
    position: absolute;
    width: calc(500 * (var(--rate)));
    height: calc(2 * (var(--rate)));
    background-size: 100%;
    background-image: url(../img/bg__line.png);
    background-repeat: no-repeat;
    top: calc(20 * (var(--rate)));
    left: 0;
  }

  #lp_contents .sec_campaign.sec_campaign--03 .campaign__sub-lead {
    font-size: calc(26 * (var(--rate)));
  }

  #lp_contents .sec_campaign.sec_campaign--03 .campaign__pic {
    right: calc(28 * (var(--rate)));
    bottom: calc(8 * (var(--rate)));
  }

}

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

.js-fade {
  opacity: 0;
  -ms-filter: blur(0);
  filter: blur(0);
  transition: 3s;
}
.js-fade.js-active {
  opacity: 1;
}

.js-fade-up {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease;
}
.js-fade-up.js-active {
  opacity: 1;
  translate: 0 0;
}

.js-fade-load {
  opacity: 0;
  -ms-filter: blur(0);
  filter: blur(0);
  transition: 3s;
}
.js-fade-load.js-active {
  opacity: 1;
}

.js-fade-load-late {
  opacity: 0;
  -ms-filter: blur(0);
  filter: blur(0);
  transition: 2s 1s;
}
.js-fade-load-late.js-active {
  opacity: 1;
}

@keyframes floatX {
  0% {
    translate: calc(-5 * var(--rate));
  }
  50% {
    translate: calc(5 * var(--rate));
  }
  100% {
    translate: calc(-5 * var(--rate));
  }
}
@keyframes floatX2 {
  0% {
    translate: calc(7 * var(--rate));
  }
  50% {
    translate: calc(-7 * var(--rate));
  }
  100% {
    translate: calc(7 * var(--rate));
  }
}
@keyframes floatY {
  0% {
    transform: translateY(calc(-10 * var(--rate)));
  }
  50% {
    transform: translateY(calc(10 * var(--rate)));
  }
  100% {
    transform: translateY(calc(-10 * var(--rate)));
  }
}
@keyframes floatY2 {
  0% {
    transform: translateY(calc(10 * var(--rate)));
  }
  50% {
    transform: translateY(calc(-10 * var(--rate)));
  }
  100% {
    transform: translateY(calc(10 * var(--rate)));
  }
}


.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) {

.archive_area {
  padding: calc(230 * (100vw / 780)) 0 calc(132 * (100vw / 780))!important;
}

#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;
}

}

/*CK*/
@media (max-width: 767px) {
 #BrandID_CK {
  overflow-x: clip;
  padding: 0 0 calc(230 * (100vw / 780)) 0 !important;
 }
}