/* ============================================================
   Kaneee × MyMoods コラボ特設LP — 共有スタイル & アニメーション
   - このファイルを読み込むのはLP専用セクションのみ＝このページだけに適用
   - url() は同一 assets フォルダの画像を相対参照
     （スタンドアロンプレビュー・本番テーマの両方で解決可能）
   ============================================================ */

:root {
  --lpk-cyan: #00979c;
  --lpk-blue: #0a4f9a;
  --lpk-grad: linear-gradient(90deg, #00979c 0%, #0a4f9a 100%);
  --lpk-container: 1340px;
  --lpk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 横スクロール禁止はサイト全体で layout/theme.liquid に定義（内部カルーセルは維持） */

/* ---- ページ全面のスモーク背景（ヒーロー画像の裏〜最下部まで） ---- */
#MainContent {
  position: relative;
  background-color: #e8f5ff;
  background-image: url("lp-kaneee-bg-smoke-sp.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  /* スライドインの一時的な横はみ出しで横スクロールが出ないようクリップ */
  overflow-x: clip;
}
@media screen and (min-width: 750px) {
  #MainContent {
    background-image: url("lp-kaneee-bg-smoke-pc.webp");
  }
}

/* ---- 共通コンテナ ---- */
.lpk-container {
  width: 92%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.lpk-section {
  position: relative;
  padding: 56px 0;
}
@media screen and (min-width: 990px) {
  .lpk-section { padding: 64px 0; }
}

/* ============================================================
   見出し（グラデーション文字 + ゆるやかなシマー）
   ============================================================ */
.lpk-heading {
  margin: 0;
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #00979c 0%, #0a4f9a 50%, #00979c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lpk-shimmer 7s ease-in-out infinite;
}
@keyframes lpk-shimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
.lpk-heading--xl { font-size: 40px; }
.lpk-heading--lg { font-size: 48px; }
@media screen and (max-width: 749px) {
  /* SPはFigma(750px幅)を100vw基準に縮小＝改行位置もFigma通りになる */
  .lpk-heading--xl { font-size: 5.33vw; }  /* 40px @750 */
  .lpk-heading--lg { font-size: 6.4vw; }   /* 48px @750 */
}

.lpk-body {
  margin: 0;
  font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.9;
  color: #0c1b2a;
}
@media screen and (min-width: 990px) {
  .lpk-body { font-size: 24px; line-height: 1.6; }
}
@media screen and (max-width: 749px) {
  .lpk-body { font-size: 3.2vw; }  /* 24px @750＝Figma比率。改行位置をFigmaに一致 */
}

/* ============================================================
   スクロール出現アニメーション（自前・テーマ設定に非依存）
   JSが .lpk-in を付与 → 下記トランジションが発火
   ============================================================ */
[data-lpk] {
  opacity: 0;
  transition:
    opacity 0.9s var(--lpk-ease),
    transform 0.9s var(--lpk-ease);
  will-change: opacity, transform;
}
[data-lpk="up"]    { transform: translateY(48px); }
[data-lpk="zoom"]  { transform: scale(0.9); }
[data-lpk="left"]  { transform: translateX(-80px); }
[data-lpk="right"] { transform: translateX(80px); }
[data-lpk].lpk-in  { opacity: 1; transform: none; }

/* PCは横幅に余裕があるので、横スライドをより大きく＝ダイナミックに */
@media screen and (min-width: 990px) {
  [data-lpk="left"]  { transform: translateX(-120px); }
  [data-lpk="right"] { transform: translateX(120px); }
}

[data-lpk-delay="1"] { transition-delay: 0.12s; }
[data-lpk-delay="2"] { transition-delay: 0.24s; }
[data-lpk-delay="3"] { transition-delay: 0.36s; }
[data-lpk-delay="4"] { transition-delay: 0.48s; }

/* ※このLPはマーケ用途のため、モーション低減設定でも演出を意図的に再生する
   （reduce-motion での抑制ブロックは置かない。サイトの他ページは従来どおり尊重）。 */

/* ============================================================
   写真（クロップ枠 + ホバーでズーム & シャイン）
   ============================================================ */
.lpk-photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(10, 79, 154, 0.16);
}
.lpk-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--lpk-ease), filter 0.8s var(--lpk-ease);
}
.lpk-photo:hover img,
.lpk-photo:focus-within img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.03);
}
/* 斜めのシャイン（光沢）がホバーで横断 */
.lpk-photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.lpk-photo:hover::after {
  animation: lpk-shine 1.05s ease;
}
@keyframes lpk-shine {
  0%   { left: -80%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ============================================================
   ヒーロー
   ============================================================ */
.lpk-hero__media { line-height: 0; font-size: 0; }
.lpk-hero__media img { display: block; width: 100%; height: auto; }
/* PCは横長KV(2680×1326)。SP縦長画像の width/height 属性で歪まないよう比率を明示 */
@media screen and (min-width: 990px) {
  .lpk-hero__media img { aspect-ratio: 2680 / 1326; }
}

.lpk-hero__text {
  max-width: 920px;
  margin: 0 auto;
  padding: 52px 24px 40px;
  text-align: center;
  background: transparent;              /* スモークが透ける */
}
.lpk-hero__title { font-size: 40px; }
.lpk-hero__title + .lpk-hero__title { margin-top: 4px; }
.lpk-hero__lead {
  margin: 24px 0 0;
  font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.55;
  color: #0c1b2a;
}
@media screen and (max-width: 749px) {
  .lpk-hero__title { font-size: 5.33vw; }                    /* 40px @750 */
  .lpk-hero__title + .lpk-hero__title { margin-top: 1.3vw; } /* 10px @750 */
  .lpk-hero__text { padding: 5.9vw 5.3vw 0; }                /* SP: 下余白0。タイトル→本文の距離はstoryの上余白で調整 */
  /* SPのみ: リード文とCOLLABORATION見出しを非表示にし、タイトル(Kaneee × MyMoods / Sky Blue Device Limited 200)から本文へ直接つなげる。PCは現状維持 */
  .lpk-hero__lead { display: none; }
  .lpk-collab-heading { display: none; }
}
@media screen and (min-width: 750px) {
  /* PCのみ: ヒーロー直下のタイトル/リード文ブロックを非表示にし、COLLABORATION見出し(Kaneee × MyMoods Sky Blue Device Limited 200に変更済み)へ統合。空白ができないようコンテナごと消す。SPは現状維持(ヒーロータイトル表示・見出しは上で非表示のまま) */
  .lpk-hero__text { display: none; }
  /* ヒーロー画像がpadding無しでbotすぐ隣接するため、そのままだと上下バランスが崩れる(KV直後だけ詰まる)。
     storyの上余白を通常(64px)より広げ、他の余白(ブロック間120px/セクション境界128px)と揃える。 */
  .lpk-section.lpk-story { padding-top: 160px; }
}

/* ============================================================
   ストーリー（COLLABORATION / WHO IS Kanee / BEHIND …）
   ============================================================ */
.lpk-story__inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
@media screen and (min-width: 990px) {
  .lpk-story__inner { gap: 120px; }
}

.lpk-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.lpk-block__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 620px;
  text-align: center;
}
.lpk-block__media { width: 100%; }
.lpk-block__photo { width: 100%; aspect-ratio: 670 / 400; }

@media screen and (min-width: 990px) {
  .lpk-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
  }
  /* Figma 同様、本文も中央揃え。本文カラム幅をFigmaに寄せて折り返し位置(行数)を一致させる */
  .lpk-block__text { max-width: 560px; margin-inline: auto; text-align: center; }
  /* 交互配置：reverse は写真を左・テキストを右へ。SNSは右カラムのテキスト下(Figma同様) */
  .lpk-block--reverse { grid-template-rows: auto auto; }
  .lpk-block--reverse .lpk-block__media { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .lpk-block--reverse .lpk-block__text  { grid-column: 2; grid-row: 1; align-self: end; }
  .lpk-block--reverse .lpk-credit       { grid-column: 2; grid-row: 2; align-self: start; margin-top: 16px; }
}

/* WHO IS Kanee のSNSクレジット */
.lpk-credit {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  justify-content: center;
}
.lpk-credit__link { display: inline-flex; align-items: center; }
.lpk-credit__ig { width: 36px; height: 36px; display: block; transition: transform 0.4s var(--lpk-ease); }
.lpk-credit__sp { width: 124px; height: auto; display: block; transition: transform 0.4s var(--lpk-ease); }
.lpk-credit a:hover .lpk-credit__ig,
.lpk-credit a:hover .lpk-credit__sp { transform: translateY(-3px) scale(1.05); }

/* BEHIND …：中央寄せ + 動画プレースホルダー */
.lpk-block--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.lpk-block--center .lpk-block__text { max-width: 900px; text-align: center; }
.lpk-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(10, 79, 154, 0.22);
}
.lpk-video__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 目立つ再生ボタン（ポスター上に中央オーバーレイ・ブランドグラデ＋パルスリング）。
   クリックで再生し、再生中は自動で隠す（JS: lp-kaneee.js の wireVideos）。 */
