@charset "UTF-8";

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

Mitea ORGANIC Miffy Collection｜MASH GO GREEN STORE（マッシュ ゴー グリーン ストア）

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

/* ========================================================
                      * Layout style *
========================================================= */

/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

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

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

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

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}


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

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

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

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

  --color-lp_txt_font: #000000;
  --color-lp_orange: #eb6100;
  --color-lp_yellow: #fdcd00;
  --color-lp_green: #15722c;
  --color-lp_blue: #004d97;
  --color-lp_white: #f8f6ed;
  --font_base: "dnp-shuei-gothic-gin-std", "helvetica-neue-lt-pro", sans-serif;
  --font_en: "helvetica-neue-lt-pro", sans-serif;
}

@media (min-width: 751px) {
  :root {
    /* --rate: calc(100vw / var(--pcWidth)); */
    /* --rate: calc(var(--pcMainContentWidth) / var(--pcWidth)); */
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: .01em;
  font-weight: 600;
  text-align: center;
}

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

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

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

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

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 600;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
}

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

.lp_contents section {
  position: relative;
  border-bottom: 2px solid var(--color-lp_txt_font);
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: unset;
}


/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 751px) {

  .lp_contents .grid_area {
    display: grid;
    grid-template-columns: 1fr var(--pcMainContentWidth) 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;
    align-items: center;
  }

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

  .lp_contents .grid_area .fixed_nav .fixed_nav__img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: translate(-100%, -50%);
    left: 0;
    width: 12rem;
    height: 27.77rem;
  }

  .fixed_left_inner {
    width: 100%;
  }

  .fixed_left_inner .logo {
    width: calc(221 * ((var(--rate))));
    position: relative;
    margin: 0 auto;
  }

  .fixed_left_inner .logo a {
    position: relative;
    color: transparent;
  }

  .fixed_left_inner .logo img {
    opacity: 0;
  }

  .fixed_left_inner .logo,
  .fixed_left_inner .logo {
    mask: url(../img/logo.svg);
    background-color: var(--color-lp_txt_font);
    transition: background-color 1s;
  }

  .lp_contents.productsBlock4 .fixed_left_inner .logo,
  .lp_contents.productsBlock7 .fixed_left_inner .logo {
    background: var(--color-lp_white);
  }

  .fixed_left_inner .time_block {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
  }

  .fixed_left_inner .time_block__inner {
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    letter-spacing: .01em;
    font-family: var(--font_en);
    font-weight: 400;
    transition: color 1s;
  }

  .lp_contents.productsBlock4 .fixed_left_inner .time_block__inner,
  .lp_contents.productsBlock7 .fixed_left_inner .time_block__inner {
    color: var(--color-lp_white);
  }

  .fixed_left_inner .time_block__inner::before {
    content: "";
    mask: url(../img/icon_watch.svg) no-repeat center / 100%;
    background: var(--color-lp_txt_font);
    width: 1.7rem;
    height: 1.7rem;
    display: block;
    margin-right: .5rem;
    transition: background-color 1s;
  }

  .lp_contents.productsBlock4 .fixed_left_inner .time_block__inner::before,
  .lp_contents.productsBlock7 .fixed_left_inner .time_block__inner::before {
    background: var(--color-lp_white);
  }

  .fixed_left_inner .time_block__inner span {
    font-size: 1.8rem;
    letter-spacing: .01em;
    font-family: var(--font_en);
    font-weight: 400;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: visible;
  }

  .lp_contents_inner::before,
  .lp_contents_inner::after {
    content: "";
    width: 2px;
    height: 100%;
    background: var(--color-lp_txt_font);
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .lp_contents_inner::before {
    left: 0;
  }

  .lp_contents_inner::after {
    right: 0;
  }
}

@media (max-width: 750px) {
  .lp_contents .grid_area .fixed_nav {
    display: none;
  }
}


/* 固定背景 */
.bgSetting {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}

.bgSetting .for_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.bgSetting .for_bg:nth-of-type(1) {
  background: var(--color-lp_orange);
}

.bgSetting .for_bg:nth-of-type(2) {
  background: var(--color-lp_yellow);
}

.bgSetting .for_bg:nth-of-type(3) {
  background: var(--color-lp_green);
}

.bgSetting .for_bg:nth-of-type(4) {
  background: var(--color-lp_yellow);
}

.bgSetting .for_bg:nth-of-type(5) {
  background: var(--color-lp_orange);
}

.bgSetting .for_bg:nth-of-type(6) {
  background: var(--color-lp_blue);
}

.bgSetting .for_bg:nth-of-type(7) {
  background: var(--color-lp_yellow);
}

.bgSetting .for_bg:nth-of-type(8) {
  background: var(--color-lp_orange);
}

.bgSetting .for_bg:nth-of-type(9) {
  background: var(--color-lp_blue);
}

.bgSetting .for_bg.selected {
  opacity: 1;
}

/* 背景と一緒にロゴの色も変える */
.fixed_left_inner .logo .for_logo {
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
}

.fixed_left_inner .logo .for_logo.selected {
  opacity: 1;
}


/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_right .ankerlink_wrap {}

.fixed_right .ankerlink_wrap .ankerlink_wrap__ttl {
  text-align: left;
  font-size: 4.1rem;
  font-family: var(--font_en);
  font-weight: 400;
  transition: color 1s;
}

.fixed_right .ankerlink_wrap ul {
  display: flex;
  flex-direction: column;
  /* color: var(--color-lp_white); */
  color: var(--color-lp_txt_font);
  margin-top: 3.6rem;
  transition: color 1s;
}

.fixed_right .ankerlink_wrap ul li {
  position: relative;
  border-bottom: 1px solid var(--color-lp_txt_font);
  transition: border-bottom 1s;
}

.fixed_right .ankerlink_wrap ul li::before {
  /* content: ""; */
  position: absolute;
  height: 1px;
  z-index: 1;
  bottom: 0;
  transform-origin: center center;
  width: 30rem;
  background-color: var(--color-lp_txt_font);
  /* transition: background-color 1s; */
}

.fixed_right .ankerlink_wrap ul li p {
  font-size: 1.5rem;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  width: 30rem;
  text-align: left;
  letter-spacing: .04em;
}

