@charset "UTF-8";
/* =====================================================
  CELFORD / Make It Lutin feat.Natsuki Deguchi
  計測ID: CE260805LUTIN
  SP特化型・パターンC（左カラム=動画固定 / 右カラム=SPコンテンツ）
  単位・命名などの規約は coding-guidelines.md を参照
   ===================================================== */

/* ▼ -----------可変設定---------- ▼
   .lp_variable は #CE260805LUTIN と同じ要素に付与する */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 560;/*SPデザイン幅*/
  --pc-artboard-width: 560;/*PC時の中央コンテンツ列の幅*/
  --sp-artboard-width: 560;/*SP時の中央コンテンツ列の幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

 /* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

 /* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_variable {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

/* ▼ -----------カスタムプロパティ---------- ▼ */
#CE260805LUTIN {
  --color-text: #000002;
  --color-bg: #fff;
  --color-pc-bg: #f4e9ef; /* PCデザインのコンテンツエリア外の背景 */
  --color-credit: #8e8e8e;
  --color-find-bg: rgba(244, 233, 239, .7);
  /* フォントは CDN 読み込みをユーザー側で追加する運用（CLAUDE.md §7） */
  --font-jp: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  --font-credit: "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-staff: bodoni-moda-variable, sans-serif;
  /* イージング（参考LP CE260703marine と同一） */
  --ease-fade: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-clip: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-zoom: cubic-bezier(0.165, 0.84, 0.44, 1);
  --lp-header-offset: 0px; /* サイト共通ヘッダー高（JSが実測して上書き） */
}
/* ▲ -----------カスタムプロパティ---------- ▲ */

/* ▼ -----------LPスコープ リセット---------- ▼ */
#CE260805LUTIN * {
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
  /* font-feature-settings: "palt"; */
}

#CE260805LUTIN img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: unset;
}

#CE260805LUTIN picture {
  display: block;
}

#CE260805LUTIN button {
  padding: 0;
  cursor: pointer;
  appearance: none;
  color: inherit;
  background-color: unset;
  border: unset;
}

#CE260805LUTIN a {
  color: inherit;
  text-decoration: none;
}

#CE260805LUTIN p,
#CE260805LUTIN h1,
#CE260805LUTIN h2,
#CE260805LUTIN h3 {
  margin: 0;
}

/* 表示制御ユーティリティ */
@media (min-width: 768px) {
  #CE260805LUTIN .is-hidden--desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #CE260805LUTIN .is-hidden--mobile {
    display: none !important;
  }
}
/* ▲ -----------LPスコープ リセット---------- ▲ */

/* ▼ -----------ベーススタイル---------- ▼ */
#CE260805LUTIN {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-jp);
  line-height: 1.5;
  letter-spacing: 0; /* Figma のテキストはトラッキング 0 */
  overflow: clip;
}

@media (min-width: 768px) {
  #CE260805LUTIN {
    /* PCデザイン: 14570 - 14485.958 */
    /* PCデザインはコンテンツエリア外がピンク。中央 1120（=左右カラム 560×2）だけ白 */
    background-color: var(--color-pc-bg);
    background-image: linear-gradient(to right, var(--color-bg), var(--color-bg));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: calc(1120 * var(--formula_pc)) 100%;
  }
}
/* ▲ -----------ベーススタイル---------- ▲ */

/* ▼ -----------レイアウト（2カラム）既定---------- ▼ */
/* 中央コンテンツ列の幅（SP: sp-artboard-width / PC: pc-artboard-width） */
#CE260805LUTIN .lp-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  #CE260805LUTIN .lp-inner {
    width: calc(var(--pc-artboard-width) * var(--formula_pc));
  }

  /* 中央コンテンツ列は左カラム（動画）と隣接させる＝右セルの左端に寄せる
     （デザイン: 動画 x140-700 / コンテンツ x700-1260） */
  #CE260805LUTIN .lp-layout__primary .lp-inner {
    margin-inline: 0 auto;
  }
}

/* グリッド本体（PCのみ grid 化。SPは通常フロー） */
@media (min-width: 768px) {
  #CE260805LUTIN .lp-layout { display: grid; align-items: start; }
  #CE260805LUTIN .lp-layout--col-2 { grid-template-columns: 1fr 1fr; }
}

