@charset "UTF-8";

/* --- デフォルトCSS設定 --- */



#FU260306snoopy {

  --pc-width: 1920;

  --sp-width: 750;

  --pc-artboard-width: 750;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}



@media (min-width: 1921px) {

  #FU260306snoopy {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}



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

  #FU260306snoopy {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}



@media (max-width: 767px) {

  #FU260306snoopy {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#FU260306snoopy img {

  display: block;

  width: 100%;

  height: auto;

}



#FU260306snoopy h2,

#FU260306snoopy h3,

#FU260306snoopy p,

#FU260306snoopy li {

  margin-block: calc((1em - 1lh) / 2);

}



#FU260306snoopy .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

/* 

//////////////////////////////////////////////////////////////////////////////////////////

common settings

//////////////////////////////////////////////////////////////////////////////////////////

*/

#FU260306snoopy {

  position: relative;

  min-width: 100%;

  display: flex;

  --font-credit: "gotham", sans-serif;

  --font-jpn: zen-kaku-gothic-antique, sans-serif;

  --font-bold: 700;

  --font-black: 800;

  --green: #c1d7c5;

  --black: #000000;

  --white: #ffffff;

  background: var(--green);

  margin: 0 0 calc(200 * var(--formula)) 0;

}

#FU260306snoopy .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  width: calc(750 * var(--formula_pc));

  background: var(--green);

}

#FU260306snoopy [class*="teaser__inner-cont"] {

  display: flex;

  flex-direction: column;

  align-items: center;

}

#FU260306snoopy [class*="__credit"] {

  font-family: var(--font-credit);

  color: var(--black);

  font-size: calc(18 * var(--formula));

  line-height: 1;

  letter-spacing: 0.06em;

  text-align: center;

  font-weight: var(--font-black);

  display: flex;

  gap: calc(5 * var(--formula));

}

#FU260306snoopy [class*="__credit"] li:not(:last-child)::after {

  content: "/";

  margin: 0 calc(3 * var(--formula)) 0 0;

}

#FU260306snoopy [class*="__fixed-txt"] {

  position: absolute;

  font-family: var(--font-credit);

  color: var(--green);

  font-size: calc(30 * var(--formula));

  line-height: 1.4;

  letter-spacing: 0.09em;

  text-align: left;

  font-weight: var(--font-black);

  z-index: 10;

}

#FU260306snoopy [class*="__small-txt"] {

  font-family: inherit;

  color: inherit;

  font-size: calc(24 * var(--formula));

  line-height: 1.458;

  letter-spacing: 0.06em;

  text-align: inherit;

  font-weight: inherit;

  display: block;

}



#FU260306snoopy [class*="sec4__item-card"] span,

#FU260306snoopy [class*="sec4__item-card"] h4,

#FU260306snoopy [class*="sec4__item-card"] p,

#FU260306snoopy [class*="sec4__item-card"] small {

  font-family: var(--font-credit);

  color: var(--black);

  font-size: calc(18 * var(--formula));

  line-height: 1;

  letter-spacing: 0em;

  text-align: center;

  font-weight: var(--font-bold);

}

#FU260306snoopy [class*="sec4__item-num"] {

  font-size: calc(21 * var(--formula)) !important;

  text-decoration-line: underline;

  text-decoration-thickness: 1px;

  text-decoration-style: solid;

  text-decoration-color: var(--black);

  text-underline-offset: calc(12 * var(--formula));

  margin: 0 0 calc(44 * var(--formula)) 0;

}

#FU260306snoopy [class*="sec4__item-desc"] {

  margin: calc(40 * var(--formula)) 0 0 0;

}

#FU260306snoopy [class*="sec4__item-name"],

#FU260306snoopy [class*="sec4__item-price"] {

  font-size: calc(35.28 * var(--formula)) !important;

  display: flex;

  align-items: end;

  justify-content: center;

}

#FU260306snoopy [class*="sec4__item-colors"] {

  font-size: calc(16 * var(--formula)) !important;

  margin: calc(16 * var(--formula)) 0 calc(15 * var(--formula)) 0;

}



#FU260306snoopy [class*="sec4__item-yen"] {

  font-size: calc(20 * var(--formula)) !important;

  display: block;

  margin: 0 0 calc(5 * var(--formula)) calc(4 * var(--formula));

}



