@charset "UTF-8";

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

Title : LP CSS

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


/* ========================================================
                      * Layout style *
========================================================= */
/*
html {
  font-size: 62.5%;
}*/

main {
  max-width: 100%;
}

footer {
  margin-top: 0;
}

a {
  text-decoration: none;
}

p, ul, ol, dl {
  margin: 0;
}

.topic-path {
  margin-right: 0;
  margin-left: 0;
}

#header_bottom {
  display: none !important;
}

#share {
  z-index: 200 !important;
}

#Wrap {
  padding-top: calc(88 * 56rem/750);
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  margin: 0 auto;
  padding: 0;
  color: #000;
  font-size: calc(1.4 * 56rem/750);
  font-family: 'futura-pt', "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

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

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a:hover {}

.lp_contents img {
  max-width: 100%;
  /* width: auto; */
}

.lp_contents sup {
  font-size: calc(12 * 56rem/750);
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  background-image .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
}

.lp_contents h1 {
  padding: 0;
}

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}


/* -- List Dot -- */

.list_dot,
.list.list_dot {
  margin: 1em 0;
}

.list_dot .list_dot {
  margin: 0 0 .5em;
}

.list_dot ul,
.list.list_dot ul {
  margin: 0;
  padding-left: 1.5em !important;
}

.list_dot ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  list-style-type: none;
  line-height: 1.8;
}

.list_dot ul li ul {
  padding-top: 2px;
  padding-left: 2.5em !important;
}

.list_dot ul li:before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: -1em;
  margin-right: 14px;
  background: #555;
  border-radius: 100%;
  vertical-align: middle;
  content: "";
}


/* ===================
  　　 General
=================== */

.lp_contents .txt_center {
  text-align: center;
}

.lp_contents .txt_bold {
  font-weight: 500;
}

.lp_contents .txt_en {}

.lp_contents .txt_mincho {}



/* ===================
  　　　Animation
=================== */


/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

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

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes tra3_2 {
  0% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top.effect {
  animation: opa1 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  transform: translateY(40px);
}

.ef-top2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3_2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s ease-in-out 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra5 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-lg.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra6 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


/* ===================
  　Section Common
=================== */

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  width: calc(1100 * 56rem/750);
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* ===================
     Text Setting
=================== */

.txt_cont {
  text-align: center;
  line-height: 1.7;
}


/* ===================
  Button Setting
=================== */

.btn_wrap {
  text-align: center;
}

.btn_cart a,
.btn_cart input {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: calc(400 * 56rem/750);
  height: calc(70 * 56rem/750);
  margin: 0;
  padding: 0;
  border: none;
  background: #212121;
  text-align: center;
  color: #fff;
  font-size: calc(18 * 56rem/750);
  font-weight: bold;
}

.btn_cart a.cart_in {}

.btn_cart span {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url(../../Contents/ImagesPkg/lp/selectkit/icn_cart.svg) no-repeat 0 47%;
  background-size: calc(23 * 56rem/750);
  padding-left: calc(38 * 56rem/750);
}

.btn_cart .btn_reset {
  outline: none;
  background: url(../../Contents/ImagesPkg/lp/selectkit/icn_reset.svg) no-repeat 12rem 48% #888888;
  background-size: calc(23 * 56rem/750);
  padding-left: calc(30 * 56rem/750);
  color: #fff;
}

/* ===================
      　LOADING
=================== */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  visibility: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #C3D7DB;
  opacity: 1;
  transition: opacity .5s ease-out,visibility 1.3s ease-out,z-index 1.3s ease-out;
}

.loading-screen .loading_icons {
  display: flex;
  gap: calc(60 * 56rem/750);
}

.loading-screen .loading_icon {
  width: calc(60 * 56rem/750);
  height: calc(60 * 56rem/750);
  animation: bounce 1.2s infinite cubic-bezier(0.41, 0.31, 0.64, 0.82);
}

.loading-screen .loading_icon:nth-child(1) {
  animation-delay: 0s;
}

.loading-screen .loading_icon:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-screen .loading_icon:nth-child(3) {
  animation-delay: 0.4s;
}

.loading-screen .loading_icon:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.loading-screen .loading_txt {
  width: calc(167 * 56rem/750);
  margin: calc(50* 56rem/750) auto 0;
}