/* 中央（スクロールする本体） */
#CE260805LUTIN .lp-layout__primary { overflow-x: clip; }

/* 左右サブ（PC追従／SP非表示） */
#CE260805LUTIN .lp-layout__sub { display: none; }
@media (min-width: 768px) {
  #CE260805LUTIN .lp-layout__sub {
    display: grid;
    /* 縦=上端（デザインは動画 y0）／横=右端。
      1400px = 余白140 + 左カラム560（動画）+ 右カラム560 + 余白140
      → 左セル(0〜700)の右端に寄せると動画が x140〜700 に一致する。
      svh はスクロールで変動しないため iOS/iPad のツールバー伸縮で揺れない */
    place-items: start end;
    position: sticky;
    top: var(--lp-header-offset, 0px);
    height: calc(100svh - var(--lp-header-offset, 0px));
    overflow: hidden;
  }
}
/* ▲ -----------レイアウト（2カラム）既定---------- ▲ */

/* =====================================================
  出現アニメーション
  - 既定は「下から上へフェードアップ」（指示書：指定外すべて）
  - 「滑らかに表示」は clip-path のワイプ（指示書の参考サイトと同方式）

  初期状態（非表示）はすべて html[data-lp-anim]　配下に閉じている。
  この属性は head のインラインスクリプトが付与し、script.js が読み込めなかった
  場合はタイムアウトで外れる → JS 失敗時にコンテンツが非表示のまま残らない
  （CLAUDE.md §9.1）
   ===================================================== */

/* 既定：下から上へフェードアップ */
#CE260805LUTIN .js-inview {
  opacity: 0;
  translate: 0 calc(30 * var(--formula));
  transition:
    opacity .85s var(--ease-fade) var(--d, 0s),
    translate 1s var(--ease-fade) var(--d, 0s);
}

#CE260805LUTIN .js-inview.is-active {
  opacity: 1;
  translate: none; /* 0 0 だと合成レイヤーが残り続けるため none で解放する */
}

/* ワイプを内包するブロックは自身をフェードさせない（子の clip-path で見せる） */
#CE260805LUTIN .js-inview--wipe {
  opacity: 1;
  translate: none;
  transition: none;
}

/* ワイプ本体（既定＝右から左に滑らかに表示） */
#CE260805LUTIN .lp-wipe {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .85s var(--ease-clip) var(--d, 0s);
}
#CE260805LUTIN .lp-wipe--l { clip-path: inset(0 100% 0 0); } /* 左から右 */
#CE260805LUTIN .lp-wipe--t { clip-path: inset(0 0 100% 0); } /* 上から下 */
#CE260805LUTIN .is-active .lp-wipe { clip-path: inset(0); }

/* 写真のワイプはインナー画像のズームアウトを伴う */
#CE260805LUTIN .lp-wipe > img,
#CE260805LUTIN .lp-wipe > a > img,
#CE260805LUTIN .lp-wipe .swiper-slide > img {
  transform: scale(1.3);
  transition: transform 1.35s var(--ease-zoom) var(--d, 0s);
}
#CE260805LUTIN .is-active .lp-wipe > img,
#CE260805LUTIN .is-active .lp-wipe > a > img,
#CE260805LUTIN .is-active .lp-wipe .swiper-slide > img {
  transform: none;
}
/* 欧文マーク（SVG）はズームさせない */
#CE260805LUTIN .lp-mv__title .lp-wipe > img,
#CE260805LUTIN .lp-look__head .lp-wipe > img,
#CE260805LUTIN .lp-look__mark > img {
  transform: none;
  transition: none;
}

/* 1文字ずつ 50px 下からフェードアップ（欧文 Mood / Find）
  translateY は SVG のユーザー単位＝デザイン px 相当。SVG 自体が --formula で
  拡縮されるため、移動量も同じ比率で追従する */
#CE260805LUTIN .lp-mark__chars > * {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity .7s var(--ease-fade) var(--cd, 0s),
    transform .7s var(--ease-fade) var(--cd, 0s);
}
#CE260805LUTIN .is-active .lp-mark__chars > * {
  opacity: 1;
  transform: none;
}