#FU260306snoopy [class*="__inner-cont--slide"],

#FU260306snoopy [class*="__inner-cont--absolute"],

#FU260306snoopy [class*="__inner-cont1--absolute"],

#FU260306snoopy [class*="__inner-cont2--absolute"] {

  position: relative;

}

#FU260306snoopy [class*="__inner-cont--slide"] [class*="-txt-"] {

  position: absolute;

  z-index: 10;

}

#FU260306snoopy .splide__pagination {

  padding: 0;

}

#FU260306snoopy .splide__pagination__page {

  height: calc(10 * var(--formula));

  width: calc(10 * var(--formula));

  margin: 0;

  opacity: 1;

  background: unset;

}

#FU260306snoopy .splide__pagination__page.is-active {

  transform: scale(1);

}

#FU260306snoopy [class*="__inner-cont--slide"] .splide__pagination {

  bottom: calc(-30 * var(--formula));

  gap: calc(12 * var(--formula));

}

#FU260306snoopy [class*="__inner-cont--slide"] .splide__pagination__page {

  border: solid 1px #333333;

}

#FU260306snoopy

  [class*="__inner-cont--slide"]

  .splide__pagination__page.is-active {

  background: #333333;

}

#FU260306snoopy .sec4 .splide__pagination {

  bottom: calc(-31 * var(--formula));

}



#FU260306snoopy .sec4 .splide__pagination {

  bottom: calc(21.5 * var(--formula));

  gap: calc(12 * var(--formula));

}

#FU260306snoopy .sec4 .splide__pagination__page {

  border: solid 1px #666666;

}

#FU260306snoopy .sec4 .splide__pagination__page.is-active {

  background: #666666;

}



#FU260306snoopy [class*="sec4__item-card"] {

  display: flex;

  flex-direction: column;

  align-content: center;

}



#FU260306snoopy [class*="-img-"] {

  background: var(--white);

}



#FU260306snoopy .lp-mv-area {

  position: sticky;

  top: var(--lpHeaderHeight);

  height: calc(100vh - var(--lpHeaderHeight));

  flex: 1;

  transition:

    top 0.4s cubic-bezier(0.25, 1, 0.5, 1),

    height 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: top, height;

}

#FU260306snoopy .lp-main-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow-x: clip;

}



#FU260306snoopy .lp-mv-btn-01 {

  width: calc(151 * var(--formula_pc));

  position: absolute;

  top: calc(421 * var(--formula_pc));

  left: calc(139 * var(--formula_pc));

  z-index: 10;

}

#FU260306snoopy .lp-teaser-btn-01 {

  display: none;

}

#FU260306snoopy .lp-mv-txt-01 {

  width: calc(262 * var(--formula_pc));

  position: absolute;

  top: calc(113 * var(--formula_pc));

  left: calc(95 * var(--formula_pc));

  z-index: 10;

}



#FU260306snoopy .lp-mv-img-01 {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  z-index: 1;

}



#FU260306snoopy .lp-mv-img-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



#FU260306snoopy .teaser-cont {

  /* margin: 0 0 calc(137 * var(--formula)) 0; */

  background: var(--green);

}



#FU260306snoopy .lp-teaser-img-01 {

  width: calc(750 * var(--formula));

  position: sticky;

  top: var(--lpHeaderHeight);

  z-index: 1;

  transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: top;

}

#FU260306snoopy .lp-teaser__wrapper {

  background: var(--green);

  padding-inline: 2px;

  box-sizing: content-box;

  z-index: 5;

  padding: 0 0 calc(137 * var(--formula)) 0;

}

#FU260306snoopy .lp-teaser-txt-01 {

  width: calc(354 * var(--formula));

  margin: calc(111 * var(--formula)) 0 0 0;

}



#FU260306snoopy .teaser__inner-cont1--vertical {

  gap: calc(24 * var(--formula));

  margin: calc(119 * var(--formula)) 0 0 0;

}



#FU260306snoopy .lp-teaser-txt-02 {

  width: calc(286 * var(--formula));

}



#FU260306snoopy .lp-teaser-txt-03 {

  width: calc(395 * var(--formula));

}



