@charset "UTF-8";

/* ==========================================================================
   c-petals / 背景の花びら装飾
   Figma「Petal」レイヤーの座標・回転角をそのまま反映。
   縦位置（top）は Figma のフレーム基準からの px 実寸。
   ※ % 指定にするとセクションの高さの違いで間隔が伸縮し、
     花びら同士が重なってしまうため px で固定している。
   装飾のみのため aria-hidden、クリックは透過。
   ========================================================================== */
.c-petals {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.c-petals__i {
  position: absolute;
  display: block;
  aspect-ratio: var(--petal-ratio, 1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* スクロール連動パララックス。
     --petal-y はグループに parallax.js が設定し（JS 無効時は 0＝静止）、
     --depth を花びらごとに変えることで動く距離に差をつけ、奥行きを出す。
     translate プロパティは transform（rotate 等）と独立して合成される。 */
  translate: 0 calc(var(--petal-y, 0px) * var(--depth, 1));
}

/* 深度（動く距離の倍率）。4 枚周期でばらけさせる */
.c-petals__i:nth-child(4n+1) { --depth: 1.45; }
.c-petals__i:nth-child(4n+2) { --depth: .55; }
.c-petals__i:nth-child(4n+3) { --depth: 1; }
.c-petals__i:nth-child(4n)   { --depth: 1.9; }

/* 花びらを敷くセクションは基準位置と重ね順を確保 */
.p-about,
.p-news,
.p-framework,
.p-contact { position: relative; }

/* 花びらより上に出す。ただし .u-visuallyHidden は position:absolute で
   フローから外れている前提の要素なので除外する。
   （除外しないと .p-contact の grid で見出しが 1 行ぶんのトラックを作り、
     ボタン群が gap 20px + 1px ぶん下へずれていた） */
.p-about > *:not(.c-petals):not(.u-visuallyHidden),
.p-news > *:not(.c-petals):not(.u-visuallyHidden),
.p-framework > *:not(.c-petals):not(.u-visuallyHidden),
.p-contact > *:not(.c-petals):not(.u-visuallyHidden) { position: relative; z-index: 1; }

/* About の花びらは円（.p-about__stage）基準で配置し、
   Figma の重ね順どおり Ellipse 1（白い円）より上に重ねる。 */
.c-petals--front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: 2;
}

/* 画像ごとの縦横比（height を width から算出するため） */
.c-petals__i[data-p="red2"]      { --petal-ratio: 600 / 411; }
.c-petals__i[data-p="red"]       { --petal-ratio: 600 / 410; }
.c-petals__i[data-p="bluegreen"] { --petal-ratio: 439 / 600; }
.c-petals__i[data-p="yellow"]    { --petal-ratio: 600 / 499; }
.c-petals__i[data-p="blue"]      { --petal-ratio: 434 / 600; }
.c-petals__i[data-p="green"]     { --petal-ratio: 434 / 600; }
.c-petals__i[data-p="pink"]      { --petal-ratio: 425 / 600; }
.c-petals__i[data-p="photo1"]    { --petal-ratio: 579 / 600; }
.c-petals__i[data-p="photo2"]    { --petal-ratio: 600 / 522; }
/* photo3（Figma: Liv My Project_260410_suzuki_4_image11）。
   TOP は petal-photo3-top.png（600×450）、下層は petal-photo3.png（600×522）。
   ここは 600/522 と書かれていたが実体は 600×450 で、TOP の f6 / f9 だけ
   縦横比が崩れていた。下層は petals-sub.css で画像を差し替えている。 */
.c-petals__i[data-p="photo3"]    { --petal-ratio: 600 / 450; }

/* PC でのみ表示する花びら */
.c-petals__i--pcOnly { display: none; }

/* ==========================================================================
   SP（Figma: 01_MLP_SP_TOP / 375px 基準）
   ========================================================================== */

/* About（白い円より背面） */
.c-petals--about .c-petals__i--a1 { left:78.552%; top:73px;   width:min(15.34%, 58px);  transform:translate(-50%,-50%) rotate(121.82deg); background-image:url("../img/petal/petal-bluegreen.png"); }
.c-petals--about .c-petals__i--a3 { left:2.356%;   top:682px; width:min(69.245%, 260px); transform:translate(-50%,-50%) rotate(0deg);      background-image:url("../img/petal/petal-photo1.png"); }
.c-petals--about .c-petals__i--a4 { left:105.165%; top:171px;  width:min(81.291%, 305px); transform:translate(-50%,-50%) rotate(-30.73deg); background-image:url("../img/petal/petal-red2.png"); }

/* About（白い円より前面 / 円 600px 基準の % ＝ Figma 実寸） */
.c-petals--about .c-petals__i--a5 { left:27.994%; top:3.410%;  width:13.305%; transform:translate(-50%,-50%) rotate(43.72deg); background-image:url("../img/petal/petal-blue.png"); }
.c-petals--about .c-petals__i--a6 { left:68.613%; top:97.477%; width:16.697%; transform:translate(-50%,-50%) rotate(176.3deg); background-image:url("../img/petal/petal-yellow.png"); }

/* お知らせ
   ラッパー（.p-news）の SP 上端は Figma の円下端 1364。
   従来は .p-about の padding が 13px 過大でラッパー原点が 1377 にずれており、
   さらに top 自体も別原点で計算されていたため 5 枚そろって −37px ずれていた。 */
.c-petals--news .c-petals__i--n1 { left:83.371%; top:248.80px;  width:min(56.874%, 213px); transform:translate(-50%,-50%) rotate(0deg);      background-image:url("../img/petal/petal-yellow.png"); }
.c-petals--news .c-petals__i--n2 { left:2.232%;  top:691.47px;  width:min(28.581%, 107px); transform:translate(-50%,-50%) rotate(159.85deg); background-image:url("../img/petal/petal-pink.png"); }
.c-petals--news .c-petals__i--n3 { left:-3.333%; top:1649px;    width:min(40.8%, 153px);   transform:translate(-50%,-50%) rotate(0deg);      background-image:url("../img/petal/petal-red.png"); }
.c-petals--news .c-petals__i--n4 { left:92.787%; top:1690.72px; width:min(21.183%, 79px);  transform:translate(-50%,-50%) rotate(-47.57deg); background-image:url("../img/petal/petal-green.png"); }
.c-petals--news .c-petals__i--f1 { left:27.336%; top:1696.08px; width:min(14.723%, 55px);  transform:translate(-50%,-50%) rotate(144.93deg); background-image:url("../img/petal/petal-blue.png"); }

/* マイリブの旅のかたち */
.c-petals--framework .c-petals__i--f2 { left:11.356%;  top:86px;  width:min(17.734%, 67px); transform:translate(-50%,-50%) rotate(-143.71deg); background-image:url("../img/petal/petal-pink.png"); }
.c-petals--framework .c-petals__i--f3 { left:94.52%;   top:137px; width:min(21.507%, 81px); transform:translate(-50%,-50%) rotate(72.82deg);   background-image:url("../img/petal/petal-photo2.png"); }
.c-petals--framework .c-petals__i--f4 { left:-11.164%; top:277px; width:min(21.591%, 81px); transform:translate(-50%,-50%) rotate(161.74deg);  background-image:url("../img/petal/petal-red2.png"); }
.c-petals--framework .c-petals__i--f5 { left:89.478%;  top:347px; width:min(9.654%, 36px);  transform:translate(-50%,-50%) rotate(-47.09deg);  background-image:url("../img/petal/petal-pink.png"); }
/* TOP の f6 だけは黄系ブロブ（TOP は暖色も使うパレットなので現状維持）。
   下層の photo3 を Figma 準拠の緑に差し替えた際に TOP を巻き込まないよう別ファイルにした */
.c-petals--framework .c-petals__i--f6 { left:76.13%;   top:399px; width:min(15.068%, 57px); transform:translate(-50%,-50%) rotate(-124.62deg); background-image:url("../img/petal/petal-photo3-top.png"); }
.c-petals--framework .c-petals__i--f7 { left:11.817%;  top:481px; width:min(23.783%, 89px); transform:translate(-50%,-50%) rotate(1.84deg);    background-image:url("../img/petal/petal-photo2.png"); }
.c-petals--framework .c-petals__i--f8 { left:101.913%; top:533px; width:min(19.375%, 73px); transform:translate(-50%,-50%) rotate(162.22deg);  background-image:url("../img/petal/petal-red.png"); }

/* 資料DL・お問い合わせ（ラッパー .p-contact の SP 上端＝ Figma のカード3下端 5710） */
.c-petals--contact .c-petals__i--c1 { left:15.501%; top:352.58px; width:min(19.345%, 73px); transform:translate(-50%,-50%) rotate(12.97deg);   background-image:url("../img/petal/petal-yellow.png"); }
.c-petals--contact .c-petals__i--c2 { left:88.093%; top:345.04px; width:min(14.530%, 54px); transform:translate(-50%,-50%) rotate(-129.89deg); background-image:url("../img/petal/petal-blue.png"); }

/* ==========================================================================
   PC（Figma: 01_MLP_PC_TOP / 1440px 基準）
   ========================================================================== */
/* PC の座標は「回転ノードの metadata の x/y を AABB の左上とみなす」誤りで
   作られていたため、最大 265px ずれていた。
   Figma の metadata が返す x/y は回転前ボックスの原点コーナーで、
   AABB の左上ではない。get_design_context が返す
     left / top / w / h（＝ AABB）と、内側の rotate + 回転前サイズ
   をそのまま使い、
     中心 = AABB左上 + (W/2, H/2)
     left(%) = 中心X ÷ 1440 × 100
     top(px) = 中心Y − セクションの Figma 原点
     width   = 回転前の幅（transform:rotate は箱を回すだけなので）
   で組み直したもの。セクション原点は
     About 845 / 円 1025・x350・740 / お知らせ 1765 / かたち 3952 / DL 6586。 */
@media (min-width: 768px) {
  .c-petals__i--pcOnly { display: block; }

  /* About（白い円より背面） */
  .c-petals--about .c-petals__i--a1 { left:74.276%; top:171.52px; width:min(9.515%, 137px);  }
  .c-petals--about .c-petals__i--a2 { left:4.328%;  top:337.66px; width:min(16.827%, 242px); transform:translate(-50%,-50%) rotate(-14.3deg); background-image:url("../img/petal/petal-yellow.png"); }
  .c-petals--about .c-petals__i--a3 { left:12.917%; top:760px;    width:min(30%, 432px);     }
  .c-petals--about .c-petals__i--a4 { left:92.908%; top:346.79px; width:min(43.257%, 623px); }
  .c-petals--about .c-petals__i--a7 { left:89.369%; top:728.92px; width:min(10.058%, 145px); transform:translate(-50%,-50%) rotate(-129.57deg); background-image:url("../img/petal/petal-pink.png"); }

  /* About（白い円より前面 / 円 740px・x350 基準の %） */
  .c-petals--about .c-petals__i--a5 { left:6.146%;  top:12.136%; width:28.593%; }
  .c-petals--about .c-petals__i--a6 { left:92.616%; top:85.099%; width:27.077%; }

  /* お知らせ */
  .c-petals--news .c-petals__i--n1 { left:84.132%; top:322px;     width:min(24.653%, 355px); }
  .c-petals--news .c-petals__i--n2 { left:8.289%;  top:379.30px;  width:min(9.583%, 138px);  }
  .c-petals--news .c-petals__i--n3 { left:4.201%;  top:1631.51px; width:min(21.597%, 311px); }
  .c-petals--news .c-petals__i--n4 { left:85.056%; top:1663.55px; width:min(13.259%, 191px); }
  .c-petals--news .c-petals__i--f1 { left:22.277%; top:1762.03px; width:min(7.821%, 113px);  }

  /* マイリブの旅のかたち */
  .c-petals--framework .c-petals__i--f2 { left:11.728%; top:49.64px;   width:min(10.652%, 153px); }
  .c-petals--framework .c-petals__i--f3 { left:73.188%; top:274.21px;  width:min(11.203%, 161px); }
  .c-petals--framework .c-petals__i--f4 { left:18.147%; top:553.10px;  width:min(11.250%, 162px); }
  .c-petals--framework .c-petals__i--f5 { left:70.561%; top:693.32px;  width:min(5.030%, 72px);   }
  .c-petals--framework .c-petals__i--f6 { left:63.609%; top:798.57px;  width:min(7.846%, 113px);  }
  .c-petals--framework .c-petals__i--f7 { left:30.112%; top:961.40px;  width:min(12.387%, 178px); }
  .c-petals--framework .c-petals__i--f8 { left:77.038%; top:1066.46px; width:min(10.091%, 145px); }
  /* Figma 2001:5347。人物の右上・画面右端にはみ出す（PC のみ） */
  .c-petals--framework .c-petals__i--f9 { left:95.449%; top:-15.52px;  width:min(21.879%, 315px); transform:translate(-50%,-50%) rotate(165.22deg); background-image:url("../img/petal/petal-photo3-top.png"); }

  /* 資料DL・お問い合わせ */
  .c-petals--contact .c-petals__i--c1 { left:10.004%; top:113.11px; width:min(11.009%, 159px); }
  .c-petals--contact .c-petals__i--c2 { left:91.236%; top:85.10px;  width:min(7.821%, 113px);  }
}

/* メニューの花びらはパネル外へのはみ出しをクリップし、
   スクロール領域を発生させない（Figma の見切れ表現を維持） */