/* フォーカスリング
   親の overflow:hidden / clip-path で既定リングが削られるため内側に描画する */
#CE260805LUTIN a:focus-visible,
#CE260805LUTIN button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -3px;
}

/* =====================================================
  MV
===================================================== */
#CE260805LUTIN .lp-mv {
  position: relative;
}

#CE260805LUTIN .lp-mv__photo {
  width: calc(560 * var(--formula));
  height: calc(640 * var(--formula));
  overflow: hidden;
}

#CE260805LUTIN .lp-mv__title {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#CE260805LUTIN .lp-mv__title > span {
  position: absolute;
  display: block;
}

/* 2. 文字「Make It」: 右から左 */
#CE260805LUTIN .lp-mv__make {
  left: calc(320.904 * var(--formula));
  top: calc(464.502 * var(--formula));
  width: calc(159.096 * var(--formula));
  --d: .55s;
}

/* 3. 文字「Lutin」: 左から右 */
#CE260805LUTIN .lp-mv__lutin {
  left: calc(256 * var(--formula));
  top: calc(484.608 * var(--formula));
  width: calc(288.846 * var(--formula));
  --d: .65s;
}

/* 4. 文字「feat.Natsuki Deguchi」: 右から左 */
#CE260805LUTIN .lp-mv__feat {
  left: calc(317 * var(--formula));
  top: calc(595.001 * var(--formula));
  width: calc(165.98 * var(--formula));
  --d: .75s;
}

/* =====================================================
  リード
===================================================== */
#CE260805LUTIN .lp-lead {
  margin-top: calc(50.44 * var(--formula));
  text-align: center;
}

#CE260805LUTIN .lp-lead__title {
  font-size: calc(24 * var(--formula));
  line-height: 1.4166667; /* 34 / 24 */
  font-weight: normal;
  white-space: nowrap;
}

#CE260805LUTIN .lp-lead__text {
  margin-top: calc(8.52 * var(--formula));
  font-size: calc(16 * var(--formula));
  line-height: 1.75; /* 28 / 16 */
  white-space: nowrap;
}

/* =====================================================
  TOP へ戻る（追従）
  高さ 0 のラッパーを流し込み位置 y865.02 に置き、sticky で追従させる。
  後続の .lp-movie--sp 側で y977 までの余白を取る。
===================================================== */
#CE260805LUTIN .lp-top-wrap {
  position: sticky;
  /* 追従時に .lp-top（top: -63.94）がヘッダー下 20 に来るよう 63.94 分を足す */
  top: calc(var(--lp-header-offset, 0px) + 83.94 * var(--formula));
  z-index: 5;
  /* display:flow-root で BFC を作り、高さ 0 のブロックを margin が貫通するのを防ぐ */
  display: flow-root;
  height: 0;
}

#CE260805LUTIN .lp-top {
  position: absolute;
  /* フローはリード直後（y928.96）のまま、描画のみデザイン位置 y865.02 へ戻す。
     負マージンでフローを動かさないので、動画が非表示になる PC でも縦位置がずれない */
  top: calc(-63.94 * var(--formula));
  right: calc(12.96 * var(--formula));
  display: block;
  width: calc(32 * var(--formula));
  height: calc(72.458 * var(--formula));
}

#CE260805LUTIN .lp-top__icon {
  position: absolute;
  inset: 0;
}

#CE260805LUTIN .lp-top__icon img {
  position: absolute;
  left: calc(11.323 * var(--formula));
  width: calc(9.273 * var(--formula));
}

#CE260805LUTIN .lp-top__icon img:first-child { top: 0; }
#CE260805LUTIN .lp-top__icon img:nth-child(2) { top: calc(3.773 * var(--formula)); }

#CE260805LUTIN .lp-top__line {
  position: absolute;
  left: calc(16.045 * var(--formula));
  top: calc(7.705 * var(--formula));
  width: 1px;
  height: calc(29.326 * var(--formula));
  background-color: var(--color-text);
}