.loading-screen .loading_logo {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 9999999;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 0s;
  width: calc(250 * 56rem/750);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.img_flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

@keyframes strobe_aninme {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  99% {

    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}

.img_flash.show {
  display: block;
  opacity: 1;
}

.img_flash.hide {
  opacity: 0;
}


/* ===================
  　　MAIN SLIDER
=================== */

/* ---- 背景設定 ---- */

.main_section,
.main_section.modal_slide01 {
  background: url(../img/bg_modal_slide01.jpg) no-repeat,url(../img/bg_modal_slide02.jpg),url(../img/bg_modal_slide03.jpg),url(../img/bg_modal_slide04.jpg),url(../img/bg_modal_slide05.jpg);
  background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  animation: bgAnime 1.2s cubic-bezier(0.41, 0.17, 0.42, 0.96) 3.6s 1 forwards;
}

@keyframes bgAnime {
  0% {
    background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  }
  100% {
    background-size: 103% 103%,100% 100%,100% 100%,100% 100%,100% 100%;
  }
}

.main_section.modal_slide01 {
  animation: bgAnime 0.8s cubic-bezier(0.41, 0.17, 0.42, 0.96) 0s 1 forwards;
}

.main_section.modal_slide02,
.main_section.modal_slide03,
.main_section.modal_slide04,
.main_section.modal_slide05 {
  background-color: #C3D7DB;
  background-image: url(../img/bg_modal_slide02.jpg);
  animation: none;
}

/* ---- スライダーセクション ---- */

.main_section {
  position: relative;
  height: calc(1140 * 56rem/750);

  padding: calc(65 * 56rem/750) 0 0;
}

/* ---- 縦方向　スライダー ---- */

.main_slider {
  width: calc(580 * 56rem/750);
  height: calc(580 * 56rem/750);
  margin: auto;
  padding: 3px;
}

.main_slider .swiper-wrapper {
  display: flex;
  flex-direction: column; /* 縦方向にスライドを配置 */
}

.main_slider .swiper-slide {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(28 * 56rem/750);
}

.main_slider .swiper-slide > img {
  display: block;
  overflow: hidden;
  border-radius: calc(28 * 56rem/750);
}

.main_slider .swiper-slide::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  border: 4px solid #fff;
  border-radius: calc(28 * 56rem/750);
  content: "";
}

/* -- FIstview -- */

.main_slider .swiper-slide.slide_first {
}

.main_slider .swiper-slide.slide_first::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  content: "";
  animation: growFromBottom 1s ease-out 1.3s forwards,opa0 1s cubic-bezier(0.51, 0.21, 0.41, 1) 2.6s 1 forwards;
  width: 0;
  background:url(../img/anime_01.svg) no-repeat 0 10%;
  background-size: calc(567 * 56rem/750);
}

/* PC用*/
@media (min-width: 769px) {
  .main_slider .swiper-slide.slide_first::after {
    background-size: calc(570 * 56rem/750);
  }
}

@keyframes growFromBottom {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.main_slider .swiper-slide.slide_first span {
  display: block;
}

.main_slider .swiper-slide.slide_first .img_character {
  opacity: 0;
  animation: opa1 3.8s cubic-bezier(0.51, 0.21, 0.41, 1) 2.4s 1 forwards ,zoomAnime 2.5s cubic-bezier(0.51, 0.21, 0.41, 1) 3.5s 1 forwards;
}

.main_slider .swiper-slide.slide_first .img_logo {
  position: absolute;
  top: calc(214 * 56rem/750);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: opa1 2s cubic-bezier(0.51, 0.21, 0.41, 1) 3.6s 1 forwards ;
  width: calc(410 * 56rem/750);
}


@keyframes zoomAnime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.04);
  }
}

/* -- 商品リンク -- */

.open-modal {
  position: relative;
  z-index: 22;
  display: block;
  opacity: 0.8;
  position: absolute;
  width: calc(42 * 56rem/750);
  height: calc(42 * 56rem/750);
  cursor: pointer;
}

.open-modal::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0.8);
  animation: pulse 2s infinite cubic-bezier(0.24, 0.04, 0.7, 0.74);
  background-color: #d70f6d;
  mix-blend-mode: multiply;
  border-radius: 100%;
  content: "";
}