.fixed_right .ankerlink_wrap ul li a {
  padding: 1.1rem 0 .7rem .2rem;
}

.fixed_right .ankerlink_wrap ul li a:hover p {
  opacity: .5;
}

.fixed_right .ankerlink_wrap ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3.8rem;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: url(../img/character_img_2.png) no-repeat center / 100%;
  opacity: 0;
  transition: opacity .3s ease-in;
}

.fixed_right .ankerlink_wrap ul li a.is-active::before {
  opacity: 1;
}

.fixed_right .copy_right {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: var(--color-lp_white);
  font-size: 1.2rem;
  transition: color 1s;
}

.lp_contents.productsBlock4 .fixed_right .ankerlink_wrap .ankerlink_wrap__ttl,
.lp_contents.productsBlock4 .fixed_right .ankerlink_wrap ul,
.lp_contents.productsBlock7 .fixed_right .ankerlink_wrap .ankerlink_wrap__ttl,
.lp_contents.productsBlock7 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_white);
}

.lp_contents.productsBlock4 .fixed_right .ankerlink_wrap ul li,
.lp_contents.productsBlock7 .fixed_right .ankerlink_wrap ul li {
  border-bottom: 1px solid var(--color-lp_white);
  /* background: var(--color-lp_white); */
}



@media (max-width: 750px) {

  /* SP時ナビゲーション設定 */
  .lp_contents .grid_area .fixed_right {
    display: none;
  }

}

/* ========================================================
                      * 共通設定  *
========================================================= */

.lp_contents .sp_only {
  display: none;
}

@media (max-width: 750px) {
  .lp_contents .sp_only {
    display: block;
  }
}

.lp_contents sup {
  font-size: .6em;
  position: relative;
  top: calc(1 * (var(--rate)));
  left: calc(-2 * (var(--rate)));
}

.lp_contents .frame {
  width: calc(410 * (var(--rate)));
  border-radius: calc(20 * (var(--rate)));
  margin: 0 auto;
  border: 2px solid var(--color-lp_txt_font);
  overflow: hidden;
}

.lp_contents .frame .under_line {
  border-bottom: 2px solid var(--color-lp_txt_font);
}

.lp_contents .btn_buy {
  background: var(--color-lp_txt_font);
  border-radius: calc(25 * (var(--rate)));
  width: fit-content;
  margin: 0 auto;
  transition: all .6s;
}

.lp_contents .btn_buy:hover {
  background: var(--color-lp_white);
}

.lp_contents .products_block_3 .btn_buy:hover {
  background: var(--color-lp_txt_font);
}

.lp_contents .btn_buy a {
  font-size: calc(20 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 500;
  letter-spacing: .012em;
  color: var(--color-lp_white);
  padding: calc(15 * (var(--rate))) calc(54 * (var(--rate)));
  position: relative;
}

.lp_contents .btn_buy a:hover {
  color: var(--color-lp_txt_font);
}

.lp_contents .products_block_3 .btn_buy a:hover {
  color: var(--color-lp_white);
}

.lp_contents .btn_buy a::before {
  content: "";
  mask: url(../img/arrow.svg) no-repeat center / 100%;
  background: var(--color-lp_white);
  width: calc(10 * (var(--rate)));
  height: calc(17 * (var(--rate)));
  position: absolute;
  right: calc(15 * (var(--rate)));
  top: 50%;
  transform: translateY(-50%);
}

.lp_contents .btn_buy a:hover::before {
  background: var(--color-lp_txt_font);
}

.lp_contents .products_block_3 .btn_buy a:hover::before {
  background: var(--color-lp_white);
}

.lp_contents .scroll_bar {
  width: 100vw;
  height: calc(70 * (var(--rate)));
  background-image: url(../img/scroll_bar.png);
  background-repeat: repeat-x;
  background-size: calc(544 * (var(--rate)));
  background-color: var(--color-lp_white);
  animation: scroll_bar 26s linear infinite;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  border-top: 2px solid var(--color-lp_txt_font);
  border-bottom: 2px solid var(--color-lp_txt_font);
  z-index: 2;
}

@keyframes scroll_bar {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: calc(-544 * var(--rate)) 0;
  }
}

.lp_contents .slick-list {
  overflow: unset;
}

.lp_contents .font_white {
  color: var(--color-lp_white);
}


/* ========================================================
                    * マウスストーカー*
========================================================= */

@media (min-width: 751px) {

  .lp_contents,
  .lp_contents a,
  .lp_contents button {
    cursor: none !important;
  }
}

.lp_contents #mouseStalker {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(75 * (var(--rate)));
  height: calc(65 * (var(--rate)));
  background: url(../img/character_img_2.png) no-repeat center / 100%;
  transform: translate(-50%, -50%);
  transition: transform .4s;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 750px) {
  .lp_contents #mouseStalker {
    display: none;
  }
}


/* ========================================================
            * スライダー　パーツ  矢印 *
========================================================= */

/* 共通 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  all: unset;
  position: absolute;
  top: calc(352 * (var(--rate)));
  width: calc(46 * (var(--rate)));
  height: calc(46 * (var(--rate)));
  /* cursor: pointer; */
  z-index: 10;
  background: url(../img/slide_arrow.svg) no-repeat center / 100%;
}

.lp_contents .products_block_3 .slick-prev,
.lp_contents .products_block_3 .slick-next {
  mask: url(../img/slide_arrow.svg) no-repeat center / 100%;
  background: var(--color-lp_white);

}

/* デフォルト文字削除 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .slick-prev::before,
.lp_contents .slick-next::before {
  content: none;
}

/* 右 */
.lp_contents .slick-next {
  right: calc(26 * (var(--rate)));
}

/* 左（反転） */
.lp_contents .slick-prev {
  top: calc(375 * (var(--rate)));
  left: calc(26 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1);
}

/* デフォルト文字削除 */
.lp_contents .variation_slide .slick-prev,
.lp_contents .variation_slide .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .variation_slide .slick-prev::before,
.lp_contents .variation_slide .slick-next::before {
  content: none;
}