#FU260306snoopy .teaser__txt {

  font-family: var(--font-jpn);

  color: var(--black);

  font-size: calc(21 * var(--formula));

  line-height: 2.095;

  letter-spacing: 0.145em;

  text-align: center;

  font-weight: var(--font-bold);

  padding: calc(102 * var(--formula)) 0 calc(125 * var(--formula))

    calc(14 * var(--formula));

}



#FU260306snoopy .lp-teaser-txt-04 {

  width: calc(275 * var(--formula));

}



#FU260306snoopy .lp-teaser-txt-05 {

  width: calc(178 * var(--formula));

  margin: calc(55 * var(--formula)) 0 calc(25 * var(--formula))

    calc(-5 * var(--formula));

}



#FU260306snoopy .lp-teaser-txt-06 {

  width: calc(461 * var(--formula));

}



#FU260306snoopy .lp-teaser-txt-07 {

  width: calc(134 * var(--formula));

  margin: calc(60 * var(--formula)) 0 calc(21 * var(--formula)) 0;

}



#FU260306snoopy .lp-teaser-txt-08 {

  width: calc(371 * var(--formula));

}



#FU260306snoopy .sec1 {

  margin: 0 0 calc(126 * var(--formula)) 0;

  overflow: hidden;

  z-index: 10;

}



#FU260306snoopy .sec1__fixed-text-wrapper {

  position: relative; /* 固定テキストの基準 */

  width: 100%;

  overflow: hidden; /* はみ出た画像を隠す */

  margin: 0 0 calc(129 * var(--formula)) 0;

}



#FU260306snoopy .sec1-img-01 {

  width: calc(1371 * var(--formula));

  will-change: transform;

  transform: translate3d(0, 0, 0);

  z-index: 1;

  position: relative;

}



#FU260306snoopy .sec1__fixed-txt {

  position: absolute;

  right: calc(82 * var(--formula));

  bottom: calc(79 * var(--formula));

}



#FU260306snoopy .sec1__small-txt {

  margin: calc(2 * var(--formula)) 0 0 0;

}



#FU260306snoopy #sec1-slide,

#FU260306snoopy #sec2-slide,

#FU260306snoopy #sec3-slide {

  width: calc(600 * var(--formula));

  position: relative;

  z-index: 1;

}

#FU260306snoopy #sec1-slide .splide__slide,

#FU260306snoopy #sec2-slide .splide__slide,

#FU260306snoopy #sec3-slide .splide__slide {

  width: calc(600 * var(--formula));

}



#FU260306snoopy .splide__slide {

  background: var(--white);

  border-radius: 50%;

}



#FU260306snoopy .sec1-txt-01 {

  width: calc(251 * var(--formula));

  top: calc(-17 * var(--formula));

  left: calc(-9 * var(--formula));

  pointer-events: none;

}



#FU260306snoopy .sec1__credit {

  margin: calc(80 * var(--formula)) 0 0 0;

}



#FU260306snoopy .sec2 {

  margin: 0 0 calc(93 * var(--formula)) 0;

}



#FU260306snoopy .sec2-img-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}



#FU260306snoopy .sec2__fixed-txt1 {

  top: calc(123 * var(--formula));

  right: calc(40 * var(--formula));

}



#FU260306snoopy .sec2__fixed-txt2 {

  bottom: calc(72 * var(--formula));

  left: calc(83 * var(--formula));

}



#FU260306snoopy .sec2-txt-01 {

  width: calc(406 * var(--formula));

  align-self: start;

  margin: calc(205 * var(--formula)) 0 calc(39 * var(--formula))

    calc(60 * var(--formula));

}



#FU260306snoopy .sec2-img-02 {

  width: calc(750 * var(--formula));

  position: relative;

  z-index: 1;

}



#FU260306snoopy .sec2__fixed-txt3 {

  bottom: calc(49 * var(--formula));

  right: calc(67 * var(--formula));

}



#FU260306snoopy .sec2__inner-cont--slide {

  margin: calc(112 * var(--formula)) 0 calc(93 * var(--formula)) 0;

}