/* アニメーションの定義 */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
}
/*

.open-modal[data-modal-id="SheetMask"]::before {
  background-color: #f990a9;
  mix-blend-mode: multiply;
}

.open-modal[data-modal-id="Fragrance"]::before {
  background-color: #fded52;
}

.open-modal[data-modal-id="KeyHolder"]::before {
  background-color: #bca6dc;
}*/

#openSlide1_1 {
  top: calc(200 * 56rem/750);
  left: calc(20 * 56rem/750);
}

#openSlide1_2 {
  top: calc(330 * 56rem/750);
  left: calc(150 * 56rem/750);
}

#openSlide1_3 {
  top: calc(190 * 56rem/750);
  left: calc(460 * 56rem/750);
}

#openSlide1_4 {
  top: calc(55 * 56rem/750);
  left: calc(395 * 56rem/750);
}

#openSlide1_5 {
  top: calc(400 * 56rem/750);
  left: calc(250 * 56rem/750);
}

#openSlide1_6 {
  top: calc(410 * 56rem/750);
  left: calc(60 * 56rem/750);
}

#openSlide2_1 {
  top: calc(102 * 56rem/750);
  left: calc(300 * 56rem/750);
}

#openSlide2_2 {
  top: calc(445 * 56rem/750);
  left: calc(261* 56rem / 750);
}

#openSlide2_3 {
  top: calc(333 * 56rem/750);
  left: calc(83* 56rem / 750);
}

#openSlide2_4 {
  top: calc(207 * 56rem/750);
  left: calc(149 * 56rem/750);
}

#openSlide3_1 {
  top: calc(230* 56rem / 750);
  left: calc(167* 56rem / 750);
}

#openSlide3_2 {
  top: calc(87 * 56rem/750);
  left: calc(303* 56rem / 750);
}


/* ===================
  　BOTTOM SLIDER
=================== */

.bottom_slider {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  margin: auto;
  padding-top: calc(668 * 56rem/750);
  padding-bottom: calc(30 * 56rem/750);
}

.bottom_slider .swiper-slide {
  position: relative;
  transition: opacity 0.1s ease-in-out; /* フェード切り替えのアニメーション */
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  height: 100%;
  gap: calc(15 * 56rem/750);
  text-align: center;
}

.bottom_slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}

.bottom_slider .swiper-wrapper {
  display: flex;
}

/* ---- 各スライド設定  ---- */

.bottom_slider .slide_first {
  align-items: center;
  justify-content: flex-end;
}

.bottom_slider .slide_first span {
  display: block;
  animation: blink 1.8s infinite ;
}

.bottom_slider .slide_first img {
  opacity: 0;
  display: block;
  width: calc(240 * 56rem/750);
  margin-right: auto;
  margin-left: auto;
  animation: opa1 .5s cubic-bezier(0.51, 0.21, 0.41, 1) 3.3s 1 forwards ;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bottom_slider .slide1 {
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(40 * 56rem/750);
}

.bottom_slider .slide1 img {
  width: calc(230 * 56rem/750);
}

.bottom_slider .slide2 {
  align-items: center;
  justify-content: flex-end;
}

.bottom_slider .slide2 img {
  width: calc(470 * 56rem/750);
}

.bottom_slider .swiper-slide .item_name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(570 * 56rem/750);
  margin: auto;
  line-height: 1.1;
}

.bottom_slider .swiper-slide .item_name .item_name__main {
  position: relative;
  font-size: calc(38 * 56rem/750);
  letter-spacing: 0.08em;
}

.bottom_slider .swiper-slide .item_name .item_name__sub {
  font-size: calc(25 * 56rem/750);
  letter-spacing: 0.02em;
}

.bottom_slider .swiper-slide .item_txt {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  font-size: calc(22 * 56rem/750);
  line-height: 1.6;
}

.bottom_slider .swiper-slide .item_btn a {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(15 * 56rem/750);
  width: calc(450 * 56rem/750);
  height: calc(88 * 56rem/750);
  background: #000;
  border-radius: calc(200 * 56rem/750);
  color: #fff;
  font-weight: 500;
}