.lpk-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 92px; height: 92px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer; z-index: 2;
  background: var(--lpk-grad); background-size: 180% auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(10, 79, 154, 0.55);
  transition: transform 0.3s var(--lpk-ease), box-shadow 0.3s var(--lpk-ease), opacity 0.3s ease, visibility 0.3s ease;
}
.lpk-video__play::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.75);
  animation: lpk-video-pulse 2s var(--lpk-ease) infinite;
}
.lpk-video__play svg { width: 38px; height: 38px; fill: #fff; margin-left: 5px; position: relative; z-index: 1; }
.lpk-video__play:hover, .lpk-video__play:focus-visible {
  transform: scale(1.08); box-shadow: 0 18px 42px rgba(10, 79, 154, 0.65); outline: none;
}
.lpk-video.is-playing .lpk-video__play { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes lpk-video-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media screen and (max-width: 749px) {
  .lpk-video__play { width: 74px; height: 74px; }
  .lpk-video__play svg { width: 30px; height: 30px; }
}

/* ============================================================
   限定デバイス販売
   ============================================================ */
/* デバイス説明文①（Figma同様、画像の上に配置） */
.lpk-device__lead { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.lpk-device__photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto 36px;
}
@media screen and (min-width: 990px) {
  .lpk-device__photos { flex-direction: row; max-width: none; gap: 24px; }
  .lpk-device__photos .lpk-device__photo { flex: 1 1 50%; }
}
/* 透過デバイス画像を“浮遊”させる（白カード無し・ドロップシャドウ＋ゆっくり上下） */
.lpk-device__photo { aspect-ratio: 1 / 1; background: transparent; }
.lpk-device__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(10, 79, 154, 0.30));
  animation: lpk-float 4.5s ease-in-out infinite;
  transition: scale 0.5s var(--lpk-ease), filter 0.5s var(--lpk-ease);
}
.lpk-device__photo:last-child img { animation-delay: -2.25s; }
.lpk-device__photo:hover img {
  scale: 1.04;
  filter: drop-shadow(0 34px 44px rgba(10, 79, 154, 0.42));
}
@keyframes lpk-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
.lpk-device__copy {
  max-width: 760px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
.lpk-cta-wrap { display: flex; justify-content: center; }
.lpk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 90%;
  max-width: 500px;
  min-height: 80px;
  padding: 0 32px;
  border: none;
  border-radius: 100px;
  background: var(--lpk-grad);
  background-size: 180% auto;
  color: #ffffff !important;
  font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(10, 79, 154, 0.38);
  transition: transform 0.3s var(--lpk-ease), box-shadow 0.3s var(--lpk-ease), background-position 0.5s var(--lpk-ease);
}
.lpk-cta:hover, .lpk-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(10, 79, 154, 0.5);
  background-position: right center;
}
.lpk-cta[disabled] { opacity: 0.55; cursor: not-allowed; }
.lpk-cta.is-loading { opacity: 0.7; pointer-events: none; }
.lpk-note {
  margin: 22px 0 0;
  text-align: center;
  font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
  font-size: 20px;
  color: #0c1b2a;
}

