@charset "utf-8";

/* ===== COLLECTION: CHEERFUL TYPOGRAPHIC DESIGNS ===== */

html, body { overflow-x: hidden; }
.collection {
  background-color: #d986ab;
  background-image: url(../images/top/characters/characters_bg.webp),
    linear-gradient(180deg,
      #7b7db3 0%,
      #867cb1 34%,
      #9b7eb0 50%,
      #b783ae 65%,
      #d986ab 86%,
      #d986ab 100%);
  background-size: 5rem, auto;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply, normal;
  overflow: hidden;
  padding-bottom: 0rem;
}
.collection picture { display: block; }

/* ===== PAGE CONTAINER (中央カラム＋縦グラデーション背景) ===== */
.collection_inner {
  max-width: none;
  margin: 0 auto;
  position: relative;
}

/* ===== HEADER OVERRIDE ===== */
.page-template-page-collection .site-header {
  background-color: #7b7db3;
  background-image: url(../images/top/characters/characters_bg.webp);
  background-size: 5rem;
  background-position: center;
  background-repeat: repeat;
  background-blend-mode: multiply;
}
/* ロゴを白に (インラインstyleを上書き) */
.page-template-page-collection .site-header svg path { fill: #fff !important; }

/* center-origin absolute base (個別に上書き) */
.collection_ac {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== SP BASE (Mobile First) ===== */
html { font-size: calc(100vw / 26.6); }

/* Header/Footer 補正 */
.page-template-page-collection .site-header { height: 4.4rem; }
.page-template-page-collection .site-header h2 { padding: 1.13rem 0; }
.page-template-page-collection .site-footer { padding: 2.84rem 1.42rem; }
.page-template-page-collection .footer_inner { max-width: 26.6rem; }
.page-template-page-collection .footer_nav { gap: 2.13rem; margin-bottom: 2.13rem; }
.page-template-page-collection .footer_nav_link { font-size: 0.99rem; padding-bottom: 0.14rem; }
.page-template-page-collection .footer_copy { font-size: 0.85rem; margin-bottom: 0.71rem; }
.page-template-page-collection .footer_copyright { font-size: 0.85rem; }

/* ===== KEY VISUAL ===== */
/* 縦積み(flex)。lead → logo → banner の順。logo/lights は負マージンで重ねる */
.collection_kv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;           /* SP: 外側左右の余白なし(全幅) */
  /* margin: 3rem auto 0; */
}
.collection_kv .collection_ac { position: relative; top: auto; left: auto; transform: none; }
.kv-banner-base, .kv-banner-base img { display: block; width: 100%; height: auto; }
.collection_kv_main  { width: 100%; z-index: 1; }

/* ===== レイヤー化バナー ===== */
.kv-banner { position: relative; width: 100%; }
/* バナー土台の下に影 */
.kv-banner-base img { filter: drop-shadow(0.3rem 1.5rem 0.9rem rgba(40, 26, 66, 0.5)); }
/* 前景パーツ群：土台(枠+グラデ)の上に %絶対配置で重ねる */
.kv-banner-fg { position: absolute; inset: 0; }
.kv-fg { position: absolute; height: auto; display: block; }
.f-deco_rainbow { left: 35.62%; top: -0.65%; width: 30.28%; }
.f-txt_stay-calm { left: 13.33%; top: 11.85%; width: 68.68%; }
.f-deco_sparkle { left: 15.97%; top: 65.42%; width: 74.1%; aspect-ratio: 2134 / 302; }
/* sparkle を個別キラキラに分割（各自独立アニメ） */
.kv-spark { position: absolute; display: block; height: auto; }
.kv-spark--1 { left: 0.33%;  top: 2.98%;  width: 7.41%; }
.kv-spark--2 { left: 92.27%; top: 19.21%; width: 7.36%; }
.kv-spark--3 { left: 7.83%;  top: 45.70%; width: 4.50%; }
.kv-spark--4 { left: 87.39%; top: 56.95%; width: 4.55%; }
.f-deco_star-01 { left: 4.79%; top: 42.05%; width: 5.49%; }
.f-deco_star-02 { left: 9.31%; top: 39.77%; width: 2.57%; }
.f-deco_star-03 { left: 27.78%; top: 3.25%; width: 5.49%; }
.f-deco_star-04 { left: 32.5%; top: 14.29%; width: 2.57%; }
.f-deco_star-05 { left: 73.96%; top: 13.47%; width: 3.96%; }
.f-deco_star-06 { left: 77.71%; top: 16.07%; width: 5.49%; }
.f-deco_star-07 { left: 85.76%; top: 43.99%; width: 2.57%; }
.f-deco_star-08 { left: 89.51%; top: 36.69%; width: 2.57%; }
.f-deco_flower-01 { left: 20.56%; top: 51.79%; width: 6.88%; }
.f-deco_flower-02 { left: 58.33%; top: 45.45%; width: 6.46%; }
.f-deco_flower-03 { left: 72.08%; top: 29.38%; width: 6.6%; }
.f-deco_butterfly { left: 72.92%; top: 46.75%; width: 9.03%; }
.f-deco_dot { left: 31.74%; top: 90.91%; width: 3.4%; }
.f-chara_left { left: 35.14%; top: 79.71%; width: 9.93%; }
.f-chara_center { left: 45.0%; top: 71.75%; width: 10.62%; }
.f-chara_right { left: 56.04%; top: 74.35%; width: 11.6%; }
.f-chara_chick { left: 48.75%; top: 18.67%; width: 4.1%; }
/* SP バナー前景パーツ配置 (SP banner原点 85,67 / 267×296 基準) */
.sf-rainbow { left: 31.09%; top: 12.5%;  width: 44.57%; }
.sf-deco    {left: 10.11%;top: 11.74%;width: 84.27%;aspect-ratio: 675 / 495;z-index: 1;}
.sf-text    {left: 0;right: 0;margin: auto;top: 19.26%;width: 98.13%;}
/* SP: sp-deco を9個のキラキラに分割（各自twinkle） */
.sp-spark { position: absolute; display: block; height: auto; }
.sp-spark--1 { left: 14.52%; top: 2.42%;  width: 8.00%; }
.sp-spark--2 { left: 79.70%; top: 9.70%;  width: 5.48%; }
.sp-spark--3 { left: 20.74%; top: 12.73%; width: 3.41%; }
.sp-spark--4 { left: 84.44%; top: 14.55%; width: 7.85%; }
.sp-spark--5 { left: 48.44%; top: 18.38%; width: 8.00%; }
.sp-spark--6 { left: 1.63%;  top: 69.70%; width: 8.89%; }
.sp-spark--7 { left: 9.33%;  top: 80.40%; width: 5.48%; }
.sp-spark--8 { left: 83.70%; top: 80.81%; width: 5.48%; }
.sp-spark--9 { left: 89.19%; top: 82.22%; width: 8.74%; }
/* SP: sp-text の花・蝶を分離（テキストは sp-text-only、装飾はPC webp流用） */
.sf-text > .sf-text-img { position: relative; display: block; width: 100%; height: auto; }
.sf-text > .kv-flower, .sf-text > .kv-butterfly { position: absolute; display: block; height: auto; }
.sp-tflower--teal   { left: 11.45%; top: 58.41%; width: 8.14%; }
.sp-tflower--yellow { left: 84.99%; top: 25.37%; width: 8.14%; }
.sp-tflower--white  { left: 65.65%; top: 51.03%; width: 7.63%; }
.sp-tbfly           { left: 85.50%; top: 51.92%; width: 13.74%; }
.sf-dot     { left: 8.61%;  top: 77.36%; width: 9.36%; }
.sf-cl      { left: 16.48%; top: 67.91%; width: 23.6%; }
.sf-cc      { left: 37.83%; top: 61.15%; width: 25.09%; }
.sf-cr      { left: 62.17%; top: 63.51%; width: 27.34%; }

/* ガーランド電飾 (上辺を collection_kv の底辺にぴったり) */
.collection_lights { position: relative; margin: 0 auto; z-index: 2; }
/* SP: 2本を左右にアンカー(重なり回避) */
.collection_lights--sp { width: 100%; padding-bottom: 20%; }
.collection_lights--sp img { position: absolute; top: 0; display: block; height: auto; }
.lights-sp-left  {left: 0;width: 65%;}
.lights-sp-right {right: 0;width: 70%;}
/* PC: 左右2本を両端にアンカー */
.collection_lights--pc { width: 100%; padding-bottom: 10%; }
.collection_lights--pc img { position: absolute; top: 0; display: block; height: auto; }
.lights-left  { left: -1%;  width: 50%; }
.lights-right { right: -1%; width: 50%; }

/* ===== BODY CANVAS (intro + 商品パーツをデザイン座標で絶対配置) ===== */
.collection_body {position: relative;z-index: 1;width: 100%;height: 166rem;}  /* SP: design body高さ */
.collection_body .b-part { display: none; }       /* PCパーツはSPで非表示 */
.collection_body .b-part-sp { display: block; position: absolute; }  /* SPパーツ */
.b-part .multiply-shadow, .b-part-sp .multiply-shadow { position: relative; display: block; z-index: 1; }
.b-part picture img, .b-part-sp picture img { display: block; width: 100%; height: auto; }
.collection_intro_heading {
  font-family: "Jost", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: #fffcdd;
  text-align: center;
  position: absolute; top: 0; left: 0; width: 100%; margin: 0; z-index: 300;
}
.collection_intro_desc {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 500;
  color: #fffcdd;
  text-align: center;
  position: absolute; top: 8rem; left: 0; width: 100%; z-index: 300;
}
/* SP本文パーツ配置 (原点 x85,y425 / 1単位=26.6/267rem) */
  .s1 { left:-0.0rem; top:131.1rem; width:14.2rem; }
  .s2 { left:10.6rem; top:69.6rem; width:16.0rem; }
  .s3 { left:-2.0rem; top:122.8rem; width:13.6rem; }
  .s4 { left:10.4rem; top:68.6rem; width:7.0rem; }
  .s5 { left:18.2rem; top:37.0rem; width:10.3rem; }
  .s6 { left:-0.0rem; top:27.0rem; width:14.2rem; }
  .s7 { left:10.5rem; top:19.9rem; width:14.5rem; }
  .s8 { left:9.6rem; top:20.8rem; width:14.5rem; }
  .s9 { left:9.6rem; top:20.8rem; width:14.5rem; }
  .s10 { left:10.5rem; top:120.9rem; width:14.5rem; }
  .s11 { left:9.6rem; top:121.8rem; width:14.5rem; }
  .s12 { left:9.6rem; top:121.8rem; width:14.5rem; }
  .s16 { left:-6.8rem; top:13.4rem; width:13.6rem; }
  .s17 { left:9.4rem; top:87.0rem; width:13.6rem; }
  .s18 { left:20.5rem; top:145.6rem; width:13.6rem; }
  .s19 { left:4.8rem; top:98.1rem; width:17.0rem; }
  .s20 { left:4.9rem; top:145.3rem; width:17.0rem; }
  .s21 { left:4.7rem; top:45.8rem; width:17.2rem; }
  .s22 { left:6.9rem; top:92.8rem; width:7.4rem; }
  .s23 { left:12.7rem; top:42.1rem; width:6.4rem; }
  .s24 { left:21.1rem; top:55.9rem; width:3.9rem; }
  .s25 { left:0.7rem; top:41.0rem; width:14.9rem; }
  .s26 { left:9.8rem; top:52.9rem; width:13.3rem; }
  .s27 { left:12.8rem; top:58.4rem; width:13.7rem; }
  .s28 { left:14.8rem; top:92.8rem; width:12.3rem; }
  .s29 {left:9.7rem;top: 98.5rem;width:12.7rem;}
  .s30 { left:15.8rem; top:102.6rem; width:11.8rem; }
  .s31 { left:1.6rem; top:101.7rem; width:12.6rem; }
  .s32 { left:16.2rem; top:120.5rem; width:5.6rem; }
  .s33 { left:11.9rem; top:125.0rem; width:6.1rem; }
  .s37 { left:2.7rem; top:72.0rem; width:14.5rem; }
  .s38 { left:2.0rem; top:71.4rem; width:14.5rem; }
  .s39 { left:2.0rem; top:71.4rem; width:14.5rem; }
  .s40 { left:2.2rem; top:68.3rem; width:15.9rem; }
  .s41 { left:16.9rem; top:74.9rem; width:8.6rem; }
  .s42 { left:8.9rem; top:22.4rem; width:17.6rem; }
  .s43 { left:1.9rem; top:133.0rem; width:9.1rem; }
  .s44 { left:22.6rem; top:44.1rem; width:1.2rem; }
  .s45 { left:3.7rem; top:93.0rem; width:1.2rem; }
  .s46 { left:15.2rem; top:141.7rem; width:1.3rem; }
  .s47 { left:22.5rem; top:116.6rem; width:1.2rem; }
  .s48 { left:2.3rem; top:156.3rem; width:1.2rem; }
  .s49 { left:4.2rem; top:37.9rem; width:1.2rem; }
  .s50 { left:22.8rem; top:5.6rem; width:1.3rem; }
  .s51 { left:21.1rem; top:47.1rem; width:0.8rem; }
  .s52 { left:24.2rem; top:87.2rem; width:0.8rem; }
  .s53 { left:2.2rem; top:95.5rem; width:0.8rem; }
  .s54 { left:20.3rem; top:118.1rem; width:0.8rem; }
  .s55 { left:7.0rem; top:119.8rem; width:0.8rem; }
  .s56 { left:17.8rem; top:143.4rem; width:0.8rem; }
  .s57 { left:4.3rem; top:68.6rem; width:0.8rem; }
  .s58 { left:2.0rem; top:40.1rem; width:0.8rem; }
  .s59 { left:4.1rem; top:12.7rem; width:0.8rem; }
  .s60 { left:24.2rem; top:49.1rem; width:1.2rem; }
  .s61 { left:1.5rem; top:66.2rem; width:1.2rem; }
  .s62 { left:2.0rem; top:11.2rem; width:1.2rem; }
  .s63 { left:16.0rem; top:17.3rem; width:1.0rem; }
  .s66 { left:3.4rem; top:87.2rem; width:1.0rem; }
  .s67 { left:20.0rem; top:36.7rem; width:1.0rem; }
  .s68 { left:20.9rem; top:36.9rem; width:1.5rem; }
  .s69 { left:12.5rem; top:72.7rem; width:1.0rem; }
  .s70 { left:12.1rem; top:23.6rem; width:0.6rem; }
  .s71 { left:13.5rem; top:73.1rem; width:1.4rem; }
  .s72 { left:11.0rem; top:22.2rem; width:1.4rem; }
  .s73 { left:11.6rem; top:36.6rem; width:1.9rem; }
  .s74 { left:13.6rem; top:38.1rem; width:1.8rem; }
  .s75 { left:20.4rem; top:21.1rem; width:1.9rem; }
  .s76 { left:12.9rem; top:88.3rem; width:1.9rem; }
  .s77 { left:2.7rem; top:72.8rem; width:1.8rem; }
  .s78 { left:2.4rem; top:24.2rem; width:6.2rem; }
  .s79 { left:11.2rem; top:113.6rem; width:9.2rem; }
  .s80 { left:11.0rem; top:69.8rem; width:5.2rem; }
  .s81 { left:19.6rem; top:135.7rem; width:0.9rem; }
  .s82 { left:20.7rem; top:136.5rem; width:1.6rem; }
  .s83 { left:11.1rem; top:124.7rem; width:0.6rem; }
  .s84 { left:11.8rem; top:123.0rem; width:1.4rem; }
  .s85 { left:1.6rem; top:141.4rem; width:15.2rem; }
  .s86 { left:13.9rem; top:145.2rem; width:8.8rem; }
  .s87 { left:2.4rem; top:97.7rem; width:4.5rem; }
  .s88 { left:2.2rem; top:18.3rem; width:6.2rem; }
  .s89 { left:19.1rem; top:12.9rem; width:7.0rem; }
  .s90 { left:19.1rem; top:80.2rem; width:6.8rem; }
  .s91 { left:3.5rem; top:59.5rem; width:7.8rem; }
  .s92 { left:14.1rem; top:150.0rem; width:11.6rem; }
  .s93 { left:9.1rem; top:157.6rem; width:4.2rem; }
  .s94 { left:17.6rem; top:48.7rem; width:4.2rem; }
  .s95 { left:1.4rem; top:122.0rem; width:7.7rem; }


/* ===== PC (DESKTOP) ===== */
@media (min-width: 769px) {
  html { font-size: min(calc(100vw / 144), 62.5%); }

  /* Header/Footer 補正リセット */
  .page-template-page-collection .site-header { height: 13rem; }
  .page-template-page-collection .site-header h2 { padding: 3.325rem 0; }
  .page-template-page-collection .site-footer { padding: 4rem 2rem; }
  .page-template-page-collection .footer_inner { max-width: none; }
  .page-template-page-collection .footer_nav { gap: 2rem; margin-bottom: 0; margin-left: 5rem; }
  .page-template-page-collection .footer_nav_link { font-size: 1.2rem; padding-bottom: 0.2rem; }
  .page-template-page-collection .footer_copy { font-size: 1rem; margin-bottom: 0; }
  .page-template-page-collection .footer_copyright { font-size: 1rem; }

  /* KV */
  .collection_kv {
    width: 144rem;   /* PC: 72vw 相当。1440超で固定(=1037px)し中央寄せ */
    margin: 0 auto;
    /* padding: 4rem 0 0; */
  }
  .collection_kv_main  { width: 100%; }

  /* Body canvas: design座標で絶対配置 (原点 col-left,y=902 / 1単位=0.1rem) */
  .collection_body {width: 144rem;height: 680rem;margin: 0 auto;}
  .collection_body .b-part { display: block; position: absolute; }
  .collection_body .b-part-sp { display: none; }
  .collection_intro_heading { position: absolute; top: 0; left: 0; width: 100%; font-size: 6rem; margin: 0; z-index: 300; }
  .collection_intro_desc { position: absolute; top: 20.8rem; left: 0; width: 100%; font-size: 1.8rem; padding: 0; z-index: 300; }
  .br-sp { display: none; }  /* SP専用改行はPCで非表示 */
  .p66 { left:53.6rem; top:639.0rem; width:21.5rem; }
  .p35_0 { left:110.7rem; top:147.2rem; width:5.3rem; }
  .p35_1 { left:104.7rem; top:160.0rem; width:3.4rem; }
  .p35_2 { left:117.5rem; top:168.6rem; width:4.9rem; }
  .p35_3 { left:92.5rem; top:166.6rem; width:18.9rem; }
  .p67 { left:28.2rem; top:464.9rem; width:31.1rem; }
  .p18_0 { left:70.4rem; top:43.6rem; width:63.4rem; }
  .p18_1 { left:66.1rem; top:48.1rem; width:63.5rem; }
  .p18_2 { left:66.0rem; top:48.1rem; width:63.5rem; }
  .p18_3 { left:63.2rem; top:55.0rem; width:76.7rem; }
  .p18_4 { left:111.5rem; top:117.6rem; width:4.1rem; }
  .p18_5 { left:115.7rem; top:118.4rem; width:6.7rem; }
  .p18_6 { left:76.9rem; top:60.4rem; width:2.6rem; }
  .p18_7 { left:72.1rem; top:54.0rem; width:6.1rem; }
  .p18_8 { left:74.9rem; top:117.3rem; width:8.1rem; }
  .p18_9 { left:83.7rem; top:123.6rem; width:7.9rem; }
  .p18_10 { left:113.2rem; top:49.3rem; width:8.5rem; }
  .p20_0 { left:70.4rem; top:474.8rem; width:63.5rem; }
  .p20_1 { left:66.0rem; top:479.2rem; width:63.5rem; }
  .p20_2 { left:66.0rem; top:479.2rem; width:63.5rem; }
  .p20_3 { left:94.9rem; top:473.3rem; width:24.5rem; }
  .p20_4 { left:75.0rem; top:492.4rem; width:26.8rem; }
  .p20_5 { left:108.2rem; top:538.8rem; width:4.1rem; }
  .p20_6 { left:113.0rem; top:542.2rem; width:6.7rem; }
  .p20_7 { left:71.6rem; top:491.6rem; width:2.5rem; }
  .p20_8 { left:75.0rem; top:484.3rem; width:6.0rem; }
  .p0 { left:56.8rem; top:253.6rem; width:87.2rem; }
  .p1 { left:44.5rem; top:252.3rem; width:33.5rem; }
  .p2 { left:61.5rem; top:335.3rem; width:61.5rem; }
  .p5 { left:0.0rem; top:71.7rem; width:70.3rem; }
  .p6 { left:27.2rem; top:146.6rem; width:77.1rem; }
  .p7 { left:27.2rem; top:379.1rem; width:77.1rem; }
  .p8 { left:33.1rem; top:577.3rem; width:77.1rem; }
  .p9 { left:10.8rem; top:469.8rem; width:61.4rem; }
  .p10 { left:4.5rem; top:133.3rem; width:63.0rem; }
  .p11 { left:112.1rem; top:1.0rem; width:5.3rem; }
  .p12 { left:26.9rem; top:121.0rem; width:5.3rem; }
  .p13 { left:17.8rem; top:130.3rem; width:3.4rem; }
  .p14 { left:26.8rem; top:16.2rem; width:3.4rem; }
  .p15 { left:17.8rem; top:8.9rem; width:4.9rem; }
  .p16 { left:95.1rem; top:30.4rem; width:4.1rem; }
  .p17 { left:98.7rem; top:107.5rem; width:64.9rem; }
  .p19 {left:0.0rem;top: 521.6rem;width:70.3rem;}
  .p21 { left:13.4rem; top:268.6rem; width:63.5rem; }
  .p22 { left:10.6rem; top:265.6rem; width:63.5rem; }
  .p23 { left:12.5rem; top:252.1rem; width:68.5rem; }
  .p24 { left:16.4rem; top:334.8rem; width:4.1rem; }
  .p25 { left:56.2rem; top:271.5rem; width:4.2rem; }
  .p26 { left:60.6rem; top:273.1rem; width:6.1rem; }
  .p27 { left:57.7rem; top:339.6rem; width:8.1rem; }
  .p28 { left:13.4rem; top:272.0rem; width:7.9rem; }
  .p29 { left:92.1rem; top:363.5rem; width:52.0rem; }
  .p30 {left:70.0rem;top: 386.5rem;width:54.0rem;}
  .p31 { left:96.0rem; top:404.6rem; width:50.2rem; }
  .p32 { left:5.7rem; top:383.0rem; width:53.2rem; }
  .p33 { left:108.4rem; top:8.5rem; width:29.8rem; }
  .p34 { left:26.2rem; top:201.8rem; width:35.2rem; }
  .p36 { left:97.1rem; top:304.1rem; width:30.1rem; }
  .p38 { left:63.9rem; top:181.4rem; width:56.3rem; }
  .p39 { left:77.2rem; top:204.8rem; width:58.1rem; }
  .p40 { left:24.0rem; top:239.7rem; width:3.4rem; }
  .p41 { left:11.0rem; top:230.2rem; width:4.9rem; }
  .p43 { left:123.0rem; top:335.6rem; width:3.4rem; }
  .p44 { left:113.9rem; top:454.7rem; width:5.4rem; }
  .p45 { left:104.4rem; top:460.9rem; width:3.4rem; }
  .p46 { left:34.9rem; top:359.7rem; width:5.3rem; }
  .p47 { left:28.2rem; top:370.3rem; width:3.4rem; }
  .p48 { left:30.1rem; top:377.8rem; width:19.2rem; }
  .p49 { left:111.5rem; top:586.4rem; width:61.5rem; }
  .p50 { left:84.6rem; top:565.8rem; width:5.3rem; }
  .p51 { left:16.1rem; top:644.1rem; width:5.3rem; }
  .p52 { left:95.9rem; top:573.0rem; width:3.4rem; }
  .p53 { left:75.4rem; top:609.9rem; width:51.2rem; }
  .p54 { left:18.3rem; top:566.1rem; width:64.7rem; }
  .p55 { left:32.6rem; top:57.6rem; width:26.7rem; }
  .p56 { left:54.9rem; top:137.7rem; width:28.9rem; }
  .p57 { left:111.8rem; top:194.6rem; width:17.5rem; }
  .p58 { left:79.5rem; top:285.7rem; width:37.0rem; }
  .p59 { left:57.2rem; top:361.5rem; width:33.2rem; }
  .p60 { left:45.6rem; top:431.1rem; width:41.7rem; }
  .p61 {left: 14.1rem;top:526.8rem;width:41.2rem;}
  .p62 { left:72.1rem; top:582.2rem; width:39.9rem; }
  .p63 { left:-23.0rem; top:21.8rem; width:61.5rem; }
  .p64 { left:13.5rem; top:37.7rem; width:31.4rem; }
  .p65 { left:47.2rem; top:257.7rem; width:25.5rem; }
}

/* ============================================================
   Animations (第1弾踏襲)  —  .js-anim ガード(JS無効時は全表示)
   ============================================================ */
/* 本文パーツ scroll-in（第1弾風に多方向。dirクラスはJSが位置から付与） */
.js-anim .b-part,
.js-anim .b-part-sp {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-anim .dir-up    { transform: translateY(2.4rem); }
.js-anim .dir-down  { transform: translateY(-2.4rem); }
.js-anim .dir-left  { transform: translateX(-2.6rem); }
.js-anim .dir-right { transform: translateX(2.6rem); }
.b-part.show,
.b-part-sp.show { opacity: 1; transform: none; }
/* アニメ不要パーツ（常時静止表示） */
.no-anim { opacity: 1 !important; transform: none !important; animation: none !important; }

/* intro テキスト scroll-in */
.js-anim .collection_intro_heading,
.js-anim .collection_intro_desc {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.collection_intro_heading.show,
.collection_intro_desc.show { opacity: 1; transform: none; }

/* KV reveal（load時 .kv-banner.reveal で発火・stagger は JS） */
.js-anim .kv-fg {
  opacity: 0;
  transform: translateY(0.9rem) scale(.96);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  backface-visibility: hidden;   /* Chrome: アニメ後のレイヤー降格→数px再スナップを防止 */
  will-change: transform;        /* reveal後のループ/twitch適用時も合成レイヤーを維持し続ける */
}
/* 終了状態を translateZ(0) にして合成レイヤーを維持（transform:none だと降格しズレる） */
.kv-banner.reveal .kv-fg { opacity: 1; transform: translateZ(0); }

/* PC版の虹のみアニメ除外（常時表示）。SP版(sf-rainbow)はアニメする */
.js-anim .f-deco_rainbow {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   ループ（フェードイン後）— アクセント程度の控えめな動き
   ※ scroll-in と干渉しないよう、本文は内側 .multiply-shadow に付与
   ============================================================ */
/* 4つ星 & KVの星：ふわっと点滅（控えめ） */
@keyframes kv-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .5;  transform: scale(.88); }
}
.kv-star.twinkle,
.kv-spark.twinkle { animation: kv-twinkle 2.6s ease-in-out infinite; }
.star4 .multiply-shadow { animation: kv-twinkle 2.6s ease-in-out infinite; }

/* 5つ星：第1弾踏襲のカクカク切替（steps）。速度はJSでバラ付き */
@keyframes star-rock {
  0%, 100% { transform: rotateZ(15deg); }
  50%      { transform: rotateZ(-15deg); }
}
/* 移動・回転系は親 .b-part に掛けて影(clone)も連動させる（scroll-inのtransformは上書きされfadeのみになる） */
.star5 { animation: star-rock 3s steps(1) infinite; transform-origin: 50% 50%; }

/* 装飾（軟らかめ・控えめ） */
@keyframes soft-sway  { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@keyframes soft-bob   { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-0.28rem); } }
@keyframes soft-drift { 0%,100% { transform: translate(0,0); }  50% { transform: translate(0.45rem,-0.12rem); } }
@keyframes soft-pulse { 0%,100% { transform: scale(1); }        50% { transform: scale(1.05); } }
@keyframes soft-float { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-0.45rem); } }
.k-flower    { animation: soft-sway 4.5s ease-in-out infinite; transform-origin: 50% 70%; }
.k-tree      { animation: soft-sway 5.5s ease-in-out infinite; transform-origin: 50% 90%; }
.k-butterfly { animation: soft-bob 3.2s ease-in-out infinite; }
.k-cloud     { animation: soft-drift 7s ease-in-out infinite; }
.k-heart     { animation: soft-pulse 2.8s ease-in-out infinite; }
/* 雲に乗ったキャラ(p33)・本文の虹(p64) は ふわふわ浮遊 */
.k-float, .k-rainbow { animation: soft-float 4s ease-in-out infinite; }

/* KV装飾（reveal後に .kv-loop を JS が付与） */
.kv-flower.kv-loop    { animation: soft-sway 4.5s ease-in-out infinite; transform-origin: 50% 70%; }
.kv-butterfly.kv-loop { animation: soft-bob 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .b-part, .js-anim .b-part-sp,
  .js-anim .collection_intro_heading, .js-anim .collection_intro_desc,
  .js-anim .kv-fg {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .kv-star.twinkle, .kv-spark.twinkle, .star4 .multiply-shadow,
  .star5, .k-flower, .k-tree, .k-butterfly, .k-cloud, .k-heart, .k-float, .k-rainbow,
  .kv-flower.kv-loop, .kv-butterfly.kv-loop { animation: none !important; }
}