@charset "UTF-8";

:root{
  --lpHeaderHight: 10.2rem;
}
@media screen and (max-width:767px) {
  :root {
    --lpSetSize: (100vw / 750);
  }
}
@media screen and (min-width:768px) and (max-width:1400px) {
  :root {
    --lpSetSize: calc(1px * var(--ratio));
    --ratio: calc(460 / 750);
    --variable: calc(100vw / 1400);
  }
}
@media screen and (min-width:1401px){
  :root {
    --lpSetSize: calc(1px * var(--ratio));
    --ratio: calc(460 / 750);
    --variable: 1px;
  }
}

/*================================
  variables
=================================*/
#CE260220collection{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --color-white: #fff;
  --color-black: #000;
  --color-pink: #dbc3c9;
  --color-lightpink: #f7edf1;
  --color-darkpink: #d195a9;
  font-family: 'Crimson Text', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  color: var(--color-white);
}
#CE260220collection img,
#CE260220collection picture{
  display: inline-block;
  width: 100%;
  height: auto;
}
#CE260220collection video{
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  #CE260220collection a:hover{
    transition: .5s;
    opacity: .7;
  }
}
#CE260220collection span{
  display: inline-block;
}
#CE260220collection li{
  list-style: none;
}
#CE260220collection .imgOuter{
  overflow: hidden;
}
#CE260220collection .imgWrap{
  background-color: #fff;
  display: inline-block;
  width: 100%;
  line-height: 0;
}
#CE260220collection .noBgCont.imgWrap{
  background: none;
  display: block;
}
#CE260220collection .flexArea{
  display: flex;
  width: 100%;
}
#CE260220collection .gridWrap,
#CE260220collection .gridWrap_pc{
  display: grid;
  margin: 0 auto;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #CE260220collection .pcOnly {
    display: none!important;
  }
  #CE260220collection .flexAreaSp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE260220collection .gridWrapPc{
    display: block;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #CE260220collection .spOnly {
    display: none!important;
  }
  #CE260220collection .pcOnly {
    display: block;
  }
  #CE260220collection .flexAreaPc{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE260220collection .gridWrap,
  #CE260220collection .gridWrapPc{
    max-width: 126rem;
  }
}
/* end variables */

/*================================
  variables
=================================*/
@media screen and (min-width: 768px) {
  .header.is-fixed {
    position: fixed;
    transition: all 1000ms ease-out;
    transform: translateY(-100%);
  }
  .header.is-obverse {
    transform: translateY(-100%);
  }
  .header.is-reverse {
    transform: translateY(0%);
  }
}
/* end variables */

/*================================
  font-size
=================================*/
#CE260220collection [data-txt="lead"]{
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.07em;
  text-align: center;
}
#CE260220collection .sec_title {
  pointer-events: none;
}

/*******************************
creditLinks
*******************************/
#CE260220collection .creditArea{
  display: block;
  padding-top: calc(36 * var(--lpSetSize));
  position: relative;
  z-index: 3;
}

#CE260220collection .creditLinks{
  display: block;
  text-align: center;
  line-height: 1;
}

#CE260220collection .creditArea.alignRight .creditLinks{
  text-align: right;
}

#CE260220collection .creditArea.alignLeft .creditLinks{
  text-align: left;
}

#CE260220collection .creditLinks > a,
#CE260220collection .creditLinks > span{
  display: inline-block;
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--color-white);
  white-space: nowrap;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-decoration: none;
  font-feature-settings: "palt";
  vertical-align: bottom;
}

/* --- 要素間の横方向の余白 --- */
#CE260220collection .creditLinks > a + a,
#CE260220collection .creditLinks > span + span,
#CE260220collection .creditLinks > a + span,
#CE260220collection .creditLinks > span + a {
  margin-left: calc(17 * var(--lpSetSize)); /* イメージに合わせて少し広めに調整 */
}

/* --- 改行（br）が入った時の処理 --- */