#CE260805LUTIN .lp-top__label {
  position: absolute;
  left: 50%;
  top: calc(39.459 * var(--formula));
  display: grid;
  place-items: center;
  width: calc(33 * var(--formula));
  height: calc(32 * var(--formula));
  translate: -50% 0;
  rotate: 90deg;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: calc(14 * var(--formula));
  line-height: 2.2857143; /* 32 / 14 */
  letter-spacing: .08em;
  white-space: nowrap;
}

/* =====================================================
  動画（SP：コンテンツ内 / PC：左カラム固定）
===================================================== */
#CE260805LUTIN .lp-movie {
  position: relative;
}

#CE260805LUTIN .lp-movie__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

#CE260805LUTIN .lp-movie__control {
  position: absolute;
  display: flex;
  align-items: center;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 500;
  line-height: 2.2857143; /* 32 / 14 */
  letter-spacing: .08em;
  white-space: nowrap;
}

#CE260805LUTIN .lp-movie__btn {
  display: flex;
  align-items: center;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* =====================================================
  変更後：動画ON/OFFの新しいマークデザイン
===================================================== */
/* マークのベース設定 */
#CE260805LUTIN .lp-movie__mark {
  display: block;
  position: relative;
}

/* ONボタンのマーク（白塗りの丸） */
#CE260805LUTIN .lp-movie__btn[data-sound="on"] .lp-movie__mark {
  background-color: #fff;
  border-radius: 50%;
}

/* OFFボタンのマーク（バツ） */
#CE260805LUTIN .lp-movie__btn[data-sound="off"] .lp-movie__mark::before,
#CE260805LUTIN .lp-movie__btn[data-sound="off"] .lp-movie__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%; /* 枠の対角線まで届くように少し長めに設定 */
  height: 1px; /* バツの線の太さ */
  background-color: #fff;
}
#CE260805LUTIN .lp-movie__btn[data-sound="off"] .lp-movie__mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#CE260805LUTIN .lp-movie__btn[data-sound="off"] .lp-movie__mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- SP：コンテンツ内（400 x 711.111 / x80 y977） --- */
#CE260805LUTIN .lp-movie--sp {
  width: calc(400 * var(--formula));
  height: calc(711.111 * var(--formula));
  margin-top: calc(48.04 * var(--formula)); /* リード下端 928.96 → 動画 977 */
  margin-left: calc(80 * var(--formula));
}

#CE260805LUTIN .lp-movie--sp .lp-movie__control {
  left: calc(23 * var(--formula));
  top: calc(670.959 * var(--formula));
  height: calc(32 * var(--formula));
  gap: calc(24 * var(--formula));
  font-size: calc(14 * var(--formula));
}

#CE260805LUTIN .lp-movie--sp .lp-movie__btn { gap: calc(3.98 * var(--formula)); }
#CE260805LUTIN .lp-movie--sp .lp-movie__mark {
  width: calc(11 * var(--formula));
  height: calc(11 * var(--formula));
}

@media (min-width: 768px) {
  #CE260805LUTIN .lp-movie--sp { display: none; }
}

/* --- PC：左カラム固定（560 x 995.556 / x140 y0）
  幅は常にデザイン値 560（規約 §4「基本は画面幅に応じて拡大縮小」）。
  ビューポート高が足りない場合は縦を object-fit: cover でトリミングする。
  ON/OFF は枠の下端基準に置くため、どの画面高でも必ず可視になる --- */
@media (min-width: 768px) {
  #CE260805LUTIN .lp-movie--pc {
    width: calc(560 * var(--formula_pc));
    height: min(
      calc(995.556 * var(--formula_pc)),
      calc(100svh - var(--lp-header-offset, 0px))
    );
    overflow: hidden;
  }

  #CE260805LUTIN .lp-movie--pc .lp-movie__control {
    left: calc(18 * var(--formula_pc));
    bottom: calc(6.836 * var(--formula_pc)); /* 995.556 - (956.72 + 32) */
    height: calc(32 * var(--formula_pc));
    gap: calc(29.75 * var(--formula_pc));
    font-size: calc(14 * var(--formula_pc));
  }

  #CE260805LUTIN .lp-movie--pc .lp-movie__btn { gap: calc(3.979 * var(--formula_pc)); }
  #CE260805LUTIN .lp-movie--pc .lp-movie__mark {
    width: calc(11 * var(--formula_pc));
    height: calc(11 * var(--formula_pc));
  }
}