.bottom_slider .swiper-slide .item_btn a:hover {
  opacity: 1;
}

.bottom_slider .swiper-slide .item_btn .item_btn__price {
  font-size: calc(38 * 56rem/750);
  letter-spacing: 0.04em;
}

.bottom_slider .swiper-slide .item_btn .item_btn__tax {
  padding: calc(2* 56rem/750) 0 0;
  font-size: calc(20 * 56rem/750);
  letter-spacing: 0.04em;
}

/* --  Sheet Maskエリア・ボタン調整 -- */

.bottom_slider .slide3 .item_btn {
  display: flex;
  gap: calc(16 * 56rem/750);
}

.bottom_slider .slide3 .item_btn a {
  width: calc(319 * 56rem/750);
}

.bottom_slider .slide3 .item_btn .item_btn__txt {
  font-size: calc(21 * 56rem/750);
}

.bottom_slider .slide3 .item_btn .item_btn__price {
  font-size: calc(32 * 56rem/750);
}

.bottom_slider .slide3 .item_btn .item_btn__tax {
  font-size: calc(18 * 56rem/750);
}


/* ===================
  　SCROLL SLIDER
=================== */

.scoll_slider {
  position: absolute;
  top: calc(720 * 56rem/750);
  right: 0;
  left: 0;
  width: calc(680 * 56rem/750);
  margin: auto;
}

.scoll_slider .swiper-wrapper {
  opacity: 0;
  width: 0;
  height: 0;
}

/* ---- スクロールバー ---- */

.main_section .swiper-scrollbar-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(505 * 56rem/750);
  height: calc(30 * 56rem/750);
  margin: auto;
}

.main_section .swiper-scrollbar {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 200;
  width: 120%;
  height: 3px;
  background: #fff;
}

/* スクロールバーの進捗部分を丸ボタンに */
.main_section .swiper-scrollbar-drag {
  background-color: #fff;
  width: 10px !important;
  height: 10px;
  border-radius: 100%;
  margin-top: -3px;
  cursor: pointer;
}

/* ホバー時のスタイル（オプション） */
.swiper-scrollbar-drag:hover {
}

/* ---- 矢印エリア ---- */

.swiper-button-arrw {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(17 * 56rem/750);
  padding: calc(12 * 56rem/750) 0 0 calc(20 * 56rem/750);
}

.swiper-button-arrw img {
  width: 100%;
}

.main_section .swiper-button-top,
.main_section .swiper-button-prev,
.main_section .swiper-button-next,
.main_section .open-profile-modal,
.main_section .swiper-button-element {
  position: relative;
  top: 0;
  z-index: 200;
  opacity: 1 !important;
  display: block;
  margin: 0 !important;
  padding: 0;
  cursor: pointer;
}

.main_section .swiper-button-top {
  width: calc(70 * 56rem/750);
}

.main_section .swiper-button-prev {
  left: 0;
  width: calc(70 * 56rem/750);
  height: 100%;
  background: none;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  right: auto;
  pointer-events: auto !important;
  transition: all;
}

.main_section .swiper-button-next,
.main_section .open-profile-modal {
  top: auto;
  width: calc(95 * 56rem/750) !important;
  height: auto !important;
  background: url(../img/anime_btn_next.svg) no-repeat center calc(13 * 56rem/750), url(../img/btn_next.svg) no-repeat center !important;
  background-size: calc(76 * 56rem/750),100% !important;
  border-radius: 0;
  display: block;
  margin: 0 !important;
  justify-content: center;
  align-items: center;
  right: auto;
  pointer-events: auto !important;
  transition: all;
}

.main_section .open-profile-modal {
  width: calc(95 * 56rem/750) !important;
}

.main_section .swiper-button-next img,
.main_section .open-profile-modal img {
  opacity: 0;
}

.main_section .swiper-button-next::before,
.main_section .open-profile-modal::before {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(76 * 56rem/750);
  height: calc(76 * 56rem/750);
  margin-top: calc(-22 * 56rem/750);
  margin-left: calc(2 * 56rem/750);
  transform: translate(-50% ,-50%) scale(1);
  background: url(../img/anime_btn_next.svg) no-repeat center;
  background-size: 95%;
  animation: opa1 1s linear 4s 1 forwards ,pulsate 1.8s infinite linear 3.2s;
  content: "";
  filter: blur(1px);
}