/* 改行後の最初の要素の左余白を 0 にして揃える */
#CE260220collection .creditLinks > br + a,
#CE260220collection .creditLinks > br + span {
  margin-top: calc(21 * var(--lpSetSize));
  margin-left: 0; /* 強制的に左端に揃える */
}

/* 改行後の2つ目以降の要素には再び左余白を付ける */
#CE260220collection .creditLinks > br + a + a,
#CE260220collection .creditLinks > br + a + span,
#CE260220collection .creditLinks > br + span + a,
#CE260220collection .creditLinks > br + span + span {
  margin-left: calc(17 * var(--lpSetSize));
}

/* end font-size */

/*================================
  layout
=================================*/
#CE260220collection{
  padding-bottom: calc(40 * var(--lpSetSize));
  overflow: clip;
}
#CE260220collection .contWrap{
  background-color: var(--color-pink);
}

#CE260220collection [data-img]{
  position: relative;
}

/*========== mv ==========*/
#CE260220collection .fixedImg__inner{
  position: relative;
}
#CE260220collection .mvWrap{
  position: relative;
}
#CE260220collection .mvWrap__ttl{
  position: absolute;
  bottom: calc(125 * var(--lpSetSize));
  left: calc(128 * var(--lpSetSize));
  width: calc(500 * var(--lpSetSize));
  pointer-events: none;
}
#CE260220collection .intro_Wrap{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  padding-top: calc(105 * var(--lpSetSize));
}

/*========== block ==========*/
#CE260220collection .block-inner{
  width: calc(750 * var(--lpSetSize));
  position: relative;
  margin: 0 auto;
}
#CE260220collection [data-block="01"]{
  width: calc(750 * var(--lpSetSize));
  position: relative;
  margin: calc(146 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-block="01"] .sec_title {
  width: calc(58 * var(--lpSetSize));
  position: absolute;
  top: calc(264 * var(--lpSetSize));
  right: calc(39 * var(--lpSetSize));
  z-index: 3;
}
#CE260220collection [data-img="block01-slider"]{
  width: calc(615 * var(--lpSetSize));
  margin: calc(33 * var(--lpSetSize)) auto 0 0;
  position: relative;
  overflow: hidden;
}
#CE260220collection [data-img="block01-02"]{
  width: calc(690 * var(--lpSetSize));
  margin: calc(98 * var(--lpSetSize)) auto 0 calc(60 * var(--lpSetSize));
}
#CE260220collection [data-img="txt_img01"]{
  width: calc(143 * var(--lpSetSize));
  margin: calc(40 * var(--lpSetSize)) auto 0 calc(76 * var(--lpSetSize));
}
#CE260220collection [data-credit="block01"]{
  margin: calc(4 * var(--lpSetSize)) auto 0 calc(76 * var(--lpSetSize));
}