/* =====================================================
  LOOK 共通
===================================================== */
#CE260805LUTIN .lp-style__intro {
  position: relative;
}

/* 欧文マークは写真より前面（デザインの重なり順）。
  写真側は clip-path で z-index:0 のスタッキングコンテキストになるため z-index を明示する */
#CE260805LUTIN .lp-look__head {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  font-weight: normal;
}

#CE260805LUTIN .lp-look__head > span {
  position: absolute;
  display: block;
}

/* 1. 数字アイコン：上から下 */
#CE260805LUTIN .lp-look__num { --d: 0s; }

/* 2. 欧文（・＋ワードマーク）：右から左
  clip-path のワイプ範囲を確定させるため .lp-look__label には幅・高さを明示する */
#CE260805LUTIN .lp-look__label { --d: .3s; }
#CE260805LUTIN .lp-look__dot,
#CE260805LUTIN .lp-look__word {
  position: absolute;
}
#CE260805LUTIN .lp-look__dot {
  left: 0;
  width: calc(10 * var(--formula));
}
#CE260805LUTIN .lp-look__word {
  top: 0;
}

/* 3. 欧文 Mood：左から 1 文字ずつ 50px 下からフェードアップ
  DOM 順は M → d → o → o なので、視覚的な左→右になるよう遅延を割り当てる */
#CE260805LUTIN .lp-look__mood svg { display: block; width: 100%; height: auto; }
#CE260805LUTIN .lp-look__mood .lp-mark__chars > :nth-child(1) { --cd: .6s; }  /* M */
#CE260805LUTIN .lp-look__mood .lp-mark__chars > :nth-child(4) { --cd: .69s; } /* o */
#CE260805LUTIN .lp-look__mood .lp-mark__chars > :nth-child(3) { --cd: .78s; } /* o */
#CE260805LUTIN .lp-look__mood .lp-mark__chars > :nth-child(2) { --cd: .87s; } /* d */

/* 4. 写真：左から右（Mood とほぼ同時） */
#CE260805LUTIN .lp-style--a .lp-photo--main { --d: .6s; }

/* 写真 */
#CE260805LUTIN .lp-photo--main {
  width: calc(560 * var(--formula));
  overflow: hidden;
}

#CE260805LUTIN .lp-photo--sub {
  width: calc(450 * var(--formula));
  overflow: hidden;
}

#CE260805LUTIN .lp-photo--right { margin-left: calc(110 * var(--formula)); }
#CE260805LUTIN .lp-photo--left { margin-left: 0; }

/* 写真リンクは高さの決定性を確保するためブロック化する */
#CE260805LUTIN .lp-photo a { display: block; }

/* 欧文アイコン（スタイル B の重ねマーク）：上から下 */
#CE260805LUTIN .lp-look__mark {
  position: absolute;
  z-index: 1;
  --d: .5s;
}

/* テキストブロック */
#CE260805LUTIN .lp-text {
  text-align: center;
}

#CE260805LUTIN .lp-text__lead {
  font-size: calc(18 * var(--formula));
  line-height: 1.4444444; /* 26 / 18 */
  white-space: nowrap;
}

#CE260805LUTIN .lp-text__body {
  margin-top: calc(13.88 * var(--formula));
  font-size: calc(16 * var(--formula));
  line-height: 1.75; /* 28 / 16 */
  white-space: nowrap;
}

/* 商品クレジット */
#CE260805LUTIN .lp-credit {
  color: var(--color-credit);
  font-family: var(--font-credit);
  font-size: calc(16 * var(--formula));
  line-height: 1.5; /* 24 / 16 */
  white-space: nowrap;
  text-align: center;
}

#CE260805LUTIN .lp-text .lp-credit {
  margin-top: calc(27.16 * var(--formula));
}

#CE260805LUTIN .lp-credit a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  display: inline-block;
}

/* スライダー共通 */
#CE260805LUTIN .lp-slider {
  width: calc(560 * var(--formula));
}

