@charset "UTF-8";
/* =========================================================
   Whipped Picnic × いつぬいもっふる LP
   ---------------------------------------------------------
   サイズはデザイン（SP幅 430px）を基準にした --u で指定しています。
   calc(var(--u) * 30) = デザイン上の 30px
   SP：画面幅 / 430　PC：中央カラム幅 / 430
========================================================= */

:root {
  --colw: 100vw;
  --u: calc(var(--colw) / 430);

  --c-brown: #c3b3ad;
  --c-pink: #f2cee1;
  --c-blue: #c9dcf5;
  --c-side: #e1f2da;

  --f-como: "como", "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --f-maru: "heisei-maru-gothic-std", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --f-script: "buffet-script", "Brush Script MT", cursive;
}

@media (min-width: 751px) {
  :root {
    --colw: max(400px, 33.594vw);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--c-side);
  color: var(--c-brown);
  font-family: var(--f-maru);
  font-weight: 800;
  font-size: calc(var(--u) * 13);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

/* ---------------------------------------------------------
   レイアウト（PC：左サイド / 中央カラム / 右サイド）
--------------------------------------------------------- */
.wrapper {
  display: flex;
  align-items: flex-start;
}

.main_col {
  position: relative;
  flex: 0 0 var(--colw);
  width: var(--colw);
  overflow: hidden;
  background: #fff;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--c-side);
}

.side--left {
  flex: 0 0 13.047vw;
}

.side--right {
  flex: 1 1 auto;
}

.side .star {
  position: absolute;
  width: calc(var(--u) * 21);
  animation: twinkle 3.2s ease-in-out infinite;
}

/* 左サイドの星 */
.side--left .star--1 { left: 74.9%; top: 5.1%; }
.side--left .star--2 { left: 15.6%; top: 24.8%; animation-delay: -1.1s; }
.side--left .star--3 { left: 62.3%; top: 45.3%; animation-delay: -2.2s; }
.side--left .star--4 { left: 34.7%; top: 93%; animation-delay: -0.6s; }

/* 右サイドの星 */
.side--right .star--1 { left: 45.8%; top: 1.7%; }
.side--right .star--2 { left: 8.9%; top: 9.3%; animation-delay: -1.4s; }
.side--right .star--3 { left: 78.2%; top: 10.4%; animation-delay: -2.4s; }
.side--right .star--4 { left: 90.9%; top: 29.3%; animation-delay: -0.8s; }
.side--right .star--5 { left: 25.2%; top: 39.8%; animation-delay: -1.9s; }
.side--right .star--6 { left: 78%; top: 52.2%; animation-delay: -0.3s; }
.side--right .star--7 { left: 16.8%; top: 55.8%; animation-delay: -2.7s; }
.side--right .star--8 { left: 92.2%; top: 82.9%; animation-delay: -1.2s; }
.side--right .star--9 { left: 73.5%; top: 86.5%; animation-delay: -2s; }
.side--right .star--10 { left: 15.4%; top: 91.8%; animation-delay: -0.5s; }

.side_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 430);
  height: calc(var(--u) * 805);
  transform: translate(-50%, -50%);
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.45; transform: scale(0.82) rotate(12deg); }
}

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

  .side {
    display: none;
  }

  .main_col {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   ロゴセット（FV / PC右サイド共通）
--------------------------------------------------------- */
.logo_set img {
  position: absolute;
}

.logo_set_wp { left: calc(var(--u) * 30); top: calc(var(--u) * 169); width: calc(var(--u) * 370); }
.logo_set_iinner { left: calc(var(--u) * 150); top: calc(var(--u) * 271); width: calc(var(--u) * 130); }
.logo_set_x { left: calc(var(--u) * 172); top: calc(var(--u) * 337); width: calc(var(--u) * 77.5); }
.logo_set_pattythree { left: calc(var(--u) * 128); top: calc(var(--u) * 443); width: calc(var(--u) * 173); }
.logo_set_itsunui { left: calc(var(--u) * 74); top: calc(var(--u) * 505.5); width: calc(var(--u) * 287.2); }

.logo_set_1,
.logo_set_2,
.logo_set_3 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(calc(var(--u) * 12));
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.logo_set.is-show .logo_set_1 { opacity: 1; transform: none; transition-delay: 0.8s; }
.logo_set.is-show .logo_set_2 { opacity: 1; transform: none; transition-delay: 1.8s; }
.logo_set.is-show .logo_set_3 { opacity: 1; transform: none; transition-delay: 2.8s; }

/* ---------------------------------------------------------
   FV：ズームしながら画像が切り替わる
--------------------------------------------------------- */
.fv {
  position: relative;
  isolation: isolate;
  height: calc(var(--u) * 805);
  overflow: hidden;
  background: #f2e6ee;
}

.fv_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fv_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(1.18, 1.18, 1);
  /* GPUのレイヤーで拡大縮小させ、毎フレームの再描画による縁のガタつきを防ぐ */
  will-change: transform;
  backface-visibility: hidden;
}