#CE260220collection [data-block="02"]{
  width: calc(750 * var(--lpSetSize));
  position: relative;
  margin: calc(218 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-block="02"] .sec_title01 {
  width: calc(158 * var(--lpSetSize));
  position: absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(78 * var(--lpSetSize));
  z-index: 3;
  pointer-events: none;
}
#CE260220collection [data-block="02"] .sec_title02 {
  width: calc(170 * var(--lpSetSize));
  position: absolute;
  top: calc(304 * var(--lpSetSize));
  left: calc(32 * var(--lpSetSize));
  z-index: 3;
  pointer-events: none;
}
#CE260220collection [data-img="block02-01"]{
  width: calc(615 * var(--lpSetSize));
  margin: 0 auto;
}
#CE260220collection [data-img="block02-02"]{
  width: calc(615 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-img="txt_img02"]{
  width: calc(532 * var(--lpSetSize));
  margin: calc(49 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block02"]{
  margin: calc(4 * var(--lpSetSize)) auto 0;
}

#CE260220collection [data-block="03"]{
  position: relative;
  margin-top: calc(218 * var(--lpSetSize));
  z-index: 1;
}
#CE260220collection [data-block="03"]::after{
  content: " ";
  display: block;
  width: 100%;
  height: calc(3600 * var(--lpSetSize));
  position: absolute;
  background-color: var(--color-lightpink);
  top: calc(428 * var(--lpSetSize));
  left: 0;
  z-index: -1;
}
#CE260220collection [data-img="block03-01"]{
  width: calc(646 * var(--lpSetSize));
  margin: 0 auto 0 calc(104 * var(--lpSetSize));
}
#CE260220collection [data-block="03"] .sec_title01 {
  width: calc(658 * var(--lpSetSize));
  margin: calc(60 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-img="block03-slider"]{
  width: calc(705 * var(--lpSetSize));
  margin: calc(60 * var(--lpSetSize)) auto 0 0;
  position: relative;
  overflow: hidden;
}
#CE260220collection [data-img="txt_img03"]{
  width: calc(448 * var(--lpSetSize));
  margin: calc(49 * var(--lpSetSize)) auto 0 calc(42 * var(--lpSetSize));
}
#CE260220collection [data-credit="block03"]{
  color: var(--color-darkpink);
  margin: calc(4 * var(--lpSetSize)) auto 0 calc(40 * var(--lpSetSize));
}
#CE260220collection [data-credit="block03"] a {
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--color-darkpink);
}

#CE260220collection [data-block="04"]{
  /* position: relative;
  margin-top: calc(218 * var(--lpSetSize));
  z-index: 1; */
  position: sticky;
  top: calc(-100 * var(--lpSetSize));
  z-index: 40;
  transform: translateZ(0);
}
#CE260220collection [data-img="block04-slider"]{
  width: calc(676 * var(--lpSetSize));
  margin: calc(218 * var(--lpSetSize)) auto 0;
  position: relative;
  overflow: hidden;
  border: solid calc(8 * var(--lpSetSize)) rgba(234, 206, 228, 0.75);
}
#CE260220collection [data-img="txt_img04"]{
  width: calc(461 * var(--lpSetSize));
  margin: calc(50 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block04"]{
  color: var(--color-darkpink);
  margin: calc(4 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block04"] a {
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--color-darkpink);
}

#CE260220collection [data-block="05"]{
  position: relative;
  top: 0;
  z-index: 50;
  border-radius: calc(50 * var(--lpSetSize)) calc(50 * var(--lpSetSize)) 0 0;
  margin-top: calc(216 * var(--lpSetSize));
  transform: translateZ(1px);
}
#CE260220collection [data-block="05"]::before{
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-lightpink);
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: calc(375 * var(--lpSetSize)) calc(375 * var(--lpSetSize)) 0 0;
}
#CE260220collection [data-img="block05-01"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
}
#CE260220collection [data-img="block05-02"]{
  width: calc(660 * var(--lpSetSize));
  margin: calc(80 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-block="05"] .sec_title01 {
  width: calc(623 * var(--lpSetSize));
  position: absolute;
  bottom: calc(226 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
#CE260220collection [data-img="txt_img05"]{
  width: calc(214 * var(--lpSetSize));
  margin: calc(151 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block05"]{
  color: var(--color-darkpink);
  margin: calc(4 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block05"] a {
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--color-darkpink);
}

#CE260220collection [data-block="06"]{
  padding-top: calc(218 * var(--lpSetSize));
}
#CE260220collection [data-block="06"]::before{
  content: "";
  width: 100%;
  height: calc(1294 * var(--lpSetSize));
  background: var(--color-lightpink);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#CE260220collection [data-block="06"] .sec_title01 {
  width: calc(61 * var(--lpSetSize));
  position: absolute;
  top: calc(568 * var(--lpSetSize));
  left: calc(34 * var(--lpSetSize));
  z-index: 2;
}
#CE260220collection [data-img="block06-01"]{
  width: calc(615 * var(--lpSetSize));
  margin: 0 auto 0 calc(135 * var(--lpSetSize));
}
#CE260220collection [data-img="block06-02"]{
  width: calc(615 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) auto 0 calc(135 * var(--lpSetSize));
}
#CE260220collection [data-img="txt_img06"]{
  width: calc(384 * var(--lpSetSize));
  margin: calc(50 * var(--lpSetSize)) calc(30 * var(--lpSetSize)) 0 auto;
}
#CE260220collection [data-credit="block06"]{
  width: calc(620 * var(--lpSetSize));
  margin: calc(2 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) 0 auto;
}