#CE260805LUTIN .lp-slider--carousel .swiper-slide {
  width: calc(339 * var(--formula)); /* 画像 320 + 間隔 19 */
}

#CE260805LUTIN .lp-slider--carousel .swiper-slide > a {
  display: block;
  width: calc(320 * var(--formula));
}

/* =====================================================
  LOOK 1 / Playful Mood
===================================================== */
/* SP: 動画下端 1688.111 → Look1 見出し 1758 */
#CE260805LUTIN .lp-look--1 { margin-top: calc(69.889 * var(--formula)); }

/* PC: 動画が非表示になるため、リード下端 928.96 → Look1 見出し 1017（PCデザイン値）*/
@media (min-width: 768px) {
  #CE260805LUTIN .lp-look--1 { margin-top: calc(88.04 * var(--formula_pc)); }
}

#CE260805LUTIN .lp-look--1 .lp-style--a .lp-style__intro {
  padding-top: calc(130 * var(--formula));
}
#CE260805LUTIN .lp-look--1 .lp-style--a .lp-look__head { height: calc(130 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-look__num {
  left: calc(45 * var(--formula));
  top: 0;
  width: calc(63.541 * var(--formula));
}
#CE260805LUTIN .lp-look--1 .lp-look__label {
  left: calc(213 * var(--formula));
  top: calc(30.858 * var(--formula));
  width: calc(280 * var(--formula));
  height: calc(93.792 * var(--formula));
}
#CE260805LUTIN .lp-look--1 .lp-look__dot { top: calc(28.002 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-look__word {
  left: calc(20.043 * var(--formula));
  width: calc(254.87 * var(--formula));
}
#CE260805LUTIN .lp-look--1 .lp-look__mood {
  left: calc(425.271 * var(--formula));
  top: calc(67.479 * var(--formula));
  width: calc(110.22 * var(--formula));
  pointer-events: none;
}

#CE260805LUTIN .lp-look--1 .lp-style--a .lp-photo--sub { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-style--a .lp-slider--carousel { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-style--a .lp-text { margin-top: calc(40.08 * var(--formula)); }

#CE260805LUTIN .lp-look--1 .lp-style--b { margin-top: calc(79.88 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-look__mark--1b {
  left: calc(26.544 * var(--formula));
  top: calc(15.86 * var(--formula));
  width: calc(181.481 * var(--formula));
  height: calc(158.582 * var(--formula));
  pointer-events: none;
}
#CE260805LUTIN .lp-look__mark--1b .lp-look__mark-num {
  position: absolute;
  left: calc(60.008 * var(--formula));
  top: 0;
  width: calc(38.124 * var(--formula));
}
#CE260805LUTIN .lp-look__mark--1b .lp-look__mark-word {
  position: absolute;
  left: 0;
  top: calc(83.998 * var(--formula));
  width: calc(181.481 * var(--formula));
}
#CE260805LUTIN .lp-look--1 .lp-style--b .lp-photo--sub { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--1 .lp-style--b .lp-text { margin-top: calc(40.08 * var(--formula)); }

/* =====================================================
  LOOK 2 / Sweet Mood
===================================================== */
#CE260805LUTIN .lp-look--2 { margin-top: calc(79.87 * var(--formula)); }

#CE260805LUTIN .lp-look--2 .lp-style--a .lp-style__intro {
  padding-top: calc(131.01 * var(--formula));
}
#CE260805LUTIN .lp-look--2 .lp-style--a .lp-look__head { height: calc(131.01 * var(--formula)); }
#CE260805LUTIN .lp-look--2 .lp-look__num {
  left: calc(35 * var(--formula));
  top: 0;
  width: calc(82.26 * var(--formula));
}
#CE260805LUTIN .lp-look--2 .lp-look__label {
  left: calc(249 * var(--formula));
  top: calc(30 * var(--formula));
  width: calc(250 * var(--formula));
  height: calc(68.303 * var(--formula));
}
#CE260805LUTIN .lp-look--2 .lp-look__dot { top: calc(28.011 * var(--formula)); }
#CE260805LUTIN .lp-look--2 .lp-look__word {
  left: calc(24 * var(--formula));
  width: calc(223.75 * var(--formula));
}
#CE260805LUTIN .lp-look--2 .lp-look__mood {
  left: calc(425.097 * var(--formula));
  top: calc(60.76 * var(--formula));
  width: calc(110.209 * var(--formula));
  pointer-events: none;
}