.fv_slide.is-active {
  opacity: 1;
  z-index: 1;
}

.fv_slide.is-active img,
.fv_slide.is-prev img {
  animation: fv-zoom 7.5s linear forwards;
}

/* 前の画像は下に残したまま、新しい画像を上からフェードイン（背景色が透けないように） */
.fv_slide.is-prev {
  opacity: 1;
  z-index: 0;
  transition: none;
}

/* 終わりを 1.02 にして、画像の端がFVの枠ぴったりに来ないようにする（縁のチラつき防止） */
@keyframes fv-zoom {
  from { transform: scale3d(1.18, 1.18, 1); }
  to { transform: scale3d(1.02, 1.02, 1); }
}

.fv_logo {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------------------------------------------------------
   チェック柄背景
--------------------------------------------------------- */
.photos--wp .photos_body,
.items--wp {
  --stripe: rgba(242, 216, 230, 0.5);
  background-color: #fbeef2;
}

.photos--it .photos_body,
.items--it {
  --stripe: rgba(210, 224, 242, 0.5);
  background-color: #eef1f8;
}

.numbers {
  --stripe: rgba(200, 224, 185, 0.5);
  background-color: #e9f1db;
}

.photos--wp .photos_body,
.photos--it .photos_body,
.items--wp,
.items--it,
.numbers {
  --check-size: calc(var(--u) * 76.4);
  background-image:
    linear-gradient(90deg, var(--stripe) 50%, transparent 50%),
    linear-gradient(0deg, transparent 50%, var(--stripe) 50%);
  background-size: var(--check-size) var(--check-size);
  background-position: calc(var(--u) * 9) 0, 0 calc(var(--u) * 19);
}

/* ---------------------------------------------------------
   フォトセクション：画像順番にフェードイン
--------------------------------------------------------- */
.band {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--u) * 102);
}

.band--pink { background: var(--c-pink); }
.band--blue { background: var(--c-blue); }

.band--pink img { width: calc(var(--u) * 290); }
.band--blue img { width: calc(var(--u) * 151.7); }

.photos_body {
  position: relative;
  height: calc(var(--u) * 1508);
}

.ph {
  position: absolute;
  overflow: hidden;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph--1 { left: calc(var(--u) * 30); top: calc(var(--u) * 60); width: calc(var(--u) * 370); height: calc(var(--u) * 278); }
.ph--2 { left: calc(var(--u) * 89); top: calc(var(--u) * 368); width: calc(var(--u) * 252); height: calc(var(--u) * 335); }
.ph--3 { left: calc(var(--u) * 30); top: calc(var(--u) * 733); width: calc(var(--u) * 370); height: calc(var(--u) * 278); }

.photos--wp .ph--4 { left: calc(var(--u) * 183); top: calc(var(--u) * 1041); width: calc(var(--u) * 188); height: calc(var(--u) * 250); z-index: 2; }
.photos--wp .ph--5 { left: calc(var(--u) * 60); top: calc(var(--u) * 1261); width: calc(var(--u) * 250); height: calc(var(--u) * 188); z-index: 1; }

.photos--it .ph--3 { left: calc(var(--u) * 60); width: calc(var(--u) * 250); height: calc(var(--u) * 250); }
.photos--it .ph--4 { left: calc(var(--u) * 120); top: calc(var(--u) * 953); width: calc(var(--u) * 250); height: calc(var(--u) * 188); z-index: 2; }
.photos--it .ph--5 { left: calc(var(--u) * 30); top: calc(var(--u) * 1171); width: calc(var(--u) * 370); height: calc(var(--u) * 278); }

.js-fade {
  opacity: 0;
  transform: translateY(calc(var(--u) * 30));
}

/* ---------------------------------------------------------
   全面写真：画像アップ → ズームアウト / テキストフェードイン
--------------------------------------------------------- */
.full {
  position: relative;
  height: calc(var(--u) * 805);
  overflow: hidden;
}

.full_img,
.full_img img {
  width: 100%;
  height: 100%;
}

.full_img img {
  object-fit: cover;
  transform: scale(1.6);
  transform-origin: 50% 40%;
  will-change: transform;
  backface-visibility: hidden;
}

.full_txt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 380);
  color: #fff;
  font-family: var(--f-como);
  font-weight: 800;
  font-size: calc(var(--u) * 17.3);
  line-height: calc(var(--u) * 20.8);
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(calc(var(--u) * 14));
}