#CE260220collection [data-block="07"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  padding-top: calc(214 * var(--lpSetSize));
}
#CE260220collection [data-img="block07-01"]{
  width: calc(691 * var(--lpSetSize));
  margin: 0 auto;
}
#CE260220collection [data-img="block07-02"]{
  width: calc(630 * var(--lpSetSize));
  margin: calc(100 * var(--lpSetSize)) auto 0 calc(120 * var(--lpSetSize));
}
#CE260220collection [data-block="07"] .sec_title01 {
  width: calc(21 * var(--lpSetSize));
  position: absolute;
  top: calc(1276 * var(--lpSetSize));
  left: calc(59 * var(--lpSetSize));
  z-index: 2;
}
#CE260220collection [data-img="txt_img07"]{
  width: calc(143 * var(--lpSetSize));
  margin: calc(40 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) 0 auto;
}
#CE260220collection [data-credit="block07"]{
  width: calc(630 * var(--lpSetSize));
  margin: calc(2 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) 0 auto;
}

#CE260220collection [data-block="06"],
#CE260220collection [data-block="07"],
#CE260220collection [data-block="08"] {
  position: relative;
  z-index: 50;
  transform: translateZ(1px);
  background-color: var(--color-pink);
}

#CE260220collection [data-block="08"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  padding-top: calc(224 * var(--lpSetSize));
}
#CE260220collection [data-img="block08-01"]{
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto 0 calc(38 * var(--lpSetSize));
}
#CE260220collection [data-img="block08-02"]{
  width: calc(675 * var(--lpSetSize));
  margin: calc(100 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-block="08"] .sec_title01 {
  width: calc(213 * var(--lpSetSize));
  position: absolute;
  top: calc(830 * var(--lpSetSize));
  right: calc(36 * var(--lpSetSize));
  z-index: 2;
  pointer-events: none;
}
#CE260220collection [data-img="txt_img08"]{
  width: calc(136 * var(--lpSetSize));
  margin: calc(50 * var(--lpSetSize)) auto 0;
}
#CE260220collection [data-credit="block08"]{
  width: calc(675 * var(--lpSetSize));
  margin: calc(1 * var(--lpSetSize)) auto 0;
}

#CE260220collection .allBtn{
  width: calc(520 * var(--lpSetSize));
  margin: 0 auto;
  padding-block: calc(180 * var(--lpSetSize)) calc(118 * var(--lpSetSize));
}

/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  /*========== fixedArea ==========*/
  #Contents{
    padding-top: 5rem;
  }
  #CE260220collection .lpMainWrap{
    width: 100%;
    position: relative;
    display: flex;
    padding-bottom: 0;
  }
  #CE260220collection .fixedImg{
    position: sticky;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
  }
  #CE260220collection .fixedImg__inner{
    height: 100%;
  }
  #CE260220collection .fixedImg__inner a{
    position: sticky;
    top: 0;
  }
  #CE260220collection .mvWrap__img img{
    height: 100vh;
    object-fit: cover;
    object-position: top;
  }
  #CE260220collection .mvWrap__ttl{
    bottom: 16vh;
    /* left: 10.3vw; */
    width: 27vw;
    left: 50%;
    transform: translateX(-50%);
  }

  #CE260220collection .contWrap{
    margin: 0 0 0 auto;
    width: 50%;
    overflow: clip;
    z-index: 1;
    padding-top: calc(1 * (67.5rem / 750));
    padding-bottom: calc(220 * var(--lpSetSize));
  }
  #CE260220collection .contWrap__inner{
    /* width: calc(480 * (100vw / 1400));
    max-width: 67.5rem; */
    width: 100%;
    margin: 0 auto;
  }

  #CE260220collection [data-img="block06-01"]{
    margin: 0 auto 0 calc(136 * var(--lpSetSize));
  }
  #CE260220collection [data-img="block06-02"]{
    margin: calc(20 * var(--lpSetSize)) auto 0 calc(136 * var(--lpSetSize));
  }

  #CE260220collection [data-block="05"]::before {
    top: calc(205 * var(--lpSetSize));
    border-radius: 0;
  }
}
/* end layout */