#CE260805LUTIN .lp-look--2 .lp-style--a .lp-photo--sub { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--2 .lp-style--a .lp-text { margin-top: calc(40.08 * var(--formula)); }

#CE260805LUTIN .lp-look--2 .lp-style--b { margin-top: calc(79.88 * var(--formula)); }
#CE260805LUTIN .lp-look--2 .lp-look__mark--2b {
  left: calc(381.453 * var(--formula));
  top: calc(236.656 * var(--formula));
  width: calc(157.384 * var(--formula));
  pointer-events: none;
}
#CE260805LUTIN .lp-look--2 .lp-style--b .lp-slider--carousel { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--2 .lp-style--b .lp-text { margin-top: calc(40.08 * var(--formula)); }

/* =====================================================
  LOOK 3 / Elegant Mood
===================================================== */
#CE260805LUTIN .lp-look--3 { margin-top: calc(79.88 * var(--formula)); }

#CE260805LUTIN .lp-look--3 .lp-style--a .lp-style__intro {
  padding-top: calc(133.14 * var(--formula));
}
#CE260805LUTIN .lp-look--3 .lp-style--a .lp-look__head { height: calc(133.14 * var(--formula)); }
#CE260805LUTIN .lp-look--3 .lp-look__num {
  left: calc(37.08 * var(--formula));
  top: 0;
  width: calc(78.84 * var(--formula));
}
#CE260805LUTIN .lp-look--3 .lp-look__label {
  left: calc(201 * var(--formula));
  top: calc(26 * var(--formula));
  width: calc(300 * var(--formula));
  height: calc(92.694 * var(--formula));
}
#CE260805LUTIN .lp-look--3 .lp-look__dot { top: calc(28.689 * var(--formula)); }
#CE260805LUTIN .lp-look--3 .lp-look__word {
  left: calc(18 * var(--formula));
  width: calc(278.073 * var(--formula));
}
#CE260805LUTIN .lp-look--3 .lp-look__mood {
  left: calc(425.097 * var(--formula));
  top: calc(58.913 * var(--formula));
  width: calc(110.209 * var(--formula));
  pointer-events: none;
}

#CE260805LUTIN .lp-look--3 .lp-style--a .lp-photo--sub { margin-top: calc(39.86 * var(--formula)); }
#CE260805LUTIN .lp-look--3 .lp-style--a .lp-text { margin-top: calc(40.08 * var(--formula)); }

#CE260805LUTIN .lp-look--3 .lp-style--b { margin-top: calc(60.88 * var(--formula)); }
#CE260805LUTIN .lp-look--3 .lp-style--b .lp-style__intro {
  padding-top: calc(19 * var(--formula));
}
#CE260805LUTIN .lp-look--3 .lp-look__mark--3b {
  left: calc(34.951 * var(--formula));
  top: 0;
  width: calc(190.074 * var(--formula));
  pointer-events: none;
}
#CE260805LUTIN .lp-look--3 .lp-style--b .lp-photo--sub { margin-top: calc(40 * var(--formula)); }
#CE260805LUTIN .lp-look--3 .lp-style--b .lp-text { margin-top: calc(40.08 * var(--formula)); }

/* =====================================================
  Find Your Favorite?
===================================================== */
#CE260805LUTIN .lp-find {
  margin-top: calc(79.88 * var(--formula));
}

#CE260805LUTIN .lp-find__title {
  position: relative;
  z-index: 1;
  width: calc(281.604 * var(--formula));
  height: calc(113.721 * var(--formula));
  margin-inline: auto;
  font-weight: normal;
}

#CE260805LUTIN .lp-find__find {
  position: absolute;
  left: calc(86.063 * var(--formula));
  top: 0;
  display: block;
  width: calc(109.874 * var(--formula));
}

#CE260805LUTIN .lp-find__find svg { display: block; width: 100%; height: auto; }