@keyframes pulsate {
  0% {
    transform: translate(-50% ,-50%) scale(1); /* 通常サイズ */
    opacity: 1;
  }
  50% {
    transform: translate(-50% ,-50%) scale(1.3); /* 1.5倍に拡大 */
    opacity: 0.3;
  }
  100% {
    transform:translate(-50% ,-50%) scale(1); /* 元のサイズに戻る */
    opacity: 1;
  }
}

.main_section .btn_tap {
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  border-radius: 50%;
  width: calc(10.5 * 56rem/750);
  height: calc(10.5 * 56rem/750);
  margin: calc(-26 *56rem/750) 0 0 calc(-10 * 56rem/750);
  background: #fff;
  pointer-events: none;
  cursor: pointer;
}

.main_section .active .btn_tap,
.modal_slide05 .swiper-button-next.active + .open-profile-modal .btn_tap {
  opacity: 1;
  animation: rippleEffect 0.5s ease-out forwards;
}

/* アニメーションの定義 */
@keyframes rippleEffect {
  to {
    transform: translate(-50%,-50%) scale(10);
    opacity: 0.1;
  }
}

.main_section .swiper-button-next.active,
.modal_slide05 .swiper-button-next.active + .open-profile-modal,
.main_section .open-profile-modal.active {
  background: url(../img/btn_next.svg) no-repeat center !important;
  background-size: 100%;
}

.main_section .swiper-button-next.active::before,
.modal_slide05 .swiper-button-next.active + .open-profile-modal::before,
.main_section .open-profile-modal.active::before {
  opacity: 0;
  animation: none;
}

.main_section .swiper-button-next::after,
.main_section .open-profile-modal::after {
  opacity: 0;
}

.main_section .swiper-button-next.active::after,
.modal_slide05 .swiper-button-next.active + .open-profile-modal::after,
.main_section .open-profile-modal.active::after {
  perspective: 1000;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(76* 56rem/750);
  height: calc(76 * 56rem/750);
  margin-top: calc(-22 * 56rem/750);
  transform: translate(-50% ,-50%) scale(1);
  background: url(../img/anime_btn_next.svg) no-repeat center;
  background-size: 100% 100%;
  content: "";
  animation: zoomAnime2 0.4s linear forwards;
}

@keyframes zoomAnime2 {
  0% {
    transform: translate(-50% ,-50%) scale(1);
  }
  50% {
    transform: translate(-50% ,-50%) scale(0.8);
  }
  100% {
    transform: translate(-50% ,-50%) scale(1);
  }
}

.main_section .swiper-button-all {
  position: relative;
  z-index: 200;
  display: block;
  width: calc(80 * 56rem/750);
}

.main_section .swiper-button-all:hover {
  opacity: 1;
}

.main_section .open-profile-modal {
  display: none;
}

.modal_slide05 .swiper-button-next {
  display: none;
}

.modal_slide05 .open-profile-modal {
  display: block;
}

.main_section .swiper-button-element {
  width: calc(90 * 56rem/750);
}

.main_section .swiper-button-element img {
  width: 100%;
}

/* ===================
  　　　MODAL
=================== */

/* モーダルが開いているときのスクロール固定 */
.modal-open {
  overflow: hidden;
  height: 100%;
}

/* 他の要素がずれる場合は以下を追加 */
.modal-open body,
.modal-open html {
  overflow: hidden;
  height: 100%;
}

/* 全体のモーダルのスタイル */
.modal_item {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal_item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: url(../img/bg_modal.jpg) no-repeat 0 0;
  background-size: cover;
  content: "";
}

.modal_item.active {
  display: block; /* 表示時にこのクラスを追加 */
}
/* モーダルのコンテンツエリア */
.modal_inner {
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: calc(750 * 56rem/750);
  background: #fff;
  height: 100%;
  padding: calc(50 * 56rem/750) 0;
  border-radius: calc(20 * 56rem/750);
}

.modal_item .modal_inner {
  height: 95%;
  overflow: hidden;
  width: 100%;
  padding: 0;
  background: none;
}