/*================================
  slick
=================================*/
#CE260220collection .slider{
  width:100%;
  margin:0 auto;
}
#CE260220collection .slick-list{
  overflow: visible;
}
#CE260220collection .slider img{
  width:100%;
}
#CE260220collection [data-img="block07-slider"] .slick-list{
  padding-right: calc(110 * var(--lpSetSize))!important;
}
#CE260220collection .slider .slick-slide{
  height:auto!important;
}
/* end slick */

#CE260220collection .slide-container {
  margin: 0 auto;
  width: calc(590 * var(--lpSetSize));
  padding: calc(10 * var(--lpSetSize));
  height: calc(805 * var(--lpSetSize));
  background: var(--color-darkblue);
  overflow: hidden;
}
.slide-panel {
  width: calc(570 * var(--lpSetSize));
}
.slide-panel a {
  display: block;
}
.slide-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/*================================
  fadeIn
=================================*/
#CE260220collection [data-fade="nomal"]{
  opacity: 0;
  transition: all 0.5s ease;
}
#CE260220collection [data-fade="blur"]{
  opacity: 0;
  transform: translate(0, 0);
  filter: blur(5px);
  transition: all 1.1s ease;
}
#CE260220collection [data-fade="right"]{
  opacity: 0;
  transform: scale(1.1) translateX(-50px);
  filter: blur(5px);
  transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
#CE260220collection [data-fade="left"]{
  opacity: 0;
  transform: scale(1.1) translateX(50px);
  filter: blur(5px);
  transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
#CE260220collection [data-fade="top"]{
  opacity: 0;
  transform: scale(1.1) translateY(50px);
  filter: blur(5px);
  transition: all 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

#CE260220collection [data-delay="01"]{
  transition-delay: 0.1s;
}
#CE260220collection [data-delay="02"]{
  transition-delay: 0.2s;
}
#CE260220collection [data-delay="03"]{
  transition-delay: 0.3s;
}
#CE260220collection [data-delay="04"]{
  transition-delay: 0.4s;
}
#CE260220collection [data-delay="05"]{
  transition-delay: 0.5s;
}

#CE260220collection [data-fade="nomal"].js-scrollIn{
  opacity: 1;
}
#CE260220collection [data-fade="blur"].js-scrollIn{
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}
#CE260220collection [data-fade="right"].js-scrollIn,
#CE260220collection [data-fade="left"].js-scrollIn,
#CE260220collection [data-fade="top"].js-scrollIn {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translate(0, 0);
}

/* end fadeIn */

/* * --- Slick Dots (ページネーション) のスタイル ---
 * (JSで dots: true にした場合に適用されます) 
 */