/* 欧文 Find：左から 1 文字ずつ 50px 下からフェードアップ（DOM 順＝視覚順） */
#CE260805LUTIN .lp-find__find .lp-mark__chars > :nth-child(1) { --cd: 0s; }
#CE260805LUTIN .lp-find__find .lp-mark__chars > :nth-child(2) { --cd: .09s; }
#CE260805LUTIN .lp-find__find .lp-mark__chars > :nth-child(3) { --cd: .18s; }
#CE260805LUTIN .lp-find__find .lp-mark__chars > :nth-child(4) { --cd: .27s; }

#CE260805LUTIN .lp-find__sub {
  position: absolute;
  left: 0;
  top: calc(78.682 * var(--formula));
  display: block;
  width: calc(281.604 * var(--formula));
}

/* 「Your Favorite?」は指定外＝下から上へフェードアップ */
#CE260805LUTIN .lp-find__sub {
  opacity: 0;
  translate: 0 calc(30 * var(--formula));
  transition:
    opacity .85s var(--ease-fade),
    translate 1s var(--ease-fade);
}

#CE260805LUTIN .is-active .lp-find__sub {
  opacity: 1;
  translate: none;
}

#CE260805LUTIN .lp-find__body {
  width: calc(560 * var(--formula));
  margin-top: calc(-93.721 * var(--formula));
  padding-top: calc(134 * var(--formula));
  padding-bottom: calc(49.879 * var(--formula));
  background-color: var(--color-find-bg);
}

#CE260805LUTIN .lp-items {
  display: flex;
  flex-direction: column;
  row-gap: calc(29.879 * var(--formula));
}

#CE260805LUTIN .lp-slider--items .swiper-wrapper { align-items: flex-start; }

#CE260805LUTIN .lp-slider--items .swiper-slide {
  width: calc(220 * var(--formula)); /* 画像 200 + 間隔 20 */
  height: auto;
}

#CE260805LUTIN .lp-slider--items .swiper-slide > a {
  display: block;
  width: calc(200 * var(--formula));
}

#CE260805LUTIN .lp-credit--item {
  display: block;
  width: calc(200 * var(--formula));
  margin-top: calc(9.12 * var(--formula));
  text-align: center;
}

#CE260805LUTIN .lp-find__btn {
  width: calc(261 * var(--formula));
  height: calc(42 * var(--formula));
  margin: calc(80 * var(--formula)) auto 0;
  border: 1px solid var(--color-text);
}

#CE260805LUTIN .lp-find__btn a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

#CE260805LUTIN .lp-find__btn img {
  width: calc(163.076 * var(--formula));
}

/* =====================================================
  スタッフクレジット
===================================================== */
#CE260805LUTIN .lp-staff {
  margin-top: calc(20.958 * var(--formula));
  font-family: var(--font-staff);
  font-style: italic;
  font-size: calc(14 * var(--formula));
  line-height: 1.4285714; /* 20 / 14 */
  text-align: center;
  white-space: nowrap;
  padding-bottom: calc(72.042 * var(--formula));
}

/* =====================================================
  reduced motion：長い移動・ワイプ・自動再生を簡略化し、内容を即時表示する
===================================================== */
@media (prefers-reduced-motion: reduce) {
  #CE260805LUTIN .js-inview,
  #CE260805LUTIN .js-inview--wipe {
    opacity: 1;
    translate: none;
    transition: none;
  }

  #CE260805LUTIN .lp-wipe,
  #CE260805LUTIN .lp-wipe--l,
  #CE260805LUTIN .lp-wipe--t {
    clip-path: none;
    transition: none;
  }

  #CE260805LUTIN .lp-wipe > img,
  #CE260805LUTIN .lp-wipe > a > img,
  #CE260805LUTIN .lp-wipe .swiper-slide > img {
    transform: none;
    transition: none;
  }

  #CE260805LUTIN .lp-mark__chars > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #CE260805LUTIN .lp-find__sub {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

@media (min-width: 768px) {
  #CE260805LUTIN .lp-staff {
    padding-bottom: calc(84.042 * var(--formula_pc));
  }
}