/* ---- 限定販売価格ブロック（カート上） ---- */
.lpk-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 26px;
}
.lpk-price__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  border-radius: 100px;
  background: var(--lpk-grad);
  background-size: 180% auto;
  color: #ffffff;
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  box-shadow: 0 10px 24px rgba(10, 79, 154, 0.34);
  animation: lpk-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes lpk-badge-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(10, 79, 154, 0.34); }
  50%      { box-shadow: 0 12px 32px rgba(0, 151, 156, 0.52); }
}
.lpk-price__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.lpk-price__label {
  font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #0c1b2a;
}
.lpk-price__amount {
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #00979c 0%, #0a4f9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lpk-price__yen { font-size: 34px; font-weight: 700; margin-right: 1px; }
.lpk-price__tax { font-size: 15px; font-weight: 600; color: #5b6b7a; }
@media screen and (max-width: 749px) {
  .lpk-price__amount { font-size: 44px; }
  .lpk-price__yen { font-size: 26px; }
  .lpk-price__label { font-size: 16px; }
  .lpk-price__badge { font-size: 13px; padding: 8px 18px; letter-spacing: 0.08em; }
}

/* ============================================================
   RECOMMEND POD
   ============================================================ */
.lpk-recommend__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lpk-recommend__heading { margin-bottom: 36px; }
.lpk-recommend__product { width: 100%; max-width: 560px; margin-bottom: 36px; }
.lpk-recommend__product img { display: block; width: 100%; height: auto; }

/* RECOMMEND: 透過POD(箱+POD2本)を静止で3つ横並び。
   横スクロール(マーキー)・上下フロート無し。前の1枚表示に近いサイズ感。 */
.lpk-recommend__pods {
  display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;
  gap: 10px; width: 100%; max-width: 1040px; margin: 0 auto 36px;
}
.lpk-recommend__pod { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.lpk-recommend__pod img {
  /* !important: クラシックテーマの img{max-width:100%!important} に負けないよう固定（全店同一サイズに） */
  display: block; width: 100%; height: auto; max-width: 300px !important;
  filter: drop-shadow(0 16px 22px rgba(10, 79, 154, 0.26));
}
@media screen and (min-width: 750px) {
  .lpk-recommend__pods { gap: 28px; }
  .lpk-recommend__pod img { max-width: 320px !important; }
}

/* ============================================================
   ギャラリー（回転寿司マーキー：常時ゆっくり横流れ・無限ループ）
   ============================================================ */
.lpk-gallery__heading { text-align: center; margin-bottom: 40px; }

.lpk-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 両端をふわっとフェードさせて“流れ続けている”見え方に */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.lpk-marquee__track {
  display: flex;
  width: max-content;
  animation: lpk-marquee 48s linear infinite;
}
.lpk-marquee__item {
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 1 / 1;
  margin-right: 18px;
}
@media screen and (min-width: 750px) {
  .lpk-marquee__item { width: 400px; margin-right: 24px; }
}
@media screen and (min-width: 990px) {
  .lpk-marquee__item { width: 480px; margin-right: 28px; }
}
/* 画像2セットぶんの正確に半分を移動＝継ぎ目なしループ
   （全 item に等しい margin-right があるため -50% が1セット幅と一致） */
@keyframes lpk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SP: 上下の余白もFigma(750px=100vw)基準のvwに統一
   ＝文字サイズと同じ縮尺で余白もスケールし、Figma比率に一致させる
   ============================================================ */
@media screen and (max-width: 749px) {
  .lpk-section { padding: 5.3vw 0; }
  /* SPのみ: 先頭storyはリード文/COLLABORATION見出しを隠しているので、上余白を詰めてタイトル→本文の距離をWHO IS見出し↔本文(3.4vw)と揃える */
  .lpk-section.lpk-story { padding-top: 3.4vw; }
  .lpk-story__inner { gap: 9vw; }
  .lpk-block { gap: 3vw; }
  .lpk-block__text { gap: 3.4vw; }
  .lpk-block--center { gap: 4.5vw; }
  .lpk-device__lead { margin: 0 auto 3.6vw; }
  .lpk-device__photos { gap: 4vw; margin: 0 auto 4.5vw; }
  .lpk-device__copy { gap: 2.9vw; margin: 0 auto 4.5vw; }
  .lpk-price { gap: 2vw; margin: 0 auto 3.5vw; }
  .lpk-note { margin-top: 3vw; font-size: 2.9vw; }
  .lpk-recommend__heading { margin-bottom: 4.8vw; }
  .lpk-recommend__product { margin-bottom: 4.8vw; }
  .lpk-gallery__heading { margin-bottom: 5.3vw; }
}