.js-slider .slick-dots {
  position: absolute;
  bottom: calc(20 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
  
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: calc(12 * var(--lpSetSize));
}

.js-slider .slick-dots li {
  margin: 0;
  padding: 0;
}

/* ドット本体のボタン */
.js-slider .slick-dots li button {
  /* ボタンのテキスト（数字）を非表示にする */
  font-size: 0;
  line-height: 0;
  
  /* ドットのサイズ */
  width: calc(10 * var(--lpSetSize));
  height: calc(10 * var(--lpSetSize));
  
  /* 添付画像のような枠線のあるドット */
  border: 1px solid var(--color-darkpink);
  border-radius: 50%;      /* 円形にする */
  
  background: rgba(209, 149, 169, 0); /* 通常時の背景は透明 */
  padding: 0;
  cursor: pointer;
  
  /* 色が変わる際のアニメーション */
  transition: background-color 0.3s ease;
}

/* ★ アクティブ（現在地）のドット */
.js-slider .slick-dots li.slick-active button {
  background: var(--color-darkpink); /* 背景色を枠線と同じ色にする */
}

/* (オプション) ドットボタンの枠線を消す (slickデフォルト) */
.js-slider .slick-dots li button:focus {
  outline: none;
}

.mobile-fixed-background {
  /* PCでは非表示（モバイルでのみJSで表示） */
  display: none;
  
  /* ★ 画面全体に固定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* コンテンツの背後に配置 */
  
  /* ★ 背景画像スタイルをここに移動 */
  background-image: url(../img/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;

  /* ★ 初期状態ではすべてをクリップ（非表示） */
  clip-path: inset(100% 0 0 0);
  
  /* アニメーションのちらつき防止 */
  will-change: clip-path;
}

/* モバイル用のスタイル（例: 767px以下） */
@media only screen and (max-width: 767px) {
  #CE260220collection [data-block="03"] {
    
    /* ★ モバイルでは、要素自体の背景を無効化する */
    background-image: none !important;
    background-attachment: scroll !important;
  }
  
  /* ★ モバイルでのみ、JSで制御するヘルパーを表示する */
  .mobile-fixed-background {
    display: block;
    
    /* モバイルでの背景位置（必要なら 'center' に）*/
    background-position: center; 
  }
}

/* アニメーション前の初期状態 */
  #CE260220collection .anim-page-title path {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

/* is-activeクラスが付与されたらアニメーションを開始 */
  #CE260220collection .anim-page-title.active path {
  -webkit-animation: show-title 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          animation: show-title 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

  #CE260220collection .anim-page-title.active path:nth-of-type(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(8) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(9) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(11) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(12) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(13) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(14) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(15) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(16) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(17) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(18) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(19) {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}
  #CE260220collection .anim-page-title.active path:nth-of-type(20) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes show-title {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes show-title {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#CE260220collection .fadeInBlock{
  opacity: 0;
  transform: translate(0,calc(30 * var(--lpSetSize)));
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1),transform 1.25s cubic-bezier(0.33, 1, 0.68, 1);
}

#CE260220collection .fadeInBlock.leftIn{
  transform: translate(0, 0);
  opacity: 1;
}

#CE260220collection .fadeInBlock.rightIn{
  transform: translate(0, 0);
  opacity: 1;
}

#CE260220collection .fadeInBlock.topIn{
  transform: translate(0, 0);
  opacity: 1;
}

#CE260220collection .fadeInBlock.topIn .imgWrap{
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#CE260220collection .fadeInBlock.leftIn .imgWrap{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#CE260220collection .fadeInBlock.rightIn .imgWrap{
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#CE260220collection .fadeInBlock.topIn .imgWrap img,
#CE260220collection .fadeInBlock.leftIn .imgWrap img,
#CE260220collection .fadeInBlock.rightIn .imgWrap img{
  transform: translate3d(0, 0, 0);
  filter: blur(5px);
  transition: 
    transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#CE260220collection .fadeInBlock.view{
  opacity: 1;
  transform: translate(0,0);
}

#CE260220collection .fadeInBlock.topIn.view .imgWrap,
#CE260220collection .fadeInBlock.leftIn.view .imgWrap,
#CE260220collection .fadeInBlock.rightIn.view .imgWrap{
  clip-path: inset(0);
}

#CE260220collection .fadeInBlock.topIn.view .imgWrap img,
#CE260220collection .fadeInBlock.leftIn.view .imgWrap img,
#CE260220collection .fadeInBlock.rightIn.view .imgWrap img{
  transform: scale(1) translate3d(0, 0, 0);
  filter: blur(0);
}