/* ---------------------------------------------------------
   More moments：スライドショー
--------------------------------------------------------- */
.moments {
  position: relative;
  height: calc(var(--u) * 805);
  overflow: hidden;
}

.moments--pink { background: var(--c-pink); }
.moments--blue { background: var(--c-blue); }

.moments .star {
  position: absolute;
  z-index: 2;
  width: calc(var(--u) * 20.5);
  animation: twinkle 3.2s ease-in-out infinite;
}

.moments .star--1 { left: calc(var(--u) * 306); top: calc(var(--u) * 37); }
.moments .star--2 { left: calc(var(--u) * 44); top: calc(var(--u) * 83); animation-delay: -1.3s; }
.moments .star--3 { left: calc(var(--u) * 391); top: calc(var(--u) * 252); animation-delay: -2.1s; }
.moments .star--4 { left: calc(var(--u) * 138); top: calc(var(--u) * 578); animation-delay: -0.7s; }
.moments .star--5 { left: calc(var(--u) * 322); top: calc(var(--u) * 630); animation-delay: -2.6s; }
.moments .star--6 { left: calc(var(--u) * 44); top: calc(var(--u) * 660); animation-delay: -1.7s; }
.moments .star--7 { left: calc(var(--u) * 236); top: calc(var(--u) * 747); animation-delay: -0.2s; }

.moments_ttl {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 124);
  color: #fff;
  font-family: var(--f-como);
  font-weight: 800;
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 48);
  text-align: center;
}

.slideshow {
  position: absolute;
  left: calc(var(--u) * 30);
  top: calc(var(--u) * 218);
  width: calc(var(--u) * 370);
  height: calc(var(--u) * 370);
  overflow: hidden;
}

.slideshow_item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.slideshow_item:first-child {
  opacity: 1;
}

.slideshow_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 4.5s linear;
  will-change: transform;
  backface-visibility: hidden;
}

.slideshow.is-ready .slideshow_item {
  opacity: 0;
}

.slideshow.is-ready .slideshow_item.is-active {
  opacity: 1;
  z-index: 1;
}

.slideshow.is-ready .slideshow_item.is-active img {
  transform: scale(1);
}

/* ---------------------------------------------------------
   数字タップで画像切り替え（10周年LPと同様）
--------------------------------------------------------- */
.numbers {
  padding: calc(var(--u) * 75) 0 calc(var(--u) * 94);
}

.number-nav {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 22.3);
  margin-bottom: calc(var(--u) * 50);
}

.num-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border: calc(var(--u) * 1.8) solid #fff;
  border-radius: 50%;
  color: #fff;
  font-family: var(--f-como);
  font-weight: 800;
  font-size: calc(var(--u) * 24);
  line-height: 1;
  padding-top: calc(var(--u) * 1);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.num-btn.active {
  opacity: 1;
}

.photo-display {
  display: flex;
  gap: calc(var(--u) * 30);
  width: calc(var(--u) * 370);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;
}

.photo-display::-webkit-scrollbar {
  display: none;
}

.photo-display.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}

.photo-item {
  flex: 0 0 100%;
  height: calc(var(--u) * 550);
  scroll-snap-align: start;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------
   Lineup
--------------------------------------------------------- */
.lineup {
  min-height: calc(var(--u) * 805);
  padding: calc(var(--u) * 50) 0 calc(var(--u) * 40);
  background: #f1f1d9;
  text-align: center;
}

.lineup_ttl {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: calc(var(--u) * 83.8);
  line-height: calc(var(--u) * 100);
}

.lineup_imgs {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 20);
  margin-top: calc(var(--u) * 50);
}

.lineup_imgs .item_thumb {
  width: calc(var(--u) * 175);
  height: calc(var(--u) * 175);
}

