/*
LP 共通ベース（PC/SP共通で読み込み）
*/
/* 1rem = 10px / BASE 800
   SP：max-device-width:767px で font-size と px固定の小パーツを vw */
.headline-l { display: none; }
.headline-l.align-l { display: block; }

.lp-box img {
  opacity: 1;
  width: 100%;
  max-width: none;
  height: auto;
  image-rendering: auto;
}

img[data-image] { opacity: 0; }

.lp-box a {
  display: block;
  transition: opacity 0.19s ease;
}
.lp-box a:hover { opacity: 0.4; }

/* 透明クリック領域（画像上のボタンにかぶせる） */
.lp-box .h-op {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  background: #fff;
}
.lp-box .h-op:hover { opacity: 0.4; }

.lp-box .lp-ab { position: absolute; }

.lp-box {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  color: #333;
  white-space: nowrap;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.lp-box div,
.lp-box nav,
.lp-box section { position: relative; }

.lp-box p>span,
.lp-box div>span { display: block; }

/*
セクション（ベース画像の比率・重なり）
*/
.atop { aspect-ratio: 800 / 1501; }
.block1 { aspect-ratio: 800 / 1334; margin-top: -8.3%; }
.block2 { aspect-ratio: 800 / 1334; margin-top: -18%; }
.item1 { aspect-ratio: 800 / 1570; margin-top: -14.5%; }
.item2 { aspect-ratio: 800 / 1567; margin-top: -15%; }
.item3 { aspect-ratio: 800 / 1567; margin-top: -15%; }
.item4 { aspect-ratio: 800 / 1536; margin-top: -15%; z-index: 2; }
.block3 { aspect-ratio: 800 / 2086; margin-top: -12%; z-index: 1; }

/*
atop
*/
.atop_lens1,
.atop_lens2,
.atop_lens3,
.atop_lens4 { width: calc(148 / 800 * 100%); top: 76.27%; }
.atop_lens1 { left: 11.5%; }
.atop_lens2 { left: 31%; }
.atop_lens3 { left: 50.5%; }
.atop_lens4 { left: 70%; }

/*
block1（Silicone Hydrogel）
*/
/* 見出しまわり（中のパーツは block1_head 基準） */
.block1_head { width: calc(691 / 800 * 100%); left: 7%; top: 9.3%; }
.block1 .block_head_ttl { width: calc(683 / 691 * 100%); left: 0.25%; top: 13%; }

.lp-box .block1_lead {
  left: 2.5%;
  top: 21.5%;
  font-size: 4.4rem;
}
.lp-box .block1_lead small {
  font-size: 0.62em;
  transform: translateY(0.1em);
}

.lp-box .block1_ga {
  left: 92.5%;
  top: 45.2%;
  font-size: 2.8rem;
}

.lp-box .block1_catch {
  left: 0;
  top: 59.6%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-box .block1_catch strong {
  margin-right: 0.3em;
  color: #fff;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 2px #77574f;
  paint-order: stroke;
  font-size: 3.1rem;
  font-weight: 900;
}
.lp-box .block1_catch span { font-size: 2.6rem; }

/* Silicone Hydrogel */
.block1 .block1_body_ttl2 { width: calc(528 / 800 * 100%); left: 17%; top: 42.88%; }

.lp-box .block1_sub {
  left: 0;
  top: 39.9%;
  width: 100%;
  padding-left: 0.07em;
  font-size: 2rem;
  letter-spacing: 0.2em;
}

.lp-box .block1_kana {
  left: 0;
  top: 48.5%;
  width: 100%;
  padding-left: 0.1em;
  font-size: 2.6rem;
  letter-spacing: 0.17em;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 3px #77574f;
  paint-order: stroke;
}

.lp-box .block1_note {
  left: 11%;
  top: 78.7%;
  font-size: 1.23rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: left;
}

/* レンズ（下から 水 → main → 星） */
.block1 .block1_lens_water,
.block1 .block1_lens_main { width: calc(500 / 800 * 100%); left: 21.5%; top: 51.7%; }

/* 水をゆっくり回転 */
.block1_lens_water img { animation: lensRotate 100s linear infinite; }
@keyframes lensRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 星は main の上に重ねて screen で合成（黒が透ける） */
.block1 .block1_lens_star {
  width: calc(356 / 800 * 100%);
  left: 33.5%;
  top: 58.35%;
  mix-blend-mode: screen;
}

/*
block2（LENS LINE UP）
*/
/* フィルム（目・No.1 はフィルム基準） */
.block2_film { width: calc(410 / 800 * 100%); left: 9.8%; top: 14.05%; }
.block2_no1 { width: calc(121 / 410 * 100%); left: 68.8%; top: -2.5%; z-index: 2; }

.block2_eye1,
.block2_eye2,
.block2_eye3,
.block2_eye4 { width: calc(281 / 410 * 100%); }
.block2_eye1 { left: 12%; top: 1.75%; }
.block2_eye2 { left: 13.21%; top: 25.8%; }
.block2_eye3 { left: 14.5%; top: 49.9%; }
.block2_eye4 { left: 15.5%; top: 74.1%; }

/* レンズ・NEW */
.block2_lens1,
.block2_lens2,
.block2_lens3,
.block2_lens4 { width: calc(172 / 800 * 100%); }
.block2_lens1 { left: 3.05%; top: 13.5%; }
.block2_lens2 { left: 3.5%; top: 31.9%; }
.block2_lens3 { left: 4%; top: 50.25%; }
.block2_lens4 { left: 5%; top: 68.6%; }

.block2_new1,
.block2_new2 { width: calc(111 / 800 * 100%); left: 6.25%; }
.block2_new1 { top: 61.09%; }
.block2_new2 { top: 79.61%; }

/* ラベル（カナ・スペックはラベル基準） */
.block2_label1,
.block2_label2,
.block2_label3,
.block2_label4 { width: calc(268 / 800 * 100%); left: 61.5%; }
.block2_label1 { top: 15.1%; }
.block2_label2 { top: 33.86%; }
.block2_label3 { top: 52.3%; }
.block2_label4 { top: 70.85%; }

.lp-box .block2 .ttl {
  left: 5.73%;
  top: 69.4%;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
  color: #77574f;
}
.lp-box .block2_label2 .ttl,
.lp-box .block2_label3 .ttl,
.lp-box .block2_label4 .ttl { top: 64.5%; }

.block2_spec1,
.block2_spec2,
.block2_spec3,
.block2_spec4 { left: 0; width: 100%; }
.block2_spec1 { top: 86.87%; }
.block2_spec2,
.block2_spec3,
.block2_spec4 { top: 83.56%; }

/*
block2 アニメ（nav に data-scl → .animated で順番に再生）
*/
/* 順番（指示書）：フィルム → 行ごとに レンズ → (NEW) → 目 → 英名 → カナ → スペック → 支持率No.1
   --t が各要素の開始時間。数字を直せば順番・間隔を調整できる */
.block2_lens1 { --t: 0.5s; }
.block2_eye1 img { --t: 0.6s; }
.block2_label1 > img { --t: 0.7s; }
.block2_label1 .ttl { --t: 0.8s; }
.block2_spec1 { --t: 0.9s; }

.block2_lens2 { --t: 1s; }
.block2_eye2 img { --t: 1.1s; }
.block2_label2 > img { --t: 1.2s; }
.block2_label2 .ttl { --t: 1.3s; }
.block2_spec2 { --t: 1.4s; }

.block2_lens3 { --t: 1.5s; }
.block2_new1 { --t: 1.6s; }
.block2_eye3 img { --t: 1.7s; }
.block2_label3 > img { --t: 1.8s; }
.block2_label3 .ttl { --t: 1.9s; }
.block2_spec3 { --t: 2s; }

.block2_lens4 { --t: 2.1s; }
.block2_new2 { --t: 2.2s; }
.block2_eye4 img { --t: 2.3s; }
.block2_label4 > img { --t: 2.4s; }
.block2_label4 .ttl { --t: 2.5s; }
.block2_spec4 { --t: 2.6s; }

.block2_no1 { --t: 2.8s; }

/* 登場前は隠す */
.block2_film,
.block2_lens1, .block2_lens2, .block2_lens3, .block2_lens4,
.block2_new1, .block2_new2, .block2_no1,
.block2_film a img,
.block2 .ttl,
.block2 [class^="block2_label"] > img,
.block2 [class^="block2_spec"] { opacity: 0; }

/* フィルム：映写機から出たネガが飛んでくる */
.block2.animated .block2_film {
  transform-origin: 50% 0%;
  animation: filmFly 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes filmFly {
  0% { opacity: 0; transform: perspective(1000px) translate(-40%, 100%) rotateY(5deg) rotateX(80deg) scale(0.2, 0.7); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: perspective(1000px) translate(0, 0) rotateY(0deg) rotateX(0deg) scale(1); }
}

/* レンズ：flip_in と同じ Y軸1回転 */
.block2.animated [class^="block2_lens"] {
  animation: b2Lens 0.9s cubic-bezier(0.33, 1, 0.68, 1) var(--t) both;
}
@keyframes b2Lens {
  0% { opacity: 0; transform: perspective(800px) rotateY(0deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: perspective(800px) rotateY(360deg); }
}

/* NEW：ポン */
.block2.animated [class^="block2_new"] {
  animation: b2Pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t) both;
}
@keyframes b2Pop {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* 目：スライドが映るように（白とび→落ち着く） */
.block2.animated .block2_film a img {
  animation: b2Eye 0.6s ease-out var(--t) both;
}
@keyframes b2Eye {
  0% { opacity: 0; transform: scale(1.08); filter: brightness(1.8) blur(3px); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

/* 英名・カナ・スペック：move_up と同じ動き */
.block2.animated [class^="block2_label"] > img,
.block2.animated .ttl,
.block2.animated [class^="block2_spec"] {
  animation: b2Up 1s cubic-bezier(0.25, 1, 0.5, 1) var(--t) both;
}
@keyframes b2Up {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 支持率No.1：最後に飛び出して揺れ続ける（参考：fancl 推しビタミン） */
.block2.animated .block2_no1 {
  animation:
    b2No1 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t) both,
    b2No1Loop 3s ease-in-out calc(var(--t) + 0.8s) infinite;
}
@keyframes b2No1 {
  0% { opacity: 0; transform: scale(0) rotate(-40deg); }
  60% { opacity: 1; transform: scale(1.25) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes b2No1Loop {
  0%, 70%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  77% { transform: scale(1.12) rotate(-8deg); }
  84% { transform: scale(0.96) rotate(6deg); }
  91% { transform: scale(1.03) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .block2.animated * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

/*
item
*/
/* パーツ幅 */
.item1_brand { width: calc(551 / 800 * 100%); }
.item2_brand { width: calc(558 / 800 * 100%); }
.item3_brand { width: calc(458 / 800 * 100%); }
.item4_brand { width: calc(525 / 800 * 100%); }

.item1_lens,
.item2_lens,
.item3_lens,
.item4_lens { width: calc(270 / 800 * 100%); }

.item1_spec,
.item2_spec,
.item3_spec,
.item4_spec { width: calc(442 / 800 * 100%); }

.item3_new,
.item4_new { width: calc(151 / 800 * 100%); }

/* 位置（4つ共通） */
.item1_brand,
.item2_brand,
.item3_brand,
.item4_brand { left: 3.8%; top: 5.86%; }

.item1_lens,
.item2_lens,
.item3_lens,
.item4_lens { left: 70.25%; top: 7.95%; }

.item1_spec,
.item2_spec,
.item3_spec,
.item4_spec { left: 40.9%; top: 55.85%; }

.item3_new { left: 76.9%; top: 22.2%; }

/* item4 は高さが 1536 なので top を換算 */
.item4_brand { top: 5.99%; }
.item4_lens { top: 8.13%; }
.item4_spec { top: 57.08%; }
.item4_new { left: 77.5%; top: 22.51%; }
.lp-box .item4 .color { top: 14.21%; }
.lp-box .item4 .catch { top: 64.9%; }
.lp-box .item4 .msg { top: 68.89%; }

/* カタカナ名 */
.lp-box .color {
  left: 9%;
  top: 13.9%;
  font-size: 2.85rem;
  letter-spacing: 0.05em;
  color: #b79f3b;
}
.lp-box .item2 .color { color: #b5733c; }
.lp-box .item3 .color { color: #c6738b; }
.lp-box .item4 .color { color: #5674a5; }

/* キャッチ・本文 */
.lp-box .catch {
  left: 0;
  top: 63.6%;
  width: 100%;
  font-size: 3rem;
  letter-spacing: 0.1em;
  color: #77574f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-box .catch strong {
  display: inline;
  color: #fff;
  -webkit-text-stroke: 2px #77574f;
  paint-order: stroke;
  font-size: 4rem;
  font-weight: 900;
}

.lp-box .msg {
  left: 0;
  top: 67.4%;
  width: 100%;
  font-size: 2.1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #77574f;
}

/*
block3（Silicone Lens Spec）
*/
.block3_spec1 { width: calc(338 / 800 * 100%); left: 7.69%; top: 15.92%; }
.block3_spec2 { width: calc(343 / 800 * 100%); left: 50%; top: 15.92%; }
.block3_spec3 { width: calc(338 / 800 * 100%); left: 7.69%; top: 32.17%; }
.block3_spec4 { width: calc(343 / 800 * 100%); left: 50%; top: 32.17%; }
.block3_spec5 { width: calc(338 / 800 * 100%); left: 7.69%; top: 41.27%; }
.block3_spec6 { width: calc(343 / 800 * 100%); left: 50%; top: 41.27%; }
.block3_spec7 { width: calc(338 / 800 * 100%); left: 7.69%; top: 50.38%; }
.block3_spec8 { width: calc(343 / 800 * 100%); left: 50%; top: 50.38%; }

/* ボックス内のテキスト（ボックス基準。left + width/2 が文字の中心） */
.block3_spec1 .spec_in { left: 0; width: 100%; top: 46.3%; }
.block3_spec2 .spec_in { left: 0; width: 100%; top: 62.6%; }
.block3_spec3 .spec_in { left: 40%; width: 60%; top: 26.6%; }
.block3_spec4 .spec_in { left: 30%; width: 70%; top: 17%; }
.block3_spec5 .spec_in { left: 40%; width: 60%; top: 17.6%; }
.block3_spec6 .spec_in { left: 34%; width: 66%; top: 18.6%; }
.block3_spec7 .spec_in { left: 38%; width: 62%; top: 14.7%; }
.block3_spec8 .spec_in { left: 34%; width: 66%; top: 14.7%; }

.lp-box .spec_in h3 {
  margin: 0 0 1.2rem;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: #af7e1c;
}
.lp-box .spec_in .big {
  display: block;
  font-size: 4rem;
}
.lp-box .spec_in small { font-size: 0.6em; letter-spacing: 0.1em; }
.lp-box .spec_in p {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.55;
  letter-spacing: 0.1em;
  color: #77574f;
}

/* 見出しサイズ（ボックス別） */
.lp-box .block3_spec2 h3,
.lp-box .block3_spec3 h3,
.lp-box .block3_spec5 h3,
.lp-box .block3_spec7 h3,
.lp-box .block3_spec8 h3 { font-size: 2.6rem; }
.lp-box .block3_spec4 h3,
.lp-box .block3_spec6 h3 { font-size: 2.4rem; }
.lp-box .block3_spec4 h3 { padding-left: 0.7em; }
.lp-box .block3_spec7 h3 { line-height: 1.1; }

/* 本文の調整（ボックス別） */
.lp-box .block3_spec1 p { margin-top: -1.5%; }
.lp-box .block3_spec4 p { padding-left: 1em; }
.lp-box .block3_spec4 p,
.lp-box .block3_spec5 p,
.lp-box .block3_spec6 p,
.lp-box .block3_spec8 p { line-height: 1.4; }
.lp-box .block3_spec8 p { letter-spacing: 0.18em; }

/*
special（3箱同時購入キャンペーン）
*/
.special {
  left: 0;
  top: 63.37%;
  width: 100%;
  aspect-ratio: 800 / 218;
  color: #6b4f45;
}
.special_in0 { width: calc(171 / 800 * 100%); left: 7.49%; top: 2.29%; }
.special_in1 { width: calc(361 / 800 * 100%); left: 45.19%; top: 0; }
.special_in2 { width: calc(201 / 800 * 100%); left: 54.93%; top: 71.81%; }

.lp-box .special_lead {
  left: 7.5%;
  top: 27.2%;
  font-size: 4.2rem;
  letter-spacing: 0.045em;
}
.lp-box .special_lead em {
  font-weight: 900;
  font-size: 5rem;
}

.lp-box .special_point {
  left: 20.4%;
  top: 75.85%;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
}

.lp-box .special_note {
  left: 19.73%;
  top: 90.57%;
  font-size: 1.2rem;
}

.lp-box .special_tax {
  left: 81.4%;
  top: 78.5%;
  width: 8.5%;
  aspect-ratio: 100 / 60;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #77574f;
}

/* 特別価格の丸 */
.lp-box .special_badge {
  left: 45.82%;
  top: 71.81%;
  width: calc(64 / 800 * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #77574f;
  background: #fff;
  color: #77574f;
  font-size: 1.6rem;
  line-height: 1.2;
}
.lp-box .special_badge span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

/*
スクロールアニメ（登場）
*/
/* 使い方：要素に init js_○○ と data-scl。画面の80%位置に来ると script.js が .animated を付ける
   遅延は data-delay="0.1"〜"0.6" */
.lp-box .init {
  will-change: transform, opacity;
  opacity: 0;
}

/* フェード */
.lp-box .init.js_fade { transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1); }
.lp-box .init.js_fade2 { transition: opacity 0.3s cubic-bezier(0.45, 0, 0.55, 1); }
.lp-box .init.js_fade.animated,
.lp-box .init.js_fade2.animated { opacity: 1; }

/* ぼかし */
.lp-box .init.js_blur {
  transition: all 1.2s cubic-bezier(0.45, 0, 0.55, 1);
  filter: blur(5px);
}
.lp-box .init.js_blur.animated {
  opacity: 1;
  filter: blur(0px);
}

/* 拡大して登場 */
.lp-box .init.js_scale_in {
  transform: scale(0.8);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s;
}
.lp-box .init.js_scale_in2 {
  transform: scale(0.1, 0.1) translate(10%, 20px);
  transition: transform 0.6s cubic-bezier(0.25, 1.2, 0.5, 1), opacity 0.3s;
}
.lp-box .init.js_scale_in3 {
  transform: scale(0.5);
  transform-origin: center bottom;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
.lp-box .init.js_scale_up {
  transform: translate(0px, 40px) scale(0.8);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s;
}
.lp-box .init.js_scale_up3 {
  transform: scale(0.8);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s;
}
.lp-box .init.js_scale_in.animated,
.lp-box .init.js_scale_in2.animated,
.lp-box .init.js_scale_in3.animated,
.lp-box .init.js_scale_up.animated,
.lp-box .init.js_scale_up3.animated {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* 縮小して登場 */
.lp-box .init.js_scale_down {
  transform: translateY(20px) scale(1.05);
  transition: transform 1s cubic-bezier(0.45, 0, 0.55, 1), opacity 1s;
}
.lp-box .init.js_scale_down2 {
  transform: scale(1.3);
  transition: transform 1s cubic-bezier(0.45, 0, 0.55, 1), opacity 1s;
}
.lp-box .init.js_scale_down.animated,
.lp-box .init.js_scale_down2.animated {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 角から飛び出す（ハートビーム等） */
.lp-box .init.js_scale_left_up,
.lp-box .init.js_scale_right_up,
.lp-box .init.js_scale_left_down,
.lp-box .init.js_scale_right_down {
  transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1), opacity .3s;
}
.lp-box .init.js_scale_left_up    { transform-origin: right bottom; transform: scale(0.2) translate(50%, 5%); }
.lp-box .init.js_scale_right_up   { transform-origin: left bottom;  transform: scale(0.2) translate(-50%, 5%); }
.lp-box .init.js_scale_left_down  { transform-origin: right top;    transform: scale(0.2) translate(50%, -10%); }
.lp-box .init.js_scale_right_down { transform-origin: left top;     transform: scale(0.2) translate(-50%, 5%); }
.lp-box .init.js_scale_left_up.animated,
.lp-box .init.js_scale_right_up.animated,
.lp-box .init.js_scale_left_down.animated,
.lp-box .init.js_scale_right_down.animated {
  transform: translate(0%, 0%) scale(1);
  opacity: 1;
}

/* 横から */
.lp-box .init.js_move_right {
  transform: translate(-50%, 10px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.2, 1), opacity 0.2s;
}
.lp-box .init.js_move_left {
  transform: translate(50%, 10px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.2, 1), opacity 0.2s;
}
.lp-box .init.js_move_right2 {
  transform: translateX(-100px);
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s;
}
.lp-box .init.js_move_right.animated,
.lp-box .init.js_move_left.animated,
.lp-box .init.js_move_right2.animated {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* 上下から */
.lp-box .init.js_move_down {
  transform: translateY(-100px);
  transition: transform 0.35s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.35s;
}
.lp-box .init.js_move_up1 {
  transform: translateY(200px) scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.2s;
}
.lp-box .init.js_move_up2 {
  transform: translateY(50px) scale(0.5);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.lp-box .init.js_move_up3 {
  transform: translateY(40px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-box .init.js_move_up4 {
  transform: translateY(50px) scale(0.8);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-box .init.js_move_down.animated,
.lp-box .init.js_move_up1.animated,
.lp-box .init.js_move_up2.animated,
.lp-box .init.js_move_up3.animated,
.lp-box .init.js_move_up4.animated {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 回転 */
.lp-box .init.js_rotate {
  transform: rotate(13deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.3s;
}
.lp-box .init.js_rotate.animated {
  transform: rotate(0deg);
  opacity: 1;
}

/* 左から伸びる（見出し帯など。init 不要） */
.lp-box .stretch { clip-path: inset(0 100% 0 0); }
.lp-box .stretch.animated { animation: revealRight 1.4s ease forwards; }
@keyframes revealRight {
  to { clip-path: inset(0 0 0 0); }
}

/* 下から浮かぶ（参考：fancl fade-obj fade-in） */
.lp-box .init.move_up {
  transform: translateY(30px);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 下から浮かぶ2（参考：hotellovers icb_head_lens1 / GSAP power2.out 1.2s） */
.lp-box .init.move_up2 {
  transform: translateY(30px);
  transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.lp-box .init.move_up.animated,
.lp-box .init.move_up2.animated {
  transform: translateY(0);
  opacity: 1;
}

/* 左からにじみ出る（砂の見出し。境目をぼかしたマスク＋ブラー解除。init 不要） */
.lp-box .stretch_blur {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: blur(6px);
  opacity: 0;
}
.lp-box .stretch_blur.animated { animation: revealBlur 2s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes revealBlur {
  0% { opacity: 0; filter: blur(6px); }
  20% { opacity: 1; }
  100% {
    opacity: 1;
    filter: blur(0);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* 遅延 */
[data-delay="0.1"] { transition-delay: 0.1s !important; animation-delay: 0.1s !important; }
[data-delay="0.2"] { transition-delay: 0.2s !important; animation-delay: 0.2s !important; }
[data-delay="0.3"] { transition-delay: 0.3s !important; animation-delay: 0.3s !important; }
[data-delay="0.4"] { transition-delay: 0.4s !important; animation-delay: 0.4s !important; }
[data-delay="0.5"] { transition-delay: 0.5s !important; animation-delay: 0.5s !important; }
[data-delay="0.6"] { transition-delay: 0.6s !important; animation-delay: 0.6s !important; }

/*
ループアニメ
*/
/* 使い方：内側の要素に anim ○○。外側（祖先）が .animated になるまで停止 */
.anim { animation-play-state: paused; }
.animated .anim,
.anim.animated { animation-play-state: running; }

/* ぷよん */
.anim.poyo1 { animation: poyo1 3s cubic-bezier(0.16, 1, 0.5, 1) infinite 1s; }
@keyframes poyo1 {
  0%, 25%, 35%, 45%, 100% { transform: scale(1); }
  30%, 40% { transform: scale(0.8); }
}

.anim.poyo2 {
  display: block;
  transform-origin: center bottom;
  animation: poyo2 1.2s cubic-bezier(0.16, 1, 0.5, 1) infinite 1s;
}
@keyframes poyo2 {
  0%, 70%, 100% { transform: scale(1, 1); }
  10% { transform: scale(0.93, 1.04); }
  20% { transform: scale(1.15, 0.97); }
  30% { transform: scale(0.9, 1.01); }
  40% { transform: scale(1, 1); }
}

.anim.poyo3 {
  display: block;
  transform-origin: center bottom;
  animation: poyo3 4s cubic-bezier(0.16, 1, 0.5, 1) infinite 1.5s;
}
@keyframes poyo3 {
  0%, 40%, 100% { transform: skew(0deg, 0deg); }
  5% { transform: skew(5deg, 5deg); }
  10% { transform: skew(-4deg, -4deg); }
  15% { transform: skew(3deg, 3deg); }
  20% { transform: skew(-2deg, -2deg); }
  25% { transform: skew(1deg, 1deg); }
  30% { transform: skew(-0.6deg, -0.6deg); }
  35% { transform: skew(0.3deg, 0.3deg); }
}

.anim.poyo5 {
  display: block;
  animation: poyo5 1.2s ease-out infinite 0.5s;
}
@keyframes poyo5 {
  0%, 50%, 100% { transform: scale(1); }
  10% { transform: scale(1.08, 0.92); }
  20% { transform: scale(0.92, 1.08); }
  30% { transform: scale(1.04, 0.98); }
  40% { transform: scale(0.98, 1.02); }
}

/* キラッ（レンズ） */
.anim.kira1 {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.anim.kira1::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -120%;
  width: 50%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  transform: rotate(25deg);
  animation: lensShine 3.5s ease-out infinite 1s;
}
@keyframes lensShine {
  0%, 70%, 100% { left: -120%; opacity: 0; }
  5% { opacity: 0; }
  15% { opacity: 1; }
  25% { left: 150%; opacity: .8; }
  30% { opacity: 0; }
}

/* レンズ回転（参考：fancl flip-obj flip-in。回転→一定時間ポーズを繰り返す） */
.lp-box .eyes { perspective: 800px; }
.anim.flip_in {
  display: block;
  animation: flip_in 3s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  animation-play-state: paused;
}
.animated .anim.flip_in { animation-play-state: running; }
@keyframes flip_in {
  0% { transform: rotateY(0deg); }
  30%, 100% { transform: rotateY(360deg); }
}
/* atop は .atop の data-scl で4枚まとめて回し始め、少しずつずらす */
.atop_lens1 .flip_in { animation-delay: 0.2s; }
.atop_lens2 .flip_in { animation-delay: 0.35s; }
.atop_lens3 .flip_in { animation-delay: 0.5s; }
.atop_lens4 .flip_in { animation-delay: 0.65s; }
/* atop レンズのフェードイン（回転と同じタイミング） */
.atop .eyes { opacity: 0; transition: opacity 1s; }
.atop.animated .eyes { opacity: 1; }
.atop .atop_lens1 { transition-delay: 0.2s; }
.atop .atop_lens2 { transition-delay: 0.35s; }
.atop .atop_lens3 { transition-delay: 0.5s; }
.atop .atop_lens4 { transition-delay: 0.65s; }

/* ふわふわ・上下 */
.anim.fwfw {
  display: block;
  animation: fwfw 3s ease-in-out infinite alternate;
}
@keyframes fwfw {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(0, -5%) scale(0.95); }
}

.anim.updown {
  display: block;
  animation: updown 3s ease-in-out infinite 1s;
}
@keyframes updown {
  0%, 60%, 100% { transform: translate(0, 0); }
  30% { transform: translate(0, 20%); }
}

/* ゆらゆら（コマ送り） */
.anim.furi1 { transform-origin: center bottom; animation: furi1 0.8s steps(2, end) infinite; }
.anim.furi3 { transform-origin: center bottom; animation: furi3 0.8s steps(2, end) infinite 1s; }
.anim.furi5 { transform-origin: center bottom; animation: furi5 0.8s steps(2, end) infinite 0.5s; }
.anim.furi6 { transform-origin: center bottom; animation: furi6 0.8s steps(2, end) infinite 0.5s; }
@keyframes furi1 {
  0%, 49.999% { transform: rotate(-4deg); }
  50%, 100% { transform: rotate(6deg); }
}
@keyframes furi3 {
  0%, 49.999% { transform: rotate(15deg); }
  50%, 100% { transform: rotate(-15deg); }
}
@keyframes furi5 {
  0%, 49.999% { transform: rotate(-5deg); }
  50%, 100% { transform: rotate(5deg); }
}
@keyframes furi6 {
  0%, 49.999% { transform: rotate(5deg); }
  50%, 100% { transform: rotate(-5deg); }
}

/*
SP（font-size と px固定の小パーツを vw / 基準776px）
*/
@media screen and (max-device-width: 767px) {
  .lp-box span:hover,
  .lp-box a:hover { opacity: 1; }

  .lp-box {
    width: calc(100% + 26px);
    margin-left: -13px;
  }

  /* block1 */
  .lp-box .block1_lead { font-size: 5.67vw; }
  .lp-box .block1_ga { font-size: 3.61vw; }
  .lp-box .block1_catch strong { font-size: 3.99vw; -webkit-text-stroke-width: 0.26vw; }
  .lp-box .block1_catch span { font-size: 3.35vw; }
  .lp-box .block1_sub { font-size: 2.58vw; }
  .lp-box .block1_kana { font-size: 3.35vw; -webkit-text-stroke-width: 0.39vw; }
  .lp-box .block1_note { font-size: 1.59vw; }

  /* block2 */
  .lp-box .block2 .ttl { font-size: 2.45vw; }

  /* item */
  .lp-box .color { font-size: 3.67vw; }
  .lp-box .catch { font-size: 3.87vw; }
  .lp-box .catch strong { font-size: 5.15vw; -webkit-text-stroke-width: 0.26vw; }
  .lp-box .msg { font-size: 2.71vw; }

  /* block3 */
  .lp-box .spec_in h3 { font-size: 2.84vw; margin-bottom: 1.55vw; }
  .lp-box .block3_spec2 h3,
  .lp-box .block3_spec3 h3,
  .lp-box .block3_spec5 h3,
  .lp-box .block3_spec7 h3,
  .lp-box .block3_spec8 h3 { font-size: 3.35vw; }
  .lp-box .block3_spec4 h3,
  .lp-box .block3_spec6 h3 { font-size: 3.09vw; }
  .lp-box .spec_in .big { font-size: 5.15vw; }
  .lp-box .spec_in p { font-size: 1.87vw; }

  /* special */
  .lp-box .special_lead { font-size: 5.41vw; }
  .lp-box .special_lead em { font-size: 6.44vw; }
  .lp-box .special_point { font-size: 2.84vw;  letter-spacing: 0em;}
  .lp-box .special_note { font-size: 1.55vw; }
  .lp-box .special_tax { font-size: 1.68vw; }
  .lp-box .special_badge { font-size: 2.1vw; }

}