/* モーダル内のSwiper */
.modal_inner .swiper {
  flex: 1; /* コンテンツを縦方向に広げる */
  width: 100%;
  height: 100%;
}

.modal_item .modal_inner .swiper {
  width: 90%;
  background: #fff;
  margin: auto;
  padding: 5rem 0;
  overflow: hidden;
  border-radius: calc(20 * 56rem/750);
}

/* 閉じるボタン */
.modal_close {
  position: absolute;
  top: calc(30 * 56rem/750);
  right: calc(68 * 56rem/750);
  z-index: 1002;
  width: calc(62 * 56rem/750);
  height: calc(62 * 56rem/750);
  cursor: pointer;
}

/* スワイパーボタンのカスタマイズ */
.modal_item .swiper-button-next,
.modal_item .swiper-button-prev {
  opacity: 1;
  position: fixed;
  z-index: 1002;
  width: calc(80 * 56rem/750);
  height: calc(80 * 56rem/750);
  margin: 0;
  padding: 0;
  background: url(../img/icn_arw.svg) no-repeat 0 0;
  background-size: 100% 100%;
}

.modal_item .swiper-button-next {
  right: calc(-3 * 56rem/750);
}

.modal_item .swiper-button-prev {
  left: calc(-3 * 56rem/750);
  background-image: url(../img/icn_arw_prev.svg);
}

.modal_item .swiper-slide {
  padding: 0 calc(60 * 56rem/750) calc(40 * 56rem/750);
}

.modal_item .item_thumb {
}

.modal_item .item_thumb img {
  width: 100%;
}

.modal_item .item_title {
  margin-bottom: calc(35 * 56rem/750);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.modal_item .item_title .item_title__sub {
  display: inline-block;
  padding-bottom: calc(10 * 56rem/750);
  font-size: calc(30 * 56rem/750);
}

.modal_item .item_title .item_title__main {
  font-size: calc(30 * 56rem/750);
}

.modal_item .item_title .item_title__cate {
  font-size: calc(25 * 56rem/750);
}

.modal_item .item_cont {
  font-size: calc(20 * 56rem/750);
  margin-bottom: calc(35 * 56rem/750);
  text-align: center;
  line-height: 2;
}

.modal_item .item_cont .txt_sm {
  font-size: calc(18 * 56rem/750);
}

.modal_item .item_price {
  margin-bottom: calc(10 * 56rem/750);
  font-size: calc(42 * 56rem/750);
  text-align: center;
  letter-spacing: 0.04em;
}

.modal_item .item_price .item_tax {
  position: relative;
  top: calc(-2 * 56rem/750);
  padding-left: calc(10 * 56rem/750);
  font-size: calc(25 * 56rem/750);
}

.modal_item .item_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(500 * 56rem/750);
  height: calc(94 * 56rem/750);
  margin: auto;
  background: #000;
  border-radius: calc(200 * 56rem/750);
  color: #fff;
  font-size: calc(42 * 56rem/750);
  font-weight: 500;
  letter-spacing: 0.55em;
}

.modal_item .slide05 .item_title {
  margin-bottom: calc(20 * 56rem/750);
}

.modal_item .slide05 .item_cont {
  margin-bottom: calc(30 * 56rem/750);
}

/* -- ステッカー -- */
.item_sticker_txt {
  padding: calc(30* 56rem/750) 0 0;
  font-size: calc(25 * 56rem/750);
  text-align: center;
}


/* ===================
  　PROFILE MODAL
=================== */

.modal_profile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: #fff;
}

.modal_profile.active {
  display: block;
}

.modal_profile::before {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_profile.png) no-repeat;
  background-size: cover;
  content: "";
}