.lineup_lead {
  margin-top: calc(var(--u) * 68);
  font-size: calc(var(--u) * 29.5);
  line-height: calc(var(--u) * 40);
  letter-spacing: 0.02em;
}

.lineup_mark {
  display: inline-block;
  padding: 0 calc(var(--u) * 12);
  background: linear-gradient(#fff, #fff) left bottom calc(var(--u) * 1) / 100% calc(var(--u) * 16) no-repeat;
  letter-spacing: 0.05em;
}

.lineup_mark .amp {
  font-size: calc(var(--u) * 25.8);
  letter-spacing: 0;
}

.lineup .btn_order {
  margin-top: calc(var(--u) * 51);
}

.lineup_note {
  margin-top: calc(var(--u) * 32);
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 23);
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
   商品一覧
--------------------------------------------------------- */
.items {
  text-align: center;
}

.items--wp {
  padding: calc(var(--u) * 50) 0 calc(var(--u) * 47.3);
}

.items--it {
  padding: calc(var(--u) * 35) 0 calc(var(--u) * 54);
}

.items_logo img {
  margin: 0 auto;
}

.items_logo--wp img { width: calc(var(--u) * 320); }
.items_logo--it img { width: calc(var(--u) * 151.7); }

.item_list {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--u) * 175));
  justify-content: center;
  gap: calc(var(--u) * 29) calc(var(--u) * 20);
  margin-top: calc(var(--u) * 35);
  text-align: left;
}

.item_thumb {
  overflow: hidden;
  background: #fff;
}

.item_list .item_thumb {
  width: calc(var(--u) * 175);
  height: calc(var(--u) * 175);
}

.item_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px);
  transform: scale(1.05);
  will-change: filter, transform;
}

.item_name {
  margin-top: calc(var(--u) * 11);
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 23);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.item_name .bracket {
  margin-left: -0.45em;
}

.items--wp .btn_order {
  margin-top: calc(var(--u) * 29);
}

.moffle {
  width: calc(var(--u) * 370);
  margin: calc(var(--u) * 35) auto 0;
  text-align: left;
}

.moffle .item_thumb {
  height: calc(var(--u) * 370);
}

.moffle .item_name {
  margin-top: calc(var(--u) * 11);
}

.items--it .btn_order {
  margin-top: calc(var(--u) * 37.7);
}

/* ---------------------------------------------------------
   ボタン
--------------------------------------------------------- */
.btn_order,
.btn_all {
  --shift: calc(var(--u) * 4);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 999px;
  font-family: var(--f-como);
  font-weight: 800;
  letter-spacing: 0.04em;
  /* 右下にずらした縁取りの影：1つ目が塗り、2つ目が縁取り */
  box-shadow:
    var(--shift) var(--shift) 0 0 var(--btn-bg),
    var(--shift) var(--shift) 0 calc(var(--u) * 1.5) var(--btn-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn_order {
  --btn-bg: #fff;
  --btn-line: var(--c-brown);
  width: calc(var(--u) * 172);
  height: calc(var(--u) * 39);
  border: calc(var(--u) * 1.5) solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--c-brown);
  font-size: calc(var(--u) * 24);
}

.btn_all {
  --btn-bg: var(--c-brown);
  --btn-line: #fff;
  width: calc(var(--u) * 240);
  height: calc(var(--u) * 46);
  margin-top: calc(var(--u) * 83);
  border: calc(var(--u) * 1.5) solid var(--btn-line);
  background: var(--btn-bg);
  color: #fff;
  font-size: calc(var(--u) * 28.8);
}

.btn_order span,
.btn_all span {
  padding-top: calc(var(--u) * 2);
}

@media (hover: hover) {
  .btn_order:hover,
  .btn_all:hover {
    --shift: calc(var(--u) * 1);
    opacity: 1;
    transform: translate(calc(var(--u) * 3), calc(var(--u) * 3));
  }
}

/* ---------------------------------------------------------
   動きを減らす設定
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fv_slide img,
  .full_img img,
  .slideshow_item img,
  .item_thumb img {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .logo_set_1,
  .logo_set_2,
  .logo_set_3,
  .js-fade,
  .full_txt {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .side .star,
  .moments .star {
    animation: none;
  }
}

/* GSAP が読み込めなかった場合 */
.no-gsap .js-fade,
.no-gsap .full_txt {
  opacity: 1;
  transform: none;
}

.no-gsap .full_img img {
  transform: none;
}

.no-gsap .item_thumb img {
  filter: none;
  transform: none;
}