/* 右 */
.lp_contents .variation_slide .slick-prev {
  top: calc(375 * (var(--rate)));
  right: calc(80 * (var(--rate)));
  transform: rotate(-90deg);
}

/* 左（反転） */
.lp_contents .variation_slide .slick-prev {
  left: calc(80 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1) rotate(-90deg);
}

/* ========================================================
            * スライダー　パーツ  dots *
========================================================= */

/* 全体 */
.lp_contents .slick-dots {
  all: unset;
  display: flex;
  gap: calc(10 * (var(--rate)));
  margin-top: calc(184 * (var(--rate)));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .products_block_2 .slick-dots {
  margin-top: calc(40 * (var(--rate)));
}

.lp_contents .products_block_3 .slick-dots {
  margin-top: calc(42 * (var(--rate)));
}

.lp_contents .products_block_4 .slick-dots {
  margin-top: calc(39 * (var(--rate)));
}

.lp_contents .products_block_5 .slick-dots {
  margin-top: calc(270 * (var(--rate)));
}

/* li */
.lp_contents .slick-dots li {
  all: unset;
  /* cursor: pointer; */
}

/* 横棒 */
.lp_contents .slick-dots li button {
  all: unset;
  display: block;
  width: calc(10 * (var(--rate)));
  /* 長さ調整 */
  height: calc(10 * (var(--rate)));
  /* 太さ調整 */
  background: var(--color-lp_txt_font);
  /* cursor: pointer; */
  font-size: 0;
  /* 数字消す */
  border-radius: 50%;
  opacity: .5;
}

.lp_contents .products_block_3 .slick-dots li button {
  background: var(--color-lp_white);
  opacity: .5;
}

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

/* アクティブ */
.lp_contents .slick-dots li.slick-active button {
  background: var(--color-lp_txt_font);
  opacity: 1;
}

.lp_contents .products_block_3 .slick-dots li.slick-active button {
  background: var(--color-lp_white);
  opacity: 1;
}



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

.sec_mv {
  background: var(--color-lp_orange);
  padding-bottom: calc(67 * (var(--rate)));
}

.sec_mv .inner {}

.sec_mv .sec_mv__ttl_main {
  width: calc(222 * (var(--rate)));
  position: absolute;
  top: calc(35 * (var(--rate)));
  left: calc(30 * (var(--rate)));
}

.sec_mv .inner .sec_mv__ttl_sub {
  width: calc(289 * (var(--rate)));
  position: absolute;
  top: calc(483 * (var(--rate)));
  right: calc(35 * (var(--rate)));
}

.sec_mv .sec_mv__item_list {
  display: flex;
  flex-wrap: wrap;
  width: calc(344 * (var(--rate)));
  padding-top: calc(125 * (var(--rate)));
  padding-left: calc(24 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li {}

.sec_mv .sec_mv__item_list li:nth-of-type(1) {
  width: calc(124 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(2) {
  width: calc(124 * (var(--rate)));
  margin-left: calc(-56 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(3) {
  width: calc(134 * (var(--rate)));
  margin-left: calc(-66 * (var(--rate)));
  margin-top: calc(-5 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(4) {
  width: calc(141 * (var(--rate)));
  margin-left: calc(-10 * (var(--rate)));
  margin-top: calc(-63 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(5) {
  width: calc(202 * (var(--rate)));
  margin-left: calc(-66 * (var(--rate)));
  margin-top: calc(-97 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(6) {
  width: calc(56 * (var(--rate)));
  margin-left: calc(38 * (var(--rate)));
  margin-top: calc(-68 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(7) {
  width: calc(131 * (var(--rate)));
  margin-left: calc(4 * (var(--rate)));
  margin-top: calc(-109 * (var(--rate)));
}

.sec_mv .sec_mv__item_list li:nth-of-type(1) figure {}

.sec_mv .sec_mv__item_list li:nth-of-type(2) figure {}

.sec_mv .sec_mv__item_list li:nth-of-type(3) figure {
  animation-delay: .9s;
}

.sec_mv .sec_mv__item_list li:nth-of-type(4) figure {
  animation-delay: 1.2s;
}

.sec_mv .sec_mv__item_list li:nth-of-type(5) figure {
  animation-delay: .3s;
}

.sec_mv .sec_mv__item_list li:nth-of-type(6) figure {
  animation-delay: .6s;
}

.sec_mv .sec_mv__item_list li:nth-of-type(7) figure {
  animation-delay: 1.5s;
}

.sec_mv .inner .sec_mv__chara_list {}

.sec_mv .inner .sec_mv__chara_list li {
  position: absolute;
  transition:
    transform 1.4s ease,
    opacity 0.6s ease;
  opacity: 0;
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(1) {
  z-index: 4;
  width: calc(51 * (var(--rate)));
  top: calc(35 * (var(--rate)));
  left: calc(272 * (var(--rate)));
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(2) {
  z-index: 5;
  width: calc(37 * (var(--rate)));
  top: calc(266 * (var(--rate)));
  left: calc(287 * (var(--rate)));
  transition-delay: .3s;
  transform: translateX(10px);
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(3) {
  z-index: 5;
  width: calc(37 * (var(--rate)));
  top: calc(345 * (var(--rate)));
  left: calc(295 * (var(--rate)));
  transition-delay: .6s;
  transform: translateX(10px);
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(4) {
  z-index: 3;
  width: calc(94 * (var(--rate)));
  top: calc(100 * (var(--rate)));
  left: calc(277 * (var(--rate)));
  transition-delay: .9s;
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(5) {
  z-index: 2;
  width: calc(99 * (var(--rate)));
  top: calc(182 * (var(--rate)));
  left: calc(297 * (var(--rate)));
  transition-delay: 1.2s;
  transform: translateY(-5px);
}

.sec_mv .inner .sec_mv__chara_list li:nth-of-type(6) {
  z-index: 1;
  width: calc(116 * (var(--rate)));
  top: calc(111 * (var(--rate)));
  left: calc(343 * (var(--rate)));
  transition-delay: 1.5s;
  transform: translate(-20px, 5px);
}

.sec_mv .inner .sec_mv__chara_list.is-show li {
  opacity: 1;
  transform: translate(0, 0);
}




/* ========================================================
                      * sec_intro  *
========================================================= */

.sec_intro {
  background: var(--color-lp_yellow);
  padding-top: calc(177 * (var(--rate)));
  padding-bottom: calc(98 * (var(--rate)));
}

.sec_intro::before {
  content: "";
  background: url(../img/bg_arch.png) no-repeat center top /100%;
  width: calc(480 * (var(--rate)));
  height: calc(184 * (var(--rate)));
  position: absolute;
  top: 0;
  left: 0;
}

.sec_intro .inner {}

.sec_intro .sec_intro__ttl {
  width: calc(246 * (var(--rate)));
  margin: 0 auto;
}

.sec_intro .sec_intro__lead {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_intro .sec_intro__lead_1 {
  margin-top: calc(22 * (var(--rate)));
}

.sec_intro .sec_intro__lead_2 {
  margin-top: calc(46 * (var(--rate)));
}

.sec_intro .sec_intro__img {
  margin: 0 auto;
}

.sec_intro .sec_intro__img_1 {
  width: calc(115 * (var(--rate)));
  margin-top: calc(50 * (var(--rate)));
  margin-left: calc(175 * (var(--rate)));
}

.sec_intro .sec_intro__img_2 {
  width: calc(59 * (var(--rate)));
  position: absolute;
  bottom: 0;
  right: 0;
}

.sec_intro .sec_intro__img_wrap .sec_intro__img_2:nth-of-type(1) {
  width: calc(54 * (var(--rate)));
  bottom: calc(-35 * (var(--rate)));
  right: calc(88 * (var(--rate)));
}

.sec_intro .sec_intro__img_wrap .sec_intro__img_2:nth-of-type(2) {
  width: calc(59 * (var(--rate)));
  bottom: calc(-14 * (var(--rate)));
  right: calc(35 * (var(--rate)));
  transition-delay: .3s;
}

.sec_intro .sec_intro__img_wrap .sec_intro__img_2:nth-of-type(3) {
  width: calc(56 * (var(--rate)));
  bottom: calc(-62 * (var(--rate)));
  right: calc(50 * (var(--rate)));
  transition-delay: .6s;
}

.sec_intro .sec_intro__txt_wrap {
  margin-top: calc(42 * (var(--rate)));
  display: grid;
  gap: calc(22 * (var(--rate)));
  position: relative;
}

.sec_intro .sec_intro__txt {
  font-size: calc(16 * (var(--rate)));
  line-height: calc(36/16);
  letter-spacing: .1em;
}

.sec_intro .sec_intro__img {}

.sec_intro .sec_intro__img_wrap {
  margin-top: calc(20 * (var(--rate)));
}

.sec_intro .sec_intro__release {
  margin-top: calc(90 * (var(--rate)));
}

.sec_intro .sec_intro__release dt {
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 400;
  background: var(--color-lp_orange);
  padding: calc(25 * (var(--rate))) 0 calc(20 * (var(--rate)));
}

.sec_intro .sec_intro__release dd {
  background: var(--color-lp_white);
  padding: calc(19 * (var(--rate))) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * (var(--rate)));
}

.sec_intro .sec_intro__release dd span {}

.sec_intro .sec_intro__release dd span:nth-of-type(1),
.sec_intro .sec_intro__release dd span:nth-of-type(2) {
  font-size: calc(38 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 400;
}

.sec_intro .sec_intro__release dd span:nth-of-type(1) {
  margin-left: calc(8 * (var(--rate)));
}

.sec_intro .sec_intro__release dd span:nth-of-type(2) {
  margin-left: calc(-11 * (var(--rate)));
}

.sec_intro .sec_intro__release dd span.week {
  font-size: calc(13 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 500;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  margin-left: calc(-3 * (var(--rate)));
}

.sec_intro .sec_intro__release dd span.week::after {
  content: "";
  background: var(--color-lp_txt_font);
  width: 1px;
  height: 100%;
  display: block;
}

.sec_intro .sec_intro__release dd span.space {
  /* font-size: calc(10 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 400; */
}

.sec_intro .sec_intro__release dd span.ja {
  font-size: calc(30 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_wrap {
  margin-top: calc(43 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(19 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li {}

.sec_intro .sec_intro__anchor_list li:nth-of-type(1) {
  margin-left: calc(30 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(5) {
  margin-left: calc(69 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(6) {
  margin-left: calc(14 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(7) {
  margin-left: calc(18 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list .sec_intro__anchor_img {
  margin: 0 auto;
  min-height: calc(126 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(1) .sec_intro__anchor_img {
  width: calc(85 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(2) .sec_intro__anchor_img {
  width: calc(31 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(3) .sec_intro__anchor_img {
  width: calc(92 * (var(--rate)));
  margin-right: calc(3 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(4) .sec_intro__anchor_img {
  width: calc(92 * (var(--rate)));
  margin-right: calc(-1 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(5) .sec_intro__anchor_img {
  width: calc(91 * (var(--rate)));
  margin-right: calc(-16 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(6) .sec_intro__anchor_img {
  width: calc(111 * (var(--rate)));
}

.sec_intro .sec_intro__anchor_list li:nth-of-type(7) .sec_intro__anchor_img {
  width: calc(63 * (var(--rate)));
  margin-inline: auto;
}

.sec_intro .sec_intro__anchor_wrap .sec_intro__anchor_txt {
  font-size: calc(11 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(15/11);
  margin-top: calc(0 * (var(--rate)));
}

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

.sec_products {}

.sec_products .inner {}

.sec_products .products_block {
  position: relative;
  padding-top: calc(103 * (var(--rate)));
  padding-bottom: calc(108 * (var(--rate)));
}

.sec_products .products_block_1 {
  background: var(--color-lp_green);
}

.sec_products .products_block_2 {
  background: var(--color-lp_yellow);
  padding-bottom: calc(60 * (var(--rate)));
}

.sec_products .products_block_3 {
  background: var(--color-lp_orange);
  padding-top: calc(60 * (var(--rate)));
  padding-bottom: calc(60 * (var(--rate)));
}

.sec_products .products_block_4 {
  background: var(--color-lp_blue);
  padding-top: calc(60 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_products .products_block_5 {
  background: var(--color-lp_yellow);
  padding-top: calc(101 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_products .products_block_6 {
  background: var(--color-lp_orange);
  padding-top: calc(98 * (var(--rate)));
  padding-bottom: calc(60 * (var(--rate)));
}

.sec_products .products_block_7 {
  background: var(--color-lp_blue);
  padding-top: calc(60 * (var(--rate)));
  padding-bottom: calc(60 * (var(--rate)));
}

.sec_products .products_block_1::before {
  content: "";
  background: url(../img/character_img_3.png) no-repeat center / 100%;
  width: calc(127 * (var(--rate)));
  height: calc(156 * (var(--rate)));
  display: block;
  margin: 0 auto;
}

.sec_products .products_block_5::before {
  content: "";
  background: url(../img/character_img_9.png) no-repeat center / 100%;
  width: calc(191 * (var(--rate)));
  height: calc(152 * (var(--rate)));
  display: block;
  margin: 0 auto;
}

.sec_products .products_block_6::before {
  content: "";
  background: url(../img/character_img_6.png) no-repeat center / 100%;
  width: calc(188 * (var(--rate)));
  height: calc(161 * (var(--rate)));
  display: block;
  margin: 0 auto;
}

.sec_products .products_block__inner {
  border-radius: calc(30 * (var(--rate)));
  padding-bottom: calc(58 * (var(--rate)));
  z-index: 1;
  position: relative;
}

.sec_products .products_block_1 .products_block__inner {
  background: var(--color-lp_yellow);
  margin-top: calc(-12 * (var(--rate)));
}

.sec_products .products_block_2 .products_block__inner {
  background: var(--color-lp_orange);
}

.sec_products .products_block_3 .products_block__inner {
  background: var(--color-lp_blue);
}

.sec_products .products_block_4 .products_block__inner {
  background: var(--color-lp_orange);
}

.sec_products .products_block_5 .products_block__inner {
  background: var(--color-lp_green);
  margin-top: calc(-24 * (var(--rate)));
}

.sec_products .products_block_6 .products_block__inner {
  background: var(--color-lp_green);
  margin-top: calc(-12 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__inner {
  background: var(--color-lp_yellow);
}

.sec_products .products_block .character {
  position: absolute;
  z-index: 2;
}

.sec_products .products_block_2 .character {
  width: calc(115 * (var(--rate)));
  top: calc(221 * (var(--rate)));
  right: calc(70 * (var(--rate)));
}

.sec_products .products_block_4 .character {
  width: calc(90 * (var(--rate)));
  top: calc(256 * (var(--rate)));
  right: calc(80 * (var(--rate)));
}

.sec_products .products_block__ttl {
  font-size: calc(36 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 500;
  letter-spacing: .012em;
}

.sec_products .products_block__ttl.lg {
  font-size: calc(60 * (var(--rate)));
  font-weight: 400;
  letter-spacing: .01em;
  line-height: calc(50/60);
  padding-inline: calc(19 * (var(--rate)));
  margin-top: calc(58 * (var(--rate)));
}

.sec_products .products_block_3 .products_block__ttl.lg {
  margin-top: calc(51 * (var(--rate)));
}

.sec_products .products_block_4 .products_block__ttl.lg {
  margin-top: calc(60 * (var(--rate)));
}

.sec_products .products_block_5 .products_block__ttl.lg {
  margin-top: calc(40 * (var(--rate)));
}

.sec_products .products_block_6 .products_block__ttl.lg {
  margin-top: calc(44 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__ttl.lg {
  margin-top: calc(41 * (var(--rate)));
}

.sec_products .products_block__ttl.left span {
  text-align: left;
  font-weight: 400;
  font-family: var(--font_en);
}

.sec_products .products_block__ttl.right span {
  text-align: right;
  font-weight: 400;
}

.sec_products .products_block_1 .products_block__ttl {
  padding: calc(29 * (var(--rate))) 0 calc(23 * (var(--rate)));
}

.sec_products .products_block__sub_ttl {
  font-size: calc(24 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 500;
  letter-spacing: .012em;
  margin-top: calc(39 * (var(--rate)));
}

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

.sec_products .products_block_3 .products_block__sub_ttl {
  margin-top: calc(50 * (var(--rate)));
}

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

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

.sec_products .products_block_6 .products_block__sub_ttl {
  margin-top: calc(13 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__sub_ttl {
  margin-top: calc(48 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__sticker {
  position: absolute;
  top: calc(245 * (var(--rate)));
  right: calc(34 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__sticker figcaption {
  font-size: calc(14 * (var(--rate)));
  letter-spacing: .05em;
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(13 * (var(--rate)));
  margin-bottom: calc(4 * (var(--rate)));
  margin-left: calc(7 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__sticker figcaption::before,
.sec_products .products_block_7 .products_block__sticker figcaption::after {
  content: "";
  width: 1px;
  height: calc(16 * (var(--rate)));
  background: var(--color-lp_txt_font);
  display: block;
}

.sec_products .products_block_7 .products_block__sticker figcaption::before {
  transform: rotate(-40deg);
}

.sec_products .products_block_7 .products_block__sticker figcaption::after {
  transform: rotate(40deg);
}

.sec_products .products_block_7 .products_block__sticker img {
  display: block;
  width: calc(216 * (var(--rate)));
  margin: 0 calc(6 * (var(--rate))) 0 auto;
}

.sec_products .products_block__sub_ttl_jp {
  font-size: calc(14 * (var(--rate)));
  letter-spacing: .05em;
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(13 * (var(--rate)));
  margin-top: calc(59 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__sub_ttl_jp {
  margin-top: calc(33 * (var(--rate)));
}

.sec_products .products_block__sub_ttl_jp::before,
.sec_products .products_block__sub_ttl_jp::after {
  content: "";
  width: 1px;
  height: calc(16 * (var(--rate)));
  background: var(--color-lp_txt_font);
  display: block;
}

.sec_products .products_block__sub_ttl_jp::before {
  transform: rotate(-40deg);
}

.sec_products .products_block__sub_ttl_jp::after {
  transform: rotate(40deg);
}

.sec_products .contents_wrap {}

.sec_products .slide_icon {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-lp_txt_font);
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--color-lp_yellow);
  z-index: 1;
  gap: calc(10 * (var(--rate)));
  top: calc(-8 * (var(--rate)));
  left: calc(18 * (var(--rate)));
}

.sec_products .slide_icon span {
  letter-spacing: .012em;
  display: block;
}

.sec_products .slide_icon .slide_icon__en {
  font-size: calc(16 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 400;
}

.sec_products .slide_icon .slide_icon__ja {
  font-size: calc(12 * (var(--rate)));
  margin-top: calc(-7 * (var(--rate)));
}

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

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

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

.sec_products .products_block_4 .slide_wrap {
  margin-top: calc(24 * (var(--rate)));
}

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

.sec_products .slide_img {
  width: calc(370 * (var(--rate)));
  height: calc(370 * (var(--rate)));
  margin: 0 auto;
}

.sec_products .slide_img.edge_line {
  border-radius: 50%;
  border: 2px solid var(--color-lp_txt_font);
}

.sec_products .products_block_3 .slide_img.edge_line {
  border: 2px solid var(--color-lp_white);
}

.sec_products .products_block_2 .slide_img:not(.edge_line) {
  width: calc(286 * (var(--rate)));
  margin-top: calc(-28 * (var(--rate)));
}

.sec_products .products_block_3 .slide_img:not(.edge_line) {
  width: calc(436 * (var(--rate)));
  margin-top: calc(-28 * (var(--rate)));
}

.sec_products .products_block_4 .slide_img:not(.edge_line) {
  width: calc(394 * (var(--rate)));
  margin-top: calc(-28 * (var(--rate)));
}

.sec_products .products_block_6 .products_block__img {
  width: calc(324 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(-58 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__img {
  width: calc(380 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(90 * (var(--rate)));
}

.sec_products .slide_item__name_block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(558 * (var(--rate)));
  width: 100%;
}

.sec_products .slide_item__name {
  width: fit-content;
  position: relative;
  margin: 0 auto;
}

.sec_products .slide_item__name a {
  display: grid;
  gap: calc(13 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_products .slide_item__name .dashed {
  content: "";
  position: absolute;
  top: calc(53 * (var(--rate)));
  left: calc(0 * (var(--rate)));
  width: 100%;
  height: 2px;
  background: radial-gradient(circle, var(--color-lp_txt_font) calc(1 * (var(--rate))), transparent calc(1 * (var(--rate)))) left center / calc(6 * (var(--rate))) calc(2 * (var(--rate))) repeat-x;
}

.sec_products .slide_item__name span {
  font-size: calc(14 * (var(--rate)));
  letter-spacing: 0;
  display: block;
}

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

.sec_products .products_block_5 .slide_tab {
  margin-top: calc(74 * (var(--rate)));
}

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

.sec_products .slide_tab li {
  width: calc(85 * (var(--rate)));
  height: calc(85 * (var(--rate)));
}

.sec_products .slide_tab li {
  border-radius: 50%;
  position: relative;
}

.sec_products .slide_tab li.active {
  border: 2px solid var(--color-lp_txt_font);
}

.sec_products .slide_tab li.active::after {
  /* content: "";
  width: calc(85 * (var(--rate)));
  height: calc(85 * (var(--rate)));
  border-radius: 50%;
  border: 2px solid var(--color-lp_txt_font);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

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

.sec_products .products_block__name,
.sec_products .products_block__name * {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(33.6/24);
}

.sec_products .products_block_1 .products_block__name {}

.sec_products .products_block_2 .products_block__name {
  margin-top: calc(97 * (var(--rate)));
}

.sec_products .products_block_3 .products_block__name {
  margin-top: calc(97 * (var(--rate)));
}

.sec_products .products_block_4 .products_block__name {
  margin-top: calc(94 * (var(--rate)));
}

.sec_products .products_block_5 .products_block__name {
  margin-top: calc(168 * (var(--rate)));
}

.sec_products .products_block_6 .products_block__name {
  margin-top: calc(9 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__name {
  margin-top: calc(9 * (var(--rate)));
}

.sec_products .products_block__price {
  font-size: calc(18 * (var(--rate)));
  font-family: var(--font_en);
  letter-spacing: 0;
  margin-top: calc(17 * (var(--rate)));
}

.sec_products .products_block_2 .products_block__price {
  margin-top: calc(13 * (var(--rate)));
}

.sec_products .products_block_3 .products_block__price {
  margin-top: calc(15 * (var(--rate)));
}

.sec_products .products_block_4 .products_block__price {
  margin-top: calc(11 * (var(--rate)));
}

.sec_products .products_block_5 .products_block__price {
  margin-top: calc(14 * (var(--rate)));
}

.sec_products .products_block_6 .products_block__price {
  margin-top: calc(14 * (var(--rate)));
}

.sec_products .products_block_7 .products_block__price {
  margin-top: calc(12 * (var(--rate)));
}

.sec_products .products_block__price span {}

.sec_products .products_block__price .variation {
  font-size: calc(14 * (var(--rate)));
}

.sec_products .products_block__price .tax {
  font-size: calc(14 * (var(--rate)));
  letter-spacing: 0;
}

.sec_products .products_block__price .size {
  font-size: calc(14 * (var(--rate)));
  letter-spacing: 0;
}

.sec_products .products_block__btn {
  margin-top: calc(31 * (var(--rate)));
}

.sec_products .products_block_4 .products_block__btn {
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .products_block_5 .products_block__btn {
  margin-top: calc(32 * (var(--rate)));
}

.sec_products .products_block_1 .products_block__btn {}

.sec_products .products_block_3 .products_block__btn {
  background: var(--color-lp_white);
}

.sec_products .products_block_3 .products_block__btn a {
  color: var(--color-lp_blue);
}

.sec_products .products_block_3 .products_block__btn a::before {
  background: var(--color-lp_blue);
}

.sec_products .products_block__txt {
  font-size: calc(16 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(32/16);
  margin-top: calc(41 * (var(--rate)));
}

.sec_products .products_block_2 .products_block__txt {
  margin-top: calc(41 * (var(--rate)));
}

.sec_products .products_block_3 .products_block__txt {
  margin-top: calc(46 * (var(--rate)));
}

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

.sec_products .products_block_5 .products_block__txt {
  /* margin-top: calc(35 * (var(--rate))); */
}

.sec_products .products_block__point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * (var(--rate)));
  margin-top: calc(40 * (var(--rate)));
}

.sec_products .products_block_1 .products_block__point {}

.sec_products .products_block_3 .products_block__point {
  margin-top: calc(43 * (var(--rate)));
}

.sec_products .products_block_4 .products_block__point {
  margin-top: calc(46 * (var(--rate)));
}

.sec_products .products_block_5 .products_block__point {
  margin-top: calc(41 * (var(--rate)));
}

.sec_products .products_block__point li {
  width: calc(85 * (var(--rate)));
  height: calc(85 * (var(--rate)));
  border-radius: 50%;
  border: 2px solid var(--color-lp_txt_font);
  background: var(--color-lp_white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec_products .products_block__point .txt {
  font-size: calc(14 * (var(--rate)));
  line-height: calc(16/14);
  letter-spacing: .03em;
}

.sec_products .products_block_5 .products_block__point li:nth-of-type(1) .txt,
.sec_products .products_block_5 .products_block__point li:nth-of-type(2) .txt {
  margin-top: calc(5 * (var(--rate)));
}

.sec_products .products_block__set {
  width: calc(370 * (var(--rate)));
  border-radius: calc(15 * (var(--rate)));
  margin-top: calc(50 * (var(--rate)));
}

.sec_products .products_block__set dt {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
  background: var(--color-lp_yellow);
  padding: calc(19 * (var(--rate))) 0 calc(16 * (var(--rate)));
}

.sec_products .products_block__set dd {
  background: var(--color-lp_white);
  padding: calc(27 * (var(--rate))) 0 calc(27 * (var(--rate)));
}

.sec_products .products_block__set dd ol {
  display: grid;
  gap: calc(7 * (var(--rate)));
  padding-left: calc(50 * (var(--rate)));
}

.sec_products .products_block__set dd li {
  font-size: calc(16 * (var(--rate)));
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  counter-increment: item;
  gap: calc(8 * (var(--rate)));
}

.sec_products .products_block__set dd li::before {
  content: counter(item);
  font-size: calc(16 * (var(--rate)));
  background: var(--color-lp_yellow);
  width: calc(29 * (var(--rate)));
  height: calc(29 * (var(--rate)));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  border: 2px solid var(--color-lp_txt_font);
}


/* ========================================================
                      * sec_end  *
========================================================= */

.sec_end {
  background: var(--color-lp_blue);
  padding-top: calc(42 * (var(--rate)));
  padding-bottom: calc(28 * (var(--rate)));
}

.sec_end .inner {}

.sec_end .frame {
  background: var(--color-lp_yellow);
  border-radius: calc(30 * (var(--rate)));
  padding: calc(30 * (var(--rate))) 0 calc(42 * (var(--rate)));
}

.sec_end .sec_end__img {
  margin: 0 auto;
}

.sec_end .sec_end__img_1 {
  width: calc(114 * (var(--rate)));
}

.sec_end .sec_end__img_2 {
  width: calc(480 * (var(--rate)));
  margin-top: calc(48 * (var(--rate)));
}

.sec_end .sec_end__ttl {
  font-size: calc(32 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(50/32);
  margin-top: calc(17 * (var(--rate)));
}

.sec_end .sec_end__txt {
  font-size: calc(16 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(32/16);
  margin-top: calc(12 * (var(--rate)));
}

.sec_end .sec_end__btn {
  background: var(--color-lp_white);
  margin-top: calc(51 * (var(--rate)));
  border-radius: calc(40 * (var(--rate)));
  transition: all .6s;
}

.sec_end .sec_end__btn:hover {
  background: var(--color-lp_txt_font);
}

.sec_end .sec_end__btn a {
  color: var(--color-lp_blue);
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .012em;
  padding: calc(28 * (var(--rate))) calc(111 * (var(--rate)));
}

.sec_end .sec_end__btn a:hover {
  color: var(--color-lp_white);
}

.sec_end .sec_end__btn a::before {
  mask: url(../img/arrow.svg);
  background: var(--color-lp_blue);
  width: calc(15 * (var(--rate)));
  height: calc(26 * (var(--rate)));
  right: calc(38 * (var(--rate)));
}

.sec_end .sec_end__btn a:hover::before {
  background: var(--color-lp_white);
}

.sec_end .sec_end__note {
  font-size: calc(10 * (var(--rate)));
  line-height: calc(15 / 10);
  color: var(--color-lp_white);
  text-align: justify;
  padding-inline: calc(35 * (var(--rate)));
  margin-top: calc(47 * (var(--rate)));
}

.sec_end .copy_right {
  width: calc(333 * (var(--rate)));
  margin: calc(92 * (var(--rate))) auto 0;
}


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

.lp_contents .modal_toggle {
  transform: translateX(100%);
  transition: all 0.6s ease !important;
}

.lp_contents .modal_toggle.is-active {
  transform: translateX(0);
}

.lp_contents .modal_toggle.fixed {
  position: fixed;
  bottom: calc(138 * (var(--rate)));
  right: 0;
  z-index: 100;
}

.lp_contents .modal_toggle.fixed.none {
  opacity: 0;
}

.lp_contents .modal_toggle {
  position: fixed;
  right: 0;
  bottom: calc(50 * (var(--rate)));
  background: var(--color-lp_txt_font);
  border-radius: calc(15 * (var(--rate))) 0 0 calc(15 * (var(--rate)));
  z-index: 9;
  padding: calc(29 * (var(--rate))) calc(27 * (var(--rate))) calc(28 * (var(--rate)));
  width: auto;
}

.lp_contents .modal_toggle p {
  font-size: calc(22 * (var(--rate)));
  color: var(--color-lp_white);
  display: grid;
  justify-content: center;
  gap: calc(7 * (var(--rate)));
  width: fit-content;
}

.lp_contents .modal_toggle p span {
  font-size: calc(11 * (var(--rate)));
  letter-spacing: .12em;
  display: block;
}

html.no_scroll {
  overflow: hidden;
}

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

.lp_contents .modal_button.btn_modalClose {
  width: calc(45 * (var(--rate)));
  height: calc(18 * (var(--rate)));
  background: url(../img/btn_close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  float: right;
  position: fixed;
  /* position: absolute; */
  top: calc(15 * (var(--rate)));
  right: calc(30 * (var(--rate)));
  z-index: 9999;
}

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

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;

  /* align-items: flex-start; */
  width: 100%;
  height: 100%;
  opacity: 1;
  scale: 1;
  /* transition: opacity .5s; */
  transition: opacity .3s, scale .3s;
  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: var(--color-lp_green);
  opacity: .8;
  content: "";
}

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

.lp_contents .modal_wrap {
  width: calc(422 * ((var(--rate))));
  margin: 0 auto;
  max-height: calc(100dvh - (100 * var(--rate)));
  /* overflow-y: scroll; */
  -ms-overflow-style: none;
  scrollbar-width: none;
  will-change: transform;
  overflow: hidden;
  overflow-y: auto;
  border-radius: calc(30 * ((var(--rate))));
  border: solid 2px var(--color-lp_txt_font);
  background: var(--color-lp_white);
}

.lp_contents .modal_inner {
  position: relative;
  background: var(--color-lp_white);
  border-radius: calc(30 * ((var(--rate))));
}

.lp_contents .modal_outside.hide .modal_content {
  opacity: 0;
}

.lp_contents .modal_content {
  opacity: 1;
  overflow: visible;
  position: relative;
  transition: opacity .5s;
}

.lp_contents .modal_content ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.lp_contents .modal_content ul li {
  position: relative;
  min-height: calc(196 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(8) {
  background: var(--color-lp_orange);
  position: relative;
}

.lp_contents .modal_content ul li:nth-of-type(8)::after {
  content: "";
  background: url(../img/character_img_10.png) no-repeat center / 100%;
  width: calc(69 * ((var(--rate))));
  height: calc(159 * ((var(--rate))));
  position: absolute;
  top: calc(26 * ((var(--rate))));
  left: 0;
}

.lp_contents .modal_content ul li:nth-of-type(n+3) {
  border-top: 2px solid var(--color-lp_txt_font);
}

.lp_contents .modal_content ul li:nth-of-type(odd) {
  border-right: 2px solid var(--color-lp_txt_font);
}

.lp_contents .modal_content ul li a {
  padding: calc(27 * ((var(--rate)))) 0 calc(0 * ((var(--rate))));
  display: flex;
  flex-direction: column;
}

.lp_contents .modal_content ul li p {
  font-size: calc(11 * ((var(--rate))));
  line-height: calc(15.4/11);
  letter-spacing: .1em;
  min-height: calc(28 * ((var(--rate))));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(8 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(1) p {
  margin-top: calc(-2 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(2) p {
  margin-top: calc(6 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(3) p {
  margin-top: calc(-2 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(4) p {
  margin-top: calc(4 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(5) p {
  margin-top: calc(5 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(6) p {
  margin-top: calc(4 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(7) p {
  margin-top: calc(0 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(8) p {
  font-size: calc(24 * ((var(--rate))));
  font-family: var(--font_en);
  line-height: calc(28.8/24);
  letter-spacing: .12em;
  min-height: auto;
  margin-top: calc(27 * ((var(--rate))));
}

.lp_contents .modal_content ul li figure {
  margin: 0 auto;
}

.lp_contents .modal_content ul li:nth-of-type(1) figure {
  width: calc(85 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(2) figure {
  width: calc(31 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(3) figure {
  width: calc(92 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(3) figure img {
  margin-top: calc(0 * ((var(--rate))));
  margin-left: calc(5 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(4) figure {
  width: calc(91 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(4) figure img {
  margin-top: calc(0 * ((var(--rate))));
  margin-left: calc(7 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(5) figure {
  width: calc(92 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(5) figure img {
  margin-top: calc(-6 * ((var(--rate))));
  margin-left: calc(5 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(6) figure {
  width: calc(117 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(7) figure {
  width: calc(76 * ((var(--rate))));
}

/* ========================================================
                      * アニメーション  *
========================================================= */
.lp_contents .js-animation-rotating {
  opacity: 0;
  translate: 0 calc(80 * (var(--rate)));
  transition: opacity .8s, translate .8s;
}

.lp_contents .js-animation-rotating.is-show {
  opacity: 1;
  translate: unset;
  animation: rotating 4s ease-in-out infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.lp_contents .js-animation-bard figure {
  opacity: 0;
  translate: calc(80 * (var(--rate))) 0;
  transition: opacity .8s, translate 1.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.lp_contents .js-animation-bard.is-show figure {
  opacity: 1;
  translate: unset;
}

.lp_contents .js-animation-up::before {
  transform: translateY(100%);
  /* transition: transform 1.7s cubic-bezier(0.2, 1, 0.3, 1); */
  transition: transform 1.7s cubic-bezier(0.2, 1, 0.3, 1);
  /* transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1); */
}

.lp_contents .js-animation-up.is-show::before {
  transform: translateY(0);
}

.lp_contents .js-animation-fadeup figure {
  opacity: 0;
}

.lp_contents .js-animation-fadeup.is-show figure {
  animation: fade 1.4s ease forwards;
}

@-webkit-keyframes fade {
  10% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade {
  10% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.lp_contents .typing-wrap {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.lp_contents .typing-text {
  /* display: inline-block; */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  visibility: hidden;
  /* 最初は非表示 */
}

.lp_contents .typing-text:nth-of-type(n+2) {
  margin-top: calc(-11 * (var(--rate)));
}

.lp_contents .char {
  visibility: hidden;
}


.lp_contents .char.visible {
  visibility: visible;
}

.lp_contents .js-animation-fixed-nav {
  transform: translate(-100%, -50%);
  transition: transform 1.7s cubic-bezier(0.2, 1, 0.3, 1);
}

.lp_contents .js-animation-fixed-nav.is-active {
  transform: translate(0, -50%) !important;
}

.lp_contents .js-fadeup {
  opacity: 0;
  transform: translate(0, 5rem);
  transition: 1s;
}

.lp_contents .js-fadeup.is-show {
  transform: translate(0, 0);
  opacity: 1;
}