.modal_profile.active::before {
  opacity: 0;
  animation: opa1 2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.modal_profile .modal_inner {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  max-height: 90%;
  padding: calc(115 * 56rem/750) calc(40 * 56rem/750) calc(40 * 56rem/750);
  text-align: center;
}

.modal_profile.active .modal_inner {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: profileAnime 0.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
}

@keyframes profileAnime {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.modal_profile.active .modal_inner > * {
  opacity: 0;
  animation: opa1 0.8s cubic-bezier(0.51, 0.21, 0.41, 1) 1s 1 forwards;
}


.modal_profile .profile_title {
  width: calc(476 * 56rem/750);
  margin: auto auto calc(70 * 56rem/750);
}

.modal_profile .profile_cont {
  margin-bottom: calc(50 * 56rem/750);
  font-size: calc(19 * 56rem/750);
  line-height: 2.2;
}

.modal_profile .profile_img {
  width: calc(182 * 56rem/750);
  margin: auto auto calc(40 * 56rem/750);
}

.modal_profile .profile_sns {
  margin: auto auto calc(52 * 56rem/750);
}

.modal_profile .profile_sns a {
  display: inline-block;
  margin: 0 calc(25 * 56rem/750);
  font-size: calc(20 * 56rem/750);
  line-height: 1.6;
}

.modal_profile .profile_sns img {
  width: calc(60 * 56rem/750);
}

.modal_profile .profile_close {
  width: calc(240 * 56rem/750);
  margin: auto;
  cursor: pointer;
}



/* ===================
     ELEMENT MODAL
=================== */

.open-element-modal {
  display: none;
  position: absolute;
  top: calc(20 * 56rem/750);
  right: calc(20 * 56rem/750);
  z-index: 20;
  width: calc(168 * 56rem/750);
  cursor: pointer;
}

.modal_slide03 .open-element-modal,
.modal_slide04 .open-element-modal,
.modal_slide05 .open-element-modal {
  display: block;
}

.open-element-modal:hover {
  opacity: 1;
}

.modal_element {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: url(../img/element_bg_01.jpg) no-repeat,url(../img/element_bg_02.jpg),url(../img/element_bg_03.jpg),url(../img/element_bg_04.jpg),url(../img/element_bg_05.jpg);
  background-size: cover;
}

.modal_element.modal_element_first.active {
  display: block;
  opacity: 0;
  animation: opa1 0.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.modal_element.modal_element_fire {
  background-image: url(../img/element_bg_02.jpg);
}

.modal_element.modal_element_earth {
  background-image: url(../img/element_bg_03.jpg);
}

.modal_element.modal_element_air {
  background-image: url(../img/element_bg_04.jpg);
}

.modal_element.modal_element_water {
  background-image: url(../img/element_bg_05.jpg);
}

.modal_element.active {
  display: block;
}

.modal_element .modal_inner {
  border-radius: 0;
  background: none;
}

.modal_element .modal_inner_bg {
  position: relative;
  height: calc(1010 * 56rem/750);
  margin-bottom: calc(50 * 56rem/750);
  padding: calc(80 * 56rem/750) calc(10 * 56rem/750) calc(230 * 56rem/750);
  background: url(../img/element_cont_01.jpg) no-repeat center,url(../img/element_cont_02.jpg),url(../img/element_cont_03.jpg),url(../img/element_cont_04.jpg),url(../img/element_cont_05.jpg);
  background-size: cover;
  text-align: center;
  border: 4px solid #fff;
  border-radius: calc(20 * 56rem/750);
  color: #fff;
}

.modal_element.modal_element_fire .modal_inner_bg {
  padding-top: calc(40 * 56rem/750);
  background-image: url(../img/element_cont_02.jpg);
}

.modal_element.modal_element_earth .modal_inner_bg {
  padding-top: calc(40 * 56rem/750);
  background-image: url(../img/element_cont_03.jpg);
}

.modal_element.modal_element_air .modal_inner_bg {
  padding-top: calc(40 * 56rem/750);
  background-image: url(../img/element_cont_04.jpg);
}

.modal_element.modal_element_water .modal_inner_bg {
  padding-top: calc(40 * 56rem/750);
  background-image: url(../img/element_cont_05.jpg);
}

.modal_element .element_title {
  width: calc(280 * 56rem/750);
  margin: auto auto calc(40 * 56rem/750);
}

.modal_element.modal_element_first .element_title {
  width: calc(530 * 56rem/750);
}

.modal_element .element_cont {
  margin-bottom: calc(25 * 56rem/750);
  font-size: calc(21 * 56rem/750);
  line-height: 2;
}

.modal_element.modal_element_first .element_cont {
  margin-bottom: calc(40 * 56rem/750);
  font-size: calc(22 * 56rem/750);
  line-height: 2.2;
}

.modal_element.modal_element_earth .element_cont {
  margin-bottom: calc(10 * 56rem/750);
}

.modal_element .element_cont .txt_lg {
  padding: calc(6 * 56rem/750);
  font-size: calc(25 * 56rem/750);
  font-weight: bold;
}

.modal_element .element_select {
  /*position: absolute;
  right: calc(10 * 56rem/750);
  left: calc(10 * 56rem/750);
  bottom: calc(230 * 56rem/750);*/
}

.modal_element .element_itemlink {
  position: absolute;
  right: calc(10 * 56rem/750);
  left: calc(10 * 56rem/750);
  bottom: calc(40 * 56rem/750);
}

.modal_element .element_itemlink a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(40* 56rem / 750);
}

.modal_element .element_itemlink .img_area {
  width: calc(90 * 56rem/750);
}

.modal_element .element_itemlink .btn_area {
  display: flex;
  width: calc(340* 56rem / 750);
  height: calc(100* 56rem / 750);
  margin-top: calc(20* 56rem / 750);
  background: #000;
  border-radius: calc(200* 56rem / 750);
  color: #fff;
  font-size: calc(21* 56rem / 750);
  line-height: 1.5;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.04em;
}

.modal_element .element_close {
  width: calc(240 * 56rem/750);
  margin: auto;
  cursor: pointer;
}

.element_select dt {
  padding-bottom: calc(10 * 56rem/750);
  font-size:calc(28 * 56rem/750);
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* セレクトボックスのラッパー */
.element_select dd {
  position: relative;
  width: calc(553 * 56rem/750);
  margin: 0 auto;
}

/* 初期のセレクトボックスを非表示に */
.element_select select {
  appearance: none; /* ブラウザデフォルトのスタイルを無効化 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f9f9f9;
  border: 1px solid #fff;
  border-radius: calc(6 * 56rem/750);
  padding: calc(20 * 56rem/750) calc(40 * 56rem/750) calc(20 * 56rem/750) calc(20 * 56rem/750);
  font-size: calc(26 * 56rem/750);
  width: 100%;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.08em;
  color: #000;
}

.element_select select option {
  text-align: center;
}

/* セレクトボックスの矢印をカスタマイズ */
.element_select dd::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(30 * 56rem/750);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #000;
  pointer-events: none;
}


/*=======================================
               Responsive
========================================*/


/* only PC */

@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }
}


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

@media screen and (min-width: 768px) {

  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
  .header_inner {
  }

  .lp_contents {
    overflow: hidden;
    background: #afc9ce;
  }

  .main_section {
    width: calc(750 * 56rem/750);
    margin: auto;
  }

  .modal_item .modal_inner .swiper {
    overflow-y: scroll;
  }

  /* ---- スクロールバー ---- */
  .main_section .swiper-scrollbar {
    width: 120.8%;
  }

  .fixed_area {
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 160rem;
    height: 100vh;
    margin: 0 auto;
  }

  .fixed_area .fixed_left,
  .fixed_area .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 56rem) / 2);
    max-width: calc((160rem - 56rem) / 2);
    height: 100%;
  }

  .fixed_area .main_ttl {
    width:calc(250 * 56rem/750);
  }

}


/* only tablet */

@media screen and (min-width: 768px) and (max-width: 1200px) {}


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


/* only SP */

@media only screen and (max-width: 767px) {

  #Wrap {
    padding-top: calc(90*(100vw / 586));
  }
  .pc_only {
    display: none;
  }

  .share-txt{
    margin: 0!important;
  }


  /* ===================
    LP Contents
  =================== */
  .lp_contents {
    overflow: hidden;
    letter-spacing: 0;
  }

  .lp_contents sup {
    font-size: calc(10 * (100vw / 375));

  }

  /* ===================
    　Section Common
  =================== */
  .inner{
    width: 100%;
  }

   .contents {
    padding-top: 0;
  }


  /* ===================
         ANIME
  =================== */
  @keyframes tra3 {
    0% {
      transform: translateY(30px);
    }

    100% {
      transform: translateY(0);
    }
  }


}

/*--------------------------------
   Media Queries ( ~ 768px)
 --------------------------------*/
 @media only screen and (max-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 560));
  }
}

/*--------------------------------
   Media Queries (1400px ~ 1400px)
 --------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}