#FU260306snoopy .sec2-txt-02 {

  width: calc(205 * var(--formula));

  top: calc(4 * var(--formula));

  left: calc(21 * var(--formula));

  pointer-events: none;

}



#FU260306snoopy .sec3-img-01 {

  width: calc(750 * var(--formula));

  position: relative;

  z-index: 1;

}



#FU260306snoopy .sec3__fixed-txt {

  top: calc(75 * var(--formula));

  left: calc(59 * var(--formula));

}



#FU260306snoopy .sec3__credit {

  margin: calc(42 * var(--formula)) 0 calc(97 * var(--formula)) 0;

}



#FU260306snoopy .sec3-txt-01 {

  width: calc(372 * var(--formula));

  align-self: start;

  margin: calc(77 * var(--formula)) 0 calc(55 * var(--formula))

    calc(45 * var(--formula));

}



#FU260306snoopy .sec3-img-04 {

  width: calc(750 * var(--formula));

}



#FU260306snoopy .sec3-img-05 {

  width: calc(508 * var(--formula));

  margin: calc(130 * var(--formula)) 0 0 calc(-20 * var(--formula));

  border-radius: 50%;

}



#FU260306snoopy .sec4 {

  margin: calc(172 * var(--formula)) 0 0 0;

}



#FU260306snoopy .sec4-txt-01 {

  width: calc(450 * var(--formula));

  margin: 0 0 calc(98 * var(--formula)) calc(3 * var(--formula));

}



#FU260306snoopy .sec4__item {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 1fr;

  column-gap: calc(58 * var(--formula));

  row-gap: calc(118 * var(--formula));

}



#FU260306snoopy #sec4-slide1,

#FU260306snoopy #sec4-slide2,

#FU260306snoopy #sec4-slide3,

#FU260306snoopy #sec4-slide4 {

  width: calc(300 * var(--formula));

}

#FU260306snoopy #sec4-slide1 .splide__slide,

#FU260306snoopy #sec4-slide2 .splide__slide,

#FU260306snoopy #sec4-slide3 .splide__slide,

#FU260306snoopy #sec4-slide4 .splide__slide {

  width: calc(300 * var(--formula));

}



#FU260306snoopy .lp-footer {

  margin: calc(100 * var(--formula)) 0 calc(52 * var(--formula)) 0;

}



#FU260306snoopy .lp-footer-btn-01 {

  width: calc(183 * var(--formula));

  margin: 0 0 calc(83 * var(--formula)) calc(11 * var(--formula));

}



#FU260306snoopy .lp-footer-img-01 {

  width: calc(456 * var(--formula));

  z-index: 1;

  position: relative;

}



#FU260306snoopy .lp-footer-txt-01 {

  width: calc(205 * var(--formula));

  position: absolute;

  bottom: calc(168 * var(--formula));

  left: calc(-59 * var(--formula));

  z-index: 5;

  pointer-events: none;

}



#FU260306snoopy .lp-footer-txt-02 {

  width: calc(170 * var(--formula));

  margin: calc(82 * var(--formula)) 0 0 0;

}

/* 

//////////////////////////////////////////////////////////////////////////////////////////

animation settings

//////////////////////////////////////////////////////////////////////////////////////////

*/

#FU260306snoopy .typography svg > g {

  opacity: 0;

}

#FU260306snoopy .stagger-container > * {

  will-change: transform, opacity;

  transform: rotate(0.0001deg);

  position: relative; /* 必須：topを使えるようにする */

  display: block;

}

#FU260306snoopy .stagger-container > *,

#FU260306snoopy .scroll-fade-in {

  opacity: 0;

  visibility: hidden;

}

@media (max-width: 767px) {

  #FU260306snoopy .lp-mv-area {

    display: none;

  }

  #FU260306snoopy .lp-main-area {

    width: 100%;

  }

  #FU260306snoopy .sec-set {

    width: 100%;

  }

  #FU260306snoopy .lp-teaser-btn-01 {

    width: calc(150 * var(--formula));

    display: block;

    position: fixed;

    right: calc(40 * var(--formula));

    bottom: calc(40 * var(--formula));

    z-index: 100; /* 他の要素より上に表示 */

    transition: opacity 0.3s; /* GSAPを使わない場合の予備（任意） */

  }

}